Nuxt Todo List on the Edge

A demonstration using Nuxt with server-side rendering on the edge, authentication and database querying using SQLite with CloudFlare D1 or Turso in production.

nuxt-todos-edge-demo.mp4

Live demos

• CloudFlare Pages + D1: https://nuxt-todos-edge.pages.dev
• CloudFlare Pages + Turso: https://nuxt-todos-turso.pages.dev
• Lagon.app + Turso: https://nuxt-todos.lagon.dev
• Vercel Edge + Turso: https://nuxt-todos-edge.vercel.app
• Netlify Edge + Turso: https://nuxt-todos-edge.netlify.app

Features

• Server-Side Rendering on the Edge
• Authentication backed-in
• Leverage SQLite as database with migrations

Stack

• Frontend:
  • Nuxt - The Vue Framework for Web Architects
  • NuxtLabs UI for styling and layout
• Backend:
  • Sqlite in development and D1 or Turso in production using drizzle-orm

Setup

Make sure to install the dependencies using pnpm:

pnpm i

Create a GitHub Oauth Application with:

• Homepage url: http://localhost:3000
• Callback url: http://localhost:3000/api/auth/github

Add the variables in the .env file:

NUXT_GITHUB_CLIENT_ID="my-github-oauth-app-id"
NUXT_GITHUB_CLIENT_SECRET="my-github-oauth-app-secret"

To create sealed sessions, you also need to add NUXT_SESSION_SECRET in the .env with at least 32 characters:

NUXT_SESSION_SECRET=your-super-long-secret-for-session-encryption

Development

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

npm run dev

Deploy on CloudFlare Pages

Create a CF pages deployment linked to your GitHub repository.

Environment variables

NUXT_GITHUB_CLIENT_ID=...
NUXT_GITHUB_CLIENT_SECRET=...
NUXT_SESSION_PASSWORD=...

Build command

Set the build command to:

nuxt build

And the output directory to dist/

D1 Database

Lastly, in the project settings -> Functions, add the binding between your D1 database and the DB variable:

Turso Database

You can also use Turso database instead of CloudFlare D1 by creating a database and adding the following env variables:

TURSO_DB_URL=...
TURSO_DB_TOKEN=...

You can see a live demo using Turso on https://nuxt-todos-turso.pages.dev

License

MIT License