Nuxt 3 Full-Stack

Simple Nuxt Hub starter with Nuxt 3, Cloudflare D1, and OAuth for the authentication layer. Demo preview: https://nuxt3-fullstack.nuxt.dev

If you want a quick start, here's a magic button:

Stack

• Nuxt 3 deals with frontend and backend.
• Nuxt Hub to deploy everyting on Cloudflare, serverless.
• Cloudflare D1 (sqlite) as a database.
• Drizzle ORM as an ORM, migrator and query builder.
• Zod for schema validation and type safety, both on the frontend and backend.
• Nuxt Auth Utils for the authentication layer.
• Nuxt UI for the component library.

Prerequisites

In order to run the project, you need:

• Node.js 20+ (20.16.0 is what I'm using to develop this project);
• corepack enabled to install the required pnpm version;

To install pnpm, you can use corepack:

corepack enable
corepack install

Getting Started

First thing you need to do is to clone the repository:

degit https://github.com/RazorSiM/nuxt3-fullstack my-project
# or
git clone https://github.com/RazorSiM/nuxt3-fullstack

Then, install the dependencies:

cd my-project
pnpm install

Configure the environment variables:

cp .env.example .env

And edit the .env file to match your environment.

You need to create a new Nuxt Hub project to be able to run this repo. To do so, you can follow the instructions on the Nuxt Hub documentation.

After you're set up, you can deploy a preview branch and connect your local environment to the development database. You can follow the instructions on the Nuxt Hub documentation.

Run the migrations:

pnpm db:generate
pnpm db:migrate

Finally, run Nuxt:

pnpm dev --remote=preview

Setup OAuth

This project supports OAuth via Discord and Github. To set it up, you need to create an OAuth application on the respective platforms.

Discord

1. Go to the Discord Developer Portal.
2. Create a new application.
3. Go to the OAuth2 section.
4. Add http://localhost:3000/api/auth/discord as a redirect URL.
5. Copy the client ID and client secret to the .env file.

Github

1. Go to the Github Developer Settings/OAuth Apps
2. Create a new OAuth App.
3. Add http://localhost:3000/api/auth/github as a callback URL.
4. Copy the client ID and client secret to the .env file.

What's next?

I'm planning to add more features to this project, such as:

• Database Sessions;
• API Key authentication;
• Role-based access control;