Nuxt Supabase Realtime CRUD template with optimistic UI

Related tags

nuxt-supabase
Overview

Nuxt Supabase Realtime CRUD template with optimistic UI

Netlify Status image

Check running example here: https://nuxt-supabase.netlify.app/ Project idea: Full Stack Recipes

Tech Stack: Nuxt.js, Vuetify, Supabase (DB, Realtime, Auth), Postgres, Netlify Hosting

Features list:

  • Realtime CRUD example
  • Auth
  • Federated login with Google
  • Role definitions
  • DB Init files (SQL)
  • DB migrations between environments
  • Running locally with docker-compose
  • Licensing Notes

image

Prepare database and Auth

  1. Edit the local `.ENV' file to add the url and token from Supabase.
  2. create table todos with sql:
 CREATE TABLE todos (
  id varchar primary key  NOT NULL,
  text text,
  done boolean,
  created_at TIMESTAMP DEFAULT(now()) NOT NULL
 )
  1. Add Login with Google from the Auth settings in supabase. If want a guided tutorial, then folow this steps: https://www.youtube.com/watch?v=_XM9ziOzWk4

Development

# install dependencies
$ yarn install

# serve with hot reload at localhost:8080
$ cd docker && docker-compose up -d
$ 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 Nuxt.js docs.

Licensing Notes

Tracking and understanding licensing Node applications can be tedious due to the 3rd party packages involved in the project.

You can run this command locally to check the number of licensing for the installed packages. npx license-checker --summary

See only production packages: npx license-checker --production

See all option here

Example:

 $ npx license-checker --production --summary
├─ MIT: 988
├─ ISC: 89
├─ CC0-1.0: 24
├─ BSD-2-Clause: 22
├─ BSD-3-Clause: 12
├─ Apache-2.0: 6
├─ (MIT OR CC0-1.0): 3
├─ Public Domain: 2
├─ BSD*: 2
├─ 0BSD: 2
├─ (MIT OR Apache-2.0): 1
├─ CC-BY-4.0: 1
├─ UNLICENSED: 1
├─ (WTFPL OR MIT): 1
├─ (MIT AND Zlib): 1
└─ (MIT AND BSD-3-Clause): 1
Owner
J. Gonzalez
Research Engineer at @NLeSC
J. Gonzalez
A Complete Single Page Application using Vue, Vue Router, Bootstrap-Vue, Vuex and all....

Vue-CRUD Application A Complete Single Page Application (SPA) or Product CRUD Application using Vue 3, Vue Router, Vue-Pagination, Searching, Sweet Al

Maniruzzaman Akash 15 Jun 12, 2021
A practical starter template for Nuxt, which has Tailwind, FontAwesome, and Google fonts already built-in. Also, some common components are ready for use.

Nuxt Template Nuxt + Tailwind + FontAwesome + Google Fonts This project includes a complete ready-to-go template of Nuxt, including Tailwind CSS, Font

Marc Backes 15 May 20, 2021
An ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI.

Vue Enterprise Boilerplate This is an ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI. Questio

Ben Hong 7k Jun 5, 2021
An ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI.

An ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI.

Ben Hong 7k Jun 3, 2021
Nuxt.js + Express.js template

Nuxt-Express Базовый шаблон для работы Nuxt в качестве middleware для Express. Используемые технологии Nuxt.js, Express.js, Mongoose.js, MongoDB. Уста

Aleksandr Dergunov 9 Jun 4, 2021
Bleeding edge vue template focused on code quality and developer happiness.

wemake-vue-template Bleeding edge vue template focused on code quality and developer happiness. This project is used to scaffold new Vue project struc

wemake.services 659 Jun 3, 2021
Light speed setup for MEVN(Mongo Express Vue Node) Apps

Light speed setup for MEVN stack based web-apps Chat: Telegram Donate: PayPal, Open Collective, Patreon A CLI tool for getting started with the MEVN s

madlabsinc 724 Jun 3, 2021
🏕 Opinionated Vite Starter Template

?? Opinionated Vite Starter Template

Anthony Fu 1.4k Jun 13, 2021
A CLI generator for Vue components, views and store modules

vue-generator A CLI generator for Vue components, views and store modules Supports Vue 2.x Install $ npm install -g vue-generator Usage The most basic

Hendrik-Jan de Harder 115 Apr 7, 2021
Awrora Starter - Vue JS Landing Page Template

Landing page template built with one of most popular javascript library Vue.JS, Vuetify (Material Design) and Nuxt.JS with SSR.

Ilham Meidi 14 Jun 9, 2021
A highly opinionated Vue 2.0 template.

VueCharged Template An opinionated feature-first Vue 2.0 template with CLI scaffolding superpowers. Key Features Features First! Each component create

Daniel Escobedo 17 Mar 24, 2021
Vue project template for authoring component and their use case

vue-authoring-template Click one of this badge for more info This template is to help authoring Vue component with it's use case in story-scenario (st

Fahmi Akbar Wildana 14 Jul 30, 2020
a front end template development by vue3.x typescript vite2.x vuex4.x vue-router 4.x mock element-plus

Vue 3 + Typescript + Vite + Vuex + Vue-Router This template should help get you started developing with Vue 3 and Typescript and Vuex and Vu

coderly 21 May 13, 2021
Your next vue.js package!

Quickly scaffold a new Vue 2.x package (with @vue/composition-api) without all the headache of setting it up from scratch Preview Usage npx janak <you

Vinayak Kulkarni 19 May 10, 2021