[
{
"No": "1",
"Category": "Routing",
"Guideline": "Use file-based routing",
"Description": "Create routes by adding files in pages directory",
"Do": "pages/ directory with index.vue",
"Don't": "Manual route configuration",
"Code Good": "pages/dashboard/index.vue",
"Code Bad": "Custom router setup",
"Severity": "Medium",
"Docs URL": "https://nuxt.com/docs/getting-started/routing"
},
{
"No": "2",
"Category": "Routing",
"Guideline": "Use dynamic route parameters",
"Description": "Create dynamic routes with bracket syntax",
"Do": "[id].vue for dynamic params",
"Don't": "Hardcoded routes for dynamic content",
"Code Good": "pages/posts/[id].vue",
"Code Bad": "pages/posts/post1.vue",
"Severity": "Medium",
"Docs URL": "https://nuxt.com/docs/getting-started/routing"
},
{
"No": "3",
"Category": "Routing",
"Guideline": "Use catch-all routes",
"Description": "Handle multiple path segments with [...slug]",
"Do": "[...slug].vue for catch-all",
"Don't": "Multiple nested dynamic routes",
"Code Good": "pages/[...slug].vue",
"Code Bad": "pages/[a]/[b]/[c].vue",
"Severity": "Low",
"Docs URL": "https://nuxt.com/docs/getting-started/routing"
},
{
"No": "4",
"Category": "Routing",
"Guideline": "Define page metadata with definePageMeta",
"Description": "Set page-level configuration and middleware",
"Do": "definePageMeta for layout middleware title",
"Don't": "Manual route meta configuration",
"Code Good": "definePageMeta({ layout: 'admin', middleware: 'auth' })",
"Code Bad": "router.beforeEach for page config",
"Severity": "High",
"Docs URL": "https://nuxt.com/docs/api/utils/define-page-meta"
},
{
"No": "5",
"Category": "Routing",
"Guideline": "Use validate for route params",
"Description": "Validate dynamic route parameters before rendering",
"Do": "validate function in definePageMeta",
"Don't": "Manual validation in setup",
"Code Good": "definePageMeta({ validate: (route) => /^d+$/.test(route.params.id) })",
"Code Bad": "if (!valid) navigateTo('/404')",
"Severity": "Medium",
"Docs URL": "https://nuxt.com/docs/api/utils/define-page-meta"
},
{
"No": "6",
"Category": "Rendering",
"Guideline": "Use SSR by default",
"Description": "Server-side rendering is enabled by default",
"Do": "Keep ssr: true (default)",
"Don't": "Disable SSR unnecessarily",
"Code Good": "ssr: true (default)",
"Code Bad": "ssr: false for all pages",
"Severity": "High",
"Docs URL": "https://nuxt.com/docs/guide/concepts/rendering"
},
{
"No": "7",
"Category": "Rendering",
"Guideline": "Use .client suffix for client-only components",
"Description": "Mark components to render only on client",
"Do": "ComponentName.client.vue suffix",
"Don't": "v-if with process.client check",
"Code Good": "Comments.client.vue",
"Code Bad": "<div v-if=\"process.client\"><Comments/></div>",
"Severity": "Medium",
"Docs URL": "https://nuxt.com/docs/guide/directory-structure/components"
},
{
"No": "8",
"Category": "Rendering",
"Guideline": "Use .server suffix for server-only components",
"Description": "Mark components to render only on server",
"Do": "ComponentName.server.vue suffix",
"Don't": "Manual server check",
"Code Good": "HeavyMarkdown.server.vue",
"Code Bad": "v-if=\"process.server\"",
"Severity": "Low",
"Docs URL": "https://nuxt.com/docs/guide/directory-structure/components"
},
{
"No": "9",
"Category": "DataFetching",
"Guideline": "Use useFetch for simple data fetching",
"Description": "Wrapper around useAsyncData for URL fetching",
"Do": "useFetch for API calls",
"Don't": "$fetch in onMounted",
"Code Good": "const { data } = await useFetch('/api/posts')",
"Code Bad": "onMounted(async () => { data.value = await $fetch('/api/posts') })",
"Severity": "High",
"Docs URL": "https://nuxt.com/docs/api/composables/use-fetch"
},
{
"No": "10",
"Category": "DataFetching",
"Guideline": "Use useAsyncData for complex fetching",
"Description": "Fine-grained control over async data",
"Do": "useAsyncData for CMS or custom fetching",
"Don't": "useFetch for non-URL data sources",
"Code Good": "const { data } = await useAsyncData('posts', () => cms.getPosts())",
"Code Bad": "const { data } = await useFetch(() => cms.getPosts())",
"Severity": "Medium",
"Docs URL": "https://nuxt.com/docs/api/composables/use-async-data"
},
{
"No": "11",
"Category": "DataFetching",
"Guideline": "Use $fetch for non-reactive requests",
"Description": "$fetch for event handlers and non-component code",
"Do": "$fetch in event handlers or server routes",
"Don't": "useFetch in click handlers",
"Code Good": "async function submit() { await $fetch('/api/submit', { method: 'POST' }) }",
"Code Bad": "async function submit() { await useFetch('/api/submit') }",
"Severity": "High",
"Docs URL": "https://nuxt.com/docs/api/utils/dollarfetch"
},
{
"No": "12",
"Category": "DataFetching",
"Guideline": "Use lazy option for non-blocking fetch",
"Description": "Defer data fetching for better initial load",
"Do": "lazy: true for below-fold content",
"Don't": "Blocking fetch for non-critical data",
"Code Good": "useFetch('/api/comments', { lazy: true })",
"Code Bad": "await useFetch('/api/comments') for footer",
"Severity": "Medium",
"Docs URL": "https://nuxt.com/docs/api/composables/use-fetch"
},
{
"No": "13",
"Category": "DataFetching",
"Guideline": "Use server option to control fetch location",
"Description": "Choose where data is fetched",
"Do": "server: false for client-only data",
"Don't": "Server fetch for user-specific client data",
"Code Good": "useFetch('/api/user-preferences', { server: false })",
"Code Bad": "useFetch for localStorage-dependent data",
"Severity": "Medium",
"Docs URL": "https://nuxt.com/docs/api/composables/use-fetch"
},
{
"No": "14",
"Category": "DataFetching",
"Guideline": "Use pick to reduce payload size",
"Description": "Select only needed fields from response",
"Do": "pick option for large responses",
"Don't": "Fetching entire objects when few fields needed",
"Code Good": "useFetch('/api/user', { pick: ['id', 'name'] })",
"Code Bad": "useFetch('/api/user') then destructure",
"Severity": "Low",
"Docs URL": "https://nuxt.com/docs/api/composables/use-fetch"
},
{
"No": "15",
"Category": "DataFetching",
"Guideline": "Use transform for data manipulation",
"Description": "Transform data before storing in state",
"Do": "transform option for data shaping",
"Don't": "Manual transformation after fetch",
"Code Good": "useFetch('/api/posts', { transform: (posts) => posts.map(p => p.title) })",
"Code Bad": "const titles = data.value.map(p => p.title)",
"Severity": "Low",
"Docs URL": "https://nuxt.com/docs/api/composables/use-fetch"
}
]
