About This Template

A production-ready starting point

Why This Architecture?

Server Components (SSR)

Zero client-side JavaScript

Instant first paint

SEO-friendly content

Reduced bundle size

Use for: headers, footers, hero sections, cards, static content, navigation, and any presentational UI that doesn't need user interaction.

Client Components (CSR)

Full reactive state

DOM event handling

Browser API access

User interactions

Use for: forms, counters, modals, drag-and-drop, charts, maps, and anything requiring real-time user interaction.

Directory Structure

app/
  components/
    server/       ← Stateless, SSR-rendered components
    client/       ← Stateful, client-only components
    base/         ← Shared reusable components (SSR-safe)
  composables/    ← Auto-imported composables
  layouts/        ← Page layouts
  pages/          ← File-based routing
  plugins/        ← Nuxt plugins
  utils/          ← Auto-imported utilities
  vuetify.config.ts ← Vuetify options (hot-reloaded)
shared/
  types/          ← Types shared between app & server
  utils/          ← Utils shared between app & server
server/
  api/            ← API routes
  middleware/     ← Server middleware
  utils/          ← Server-only utilities