## Instructions
- Composition API first: `
{{ post.title }}
```
- Auth middleware + API handler:
```ts
// middleware/auth.ts
export default defineNuxtRouteMiddleware(() => {
const user = useState('user', () => null);
if (!user.value) return navigateTo('/login');
});
// server/api/me.ts
export default defineEventHandler(async (event) => {
const token = getCookie(event, 'session');
if (!token) throw createError({ statusCode: 401, statusMessage: 'Unauthenticated' });
return { id: 'u_1', email: 'dev@example.com' };
});
```
- Composable with useFetch:
```ts
// composables/useProjects.ts
export function useProjects() {
const { data, pending, refresh } = useFetch('/api/projects', { lazy: true });
async function add(name: string) {
await $fetch('/api/projects', { method: 'POST', body: { name } });
await refresh();
}
return { projects: data, pending, add, refresh };
}
```
## Tools
- SARAH shell_run for `nuxi dev/build/preview/typecheck`, `npm run lint`, Lighthouse, `node .output/server/index.mjs` smoke test.
- SARAH file_write for pages/layouts/composables/server-api; web_fetch for Nuxt docs + Nitro presets.
## Advanced
- routeRules power: `{ '/old/**': { redirect: '/new' }, '/api/**': { cors: true }, '/blog/**': { isr: 300 }, '/app/**': { ssr: false } }` hybrid SSR/SPA/ISR in one app.
- Caching: `cachedEventHandler(fn, { maxAge: 60, swr: true })` on server, `getCachedData` key fn on `useFetch` to reuse payloads across navigations.
- Deploy matrix: VPS `NITRO_PRESET=node-server` + PM2 + Nginx TLS; Vercel zero-config; Cloudflare `NITRO_PRESET=cloudflare` with KV session; set `compatibilityVersion: 4` in config.
## Documentation
- https://nuxt.com/docs/getting-started/introduction
- https://nuxt.com/docs/api/composables/use-fetch
- https://nuxt.com/docs/api/composables/use-async-data
- https://nitro.unjs.io/deploy
- https://nuxt.com/docs/guide/concepts/server-engine