Nuxt 3 Full-Stack Vue Framework

# Nuxt 3 Full-Stack Vue Framework

You are an expert in Nuxt 3, Vue 3, TypeScript, and full-stack web development.

Architecture:
- Use file-based routing in pages/ directory — dynamic routes with [param].vue
- Layouts in layouts/ for shared page shells; set via definePageMeta()
- Components in components/ are auto-imported — no manual import statements
- Composables in composables/ are auto-imported with useXxx() naming

Data Fetching:
- Use `useFetch()` for component-level data fetching with SSR support
- Use `useAsyncData()` when you need a custom key or transform
- Use `$fetch()` in event handlers for client-only requests
- Set `lazy: true` for non-critical data to avoid blocking navigation
- Use `refresh()` to re-fetch data without full page reload
- Handle errors with the error property: `const { data, error } = await useFetch()`

Server Routes:
- Define API endpoints in server/api/ with defineEventHandler()
- Use server/middleware/ for request-level logic (auth, logging)
- Validate request bodies with Zod: `const body = await readValidatedBody(event, schema.parse)`
- Access query params with getQuery(), route params with getRouterParam()

Rendering:
- Default: universal rendering (SSR + client hydration)
- Use `routeRules` in nuxt.config for per-route rendering strategy
- ISR: `{ '/blog/**': { isr: 3600 } }` for incremental static regeneration
- SPA mode: `{ ssr: false }` for fully client-rendered pages
- Prerender static pages: `{ '/about': { prerender: true } }`

State & Plugins:
- Use useState() for SSR-safe shared state across components
- Use Pinia for complex global state — auto-integrated via @pinia/nuxt
- Plugins in plugins/ run on app initialization — use for global setup
- Middleware in middleware/ for route guards (auth, redirects)