Overview

The Nuxt Todo List on the Edge is a demonstration project that showcases the use of Nuxt.js with server-side rendering on the edge. It also includes features such as authentication and database querying using SQLite in a production environment.

Features

• Server-Side Rendering on the Edge: The project leverages Nuxt.js to implement server-side rendering, ensuring faster page load times and improved SEO.
• Authentication backed-in using nuxt-auth-utils: Users can authenticate themselves with the application using the built-in authentication functionality provided by nuxt-auth-utils.
• Leverage SQLite as database with migrations using drizzle ORM: The project utilizes SQLite as the database, allowing for efficient data storage and retrieval. The drizzle ORM is used for managing database migrations.
• User interface made with Nuxt UI: The user interface of the application is built using Nuxt UI, providing a responsive and visually appealing design.
• Embed Drizzle Studio in the Nuxt DevTools: Drizzle Studio, a tool for managing and visualizing database schema, is embedded in the Nuxt DevTools for easy access and usage.
• Live demos: The project provides live demos on various platforms such as CloudFlare Pages, Lagon.app, Vercel Edge, and Netlify Edge, showcasing the functionality and performance of the application.

Installation

To set up the Nuxt Todo List on the Edge, follow the steps below:

1. Ensure that you have pnpm installed.
2. Install the project dependencies by running the following command: pnpm install.
3. Create a GitHub OAuth Application with the following details:
   • Homepage URL: http://localhost:3000
   • Callback URL: http://localhost:3000/api/auth/github
4. Add the required variables to the .env file, including NUXT_SESSION_SECRET with at least 32 characters.
5. Start the development server by running pnpm run dev.
6. To start Drizzle Studio, open another terminal and run the command: pnpm run drizzle:studio.
7. Open the Nuxt DevTools and navigate to the Drizzle Studio tab to access and use the tool.

For detailed instructions on deployment and using alternative databases, please refer to the project’s GitHub repository.

Summary

The Nuxt Todo List on the Edge is a demonstration project that showcases the use of Nuxt.js with server-side rendering, authentication, and database querying using SQLite. It provides a user-friendly interface built with Nuxt UI and offers live demos on various platforms. The project can be easily set up by following the provided installation guide.