Nuxt with Deno KV

Nuxt with Deno KV is a boilerplate template that builds a collaborative todo-list app by combining Nuxt, Deno Deploy, and Deno KV.

What is Nuxt with Deno KV?

Nuxt with Deno KV is a full-stack Nuxt application that demonstrates server-side rendering on the edge via Deno Deploy, using Deno KV as the database layer. The app is a collaborative todo list that updates in real time for all connected clients. It exposes a useKv() hook for easy access to Deno KV, and the UI is built with Nuxt UI and Nuxt UI Pro. The project is published under the MIT License.

Key Features

• Edge SSR — Nuxt renders pages server-side on Deno Deploy's edge network, following the approach described in the Nuxt on the Edge blog post.
• useKv() hook — a composable that wraps Deno KV for use directly inside Nuxt components and server routes.
• Real-time sync — uses Deno KV Watch and Server-Sent Events to push todo changes to every open client instantly.
• Nuxt UI and Nuxt UI Pro — the interface is built from these component libraries, giving a polished look with minimal custom CSS.
• One-click deploy workflow — a pre-configured GitHub Actions file (.github/workflows/deploy.yml) deploys the app to Deno Deploy automatically.
• License flexibility — either set a NUXT_UI_PRO_LICENSE secret in your repository or remove @nuxt/ui-pro from dependencies and nuxt.config.ts to avoid the paid component license.
• Live demo — an online example is available at https://nuxt-todos-kv.deno.dev.

Who is it for?

• Nuxt developers who want a working reference for deploying edge-rendered apps to Deno Deploy.
• Deno enthusiasts looking to see Deno KV and Deno KV Watch integrated with a popular frontend framework.
• Teams building collaborative tools that need a minimal, real-time data-sync example they can extend.
• Open-source learners who prefer a small, MIT-licensed codebase to study SSR, SSE, and key-value storage together.

What can you do with it?

• Build a shared todo app — multiple people can add, complete, and edit todos on one list and see changes propagate live without page refreshes.
• Learn edge SSR patterns — study how Nuxt runs on Deno Deploy and how a KV database integrates with serverless functions.
• Kick-start a production app — modify the todo model and UI to create custom collaborative features (e.g., shared notes, queues, or simple inventory tracking).

How does it work?

After cloning the repository, install dependencies with pnpm i, then run npm run dev to start the development server at http://localhost:3000. For production, commit to GitHub and let the included Actions workflow build and deploy the app to Deno Deploy; if you keep Nuxt UI Pro, store the license key in the NUXT_UI_PRO_LICENSE secret.

FAQ

Is Nuxt with Deno KV free?

The project source is MIT-licensed, so you can freely use and modify the code. However, the default setup includes Nuxt UI Pro, which is a paid product; you can either purchase a license or remove the @nuxt/ui-pro dependency and its config to avoid that cost.

What is Deno KV?

Deno KV is a key-value database built into the Deno runtime and hosted on Deno Deploy. It stores the todo list items in this template, and can be accessed through the exposed useKv() hook.

How does real-time collaboration work?

The app integrates Deno KV Watch, which triggers callbacks when data changes, and sends those updates to the browser using Server-Sent Events. That's what keeps every connected client's todo list in sync.

Can I use a different database?

No — the template is specifically wired to Deno KV. You'd need to replace the useKv() implementation and server logic to back the app with another database like Postgres or SQLite.