Nuxt Starter Kit - an opinionated boilerplate based off of Nuxt3

Overview

Nuxt.js 3 + Supabase starter for Typescript lovers

Nuxt Starter Kit is an opinionated boilerplate based off of Nuxt3(beta), with all the bells and whistles you would want ready, up and running when starting a Nuxt project to play and experiment with.


Out of the box you get all the essentials

  • Typescript as the language choice
  • Tailwind CSS for quick styling without getting out of your HTML
  • Daisy UI for pre-made TailwindCSS component classes
  • Tailwind UI for robust headless logic you can use for components like Dialog/Modal, Dropdown, List, etc.
  • FontSource for effortless custom font integration
  • Icons through Unplugin for thousands of icons as components that are available on-demand and universally
  • ESLint for static code analysis (added but it's currently failing due to #171) and
  • Prettier for code formatting

with Supabase support

  • Authentication System with Supabase GoTrue
  • User Profiles available on /profile as an example for Supabase PostgREST (CRUD API)
  • User Avatar which is Supbase Storage(AWS S3 backed effortless uploads) supported

and a bunch of pre-made, hand-rolled(easily replace-able) components, that you almost always end up installing/using for any non-trivial project

  • Button Button with DaisyUI style support for all the basic use cases
  • Alert/Toast to notify your users of the outcome of an event - success, errorordefault` is supported
  • Modal(feat. Headless UI) as you always come back to `em
  • Loaders for reporting the progress of an API call + a page load
  • Avatar for user avatar's

and more...

Note: Refer the basic branch for a bare minimum starter structure with all the essentials

🚧 Nuxt 3 is currently in beta and is not yet production ready. 🚧 Use const { $supabase } = useNuxtApp() to access Supabase client. Composables built around Supabase like useSupabase, although available are pretty much unusable due to initialization issues

Quick Start

The best way to start with this template is to click "Use this template" above, create your own copy and work with it

Development

To start the project locally, run:

yarn dev

which kickstarts the nuxt3 development and build server nuxi. Open http://localhost:3000 with your browser to see the result.

Check package.json for the full list of commands available at your disposal.

How to Setup Supabase for Nuxt Starter Kit?

If new to Supabase

  • Create account at Supabase
  • Create a Organisation, and a project

Once done, or if you already have a Supabase project

  • Copy the generated project's API authentication details from https://app.supabase.io/project/ /api/default?page=auth
  • Place the details in .env as SUPABASE_URL and SUPABASE_KEY
  • Install NPM dependencies, by running yarn

Nuxt Start Kit supports user profiles and user avatars. To get the profile table and storage ready, execute the following queries at https://app.supabase.io/project/ /editor/sql

-- Create a table for Public Profiles
create table profiles (
  id uuid references auth.users not null,
  username text unique,
  avatar_url text,
  website text,
  updated_at timestamp with time zone,

  primary key (id),
  unique(username),
  constraint username_length check (char_length(username) >= 3)
);

alter table profiles enable row level security;

create policy "Public profiles are viewable by everyone."
  on profiles for select
  using ( true );

create policy "Users can insert their own profile."
  on profiles for insert
  with check ( auth.uid() = id );

create policy "Users can update own profile."
  on profiles for update
  using ( auth.uid() = id );

-- Set up Storage!
insert into storage.buckets (id, name)
values ('avatars', 'avatars');

create policy "Avatar images are publicly accessible."
  on storage.objects for select
  using ( bucket_id = 'avatars' );

create policy "Anyone can upload an avatar."
  on storage.objects for insert
  with check ( bucket_id = 'avatars' );

Known Issues

  • ESLint - Once the issue is resolved you can add
        "*.+(js|ts|vue)": [
            "yarn run lint"
        ],

in package.json under the lint-staged section for linting on commits

License

MIT

You might also like...
Starter template for Nuxt3 + Primer CSS
Starter template for Nuxt3 + Primer CSS

Nuxt3 + Primer CSS Starter Nuxt3 + Primer CSS starter template. Warning Nuxt3 is still in RC version. Nuxt3 (Vue3 Framework) Primer CSS (CSS Framework

A set of awesome starter kits (boilerplate code) for projects based on Bootstrap, Express, React or Vue

The cloudapps-cli offers a set of awesome starter kits (boilerplate code) for projects based on Bootstrap, Express, React or Vue. Tested on Windows, Linux and macOS.

A Vue.js starter kit that lets you focus on more programming and less configuration.

vue-starter A Vue.js starter kit that lets you focus on more programming and less configuration. A full-featured Webpack setup with hot-reload, lint-o

A starter kit for Element Plus with Vite
A starter kit for Element Plus with Vite

element-plus-vite-starter A starter kit for Element Plus with Vite Preview: https://vite-starter.element-plus.org This is an example of on-demand elem

A starter kit for Element UI generated by vue-cli

element-starter A starter kit for Element UI generated by vue-cli If you are familiar with cooking, here is a starter generated with it Environment No

A starter-kit for TDesign UI components.
A starter-kit for TDesign UI components.

TDesign Starter 项目简介 TDesign Starter 基于 TDesign UI 组件,旨在提供项目开箱即用的、配置式的并且拥有开发体验和设计感的中后台的项目。 设计美学 基于 TDesign UI 设计规范 提供 Figma、 Sketch、 Adobe XD、 Axure 等

Vue.js Ui Kit Starter pack

Starter pack for creating ui kit on Vue.js

A blog application with nuxt3, windicss, nuxt-content

A blog application with nuxt3, windicss, nuxt-content

Vue3-ts-boilerplate - Packed Vue3 boilerplate with storybook, unit testing, generators, typescript, pinia, vue-router

Vue3 TS Boilerplate This template should help get you started developing with Vue 3 in Vite. Recommended IDE Setup VSCode + Volar (and disable Vetur).

Owner
Elia
Doing stüff.\n\n Wer anderen eine Grube gräbt, fällt nicht weit vom Stamm. Professional filesystem linebreak difference hater
Elia
Nuxt3-boilerplate - Boilerplate of TailwindCSS v3, Vue 3, Heroicons & HeadlessUI and Nuxt3

Nuxt 3 Minimal Starter with TailwindCSS, Vue3, HeadlessUI & Heroicons We recommend to look at the documentation. Setup Make sure to install the depend

null 3 May 11, 2022
Nuxt3 (Nuxt 3) best starter repo, Tailwindcss, Sass, Headless UI, Vue, Pinia, Vite

Nuxt 3 Starter We recommend to look at the documentation. Preview Deploy your own This starter template also includes: Tailwind CSS v3.0.0-alpha ⚠ Hea

Mehmet 386 Dec 28, 2022
This is a Nuxt 3 Starter Kit with Vite, Vue 3, TypeScript, SCSS and TailwindCSS!

Nuxt 3 Starter Kit This is a Nuxt 3 Starter Kit with Vite, Vue 3, TypeScript, SCSS and TailwindCSS! We recommend to look at the documentation. Setup M

Ricardo 17 Nov 19, 2022
NuxtShop - A highly-customizable, open-source starter kit for building headless Shopify stores with Nuxt 3

NuxtShop is a highly-customizable, open-source starter kit for building headless Shopify stores with Nuxt 3. It comes out of the box with a great developer experience and in-built performance practices as a foundation for a production-quality eCommerce site.

null 25 Nov 29, 2022
Vue Now UI Kit It: a beautiful UI kit featuring over 50 elements and 3 templates

Vue Now UI Kit Vue Now UI Kit It is a beautiful cross-platform UI kit featuring

null 1 May 24, 2022
🏕 Opinionated Vite Starter Template

?? Opinionated Vite Starter Template

Anthony Fu 6.6k Jan 3, 2023
A simple opinionated Vue3 Starter Template with Vite.js

Logo created with Windcss logo + Icons made by Vectors Market & Pixel perfect from www.flaticon.com Vitesome ?? ⛵️ A simple opinionated Vue3 Starter T

Alvaro Saburido 160 Jan 4, 2023
Opinionated Vue 3 + Vite + Typescript blog starter ⚔

Elucidator blog starter Blog starter build with Vue 3 + Vite + Typescript Introduction Elucidator blog starter is a starter blog built with Vuejs 3, V

I Gusti Ngurah Satya Wikananda 30 Nov 8, 2022
nuxt3 boilerplate with tailwind and dynamic routes.

Nuxt 3 Minimal Starter We recommend to look at the documentation.

JDIZM 53 Dec 27, 2022
⚡ A starter example with Nuxt3 + Windi CSS + Iconify + Element-plus + Pinia + Docker

Nuxt3 + Windi CSS + iconify + element-plus 创建项目 简介 Nuxt 3 - The Hybrid Vue Framework (nuxtjs.org) Build your next application with Vue 3 and experienc

西北盲流子 8 Dec 14, 2022