nuxt

Guides building Nuxt 4 applications with SSR, file-based routing, and auto-imports.

Updated Aug 22, 2026
One-click install
npx skills add https://github.com/falentio/cimi --skill nuxt-falentio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nuxt
Source: https://github.com/falentio/cimi/tree/main/.agents/skills/nuxt
Command: npx skills add https://github.com/falentio/cimi --skill nuxt-falentio

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Developers working with Nuxt need accurate, version-specific guidance on its conventions, composables, and server engine, and outdated or generic Vue advice often leads to SSR bugs, hydration mismatches, and double-fetching issues. ## Core Features & Use Cases - Framework Reference Coverage: Provides detailed references for Nuxt 4 directory structure, configuration, routing, data fetching, modules, and deployment via Nitro. - Best Practices Guidance: Documents SSR-safe patterns, hydration mismatch prevention, and efficient data fetching with useFetch, useAsyncData, and createUseFetch factories. - Advanced Extensibility: Covers layers, lifecycle hooks, and publishable module authoring with Nuxt Kit for teams building reusable Nuxt infrastructure. - Use Case: When adding a server API route with authentication middleware to a Nuxt 4 app, consult the server routes and middleware references to place files correctly and avoid context errors. ## Quick Start Use the nuxt skill to show me how to fetch data from an API in a Nuxt 4 page without double-fetching during SSR.

Frequently Asked Questions about nuxt

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fetch data in Nuxt without double-fetching during SSR?▼

Use useFetch or useAsyncData instead of calling $fetch directly in setup. These composables fetch on the server, serialize the result into the payload, and hydrate on the client without a second request.

What changed in the Nuxt 4 directory structure?▼

Nuxt 4 sets the default srcDir to app/, so Vue code like components, composables, and pages lives under app/ while server/, shared/, and nuxt.config.ts stay at the root. The ~ and @ aliases now point to app/, and ~~ or @@ point to the project root.

How do I create a Nuxt module with Nuxt Kit?▼

Define a module with defineNuxtModule from @nuxt/kit, then use utilities like addComponent, addImports, addPlugin, and addServerHandler to register runtime assets. Use createResolver(import.meta.url) for path resolution and declare moduleDependencies for other modules.

Why does Nuxt show a hydration mismatch error?▼

Hydration mismatches occur when server-rendered HTML differs from the client render, often from browser APIs like localStorage, random values, or time-based output in setup. Use useCookie, useState, or ClientOnly to keep server and client output consistent.

Can Nuxt apps deploy to Cloudflare or other edge platforms?▼

Yes, Nuxt uses Nitro as its server engine, which supports platform presets. Set the preset in nuxt.config.ts or via NITRO_PRESET, for example cloudflare-pages, vercel, or netlify, then build and deploy the generated output.

When should I use runtimeConfig versus app.config in Nuxt?▼

Use runtimeConfig for secrets and values overridable by environment variables, with public keys exposed to the client. Use app.config for public build-time tokens like theme settings that support hot module replacement but not env overrides.