Nuxt offers a full-stack Vue environment with server-side rendering, file-based routing, and automated composable imports.
Install
mkdir -p .claude/skills/nuxt && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/1092" && unzip -o skill.zip -d .claude/skills/nuxt && rm skill.zipInstalls to .claude/skills/nuxt
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
- →Configure server-side rendering and hybrid rendering modes
- →Manage file-based routing and middleware
- →Implement auto-imports for components and composables
- →Deploy to Node.js, serverless, or edge platforms using Nitro
- →Extend applications using reusable layers and modules
How it works
The framework utilizes a specific directory structure where application code resides in the app/ folder and server logic is handled by the Nitro engine. It automatically resolves imports and applies routing based on file placement.
Inputs & outputs
When to use nuxt
- →Setting up SSR Vue projects
- →Configuring server routes and middleware
- →Managing runtime environment variables
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 4.x, generated at 2026-06-22.
Nuxt 4 note: the default
srcDirisapp/— Vue app code (app.vue,components/,composables/,pages/, etc.) lives underapp/, whileserver/,shared/,public/,modules/,layers/andnuxt.config.tsstay at the project root. The~/@aliases now point atapp/; use~~/@@for the root.
Core
| Topic | Description | Reference |
|---|---|---|
| Directory Structure | Nuxt 4 app/ srcDir, shared/, aliases, conventions | core-directory-structure |
| Configuration | nuxt.config.ts, app.config.ts, aliases, compatibilityVersion, experimental | core-config |
| CLI Commands | Dev server, build, generate, preview, and utility commands | core-cli |
| Routing | File-based routing, dynamic routes, named views, layout props, middleware | core-routing |
| Data Fetching | useFetch, useAsyncData, $fetch, createUseFetch factories, caching | 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/Nuxt composables, custom composables, shared/, useAnnouncer | features-composables |
| Components Auto-imports | Component naming, lazy loading, hydration strategies | features-components-autoimport |
| Built-in Components | NuxtLink, NuxtPage, NuxtLayout, NuxtAnnouncer, 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 | Publishable modules with Nuxt Kit, keyed composables, dependencies | advanced-module-authoring |
When not to use it
- →When building non-Vue based applications
- →When the project requires a legacy Nuxt version prior to 4.x
Prerequisites
Limitations
- →Strict directory structure requirements for Nuxt 4.x
- →Requires specific alias usage for root versus app directory access
How it compares
It provides a structured, convention-based environment for full-stack Vue development that handles server-side rendering and auto-imports automatically, unlike manual configuration of a standard Vue SPA.
Compared to similar skills
nuxt side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| nuxt (this skill) | 19 | 6mo | No flags | Intermediate |
| shopify-development | 12 | 6mo | Review | Intermediate |
| tanstack-query | 7 | 2mo | No flags | Intermediate |
| telegram-dev | 2 | 8mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by antfu
View all by antfu →You might also like
shopify-development
davila7
Build Shopify apps, extensions, themes using GraphQL Admin API, Shopify CLI, Polaris UI, and Liquid. TRIGGER: "shopify", "shopify app", "checkout extension", "admin extension", "POS extension", "shopify theme", "liquid template", "polaris", "shopify graphql", "shopify webhook", "shopify billing", "app subscription", "metafields", "shopify functions"
tanstack-query
exceptionless
Data fetching and caching with TanStack Query in Svelte. Query patterns, mutations, cache invalidation, WebSocket-driven updates, and optimistic updates. Keywords: createQuery, createMutation, TanStack Query, query keys, cache invalidation, optimistic updates, refetch, stale time, @exceptionless/fetchclient, WebSocket
telegram-dev
2025Emma
Telegram 生态开发全栈指南 - 涵盖 Bot API、Mini Apps (Web Apps)、MTProto 客户端开发。包括消息处理、支付、内联模式、Webhook、认证、存储、传感器 API 等完整开发资源。
yjs
EpicenterHQ
Yjs CRDT patterns, shared types, conflict resolution, and meta data structures. Use when building collaborative apps with Yjs, handling Y.Map/Y.Array/Y.Text, implementing drag-and-drop reordering, or optimizing document storage.
bun-development
davila7
Modern JavaScript/TypeScript development with Bun runtime. Covers package management, bundling, testing, and migration from Node.js. Use when working with Bun, optimizing JS/TS development speed, or migrating from Node.js to Bun.
shopify-apps
alinaqi
Shopify app development - Remix, Admin API, checkout extensions