nuxt-best-practices_skill

Overview

This skill provides Nuxt 3/4 performance optimization and architecture guidelines for building fast, maintainable full‑stack applications. It codifies prioritized rules across data fetching, server routes, auto‑imports, rendering modes, state, types, modules, and deployment. Use it to guide writing, reviewing, or refactoring Nuxt code so patterns remain consistent and high‑impact optimizations are applied. The focus is practical, actionable rules you can apply automatically or during code review.

How this skill works

The skill inspects tasks involving data fetching, server routes, auto‑imports, rendering modes, and Nuxt‑specific features and then recommends or applies best practice patterns. It enforces critical rules first (data fetching and auto‑imports), then high and medium priorities (server routes, rendering, state, types), and finally lower‑impact deployment and module tweaks. Each rule includes the why, an incorrect example, and a corrected example to make automated refactors safe and predictable.

When to use it

• When creating or refactoring pages, components, or composables in Nuxt 3/4
• When implementing or reviewing data fetching strategies (useFetch/useAsyncData)
• When adding server routes, API endpoints, or runtime config usage
• When configuring rendering modes (SSR, SSG, hybrid, client‑only)
• When organizing auto‑imports, types, and composable exports

Best practices

• Use useFetch/useAsyncData instead of raw fetch in components and provide unique keys
• Keep auto‑import directories free of barrel exports and avoid duplicated component prefixes
• Validate server input with Zod and use getValidatedQuery/readValidatedBody for safety
• Configure per‑route routeRules, prefer hybrid rendering, and prerender static pages when possible
• Use useState or properly configured Pinia for SSR‑safe shared state and prefer computed over watch
• Keep types in dedicated directories, avoid any/inline types, and use Zod for runtime validation

Example use cases

• Refactor a page that fetches data on mount to use useAsyncData with a unique key and transformed payload
• Audit auto‑imported composables and remove barrels; convert composable exports to functions only
• Create a server API route that validates input with Zod, uses useRuntimeConfig, and returns consistent errors
• Change an SPA route to hybrid or prerender it to reduce TTFB and improve SEO
• Add strict TypeScript types and Zod schemas to endpoints to achieve runtime validation with type inference