nuxtBuild Vue 3 SSR/SSG applications with proper data fetching, hydration, and server patterns.
Install via ClawdBot CLI:
clawdbot install ivangdavila/nuxtRequires:
useFetch deduplicates and caches requests during SSR — use it in components, not $fetch which fetches twice (server + client)$fetch is for event handlers and server routes only — in it causes hydration mismatchesuseFetch runs on server during SSR — check process.server if you need client-only datakey option to useFetch when URL params change but path stays same — without it, cache returns stale datauseLazyFetch doesn't block navigation — use for non-critical data, but handle the pending stateDate.now() or Math.random() in templates cause hydration mismatches — compute once in setup or use onMounted or process.client check component with fallbackv-if with async data shows flash of wrong content — use v-show or skeleton states insteadcomponents/ auto-import with folder-based naming — components/UI/Button.vue becomes composables/ must be named use* for auto-import — utils.ts exports won't auto-importserver/utils/ auto-import in server routes only — not available in client code// @ts-nocheck or explicitly import to avoid naming collisionsserver/api/ become API routes — server/api/users.get.ts handles GET /api/users.get.ts, .post.ts) is required for method-specific handlers — without it, handles all methodsgetQuery(event) for query params, readBody(event) for POST body — don't access event.req directlycreateError({ statusCode: 404 }) for errorsuseState is SSR-safe and persists across navigation — regular ref() resets on each pageuseState key must be unique app-wide — collisions silently share state between componentsstoreToRefs() to keep reactivity when destructuring — without it, values lose reactivityuseState default — it runs on server toomiddleware/ with .global.ts suffix runs on every route — order is alphabeticaldefinePageMeta runs after global — use for auth checks on specific pagesnavigateTo() in middleware must be returned — forgetting return continues to the original routeserver/middleware/ runs on all server requests including API routesruntimeConfig for server secrets, runtimeConfig.public for client-safe values — env vars override with NUXT_ prefixapp.config.ts for build-time config that doesn't need env vars — it's bundled into the appnuxt.config.ts changes require restart — app.config.ts changes hot-reloaduseSeoMeta for standard meta tags — type-safe and handles og:/twitter: prefixes automaticallyuseHead for custom tags, scripts, and links — more flexible but no type safety for meta namesdefinePageMeta is static — use useSeoMeta in setup for dynamic valuestitleTemplate in nuxt.config for consistent titles — %s - My Site patternnuxtApp.hook('app:created') for post-creation logicprovide in plugins makes values available via useNuxtApp() — but composables are cleaner01.plugin.ts) run first, then alphabetical — dependencies need explicit ordering.client.ts suffix — server-only: .server.ts suffixnuxt generate creates static files — but API routes won't work without a servernuxt build creates server bundle — deploy the .output directoryrouteRules: '/blog/**': { isr: 3600 } — caches pages for 1 hourrouteRules: { '/about': { prerender: true } } — builds static HTML at build timeGenerated Mar 1, 2026
Building a Vue 3 e-commerce site with server-side rendering for SEO optimization. Using Nuxt's data fetching patterns ensures product listings load quickly during SSR, while proper hydration handling prevents content flashes during client-side transitions. The built-in API routes simplify backend integration for cart and checkout functionality.
Creating a content-heavy portal with dynamic meta tags for social sharing. Nuxt's SEO utilities automatically generate proper Open Graph and Twitter cards, while ISR capabilities cache frequently accessed articles. Server routes handle content API calls efficiently without exposing database credentials to the client.
Developing an interactive dashboard with real-time data visualization. Nuxt's state management patterns maintain user session data across page navigation, while middleware handles authentication flows. Client-only plugins integrate third-party analytics without breaking server-side rendering.
Building an internal company portal with role-based access controls. Global middleware enforces authentication across all routes, while route-specific middleware restricts departmental sections. Auto-imports streamline component organization across large development teams.
Creating an interactive learning environment with progress tracking. Nuxt's hydration patterns prevent mismatches when rendering dynamic quizzes, while lazy loading optimizes performance for media-rich lessons. Prerendering generates static course catalogs for fast initial loads.
Web development agencies use Nuxt to deliver performant client websites with strong SEO foundations. The framework's conventions reduce development time while ensuring production-ready patterns for data fetching and hydration. Agencies can charge premium rates for sites that load quickly and rank well in search engines.
Startups build scalable SaaS applications leveraging Nuxt's full-stack capabilities. The unified codebase reduces infrastructure complexity while server routes provide backend functionality without separate API development. Subscription models benefit from the framework's deployment flexibility across various hosting environments.
Online stores utilize Nuxt's static generation for product pages and dynamic rendering for personalized content. The framework's performance optimizations directly impact conversion rates through faster page loads. Revenue scales with transaction volume while maintaining low hosting costs through efficient static asset delivery.
💬 Integration Tip
Start with Nuxt's auto-imports to reduce boilerplate, then gradually implement server routes for backend functionality. Always test hydration by disabling JavaScript to catch mismatches early.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed. Generates bold, memorable designs from plain text requirements with anti-AI-slop aesthetics, mobile-first responsive patterns, and single-file bundling. Use when building landing pages, marketing sites, portfolios, dashboards, or any static web UI. Supports both Vite (pure static) and Next.js (Vercel deploy) workflows.
AI skill for automated UI audits. Evaluate interfaces against proven UX principles for visual hierarchy, accessibility, cognitive load, navigation, and more. Based on Making UX Decisions by Tommy Geoco.