ui-ux-pro-max-skill/cli/assets/data/stacks/nuxtjs.csv

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