Copy-paste Claude Code prompts for Nuxt 3 — server routes, composables, useFetch vs $fetch, Pinia stores, and Nitro middleware. Vue 3 + script setup.
Nuxt's auto-imports are a double-edged sword for Claude: it sometimes adds unnecessary imports because it doesn't fully trust the auto-import behaviour. State the auto-import rule explicitly in CLAUDE.md and the output gets cleaner immediately.
Add a server route POST /api/projects that:
- Validates body with a zod schema in server/schemas/project.ts
- Inserts via Drizzle (db client at server/utils/db.ts — read it first)
- Returns 201 with the created project
- Returns 400 with field errors on invalid input
- Reads the user from event.context.user (set by server/middleware/auth.ts)
- Throws createError({ statusCode: 401 }) if no user
Constraints:
- File at server/api/projects/index.post.ts (per Nuxt 3 convention)
- Use defineEventHandler with H3 types
- Use readValidatedBody(event, schema.parse) — don't readBody + manual parse
- Errors via createError, never throw new Error()
- Test in tests/api/projects.test.ts with @nuxt/test-utils — read the existing
user-routes test as the templateAdd a composable useApi<T>(url, options) at composables/useApi.ts that:
- Wraps useFetch with default headers from the auth cookie
- On 401 response: clear auth + navigateTo('/login')
- On 5xx: trigger the global toast composable with the error message
- Returns the same shape as useFetch: { data, pending, error, refresh }
Constraints:
- Generic over T for the response type
- Type the options as Parameters<typeof useFetch>[1] so all useFetch options pass through
- Tests in tests/composables/useApi.test.ts using @nuxt/test-utils
- DO NOT import useFetch — it's auto-imported. Same for navigateTo.
- Update existing call sites that match the pattern (basic find/replace). List
them in a comment at top of the diff so I can review.Add a Pinia store stores/preferences.ts with:
- theme: 'system' | 'light' | 'dark' (default 'system')
- timezone: string (default Intl.DateTimeFormat().resolvedOptions().timeZone)
- recent_projects: string[] (max 10, FIFO)
- Actions: setTheme, setTimezone, pushRecent(projectId)
- Persisted to localStorage via pinia-plugin-persistedstate
Constraints:
- defineStore('preferences', () => { ... }) — setup syntax, NOT options
- All state as ref()/computed()
- Read stores/auth.ts first as the existing pattern
- Auto-import: do not import defineStore or ref
- Test in tests/stores/preferences.test.ts — vitest, mocks localStorage## Stack
Nuxt 3.13, Vue 3 (composition API +