skills.rest
VKirill
VKirillCOMMUNITY
Explore all skills by this author →
GitHub

nuxt

Implement Nuxt 4 app structure, data fetching, and server routes.

15|2|Updated May 23, 2026
Search Tags:#ssr#ssg#nuxt#nuxt 4#usefetch#h3 routes#nitro preset
One-click install
npx skills add https://github.com/VKirill/antigravity-for-claude-code --skill nuxt-vkirill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nuxt
Source: https://github.com/VKirill/antigravity-for-claude-code/tree/main/skills/nuxt
Command: npx skills add https://github.com/VKirill/antigravity-for-claude-code --skill nuxt-vkirill

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill prevents common Nuxt 4 mistakes by guiding you to the correct app directory structure, data-fetching patterns, and server route setup so your project behaves reliably across SSR, hydration, and deployment.

Core Features & Use Cases

  • Nuxt 4 structure & routing: Use the app/ directory layout for pages/components/composables and file-based routing without breaking Nuxt’s auto-imports.
  • Data fetching without token-burning rework: Choose between useFetch, useAsyncData, and $fetch correctly to avoid double-fetch and hydration issues.
  • Nitro server routes & runtime config: Implement server/api/* handlers with h3 and useStorage, and configure runtimeConfig and routeRules safely for the target deployment.

Quick Start

Use the nuxt skill to generate a Nuxt 4 app scaffold that places pages under app/, fetches data with useFetch or useAsyncData correctly, and exposes a typed server API route under server/api with method suffixes.

Frequently Asked Questions about nuxt

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

FAQPage Schema
How do I structure a Nuxt 4 app directory for SSR and SSG without breaking auto-imports?▼

To build Nuxt 4 SSR/SSG apps safely, place your pages, components, and composables inside the `app/` directory to maintain file-based routing and auto-imports without breaking structure.

When should I use useFetch versus useAsyncData or $fetch in Nuxt 4?▼

Select `useFetch` or `useAsyncData` for SSR data fetching to avoid hydration mismatches, and reserve `$fetch` for client-side or server API calls to prevent double-fetch issues.

How do I configure Nitro server routes and h3 handlers in a Nuxt 4 project?▼

Configure Nitro server routes by defining `server/api/*` handlers with h3 and `useStorage`, using method suffixes to structure endpoints and applying `runtimeConfig` for deployment.

Why does my Nuxt 4 application have hydration mismatches and routing failures?▼

Hydration mismatches in Nuxt 4 typically occur from missing unique `useAsyncData` keys, incorrect `dedupe: 'cancel'` or `deep: false` defaults, and improper server-only composable usage.

Does Nuxt 4 support custom routeRules and Nitro presets for targeted deployments?▼

Nuxt 4 allows you to configure `routeRules` and Nitro presets to define rendering modes and deployment targets, ensuring SSR or SGG apps behave correctly across environments.

Related Skills

Explore More Software Engineering Skills→
danghungtb26danghungtb26
3

project-conventions

Enforce naming and folder structure conventions for React TypeScript admin templates.

Community
Basic
WalshingtonWalshington

tanstack-start

Build and deploy TanStack Start full-stack React apps on Cloudflare Workers.

Community
Advanced
travisjneumantravisjneuman
88

vue-development

Guide Vue.js 3 development with Composition API, TypeScript, Pinia, and Nuxt 3.

Community
Advanced
AmidVoshakulAmidVoshakul

sveltekit

Manage file-based routing, SSR, and API routes in SvelteKit applications.

Community
Advanced