Automates Nuxt.js project management including file-based routing, server-side rendering, and data fetching.
Install
mkdir -p .claude/skills/nuxt-raya46 && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/18641" && unzip -o skill.zip -d .claude/skills/nuxt-raya46 && rm skill.zipInstalls to .claude/skills/nuxt-raya46
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Nuxt full-stack Vue framework with SSR, auto-imports, and file-based routing. Use when working with Nuxt apps, server routes, useFetch, middleware, or hybrid rendering.Key capabilities
- →Manage Nuxt 3 configurations
- →Implement file-based routing and dynamic routes
- →Configure server routes with Nitro engine
- →Utilize `useFetch` and `useAsyncData` for data fetching
- →Set up multi-platform deployment with Nitro
How it works
The skill provides references and guidelines for Nuxt's core features, including directory structure, configuration, routing, data fetching, and deployment.
Inputs & outputs
When to use nuxt
- →Setting up file-based routes
- →Configuring server routes with Nitro
- →Implementing hybrid rendering
- →Managing runtime configuration
About this skill
Nuxt is a full-stack Vue framework that provides server-side rendering, file-based routing, auto-imports, and a powerful module system. It uses Nitro as its server engine for universal deployment across Node.js, serverless, and edge platforms.
The skill is based on Nuxt 3.x, generated at 2026-01-28.
Core
| Topic | Description | Reference |
|---|---|---|
| Directory Structure | Project folder structure, conventions, file organization | core-directory-structure |
| Configuration | nuxt.config.ts, app.config.ts, runtime config, environment variables | core-config |
| CLI Commands | Dev server, build, generate, preview, and utility commands | core-cli |
| Routing | File-based routing, dynamic routes, navigation, middleware, layouts | core-routing |
| Data Fetching | useFetch, useAsyncData, $fetch, caching, refresh | core-data-fetching |
| Modules | Creating and using Nuxt modules, Nuxt Kit utilities | core-modules |
| Deployment | Platform-agnostic deployment with Nitro, Vercel, Netlify, Cloudflare | core-deployment |
Features
| Topic | Description | Reference |
|---|---|---|
| Composables Auto-imports | Vue APIs, Nuxt composables, custom composables, utilities | features-composables |
| Components Auto-imports | Component naming, lazy loading, hydration strategies | features-components-autoimport |
| Built-in Components | NuxtLink, NuxtPage, NuxtLayout, ClientOnly, and more | features-components |
| State Management | useState composable, SSR-friendly state, Pinia integration | features-state |
| Server Routes | API routes, server middleware, Nitro server engine | features-server |
Rendering
| Topic | Description | Reference |
|---|---|---|
| Rendering Modes | Universal (SSR), client-side (SPA), hybrid rendering, route rules | rendering-modes |
Best Practices
| Topic | Description | Reference |
|---|---|---|
| Data Fetching Patterns | Efficient fetching, caching, parallel requests, error handling | best-practices-data-fetching |
| SSR & Hydration | Avoiding context leaks, hydration mismatches, composable patterns | best-practices-ssr |
Advanced
| Topic | Description | Reference |
|---|---|---|
| Layers | Extending applications with reusable layers | advanced-layers |
| Lifecycle Hooks | Build-time, runtime, and server hooks | advanced-hooks |
| Module Authoring | Creating publishable Nuxt modules with Nuxt Kit | advanced-module-authoring |
When not to use it
- →When working with Nuxt versions older than 3.x
Limitations
- →The skill is based on Nuxt 3.x
How it compares
This skill consolidates Nuxt 3.x specific features and best practices, offering a structured approach to building full-stack Vue applications with SSR and auto-imports, unlike generic Vue development.
Compared to similar skills
nuxt side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| nuxt (this skill) | 0 | 2mo | No flags | Intermediate |
| fullstack-developer | 0 | 4mo | Review | Advanced |
| development | 0 | 4mo | No flags | Advanced |
| dapp | 0 | 1mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by Raya46
View all by Raya46 →You might also like
fullstack-developer
daithang59
|
development
diegosouzapw
Comprehensive web, mobile, and backend development workflow bundling frontend, backend, full-stack, and mobile development skills for end-to-end application delivery.
dapp
salazarsebas
Stellar dApp / frontend development. Covers the JavaScript stellar-sdk (browser + Node.js), Freighter wallet, Stellar Wallets Kit (multi-wallet), Wallet Standard, smart accounts with passkeys, transaction building / signing / submission, Soroban contract invocation from the client, simulation, and e
skills
xDaijobu
How to work with TLS Watch - a TLS certificate monitoring application
workflow
vercel
Creates durable, resumable workflows using Vercel's Workflow DevKit. Use when building workflows that need to survive restarts, pause for external events, retry on failure, or coordinate multi-step operations over time. Triggers on mentions of "workflow", "durable functions", "resumable", "workflow devkit", or step-based orchestration.
ui
nuxt
Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.