Todo list example using Supabase and Nuxt 3

Live demo: https://supabase-demo-gamma.vercel.app

• Frontend:
  • Nuxt 3 - The Vue Framework for Web Architects
  • Nuxt UI Pro for components
  • TailwindCSS for styling and layout.
  • Supabase Module for user management and supabase data client.
• Backend:
  • app.supabase.io: hosted Postgres database with restful API for usage with Supabase.js.

Setup

Make sure to install the dependencies

pnpm i

Create a project on Supabase.

In your Supabase project, make sure to create the tasks table with the following fields:

Create a GitHub Oauth Application on https://github.com/settings/applications/new

Grant read access to Email addresses under User Permissions

With homepage url being http://localhost:3000

For the callback url, please refer to https://supabase.com/docs/guides/auth/auth-github#find-your-callback-url

Then, enable the GitHub Oauth Provider in your Supabase project (Authentication -> Settings):

Go to your supabase project settings, API section and get the project API key and url and fill the .env with them:

SUPABASE_URL="https://example.supabase.com"
SUPABASE_KEY="<your_key>"

Development

Start the development server on http://localhost:3000

pnpm dev

Production

Warning

This project uses Nuxt UI Pro, you need a license to deploy it in production. However, you can use it for free in development.

Build the application for production:

pnpm build

Checkout the deployment documentation.