nuxt-best-practices
starsforks
How to install nuxt-best-practices?
vinayakkulkarni/vue-nuxt-best-practices/nuxt-best-practices
$npx -y skills add vinayakkulkarni/vue-nuxt-best-practices --skill nuxt-best-practicesNuxt 4 performance optimization and architecture guidelines (current through Nuxt 4.5) for building fast, maintainable full-stack applications. This skill should be used when writing, reviewing, or refactoring Nuxt code to ensure optimal patterns. Triggers on tasks involving data
SKILL.md
| 1 | # Nuxt Best Practices |
| 2 | |
| 3 | Comprehensive performance optimization guide for Nuxt 4 applications (current: Nuxt 4.5, with notes for 3.x apps approaching EOL). Contains 23 rules across 9 categories, prioritized by impact to guide automated refactoring and code generation. |
| 4 | |
| 5 | ## When to Apply |
| 6 | |
| 7 | Reference these guidelines when: |
| 8 | |
| 9 | - Writing new Nuxt pages, components, or composables |
| 10 | - Implementing data fetching (useFetch, useAsyncData, the 4.5 `enabled` option) |
| 11 | - Creating server routes and API endpoints |
| 12 | - Organizing types, composables, and auto-imports |
| 13 | - Working with Nuxt modules and plugins |
| 14 | - Configuring rendering modes (SSR, SSG, SPA, 4.5 experimental SSR streaming) |
| 15 | - Using layouts, named views, and NuxtLink prefetching (Nuxt 4.5 conventions) |
| 16 | |
| 17 | ## Rule Categories by Priority |
| 18 | |
| 19 | | Priority | Category | Impact | Prefix | |
| 20 | | -------- | --------------------------- | ----------- | ------------ | |
| 21 | | 1 | Data Fetching | CRITICAL | `data-` | |
| 22 | | 2 | Auto-Imports & Organization | CRITICAL | `imports-` | |
| 23 | | 3 | Server & API Routes | HIGH | `server-` | |
| 24 | | 4 | Rendering Modes | HIGH | `rendering-` | |
| 25 | | 5 | State Management | MEDIUM-HIGH | `state-` | |
| 26 | | 6 | Pages, Layouts & Navigation | MEDIUM | `pages-` | |
| 27 | | 7 | Type Safety | MEDIUM | `types-` | |
| 28 | | 8 | Modules & Plugins | LOW-MEDIUM | `modules-` | |
| 29 | | 9 | Performance & Deployment | LOW | `perf-` | |
| 30 | |
| 31 | ## Quick Reference |
| 32 | |
| 33 | ### 1. Data Fetching (CRITICAL) |
| 34 | |
| 35 | - `data-use-fetch` - Use useFetch/useAsyncData, never raw fetch in components |
| 36 | - `data-key-unique` - Always provide unique keys for data fetching |
| 37 | - `data-lazy-loading` - Use lazy option for non-critical data |
| 38 | - `data-transform` - Transform data at fetch time, not in template |
| 39 | - `data-error-handling` - Always handle error and pending states |
| 40 | - `data-refresh-patterns` - Use refresh() and clear() appropriately |
| 41 | - `data-conditional-enabled` - Use the `enabled` option for conditional fetching (4.5+) |
| 42 | |
| 43 | ### 2. Auto-Imports & Organization (CRITICAL) |
| 44 | |
| 45 | - `imports-no-barrel-autoimport` - Never create barrel exports in auto-imported directories |
| 46 | - `imports-component-naming` - Don't duplicate folder prefix in component names |
| 47 | - `imports-type-locations` - Place types in dedicated directories (app/types, shared/types, server/types) |
| 48 | - `imports-composable-exports` - Composables export functions only, not types |
| 49 | - `imports-direct-composable-imports` - Use direct imports between composables |
| 50 | |
| 51 | ### 3. Server & API Routes (HIGH) |
| 52 | |
| 53 | - `server-validated-input` - Use getValidatedQuery/readValidatedBody with Zod |
| 54 | - `server-route-meta` - Always add defineRouteMeta for OpenAPI docs |
| 55 | - `server-runtime-config` - Use useRuntimeConfig, never process.env |
| 56 | - `server-error-handling` - Use createError for consistent error responses |
| 57 | - `server-middleware-order` - Understand middleware execution order |
| 58 | |
| 59 | ### 4. Rendering Modes (HIGH) |
| 60 | |
| 61 | - `rendering-route-rules` - Configure rendering per-route with routeRules |
| 62 | - `rendering-hybrid` - Use hybrid rendering for optimal performance |
| 63 | - `rendering-prerender` - Prerender static pages at build time |
| 64 | - `rendering-client-only` - Use ClientOnly for browser-specific components |
| 65 | - `rendering-ssr-streaming` - Understand SSR streaming before enabling it (4.5+, experimental) |
| 66 | |
| 67 | ### 5. State Management (MEDIUM-HIGH) |
| 68 | |
| 69 | - `state-use-state` - Use useState for SSR-safe shared state |
| 70 | - `state-pinia-setup` - Set up Pinia correctly with Nuxt |
| 71 | - `state-hydration` - Handle hydration mismatches properly |
| 72 | - `state-computed-over-watch` - Prefer computed over watch for derived state |
| 73 | |
| 74 | ### 6. Pages, Layouts & Navigation (MEDIUM) |
| 75 | |
| 76 | - `pages-use-layout` - Use useLayout to read the resolved layout (4.5+) |
| 77 | - `pages-named-views` - Use the name@view.vue convention for named views (4.5+) |
| 78 | - `pages-nuxtlink-custom-prefetch` - Wire prefetch manually in NuxtLink custom slots (4.5+) |
| 79 | |
| 80 | ### 7. Type Safety (MEDIUM) |
| 81 | |
| 82 | - `types-no-inline` - Never define types inline in components/composables |
| 83 | - `types-import-paths` - Use correct import paths (#shared, ~/, ~~/) |
| 84 | - `types-no-any` - Never use `any` type |
| 85 | - `types-zod-schemas` - Use Zod for runtime validation with type inference |
| 86 | - `types-strict-emits` - Type emits fully; declare camelCase, listen kebab-case |
| 87 | |
| 88 | ### 8. Modules & Plugins (LOW-MEDIUM) |
| 89 | |
| 90 | - `modules-order` - Module order matters in nuxt.config |
| 91 | - `modules-runtime-vs-build` - Understand runtime v |
People who liked this also viewed
6 picksType
- find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 2026
- grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026
- vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026
- improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026
- setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026
- triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026
