A demonstration using Nuxt with server-side rendering on the edge with CloudFlare Pages and SQLite (D1 or Turso).

Live demo:

• 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

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

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

Make sure to install the dependencies using pnpm:

pnpm i

Create a GitHub Oauth Application with:

• Homepage url: https://localhost:3000
• Callback url: https://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

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

npm run dev

Create a CF pages deployment linked to your GitHub repository.

NODE_VERSION=18
NPM_FLAGS=--version
NUXT_GITHUB_CLIENT_ID=...
NUXT_GITHUB_CLIENT_SECRET=...
NUXT_SESSION_PASSWORD=...

Set the build command to:

npx pnpm i --store=node_modules/.pnpm-store && npm run build

And the output directory to dist/

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

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

MIT License