Stats
Actions
Tags
From gdu
Nuxt 4 patterns for full-stack Vue applications. Activates on nuxt.config, app/, server/, and pages/ to enforce correct data fetching, routing, server/client separation, and Nuxt UI v4 integrations. Use when editing Nuxt pages, layouts, middleware, or server routes.
How this skill is triggered — by the user, by Claude, or both
Slash command
/gdu:nuxtThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
`app/` frontend, `server/` backend, `shared/` isomorphic.
app/ frontend, server/ backend, shared/ isomorphic.
Data fetching — useFetch('/api/endpoint') simple, useAsyncData('key', () => $fetch(...)) with dedup key/transform.
Server routes — file-based with method suffix: server/api/users/[id].get.ts. Use defineEventHandler, getRouterParam, readBody.
State — useState('key', () => default) for SSR-safe. Complex state goes to Pinia.
Config — useRuntimeConfig(), never process.env in client.
Errors — throw createError({ statusCode: 404, statusMessage: 'Not found' }).
These modules are registered automatically by @nuxt/ui — do NOT install or configure separately:
| Module | What It Does | Usage |
|---|---|---|
@nuxt/icon | 200k+ Iconify icons | <UIcon name="i-lucide-star" /> |
@nuxt/fonts | Auto-load fonts from CSS --font-sans declaration | Declare in @theme {} block |
@nuxtjs/color-mode | Light/dark switching | useColorMode(), <ColorModeButton /> |
@nuxt/contentMust be registered after @nuxt/ui in modules array. Provides: ContentSearch, ContentNavigation, ContentToc, ContentSurround, prose components.
Add @source "../../../content/**/*" in CSS for Tailwind class detection in markdown.
When CELLM_DEV_MODE: true: after Nuxt implementation, write feedback entry to dev-cellm-feedback/entries/nuxt-{date}-{seq}.md. Note which auto-imports were missed, whether server/client separation was respected, and which Nuxt 4 patterns required correction. Format and lifecycle: see dev-cellm-feedback/README.md.
$fetch in component setup — use useFetch/useAsyncDataprocess.env in client — use useRuntimeConfig().publicserver/ — Nitro-only, no Vueapp/ — never import from server/.get.ts, .post.ts@nuxt/icon or @nuxt/fonts manually — auto-registered by @nuxt/uinpx claudepluginhub murillodutt/cellm --plugin gduProvides Nuxt 4 patterns for hydration safety, SSR-safe data fetching with useFetch/useAsyncData, route rules for prerender/SWR/ISR, lazy loading, and performance optimization.
Provides Nuxt 4 patterns for hydration safety, SSR-safe data fetching with useFetch/useAsyncData, route rules, and lazy loading.
Covers Nuxt 4 fundamentals for project setup, nuxt.config.ts configuration, file-based routing, middleware, SEO with useHead/useSeoMeta, error handling via error.vue/NuxtErrorBoundary, and directory structure.