SerinaNya/KLALB
1
1
Fork 0
forked from KNEMC/KLALB
Code Pull Requests Activity

add ui-ux-pro-max skill for javafx design

Browse Source
This commit is contained in:
SerinaNya
2026-08-27 23:29:27 +08:00
parent c3172a04b1
commit c907e52478
172 changed files with 88283 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.agents/skills/ui-ux-pro-max/data/stacks/nuxtjs.csv
+68
View File
@@ -0,0 +1,68 @@
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL,Applies To,Status,Verified At
1,Routing,Use file-based routing,Create routes under the Nuxt 4 app pages directory,app/pages with index.vue,Configure ordinary routes manually,app/pages/dashboard/index.vue,Custom router setup,Medium,https://nuxt.com/docs/4.x/getting-started/routing,nuxtjs 4.5,active,2026-08-13
2,Routing,Use dynamic route parameters,Create dynamic routes with bracket syntax under app/pages,[id].vue for dynamic params,Hardcode routes for dynamic content,app/pages/posts/[id].vue,app/pages/posts/post1.vue,Medium,https://nuxt.com/docs/4.x/getting-started/routing,nuxtjs 4.5,active,2026-08-13
3,Routing,Use catch-all routes,Handle multiple path segments with [...slug] under app/pages,[...slug].vue for catch-all,Multiply nested dynamic files unnecessarily,app/pages/[...slug].vue,app/pages/[a]/[b]/[c].vue,Low,https://nuxt.com/docs/4.x/getting-started/routing,nuxtjs 4.5,active,2026-08-13
4,Routing,Define page metadata with definePageMeta,Set page-level configuration and middleware,definePageMeta for layout middleware title,Manual route meta configuration,"definePageMeta({ layout: 'admin', middleware: 'auth' })",router.beforeEach for page config,High,https://nuxt.com/docs/4.x/api/utils/define-page-meta,nuxtjs 4.5,active,2026-08-13
5,Routing,Use validate for route params,Validate dynamic route parameters before rendering,validate function in definePageMeta,Manual validation in setup,definePageMeta({ validate: (route) => /^\d+$/.test(route.params.id) }),if (!valid) navigateTo('/404'),Medium,https://nuxt.com/docs/4.x/api/utils/define-page-meta,nuxtjs 4.5,active,2026-08-13
6,Rendering,Use SSR by default,Server-side rendering is enabled by default,Keep ssr: true (default),Disable SSR unnecessarily,ssr: true (default),ssr: false for all pages,High,https://nuxt.com/docs/4.x/guide/concepts/rendering,nuxtjs 4.5,active,2026-08-13
7,Rendering,Use .client suffix for client-only components,Mark components to render only on client,ComponentName.client.vue suffix,v-if with process.client check,Comments.client.vue,"<div v-if=""process.client""><Comments/></div>",Medium,https://nuxt.com/docs/4.x/guide/directory-structure/components,nuxtjs 4.5,active,2026-08-13
8,Rendering,Use .server suffix for server-only components,Mark components to render only on server,ComponentName.server.vue suffix,Manual server check,HeavyMarkdown.server.vue,"v-if=""process.server""",Low,https://nuxt.com/docs/4.x/guide/directory-structure/components,nuxtjs 4.5,active,2026-08-13
9,DataFetching,Use useFetch for simple data fetching,Wrapper around useAsyncData for URL fetching,useFetch for API calls,$fetch in onMounted,const { data } = await useFetch('/api/posts'),onMounted(async () => { data.value = await $fetch('/api/posts') }),High,https://nuxt.com/docs/4.x/api/composables/use-fetch,nuxtjs 4.5,active,2026-08-13
10,DataFetching,Use useAsyncData for complex fetching,Fine-grained control over async data,useAsyncData for CMS or custom fetching,useFetch for non-URL data sources,"const { data } = await useAsyncData('posts', () => cms.getPosts())",const { data } = await useFetch(() => cms.getPosts()),Medium,https://nuxt.com/docs/4.x/api/composables/use-async-data,nuxtjs 4.5,active,2026-08-13
11,DataFetching,Use $fetch for non-reactive requests,$fetch for event handlers and non-component code,$fetch in event handlers or server routes,useFetch in click handlers,"async function submit() { await $fetch('/api/submit', { method: 'POST' }) }",async function submit() { await useFetch('/api/submit') },High,https://nuxt.com/docs/4.x/api/utils/dollarfetch,nuxtjs 4.5,active,2026-08-13
12,DataFetching,Use lazy option for non-blocking fetch,Defer data fetching for better initial load,lazy: true for below-fold content,Blocking fetch for non-critical data,"useFetch('/api/comments', { lazy: true })",await useFetch('/api/comments') for footer,Medium,https://nuxt.com/docs/4.x/api/composables/use-fetch,nuxtjs 4.5,active,2026-08-13
13,DataFetching,Use server option intentionally,Use server:false only when data depends on browser-only state,server:false for localStorage or browser APIs,Disable SSR merely because data is user-specific,"useFetch('/api/preferences', { server: false }) for browser-only input",server:false for any authenticated request,Medium,https://nuxt.com/docs/4.x/api/composables/use-fetch,nuxtjs 4.5,active,2026-08-13
14,DataFetching,Use pick to reduce payload size,Select only needed fields from response,pick option for large responses,Fetching entire objects when few fields needed,"useFetch('/api/user', { pick: ['id', 'name'] })",useFetch('/api/user') then destructure,Low,https://nuxt.com/docs/4.x/api/composables/use-fetch,nuxtjs 4.5,active,2026-08-13
15,DataFetching,Use transform for data manipulation,Transform data before storing in state,transform option for data shaping,Manual transformation after fetch,"useFetch('/api/posts', { transform: (posts) => posts.map(p => p.title) })",const titles = data.value.map(p => p.title),Low,https://nuxt.com/docs/4.x/api/composables/use-fetch,nuxtjs 4.5,active,2026-08-13
16,DataFetching,Handle loading and error states,Always handle pending and error states,Check status pending error refs,Ignoring loading states,"<div v-if=""status === 'pending'"">Loading...</div>",No loading indicator,High,https://nuxt.com/docs/4.x/getting-started/data-fetching,nuxtjs 4.5,active,2026-08-13
17,Lifecycle,Avoid side effects in script setup root,Move side effects to lifecycle hooks,Side effects in onMounted,setInterval in root script setup,onMounted(() => { interval = setInterval(...) }),<script setup>setInterval(...)</script>,High,https://nuxt.com/docs/4.x/guide/concepts/nuxt-lifecycle,nuxtjs 4.5,active,2026-08-13
18,Lifecycle,Use onMounted for DOM access,Access DOM only after component is mounted,onMounted for DOM manipulation,Direct DOM access in setup,onMounted(() => { document.getElementById('el') }),<script setup>document.getElementById('el')</script>,High,https://nuxt.com/docs/4.x/api/composables/on-mounted,nuxtjs 4.5,active,2026-08-13
19,Lifecycle,Use nextTick for post-render access,Wait for DOM updates before accessing elements,await nextTick() after state changes,Immediate DOM access after state change,count.value++; await nextTick(); el.value.focus(),count.value++; el.value.focus(),Medium,https://nuxt.com/docs/4.x/api/utils/next-tick,nuxtjs 4.5,active,2026-08-13
20,Lifecycle,Use onPrehydrate for pre-hydration logic,Run code before Nuxt hydrates the page,onPrehydrate for client setup,onMounted for hydration-critical code,onPrehydrate(() => { console.log(window) }),onMounted for pre-hydration needs,Low,https://nuxt.com/docs/4.x/api/composables/on-prehydrate,nuxtjs 4.5,active,2026-08-13
21,Server,Use server/api for API routes,Create API endpoints in server/api directory,server/api/users.ts for /api/users,Manual Express setup,server/api/hello.ts -> /api/hello,app.get('/api/hello'),High,https://nuxt.com/docs/4.x/guide/directory-structure/server,nuxtjs 4.5,active,2026-08-13
22,Server,Use defineEventHandler for handlers,Define server route handlers,defineEventHandler for all handlers,export default function,export default defineEventHandler((event) => { return { hello: 'world' } }),"export default function(req, res) {}",High,https://nuxt.com/docs/4.x/guide/directory-structure/server,nuxtjs 4.5,active,2026-08-13
23,Server,Use server/routes for non-api routes,Routes without /api prefix,server/routes for custom paths,server/api for non-api routes,server/routes/sitemap.xml.ts,server/api/sitemap.xml.ts,Medium,https://nuxt.com/docs/4.x/guide/directory-structure/server,nuxtjs 4.5,active,2026-08-13
24,Server,Use getQuery and readBody for input,Access query params and request body,getQuery(event) readBody(event),Direct event access,const { id } = getQuery(event),event.node.req.query,Medium,https://nuxt.com/docs/4.x/guide/directory-structure/server,nuxtjs 4.5,active,2026-08-13
25,Server,Validate server input,Always validate input in server handlers,Zod or similar for validation,Trust client input,const body = await readBody(event); schema.parse(body),const body = await readBody(event),High,https://nuxt.com/docs/4.x/guide/directory-structure/server,nuxtjs 4.5,active,2026-08-13
26,State,Use useState for serializable shared state,Share SSR-safe values whose contents can be serialized,useState for JSON-serializable cross-component state,Store classes functions or symbols,"const count = useState('count', () => 0)",useState('service' () => new Service()),High,https://nuxt.com/docs/4.x/api/composables/use-state,nuxtjs 4.5,active,2026-08-13
27,State,Use unique keys for useState,Prevent state conflicts with unique keys,Descriptive unique keys for each state,Generic or duplicate keys,"useState('user-preferences', () => ({}))",useState('data') in multiple places,Medium,https://nuxt.com/docs/4.x/api/composables/use-state,nuxtjs 4.5,active,2026-08-13
28,State,Use Pinia for complex state,Pinia for advanced state management,@pinia/nuxt for complex apps,Custom state management,useMainStore() with Pinia,Custom reactive store implementation,Medium,https://nuxt.com/docs/4.x/getting-started/state-management,nuxtjs 4.5,active,2026-08-13
29,State,Use callOnce for one-time async operations,Ensure async operations run only once,callOnce for store initialization,Direct await in component,await callOnce(store.fetch),await store.fetch() on every render,Medium,https://nuxt.com/docs/4.x/api/utils/call-once,nuxtjs 4.5,active,2026-08-13
30,SEO,Use useSeoMeta for SEO tags,Type-safe SEO meta tag management,useSeoMeta for meta tags,useHead for simple meta,"useSeoMeta({ title: 'Home', ogTitle: 'Home', description: '...' })","useHead({ meta: [{ name: 'description', content: '...' }] })",High,https://nuxt.com/docs/4.x/api/composables/use-seo-meta,nuxtjs 4.5,active,2026-08-13
31,SEO,Use reactive values in useSeoMeta,Dynamic SEO tags with refs or getters,Computed getters for dynamic values,Static values for dynamic content,useSeoMeta({ title: () => post.value.title }),useSeoMeta({ title: post.value.title }),Medium,https://nuxt.com/docs/4.x/api/composables/use-seo-meta,nuxtjs 4.5,active,2026-08-13
32,SEO,Use useHead for non-meta head elements,Scripts styles links in head,useHead for scripts and links,useSeoMeta for scripts,useHead({ script: [{ src: '/analytics.js' }] }),useSeoMeta({ script: '...' }),Medium,https://nuxt.com/docs/4.x/api/composables/use-head,nuxtjs 4.5,active,2026-08-13
33,SEO,Include OpenGraph tags,Add OG tags for social sharing,ogTitle ogDescription ogImage,Missing social preview,"useSeoMeta({ ogImage: '/og.png', twitterCard: 'summary_large_image' })",No OG configuration,Medium,https://nuxt.com/docs/4.x/api/composables/use-seo-meta,nuxtjs 4.5,active,2026-08-13
34,Middleware,Use defineNuxtRouteMiddleware,Define route middleware under app/middleware,defineNuxtRouteMiddleware wrapper in app/middleware,Put route middleware in server/middleware,"export default defineNuxtRouteMiddleware((to, from) => {})","export default function(to, from) {}",High,https://nuxt.com/docs/4.x/guide/directory-structure/app/middleware,nuxtjs 4.5,active,2026-08-13
35,Middleware,Use navigateTo for redirects,Redirect in middleware with navigateTo,return navigateTo('/login'),router.push in middleware,if (!auth) return navigateTo('/login'),if (!auth) router.push('/login'),High,https://nuxt.com/docs/4.x/api/utils/navigate-to,nuxtjs 4.5,active,2026-08-13
36,Middleware,Reference middleware in definePageMeta,Apply app/middleware entries to specific pages,middleware array in definePageMeta,Use global middleware for a page-specific concern,definePageMeta({ middleware: ['auth'] }),Global auth check for one page,Medium,https://nuxt.com/docs/4.x/guide/directory-structure/app/middleware,nuxtjs 4.5,active,2026-08-13
37,Middleware,Use .global suffix for global middleware,Apply named route middleware globally with .global and keep it idempotent because initial SSR middleware can run again during hydration,app/middleware/auth.global.ts with repeat-safe logic,Assume it runs exactly once,app/middleware/auth.global.ts,Increment state unconditionally on every middleware run,Medium,https://nuxt.com/docs/4.x/guide/directory-structure/app/middleware,nuxtjs 4.5,active,2026-08-13
38,ErrorHandling,Use createError for errors,Create errors with proper status codes,createError with statusCode,throw new Error,"throw createError({ statusCode: 404, statusMessage: 'Not Found' })",throw new Error('Not Found'),High,https://nuxt.com/docs/4.x/api/utils/create-error,nuxtjs 4.5,active,2026-08-13
39,ErrorHandling,Use NuxtErrorBoundary for local errors,Handle errors within component subtree,NuxtErrorBoundary for component errors,Global error page for local errors,"<NuxtErrorBoundary @error=""log""><template #error=""{ error }"">",error.vue for component errors,Medium,https://nuxt.com/docs/4.x/getting-started/error-handling,nuxtjs 4.5,active,2026-08-13
40,ErrorHandling,Use clearError to recover from errors,Clear error state and optionally redirect,clearError({ redirect: '/' }),Manual error state reset,clearError({ redirect: '/home' }),error.value = null,Medium,https://nuxt.com/docs/4.x/api/utils/clear-error,nuxtjs 4.5,active,2026-08-13
41,ErrorHandling,Use short statusMessage,Keep statusMessage brief for security,Short generic messages,Detailed error info in statusMessage,"createError({ statusCode: 400, statusMessage: 'Bad Request' })",createError({ statusMessage: 'Invalid user ID: 123' }),High,https://nuxt.com/docs/4.x/getting-started/error-handling,nuxtjs 4.5,active,2026-08-13
42,Link,Use NuxtLink for internal navigation,Client-side navigation with prefetching,<NuxtLink to> for internal links,<a href> for internal links,"<NuxtLink to=""/about"">About</NuxtLink>","<a href=""/about"">About</a>",High,https://nuxt.com/docs/4.x/api/components/nuxt-link,nuxtjs 4.5,active,2026-08-13
43,Link,Configure prefetch behavior,Control when prefetching occurs,prefetchOn for interaction-based,Default prefetch for low-priority,"<NuxtLink prefetch-on=""interaction"">",Always default prefetch,Low,https://nuxt.com/docs/4.x/api/components/nuxt-link,nuxtjs 4.5,active,2026-08-13
44,Link,Use useRouter for programmatic navigation,Navigate programmatically,useRouter().push() for navigation,Direct window.location,const router = useRouter(); router.push('/dashboard'),window.location.href = '/dashboard',Medium,https://nuxt.com/docs/4.x/api/composables/use-router,nuxtjs 4.5,active,2026-08-13
45,Link,Use navigateTo in composables,Navigate outside components,navigateTo() in middleware or plugins,useRouter in non-component code,return navigateTo('/login'),router.push in middleware,Medium,https://nuxt.com/docs/4.x/api/utils/navigate-to,nuxtjs 4.5,active,2026-08-13
46,AutoImports,Use Nuxt auto-imports intentionally,Use auto-imported Nuxt composables and Vue APIs or explicit imports consistently,Direct use of useFetch and ref where auto-imports are enabled,Treat valid explicit Vue imports as an error,const count = ref(0),Mix unresolved globals after disabling imports,Medium,https://nuxt.com/docs/4.x/guide/concepts/auto-imports,nuxtjs 4.5,active,2026-08-13
47,AutoImports,Use #imports for explicit Nuxt imports,Import Nuxt-provided composables from #imports when an explicit import is useful,import useRuntimeConfig from #imports,Import Nuxt virtual composables from arbitrary package paths,import { useRuntimeConfig } from '#imports',import { useRuntimeConfig } from 'nuxt',Low,https://nuxt.com/docs/4.x/guide/concepts/auto-imports,nuxtjs 4.5,active,2026-08-13
48,AutoImports,Configure third-party auto-imports,Add external package auto-imports,imports.presets in nuxt.config,Manual imports everywhere,"imports: { presets: [{ from: 'vue-i18n', imports: ['useI18n'] }] }",import { useI18n } everywhere,Low,https://nuxt.com/docs/4.x/guide/concepts/auto-imports,nuxtjs 4.5,active,2026-08-13
49,Plugins,Use defineNuxtPlugin,Define plugins properly,defineNuxtPlugin wrapper,export default function,export default defineNuxtPlugin((nuxtApp) => {}),export default function(ctx) {},High,https://nuxt.com/docs/4.x/guide/directory-structure/plugins,nuxtjs 4.5,active,2026-08-13
50,Plugins,Use provide for injection,Provide helpers across app,return { provide: {} } for type safety,nuxtApp.provide without types,return { provide: { hello: (name) => `Hello ${name}!` } },"nuxtApp.provide('hello', fn)",Medium,https://nuxt.com/docs/4.x/guide/directory-structure/plugins,nuxtjs 4.5,active,2026-08-13
51,Plugins,Use .client or .server suffix,Control plugin execution environment,plugin.client.ts for client-only,if (process.client) checks,analytics.client.ts,if (process.client) { // analytics },Medium,https://nuxt.com/docs/4.x/guide/directory-structure/plugins,nuxtjs 4.5,active,2026-08-13
52,Environment,Use runtimeConfig for env vars,Access environment variables safely,runtimeConfig in nuxt.config,process.env directly,"runtimeConfig: { apiSecret: '', public: { apiBase: '' } }",process.env.API_SECRET in components,High,https://nuxt.com/docs/4.x/guide/going-further/runtime-config,nuxtjs 4.5,active,2026-08-13
53,Environment,Declare keys before NUXT_ overrides,Declare every runtimeConfig key in nuxt.config before overriding it with a matching NUXT_ environment variable,Declared apiSecret and public.apiBase keys plus NUXT_API_SECRET or NUXT_PUBLIC_API_BASE,Expect an undeclared environment variable to create config,NUXT_PUBLIC_API_BASE=https://api.example.com after declaring public.apiBase,API_BASE=https://api.example.com,High,https://nuxt.com/docs/4.x/guide/going-further/runtime-config,nuxtjs 4.5,active,2026-08-13
54,Environment,Access public config with useRuntimeConfig,Get public config in components,useRuntimeConfig().public,Direct process.env access,const config = useRuntimeConfig(); config.public.apiBase,process.env.NUXT_PUBLIC_API_BASE,High,https://nuxt.com/docs/4.x/api/composables/use-runtime-config,nuxtjs 4.5,active,2026-08-13
55,Environment,Keep secrets in private config,Server-only secrets in runtimeConfig root,runtimeConfig.apiSecret (server only),Secrets in public config,runtimeConfig: { dbPassword: '' },runtimeConfig: { public: { dbPassword: '' } },High,https://nuxt.com/docs/4.x/guide/going-further/runtime-config,nuxtjs 4.5,active,2026-08-13
56,Performance,Use Lazy prefix for code splitting,Lazy load components with Lazy prefix,<LazyComponent> for below-fold,Eager load all components,"<LazyMountainsList v-if=""show""/>",<MountainsList/> for hidden content,Medium,https://nuxt.com/docs/4.x/guide/directory-structure/components,nuxtjs 4.5,active,2026-08-13
57,Performance,Use useLazyFetch for non-blocking data,Alias for useFetch with lazy: true,useLazyFetch for secondary data,useFetch for all requests,const { data } = useLazyFetch('/api/comments'),await useFetch for comments section,Medium,https://nuxt.com/docs/4.x/api/composables/use-lazy-fetch,nuxtjs 4.5,active,2026-08-13
58,Performance,Use lazy hydration for interactivity,Delay component hydration until needed,LazyComponent with hydration strategy,Immediate hydration for all,<LazyModal hydrate-on-visible/>,<Modal/> in footer,Low,https://nuxt.com/docs/4.x/guide/going-further/experimental-features,nuxtjs 4.5,active,2026-08-13
59,DataFetching,Use enabled for conditional async data,Gate execution reactively with the enabled option instead of branching around the composable,"enabled: computed(() => Boolean(userId.value))",Call useFetch conditionally after setup,"useFetch('/api/user', { enabled: () => Boolean(userId.value) })",if (userId.value) await useFetch('/api/user'),Medium,https://nuxt.com/docs/4.x/api/composables/use-async-data,nuxtjs 4.5,active,2026-08-13
60,DataFetching,Keep async-data handlers pure,Keep useAsyncData handlers side-effect free and use stable explicit keys,Return a value from a pure handler with consistent options,Mutate shared state or vary options for one key,"useAsyncData('posts', () => $fetch('/api/posts'))","useAsyncData('posts', async () => { store.count++; })",High,https://nuxt.com/docs/4.x/api/composables/use-async-data,nuxtjs 4.5,active,2026-08-13
61,DataFetching,Respect SSR request boundaries,Use relative useFetch URLs to proxy safe request headers and cookies; forward only an explicit allowlist to external origins,useFetch for an internal relative URL,Assume raw $fetch forwards request context or forward every incoming header,const { data } = await useFetch('/api/profile'),"$fetch(externalUrl, { headers: useRequestHeaders() })",High,https://nuxt.com/docs/4.x/api/utils/dollarfetch,nuxtjs 4.5,active,2026-08-13
62,State,Use useCookie for SSR-safe cookies,Read and write cookies through the SSR-aware useCookie ref with explicit security options,useCookie with sameSite secure and httpOnly where server-only,Read document.cookie during SSR,"useCookie('session', { sameSite: 'lax', secure: true })",document.cookie,High,https://nuxt.com/docs/4.x/api/composables/use-cookie,nuxtjs 4.5,active,2026-08-13
63,Rendering,Use routeRules for per-route rendering,Configure prerender SSR SPA redirects headers or cache behavior per route in nuxt.config,routeRules with explicit path patterns,Scatter rendering decisions through components,"routeRules: { '/blog/**': { isr: 3600 } }",process.client checks for route rendering,High,https://nuxt.com/docs/4.x/guide/concepts/rendering#route-rules,nuxtjs 4.5,active,2026-08-13
64,Configuration,Separate app config from runtime config,Use app.config for public reactive build-time app values and runtimeConfig for environment or secrets,defineAppConfig for theme and runtimeConfig for API secrets,Put secrets in app.config,"defineAppConfig({ theme: { primary: 'blue' } })","defineAppConfig({ apiSecret: process.env.API_SECRET })",High,https://nuxt.com/docs/4.x/guide/directory-structure/app/app-config,nuxtjs 4.5,active,2026-08-13
65,State,Refresh externally changed cookies,Call refreshCookie when a cookie changes outside the useCookie ref,refreshCookie after an external auth refresh,Assume the ref observes every external change,await refreshCookie('session'),Keep stale session.value after external refresh,Medium,https://nuxt.com/docs/4.x/api/utils/refresh-cookie,nuxtjs 4.5,active,2026-08-13
66,State,Replace shallow-watched cookie values,When cookie watch is shallow replace the top-level value to trigger serialization,Assign a new object or array,Mutate a nested property in place with watch:'shallow',"prefs.value = { ...prefs.value, theme: 'dark' }",prefs.value.theme = 'dark',Medium,https://nuxt.com/docs/4.x/api/composables/use-cookie,nuxtjs 4.5,active,2026-08-13
67,Migration,Migrate Nuxt 3 before adding Nuxt 4 features,Nuxt 3 is end-of-life; use Nuxt 4 compatibility mode to surface directory app-config runtime-config and API changes,Enable compatibilityVersion 4 and resolve migration warnings,Keep an unmaintained Nuxt 3 app while adopting Nuxt 4-only guidance,"future: { compatibilityVersion: 4 }","// Nuxt 3 retained without an upgrade plan",High,https://nuxt.com/blog/v4-5,nuxtjs legacy 3.x,deprecated,2026-08-13
1 No Category Guideline Description Do Don't Code Good Code Bad Severity Docs URL Applies To Status Verified At
2 1 Routing Use file-based routing Create routes under the Nuxt 4 app pages directory app/pages with index.vue Configure ordinary routes manually app/pages/dashboard/index.vue Custom router setup Medium https://nuxt.com/docs/4.x/getting-started/routing nuxtjs 4.5 active 2026-08-13
3 2 Routing Use dynamic route parameters Create dynamic routes with bracket syntax under app/pages [id].vue for dynamic params Hardcode routes for dynamic content app/pages/posts/[id].vue app/pages/posts/post1.vue Medium https://nuxt.com/docs/4.x/getting-started/routing nuxtjs 4.5 active 2026-08-13
4 3 Routing Use catch-all routes Handle multiple path segments with [...slug] under app/pages [...slug].vue for catch-all Multiply nested dynamic files unnecessarily app/pages/[...slug].vue app/pages/[a]/[b]/[c].vue Low https://nuxt.com/docs/4.x/getting-started/routing nuxtjs 4.5 active 2026-08-13
5 4 Routing Define page metadata with definePageMeta Set page-level configuration and middleware definePageMeta for layout middleware title Manual route meta configuration definePageMeta({ layout: 'admin', middleware: 'auth' }) router.beforeEach for page config High https://nuxt.com/docs/4.x/api/utils/define-page-meta nuxtjs 4.5 active 2026-08-13
6 5 Routing Use validate for route params Validate dynamic route parameters before rendering validate function in definePageMeta Manual validation in setup definePageMeta({ validate: (route) => /^\d+$/.test(route.params.id) }) if (!valid) navigateTo('/404') Medium https://nuxt.com/docs/4.x/api/utils/define-page-meta nuxtjs 4.5 active 2026-08-13
7 6 Rendering Use SSR by default Server-side rendering is enabled by default Keep ssr: true (default) Disable SSR unnecessarily ssr: true (default) ssr: false for all pages High https://nuxt.com/docs/4.x/guide/concepts/rendering nuxtjs 4.5 active 2026-08-13
8 7 Rendering Use .client suffix for client-only components Mark components to render only on client ComponentName.client.vue suffix v-if with process.client check Comments.client.vue <div v-if="process.client"><Comments/></div> Medium https://nuxt.com/docs/4.x/guide/directory-structure/components nuxtjs 4.5 active 2026-08-13
9 8 Rendering Use .server suffix for server-only components Mark components to render only on server ComponentName.server.vue suffix Manual server check HeavyMarkdown.server.vue v-if="process.server" Low https://nuxt.com/docs/4.x/guide/directory-structure/components nuxtjs 4.5 active 2026-08-13
10 9 DataFetching Use useFetch for simple data fetching Wrapper around useAsyncData for URL fetching useFetch for API calls $fetch in onMounted const { data } = await useFetch('/api/posts') onMounted(async () => { data.value = await $fetch('/api/posts') }) High https://nuxt.com/docs/4.x/api/composables/use-fetch nuxtjs 4.5 active 2026-08-13
11 10 DataFetching Use useAsyncData for complex fetching Fine-grained control over async data useAsyncData for CMS or custom fetching useFetch for non-URL data sources const { data } = await useAsyncData('posts', () => cms.getPosts()) const { data } = await useFetch(() => cms.getPosts()) Medium https://nuxt.com/docs/4.x/api/composables/use-async-data nuxtjs 4.5 active 2026-08-13
12 11 DataFetching Use $fetch for non-reactive requests $fetch for event handlers and non-component code $fetch in event handlers or server routes useFetch in click handlers async function submit() { await $fetch('/api/submit', { method: 'POST' }) } async function submit() { await useFetch('/api/submit') } High https://nuxt.com/docs/4.x/api/utils/dollarfetch nuxtjs 4.5 active 2026-08-13
13 12 DataFetching Use lazy option for non-blocking fetch Defer data fetching for better initial load lazy: true for below-fold content Blocking fetch for non-critical data useFetch('/api/comments', { lazy: true }) await useFetch('/api/comments') for footer Medium https://nuxt.com/docs/4.x/api/composables/use-fetch nuxtjs 4.5 active 2026-08-13
14 13 DataFetching Use server option intentionally Use server:false only when data depends on browser-only state server:false for localStorage or browser APIs Disable SSR merely because data is user-specific useFetch('/api/preferences', { server: false }) for browser-only input server:false for any authenticated request Medium https://nuxt.com/docs/4.x/api/composables/use-fetch nuxtjs 4.5 active 2026-08-13
15 14 DataFetching Use pick to reduce payload size Select only needed fields from response pick option for large responses Fetching entire objects when few fields needed useFetch('/api/user', { pick: ['id', 'name'] }) useFetch('/api/user') then destructure Low https://nuxt.com/docs/4.x/api/composables/use-fetch nuxtjs 4.5 active 2026-08-13
16 15 DataFetching Use transform for data manipulation Transform data before storing in state transform option for data shaping Manual transformation after fetch useFetch('/api/posts', { transform: (posts) => posts.map(p => p.title) }) const titles = data.value.map(p => p.title) Low https://nuxt.com/docs/4.x/api/composables/use-fetch nuxtjs 4.5 active 2026-08-13
17 16 DataFetching Handle loading and error states Always handle pending and error states Check status pending error refs Ignoring loading states <div v-if="status === 'pending'">Loading...</div> No loading indicator High https://nuxt.com/docs/4.x/getting-started/data-fetching nuxtjs 4.5 active 2026-08-13
18 17 Lifecycle Avoid side effects in script setup root Move side effects to lifecycle hooks Side effects in onMounted setInterval in root script setup onMounted(() => { interval = setInterval(...) }) <script setup>setInterval(...)</script> High https://nuxt.com/docs/4.x/guide/concepts/nuxt-lifecycle nuxtjs 4.5 active 2026-08-13
19 18 Lifecycle Use onMounted for DOM access Access DOM only after component is mounted onMounted for DOM manipulation Direct DOM access in setup onMounted(() => { document.getElementById('el') }) <script setup>document.getElementById('el')</script> High https://nuxt.com/docs/4.x/api/composables/on-mounted nuxtjs 4.5 active 2026-08-13
20 19 Lifecycle Use nextTick for post-render access Wait for DOM updates before accessing elements await nextTick() after state changes Immediate DOM access after state change count.value++; await nextTick(); el.value.focus() count.value++; el.value.focus() Medium https://nuxt.com/docs/4.x/api/utils/next-tick nuxtjs 4.5 active 2026-08-13
21 20 Lifecycle Use onPrehydrate for pre-hydration logic Run code before Nuxt hydrates the page onPrehydrate for client setup onMounted for hydration-critical code onPrehydrate(() => { console.log(window) }) onMounted for pre-hydration needs Low https://nuxt.com/docs/4.x/api/composables/on-prehydrate nuxtjs 4.5 active 2026-08-13
22 21 Server Use server/api for API routes Create API endpoints in server/api directory server/api/users.ts for /api/users Manual Express setup server/api/hello.ts -> /api/hello app.get('/api/hello') High https://nuxt.com/docs/4.x/guide/directory-structure/server nuxtjs 4.5 active 2026-08-13
23 22 Server Use defineEventHandler for handlers Define server route handlers defineEventHandler for all handlers export default function export default defineEventHandler((event) => { return { hello: 'world' } }) export default function(req, res) {} High https://nuxt.com/docs/4.x/guide/directory-structure/server nuxtjs 4.5 active 2026-08-13
24 23 Server Use server/routes for non-api routes Routes without /api prefix server/routes for custom paths server/api for non-api routes server/routes/sitemap.xml.ts server/api/sitemap.xml.ts Medium https://nuxt.com/docs/4.x/guide/directory-structure/server nuxtjs 4.5 active 2026-08-13
25 24 Server Use getQuery and readBody for input Access query params and request body getQuery(event) readBody(event) Direct event access const { id } = getQuery(event) event.node.req.query Medium https://nuxt.com/docs/4.x/guide/directory-structure/server nuxtjs 4.5 active 2026-08-13
26 25 Server Validate server input Always validate input in server handlers Zod or similar for validation Trust client input const body = await readBody(event); schema.parse(body) const body = await readBody(event) High https://nuxt.com/docs/4.x/guide/directory-structure/server nuxtjs 4.5 active 2026-08-13
27 26 State Use useState for serializable shared state Share SSR-safe values whose contents can be serialized useState for JSON-serializable cross-component state Store classes functions or symbols const count = useState('count', () => 0) useState('service' () => new Service()) High https://nuxt.com/docs/4.x/api/composables/use-state nuxtjs 4.5 active 2026-08-13
28 27 State Use unique keys for useState Prevent state conflicts with unique keys Descriptive unique keys for each state Generic or duplicate keys useState('user-preferences', () => ({})) useState('data') in multiple places Medium https://nuxt.com/docs/4.x/api/composables/use-state nuxtjs 4.5 active 2026-08-13
29 28 State Use Pinia for complex state Pinia for advanced state management @pinia/nuxt for complex apps Custom state management useMainStore() with Pinia Custom reactive store implementation Medium https://nuxt.com/docs/4.x/getting-started/state-management nuxtjs 4.5 active 2026-08-13
30 29 State Use callOnce for one-time async operations Ensure async operations run only once callOnce for store initialization Direct await in component await callOnce(store.fetch) await store.fetch() on every render Medium https://nuxt.com/docs/4.x/api/utils/call-once nuxtjs 4.5 active 2026-08-13
31 30 SEO Use useSeoMeta for SEO tags Type-safe SEO meta tag management useSeoMeta for meta tags useHead for simple meta useSeoMeta({ title: 'Home', ogTitle: 'Home', description: '...' }) useHead({ meta: [{ name: 'description', content: '...' }] }) High https://nuxt.com/docs/4.x/api/composables/use-seo-meta nuxtjs 4.5 active 2026-08-13
32 31 SEO Use reactive values in useSeoMeta Dynamic SEO tags with refs or getters Computed getters for dynamic values Static values for dynamic content useSeoMeta({ title: () => post.value.title }) useSeoMeta({ title: post.value.title }) Medium https://nuxt.com/docs/4.x/api/composables/use-seo-meta nuxtjs 4.5 active 2026-08-13
33 32 SEO Use useHead for non-meta head elements Scripts styles links in head useHead for scripts and links useSeoMeta for scripts useHead({ script: [{ src: '/analytics.js' }] }) useSeoMeta({ script: '...' }) Medium https://nuxt.com/docs/4.x/api/composables/use-head nuxtjs 4.5 active 2026-08-13
34 33 SEO Include OpenGraph tags Add OG tags for social sharing ogTitle ogDescription ogImage Missing social preview useSeoMeta({ ogImage: '/og.png', twitterCard: 'summary_large_image' }) No OG configuration Medium https://nuxt.com/docs/4.x/api/composables/use-seo-meta nuxtjs 4.5 active 2026-08-13
35 34 Middleware Use defineNuxtRouteMiddleware Define route middleware under app/middleware defineNuxtRouteMiddleware wrapper in app/middleware Put route middleware in server/middleware export default defineNuxtRouteMiddleware((to, from) => {}) export default function(to, from) {} High https://nuxt.com/docs/4.x/guide/directory-structure/app/middleware nuxtjs 4.5 active 2026-08-13
36 35 Middleware Use navigateTo for redirects Redirect in middleware with navigateTo return navigateTo('/login') router.push in middleware if (!auth) return navigateTo('/login') if (!auth) router.push('/login') High https://nuxt.com/docs/4.x/api/utils/navigate-to nuxtjs 4.5 active 2026-08-13
37 36 Middleware Reference middleware in definePageMeta Apply app/middleware entries to specific pages middleware array in definePageMeta Use global middleware for a page-specific concern definePageMeta({ middleware: ['auth'] }) Global auth check for one page Medium https://nuxt.com/docs/4.x/guide/directory-structure/app/middleware nuxtjs 4.5 active 2026-08-13
38 37 Middleware Use .global suffix for global middleware Apply named route middleware globally with .global and keep it idempotent because initial SSR middleware can run again during hydration app/middleware/auth.global.ts with repeat-safe logic Assume it runs exactly once app/middleware/auth.global.ts Increment state unconditionally on every middleware run Medium https://nuxt.com/docs/4.x/guide/directory-structure/app/middleware nuxtjs 4.5 active 2026-08-13
39 38 ErrorHandling Use createError for errors Create errors with proper status codes createError with statusCode throw new Error throw createError({ statusCode: 404, statusMessage: 'Not Found' }) throw new Error('Not Found') High https://nuxt.com/docs/4.x/api/utils/create-error nuxtjs 4.5 active 2026-08-13
40 39 ErrorHandling Use NuxtErrorBoundary for local errors Handle errors within component subtree NuxtErrorBoundary for component errors Global error page for local errors <NuxtErrorBoundary @error="log"><template #error="{ error }"> error.vue for component errors Medium https://nuxt.com/docs/4.x/getting-started/error-handling nuxtjs 4.5 active 2026-08-13
41 40 ErrorHandling Use clearError to recover from errors Clear error state and optionally redirect clearError({ redirect: '/' }) Manual error state reset clearError({ redirect: '/home' }) error.value = null Medium https://nuxt.com/docs/4.x/api/utils/clear-error nuxtjs 4.5 active 2026-08-13
42 41 ErrorHandling Use short statusMessage Keep statusMessage brief for security Short generic messages Detailed error info in statusMessage createError({ statusCode: 400, statusMessage: 'Bad Request' }) createError({ statusMessage: 'Invalid user ID: 123' }) High https://nuxt.com/docs/4.x/getting-started/error-handling nuxtjs 4.5 active 2026-08-13
43 42 Link Use NuxtLink for internal navigation Client-side navigation with prefetching <NuxtLink to> for internal links <a href> for internal links <NuxtLink to="/about">About</NuxtLink> <a href="/about">About</a> High https://nuxt.com/docs/4.x/api/components/nuxt-link nuxtjs 4.5 active 2026-08-13
44 43 Link Configure prefetch behavior Control when prefetching occurs prefetchOn for interaction-based Default prefetch for low-priority <NuxtLink prefetch-on="interaction"> Always default prefetch Low https://nuxt.com/docs/4.x/api/components/nuxt-link nuxtjs 4.5 active 2026-08-13
45 44 Link Use useRouter for programmatic navigation Navigate programmatically useRouter().push() for navigation Direct window.location const router = useRouter(); router.push('/dashboard') window.location.href = '/dashboard' Medium https://nuxt.com/docs/4.x/api/composables/use-router nuxtjs 4.5 active 2026-08-13
46 45 Link Use navigateTo in composables Navigate outside components navigateTo() in middleware or plugins useRouter in non-component code return navigateTo('/login') router.push in middleware Medium https://nuxt.com/docs/4.x/api/utils/navigate-to nuxtjs 4.5 active 2026-08-13
47 46 AutoImports Use Nuxt auto-imports intentionally Use auto-imported Nuxt composables and Vue APIs or explicit imports consistently Direct use of useFetch and ref where auto-imports are enabled Treat valid explicit Vue imports as an error const count = ref(0) Mix unresolved globals after disabling imports Medium https://nuxt.com/docs/4.x/guide/concepts/auto-imports nuxtjs 4.5 active 2026-08-13
48 47 AutoImports Use #imports for explicit Nuxt imports Import Nuxt-provided composables from #imports when an explicit import is useful import useRuntimeConfig from #imports Import Nuxt virtual composables from arbitrary package paths import { useRuntimeConfig } from '#imports' import { useRuntimeConfig } from 'nuxt' Low https://nuxt.com/docs/4.x/guide/concepts/auto-imports nuxtjs 4.5 active 2026-08-13
49 48 AutoImports Configure third-party auto-imports Add external package auto-imports imports.presets in nuxt.config Manual imports everywhere imports: { presets: [{ from: 'vue-i18n', imports: ['useI18n'] }] } import { useI18n } everywhere Low https://nuxt.com/docs/4.x/guide/concepts/auto-imports nuxtjs 4.5 active 2026-08-13
50 49 Plugins Use defineNuxtPlugin Define plugins properly defineNuxtPlugin wrapper export default function export default defineNuxtPlugin((nuxtApp) => {}) export default function(ctx) {} High https://nuxt.com/docs/4.x/guide/directory-structure/plugins nuxtjs 4.5 active 2026-08-13
51 50 Plugins Use provide for injection Provide helpers across app return { provide: {} } for type safety nuxtApp.provide without types return { provide: { hello: (name) => `Hello ${name}!` } } nuxtApp.provide('hello', fn) Medium https://nuxt.com/docs/4.x/guide/directory-structure/plugins nuxtjs 4.5 active 2026-08-13
52 51 Plugins Use .client or .server suffix Control plugin execution environment plugin.client.ts for client-only if (process.client) checks analytics.client.ts if (process.client) { // analytics } Medium https://nuxt.com/docs/4.x/guide/directory-structure/plugins nuxtjs 4.5 active 2026-08-13
53 52 Environment Use runtimeConfig for env vars Access environment variables safely runtimeConfig in nuxt.config process.env directly runtimeConfig: { apiSecret: '', public: { apiBase: '' } } process.env.API_SECRET in components High https://nuxt.com/docs/4.x/guide/going-further/runtime-config nuxtjs 4.5 active 2026-08-13
54 53 Environment Declare keys before NUXT_ overrides Declare every runtimeConfig key in nuxt.config before overriding it with a matching NUXT_ environment variable Declared apiSecret and public.apiBase keys plus NUXT_API_SECRET or NUXT_PUBLIC_API_BASE Expect an undeclared environment variable to create config NUXT_PUBLIC_API_BASE=https://api.example.com after declaring public.apiBase API_BASE=https://api.example.com High https://nuxt.com/docs/4.x/guide/going-further/runtime-config nuxtjs 4.5 active 2026-08-13
55 54 Environment Access public config with useRuntimeConfig Get public config in components useRuntimeConfig().public Direct process.env access const config = useRuntimeConfig(); config.public.apiBase process.env.NUXT_PUBLIC_API_BASE High https://nuxt.com/docs/4.x/api/composables/use-runtime-config nuxtjs 4.5 active 2026-08-13
56 55 Environment Keep secrets in private config Server-only secrets in runtimeConfig root runtimeConfig.apiSecret (server only) Secrets in public config runtimeConfig: { dbPassword: '' } runtimeConfig: { public: { dbPassword: '' } } High https://nuxt.com/docs/4.x/guide/going-further/runtime-config nuxtjs 4.5 active 2026-08-13
57 56 Performance Use Lazy prefix for code splitting Lazy load components with Lazy prefix <LazyComponent> for below-fold Eager load all components <LazyMountainsList v-if="show"/> <MountainsList/> for hidden content Medium https://nuxt.com/docs/4.x/guide/directory-structure/components nuxtjs 4.5 active 2026-08-13
58 57 Performance Use useLazyFetch for non-blocking data Alias for useFetch with lazy: true useLazyFetch for secondary data useFetch for all requests const { data } = useLazyFetch('/api/comments') await useFetch for comments section Medium https://nuxt.com/docs/4.x/api/composables/use-lazy-fetch nuxtjs 4.5 active 2026-08-13
59 58 Performance Use lazy hydration for interactivity Delay component hydration until needed LazyComponent with hydration strategy Immediate hydration for all <LazyModal hydrate-on-visible/> <Modal/> in footer Low https://nuxt.com/docs/4.x/guide/going-further/experimental-features nuxtjs 4.5 active 2026-08-13
60 59 DataFetching Use enabled for conditional async data Gate execution reactively with the enabled option instead of branching around the composable enabled: computed(() => Boolean(userId.value)) Call useFetch conditionally after setup useFetch('/api/user', { enabled: () => Boolean(userId.value) }) if (userId.value) await useFetch('/api/user') Medium https://nuxt.com/docs/4.x/api/composables/use-async-data nuxtjs 4.5 active 2026-08-13
61 60 DataFetching Keep async-data handlers pure Keep useAsyncData handlers side-effect free and use stable explicit keys Return a value from a pure handler with consistent options Mutate shared state or vary options for one key useAsyncData('posts', () => $fetch('/api/posts')) useAsyncData('posts', async () => { store.count++; }) High https://nuxt.com/docs/4.x/api/composables/use-async-data nuxtjs 4.5 active 2026-08-13
62 61 DataFetching Respect SSR request boundaries Use relative useFetch URLs to proxy safe request headers and cookies; forward only an explicit allowlist to external origins useFetch for an internal relative URL Assume raw $fetch forwards request context or forward every incoming header const { data } = await useFetch('/api/profile') $fetch(externalUrl, { headers: useRequestHeaders() }) High https://nuxt.com/docs/4.x/api/utils/dollarfetch nuxtjs 4.5 active 2026-08-13
63 62 State Use useCookie for SSR-safe cookies Read and write cookies through the SSR-aware useCookie ref with explicit security options useCookie with sameSite secure and httpOnly where server-only Read document.cookie during SSR useCookie('session', { sameSite: 'lax', secure: true }) document.cookie High https://nuxt.com/docs/4.x/api/composables/use-cookie nuxtjs 4.5 active 2026-08-13
64 63 Rendering Use routeRules for per-route rendering Configure prerender SSR SPA redirects headers or cache behavior per route in nuxt.config routeRules with explicit path patterns Scatter rendering decisions through components routeRules: { '/blog/**': { isr: 3600 } } process.client checks for route rendering High https://nuxt.com/docs/4.x/guide/concepts/rendering#route-rules nuxtjs 4.5 active 2026-08-13
65 64 Configuration Separate app config from runtime config Use app.config for public reactive build-time app values and runtimeConfig for environment or secrets defineAppConfig for theme and runtimeConfig for API secrets Put secrets in app.config defineAppConfig({ theme: { primary: 'blue' } }) defineAppConfig({ apiSecret: process.env.API_SECRET }) High https://nuxt.com/docs/4.x/guide/directory-structure/app/app-config nuxtjs 4.5 active 2026-08-13
66 65 State Refresh externally changed cookies Call refreshCookie when a cookie changes outside the useCookie ref refreshCookie after an external auth refresh Assume the ref observes every external change await refreshCookie('session') Keep stale session.value after external refresh Medium https://nuxt.com/docs/4.x/api/utils/refresh-cookie nuxtjs 4.5 active 2026-08-13
67 66 State Replace shallow-watched cookie values When cookie watch is shallow replace the top-level value to trigger serialization Assign a new object or array Mutate a nested property in place with watch:'shallow' prefs.value = { ...prefs.value, theme: 'dark' } prefs.value.theme = 'dark' Medium https://nuxt.com/docs/4.x/api/composables/use-cookie nuxtjs 4.5 active 2026-08-13
68 67 Migration Migrate Nuxt 3 before adding Nuxt 4 features Nuxt 3 is end-of-life; use Nuxt 4 compatibility mode to surface directory app-config runtime-config and API changes Enable compatibilityVersion 4 and resolve migration warnings Keep an unmaintained Nuxt 3 app while adopting Nuxt 4-only guidance future: { compatibilityVersion: 4 } // Nuxt 3 retained without an upgrade plan High https://nuxt.com/blog/v4-5 nuxtjs legacy 3.x deprecated 2026-08-13