Nuxt 3 + Cloudflare (Pages + D1) + Auth (Lucia)

A demo using Nuxt, Cloudflare Pages + D1 database, Drizzle ORM and Lucia auth.

Inspired by Nuxt Todo List on the Edge.

Take a look at NuxtHub for a more complete solution.

Setup

Pages

A. Create a CF pages deployment linked to your GitHub repository.

B. Use Wrangler:

pnpm build

Preview build (setup D1 first):

pnpm wrangler pages dev dist

Deploy build to CF:

pnpm wrangler pages publish dist

D1

A. Create a D1 database in CF.

In the CF Pages project settings -> Functions, add the binding between your D1 database and the DB variable.

B. Use Wrangler:

wrangler d1 create <DATABASE_NAME>

Bind Worker with D1 database:

----
filename: wrangler.toml
----
name = "YOU PROJECT NAME"
main = "./.output/server/index.mjs"

[[d1_databases]]
binding = "DB" # i.e. available in your Worker on env.DB
database_name = "<DATABASE_NAME>"
database_id = "<unique-ID-for-your-database>"

To init local database and run server locally:

wrangler d1 execute <DATABASE_NAME> --local --file server/db/migrations/0000_cultured_fixer.sql
wrangler dev --local --persist

Deploy:

wrangler d1 execute <DATABASE_NAME> --file server/db/migrations/0000_cultured_fixer.sql
wrangler deploy