atinux / nuxt-todos-edge

A full-stack application with authentication, SSR and SQLite, running on the edge with Nuxt 3.

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

• Server-Side Rendering on the Edge
• Authentication backed-in using nuxt-auth-utils
• Leverage Cloudflare D1 as database and drizzle ORM
• User interface made with Nuxt UI
• Embed Drizzle Studio in the Nuxt DevTools

Live demo

https://todos.nuxt.dev

nuxt-todos-edge-demo.mp4

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_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"

Development

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

Deploy

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

Remote Storage

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

pnpm dev --remote

Learn more about remote storage on https://hub.nuxt.com/docs/getting-started/remote-storage

License

MIT License

nuxt-todos-edge's Issues

Unable to run npm run build

when running npm run build.
I got following error.

ERROR [vite:vue] Could not load /node_modules/nuxt-icon/dist/runtime/IconCSS.vue?vue&type=style&index=0&scoped=41e8d397&lang.css?inline&used: ENOENT: no such file or directory, open '\?\node_modules\nuxt-icon\dist\runtime\IconCSS.vue'

Add typesafe communication with trpc

Is it also an idea to add typesafe communication to the template?
https://github.com/wobsoriano/trpc-nuxt
https://trpc.io/

Convert this to a protected and public page

A protected page example could be more realistic and practical.

I will try to make a PR which does this with a middleware on a page called /todos

Drizzle Studios is not displayed in DevTools after signing in with GitHub

DevTools

Terminal

Console.log

Tried
Upgrading to the latest nuxt with the latest packages

Broken production build

I connected D1 in settings and it throws this error in the console, any idea, what's causing this?

Demo - https://nuxt-todos-edge-5ij.pages.dev/
Code - https://github.com/fayazara/nuxt-todos-edge/

Database isn't re-queried for updates when mutating or adding data

It looks like the database isn't re-queried for updates when mutating or adding data.

Example:
Open two browser windows with the same login. Add a new todo in window 1. Then go to window 2 and add another new todo. You would expect window 2 to not only add it's own todo, but also now show the todo that window 1 entered. If you do a hard refresh in window 2, the todo entered in window 1 will now show.

When posting, patching, or deleting to an endpoint, shouldn't a fresh copy of the todo's be retrieved from the database instead of just adding the changes to the in-memory array?

Don't use `useFetch` for actions like `toggleTodo` and `deleteTodo`

https://stackoverflow.com/questions/76839341/which-to-use-fetch-useasyncdata-or-usefetch-for-get-and-post-requests-in-nuxt

Support Edgio

See https://github.com/rishi-raj-jain/nuxt-turso-edgio-example

Why can't I access properties of the user inside the <script> tags?

In todos.vue if I change toast.add({ title: `Todo "${todo.title}" created.` }) to toast.add({ title: `Todo "${todo.title}" created by ${user.login}.` }) it will show as undefined, but the property is accessible inside the template.

I'm coming from Nuxt 2 so this might be me misunderstanding how SSR works in Nuxt 3. Why aren't the properties of user accessible here and how would I go about exposing them?

I apologise if this is the wrong place to ask this question.

Deploying to Azure Static Web App

Thanks for creating this end-to-end demo of Nuxt3.

After removing the auth related code, I could successfully deploy it to Azure using the docs.

But I am really struggling to make it work with auth code.

The issue is, redirect_uri sent by SWA to github does not match the callback url specified in the Github OAuth aap.

I thought this setting may help, but tweaking it has not helped so far.

It will be great, if the README includes guidance on deploying to Azure as well.