Nuxt Todo List on the Edge

A demonstration using Nuxt with server-side rendering on the edge, authentication and database querying using Cloudflare D1.

Features

nuxt-todos-edge-demo.mp4

Make sure to install the dependencies using pnpm:

pnpm i

Add the variables in the .env file:

NUXT_OAUTH_GITHUB_CLIENT_ID="my-github-oauth-app-id"
NUXT_OAUTH_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 http://localhost:3000

npm run dev

In the Nuxt DevTools, you can see your tables by clicking on the Hub Database tab:

drizzle-meets-nuxt-devtools.mp4

You can deploy this project on your Cloudflare account for free and with zero configuration using NuxtHub.

npx nuxthub deploy

It's also possible to leverage Cloudflare Pages CI for deploying, learn more about the different options on https://hub.nuxt.com/docs/getting-started/deploy

Once you deployed your project, you can connect to your remote database locally running:

pnpm dev --remote

Name		Name	Last commit message	Last commit date
Latest commit History 107 Commits
middleware		middleware
pages		pages
public		public
server		server
.env.example		.env.example
.gitignore		.gitignore
.npmrc		.npmrc
LICENSE		LICENSE
README.md		README.md
app.config.ts		app.config.ts
app.vue		app.vue
drizzle.config.ts		drizzle.config.ts
eslint.config.mjs		eslint.config.mjs
nuxt.config.ts		nuxt.config.ts
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
tsconfig.json		tsconfig.json