Simple boilerplate with nuxt + tailwind + supabase for your project

Overview

Nuxt + Tailwind + Supabase

Clone to your own project

$ git clone https://github.com/aripadrian/nuxt-supabase-tailwind-boilerplate.git your-project-name

# or

$ git clone [email protected]:aripadrian/nuxt-supabase-tailwind-boilerplate.git your-project-name

Build Setup

# create .env with .env-example and fill your PORT || SUPABASE_URL || SUPABASE_KEY
$ mv .env-example .env

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn dev

# build for production and launch server
$ yarn build
$ yarn start

# generate static project
$ yarn generate

For detailed explanation on how things work, check out the documentation.

Supabase

For documentation nuxt-supabase, check out the documentation.

Check for Supabase documentation.

Special Directories

You can create the following extra directories, some of which have special behaviors. Only pages is required; you can delete them if you don't want to use their functionality.

assets

The assets directory contains your uncompiled assets such as Stylus or Sass files, images, or fonts.

More information about the usage of this directory in the documentation.

components

The components directory contains your Vue.js components. Components make up the different parts of your page and can be reused and imported into your pages, layouts and even other components.

More information about the usage of this directory in the documentation.

layouts

Layouts are a great help when you want to change the look and feel of your Nuxt app, whether you want to include a sidebar or have distinct layouts for mobile and desktop.

More information about the usage of this directory in the documentation.

pages

This directory contains your application views and routes. Nuxt will read all the *.vue files inside this directory and setup Vue Router automatically.

More information about the usage of this directory in the documentation.

plugins

The plugins directory contains JavaScript plugins that you want to run before instantiating the root Vue.js Application. This is the place to add Vue plugins and to inject functions or constants. Every time you need to use Vue.use(), you should create a file in plugins/ and add its path to plugins in nuxt.config.js.

More information about the usage of this directory in the documentation.

static

This directory contains your static files. Each file inside this directory is mapped to /.

Example: /static/robots.txt is mapped as /robots.txt.

More information about the usage of this directory in the documentation.

store

This directory contains your Vuex store files. Creating a file in this directory automatically activates Vuex.

More information about the usage of this directory in the documentation.

You might also like...
Netlify ❤️ Nuxt.js: a simple template to give you the code you need to use Netlify features with Nuxt.
Netlify ❤️ Nuxt.js: a simple template to give you the code you need to use Netlify features with Nuxt.

Nuxt Toolbox Template This is a NuxtJS v2 project. It is a reference on how to integrate commonly used features within Netlify for Nuxt.js. Build Setu

A convenient replacement for nuxt-link component when using nuxt-i18n

nuxt-i18n-link A convenient replacement for nuxt-link component when using nuxt-i18n. It is simply a replacement for this exact code: nuxt-link :to

A webpack loader i18n solution for Vue (Nuxt) with auto generated keysA webpack loader i18n solution for Vue (Nuxt) with auto generated keys

vue-i18n-loader - another webpack loader i18n solution for Vue (Nuxt) with auto generated keys. Currently under development, pull requests and suggest

This is nuxt invoice app using nuxt.js and firebase
This is nuxt invoice app using nuxt.js and firebase

Nuxt Invoice App Build Setup # install dependencies $ npm install # serve with hot reload at localhost:3000 $ npm run dev # build for production and

Fcl-nuxt-starter - FCL plugin + full stack Nuxt application starter template
Fcl-nuxt-starter - FCL plugin + full stack Nuxt application starter template

How to use the Flow Client Library (FCL) with Nuxt Access the FCL instance from

English-quiz-nuxt - An english quiz using nuxt

english-quiz-nuxt Live demo here Build Setup # install dependencies $ yarn insta

Frisque-nuxt-storyblok - A basic framework for integrating StoryBlok with Nuxt

🌺 Frisque StoryBlok Welcome to the Frisque StoryBlok starter kit! This is curre

A lightweight Nuxt template to build a Markdown driven website. Powered by Nuxt Content, TailwindCSS and Iconify.
A lightweight Nuxt template to build a Markdown driven website. Powered by Nuxt Content, TailwindCSS and Iconify.

A lightweight Nuxt template to build a Markdown driven website. Powered by Nuxt Content, TailwindCSS and Iconify.

WordPress module for Nuxt.js with full support for SSR and Nuxt.js PWA module.

WordPress module for Nuxt.js with full support for SSR and Nuxt.js PWA module.

Owner
Ari Padrian
Ari Padrian
Nuxt basic - Simple Nuxt.js project

nuxt_basic Build Setup # install dependencies $ npm install # serve with hot reload at localhost:3000 $ npm run dev # build for production and launc

null 2 Oct 20, 2022
Boilerplate nuxt dengan vuetify dengan segala ekosistemnya

nuxt-vuetify-boilerplate Boilerplate nuxt dengan vuetify dengan segala ekosistemnya Folder structure Folder name Children Goal /api apiUrl API URL /se

Baihaki Al Biruni 1 Nov 8, 2021
Bluise - A Nuxt.js & Netlify CMS boilerplate

Bluise - A Nuxt.js & Netlify CMS boilerplate. I wanted to explore Netlify CMS & Tailwind CSS, ended up creating this boilerplate. So far we've got: Bl

Matthieu 1 Mar 15, 2022
Starter Template for Nuxt.js with Tailwind CSS and Axios.

Starter Template for Nuxt.js with Tailwind CSS and GraphQL Build Setup # install dependencies

Michael Owuor 1 May 12, 2022
Youtube clone with Tailwind CSS and Nuxt 3

Youtube clone with Tailwind CSS and Nuxt 3 Original Medium post I cloned Youtube with Tailwind CSS in 3 days and you will learn it in 3 minutes! Youtu

Leon To 29 Dec 20, 2022
My personal website built with Nuxt.js, TypeScript and Tailwind CSS✨

My personal website built with Nuxt.js, TypeScript and Tailwind CSS✨

Luis 3 Nov 17, 2022
Nuxt3-blog based on Nuxt 3, Tailwind CSS and Notion API

nuxt3-blog Description This is a work in progress project based on Nuxt 3, Tailwind CSS and Notion API You can see the demo here. Stack Environment va

null 12 Jan 4, 2023
Build a full-blown jamstack blog with Nuxt 3, Storyblok and Tailwind CSS demo repo

Nuxt 3 Minimal Starter Look at the nuxt 3 documentation to learn more. Setup Make sure to install the dependencies: # yarn yarn install # npm npm ins

Dawntraoz Storyblok 6 Nov 17, 2022
nuxt-fullpage is a nuxt module for creating fullscreen page scroll fast and simple.

Nuxt fullpage Nuxt module for creating fullscreen page scroll fast and simple. Demo online Table of contents Installation Usage Options Contributing I

Open Source Afghanistan 16 Dec 30, 2022
A simple nuxt renderless component wrapper around nuxt fetch capabilities

Nuxt Fetch Component A simple nuxt renderless component wrapper around nuxt fetc

Mathieu Marteau 6 Apr 12, 2022