Nuxt3 + tRPC Fullstack Scaffolding

Use this project to kick off your End-to-End typesafe project with TRPC and Nuxt.

• Fast HMR (Vite)
• Typesafe API (TypeScript & tRPC)

Features

• Vue3 / Nuxt 3
• Typescript
• eslint # https://nuxt.com/modules/eslint#nuxtjseslint-module
• Prisma ORM # https://www.prisma.io/ (Next-auth schema)
• Pinia state management
• tRPC API # https://trpc.io/
• Nuxt Auth # https://sidebase.io/nuxt-auth/ (GitHub and Auth0 enabled)
• Vite

Setup

From this template:

• npm i
• populate .env
• prisma setup
• eslint --init

From scratch:

• npx nuxi init v3-project-name
• npm i
• npm i @trpc/server @trpc/client trpc-nuxt zod @next-auth/prisma-adapter @pinia/nuxt
• npm i -D pinia --legacy-peer-deps
• npm i -D @sidebase/nuxt-auth @types/node prisma eslint @nuxtjs/eslint-config-typescript
• continue setup using "from this template" section

File structure

├── server
│   ├── api
│   │   ├── trpc
│   │   │   └── [trpc].ts             <-- tRPC HTTP handler
│   │   └── auth
│   │       └── [...].ts              <-- catch all auth HTTP handler
│   ├── middleware
│   │       └── 0.auth-session.ts     <-- first in order, add auth session to event ctx
│   ├── trpc
│   │   ├── trpc.ts                   <-- procedure helpers
│   │   ├── context.ts                <-- create app context
│   │   ├── router.ts                 <-- main app router
│   │   └── routers                   <-- sub-routers
│   │       ├── user.ts
│   │       └── [..]
│   └── prisma.ts                     <-- prisma client
├── prisma
│   ├── migrations
│   │       └── [..]
│   ├── schema.prisma
│   └── seed.ts
├── plugins
│   └── client.ts                     <-- tRPC client plugin
├── store
│   └── index.ts                      <-- main pinia store

Development Server

Start the development server on http://localhost:3000

npm run dev

Production

Build the application for production:

npm run build

Locally preview production build:

npm run preview

Check out the deployment documentation for more information.