Nuxt App

Nuxt 3 Full-Stack Template

Tech Stack

Directory Structure

project-name/
├── prisma/
│   └── schema.prisma
├── server/
│   ├── api/
│   │   └── [resource]/
│   │       └── index.ts
│   └── utils/
│       └── db.ts         # Prisma client
├── composables/
│   └── useAuth.ts
├── stores/
│   └── user.ts           # Pinia store
├── components/
│   └── ui/
├── pages/
│   ├── index.vue
│   └── [...slug].vue
├── layouts/
│   └── default.vue
├── assets/
│   └── css/
│       └── main.css
├── .env.example
├── nuxt.config.ts
└── package.json

Key Concepts

Environment Variables

Setup Steps

1. npx nuxi@latest init {{name}}
2. cd {{name}}
3. npm install @pinia/nuxt @prisma/client prisma zod
4. npm install -D @nuxtjs/tailwindcss
5. Add modules to nuxt.config.ts:

   modules: ['@pinia/nuxt', '@nuxtjs/tailwindcss']
   

6. npx prisma init
7. Configure schema
8. npx prisma db push
9. npm run dev

Best Practices

• Use <script setup> for components
• Composables for reusable logic
• Pinia stores in stores/ folder
• Server routes for API logic
• Auto-import for clean code
• TypeScript for type safety
• See @[skills/vue-expert] for Vue patterns