Nuxt Framework Patterns

Quick Guide: Use useFetch for API calls in components (SSR-safe), useAsyncData for custom data sources or parallel fetches. Create server routes in server/api/. Auto-imports handle composables and components automatically. Use useState for SSR-friendly shared state. Data is a shallowRef by default -- use deep: true if you need deep reactivity.

<critical_requirements>

CRITICAL: Before Using This Skill

All code must follow project conventions in CLAUDE.md (kebab-case, named exports, import ordering, import type, named constants)

(You MUST use useFetch or useAsyncData for data fetching in components -- NEVER raw $fetch in setup which causes double-fetching)

(You MUST use server/api/ for API routes -- handlers export default with defineEventHandler())

(You MUST use definePageMeta to attach middleware and configure page behavior -- it is a macro, values must be statically analyzable)

(You MUST use useHead or useSeoMeta for SEO metadata -- never manual <head> tags)

web-meta-framework-nuxt

Nuxt Framework Patterns

CRITICAL: Before Using This Skill