nuxt

Guides Nuxt application development across routing, data fetching, server routes, and configuration.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Nuxt applications span SSR rendering, file-based routing, server APIs, and layered configuration, and using the wrong primitive causes hydration mismatches, double data fetching, or leaked server state. This Skill routes each task to the correct Nuxt-owned API and reference so changes preserve SSR, hydration, and generated types. ## Core Features & Use Cases - Task routing to references: Directs work on data fetching, routing, middleware, plugins, server routes, components, or config to the matching in-depth reference file. - SSR-safe patterns: Enforces correct use of useFetch, useAsyncData, useState, and request-context forwarding to avoid duplicate fetches and hydration errors. - Ownership boundaries: Delegates module-specific work (Nuxt UI, Content, Image, SEO) and VueUse or Vue reactivity to the appropriate guidance instead of duplicating APIs. - Use Case: When adding an authenticated admin section, use this Skill to place route middleware in app/middleware, enforce authorization in server/api handlers, and configure route rules in nuxt.config.ts. ## Quick Start Ask the agent to add a new page with server-rendered data fetching and route middleware to your Nuxt application.

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 a Nuxt application without duplicate requests?▼

Use useFetch for a single HTTP endpoint or useAsyncData for custom async logic, since both transfer SSR results through the Nuxt payload. Calling $fetch directly during setup runs once on the server and again during hydration because its result is not transferred.

What is the difference between useFetch and useAsyncData in Nuxt?▼

useFetch wraps useAsyncData and $fetch for one HTTP endpoint, generating a stable key from the URL and options. Use useAsyncData for SDK calls, multiple requests, or when you need an explicit shared cache key.

Does Nuxt route middleware protect API endpoints?▼

No, route middleware only controls application navigation and does not protect an API. Authorization for server/api routes belongs in server middleware, a server utility, or the handler itself.

Why does my Nuxt app have hydration mismatch errors?▼

Hydration mismatches occur when server and client render different markup, often from non-serializable state or browser-only values during SSR. Fix them at the data or markup source rather than wrapping server-capable UI in ClientOnly.

When should I use a Nuxt plugin versus a composable?▼

Use a plugin for runtime injections, Vue plugins, and Nuxt runtime hooks that require initialization. Prefer an ordinary composable for application logic that does not need initialization or injection into useNuxtApp.