Provides patterns and conventions for Nuxt 4+ projects, including server-side logic, routing, and configuration.
Install
mkdir -p .claude/skills/nuxt-lantechdev && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/14248" && unzip -o skill.zip -d .claude/skills/nuxt-lantechdev && rm skill.zipInstalls to .claude/skills/nuxt-lantechdev
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.
Use when working on Nuxt 4+ projects - provides server routes, file-based routing, middleware patterns, Nuxt-specific composables, and configuration with latest docs. Covers h3 v1 helpers (validation, WebSocket, SSE) and nitropack v2 patterns. Updated for Nuxt 4.3+.Key capabilities
- →Set up server routes and middleware
- →Configure file-based routing
- →Implement Nuxt middleware and plugins
- →Utilize Nuxt-specific composables
- →Configure Nuxt modules and auto-imports
- →Optimize Nuxt application performance
How it works
The skill provides progressive guidance for Nuxt 4+ projects, covering server routes, file-based routing, middleware, and performance optimization. It references specific documentation files based on the current task.
Inputs & outputs
When to use nuxt
- →Setting up server routes and middleware
- →Configuring Nuxt 4 modules and auto-imports
- →Optimizing performance in Nuxt applications
- →Implementing typed routing
About this skill
Nuxt 4+ Development
Progressive guidance for Nuxt 4+ projects (v4.3+) with latest patterns and conventions.
When to Use
Working with:
- Server routes (API endpoints, server middleware, server utils)
- File-based routing (pages, layouts, route groups)
- Nuxt middleware (route guards, navigation)
- Nuxt plugins (app extensions)
- Nuxt-specific features (auto-imports, layers, modules)
Available Guidance
Read specific files based on current work:
- references/server.md - API routes, server middleware, validation (Zod), WebSocket, SSE
- references/routing.md - File-based routing, route groups, typed router, definePage
- references/middleware-plugins.md - Route middleware, plugins, app lifecycle
- references/nuxt-composables.md - Nuxt composables (useRequestURL, useFetch, navigation)
- references/nuxt-components.md - NuxtLink, NuxtImg, NuxtTime (prefer over HTML elements)
- references/nuxt-config.md - Configuration, modules, auto-imports, layers
- references/nuxt-performance.md - Performance optimization, lazy loading, profiling tools
For Vue composables: See vue skill composables.md (VueUse, Composition API patterns)
For UI components: use nuxt-ui skill
For database/storage: use nuxthub skill
For content-driven sites: use nuxt-content skill
For creating modules: use nuxt-modules skill
For project scaffolding/CI: use ts-library skill
Loading Files
Consider loading these reference files based on your task:
- references/server.md - if creating API endpoints or server middleware
- references/routing.md - if setting up pages, layouts, or route groups
- references/nuxt-composables.md - if using Nuxt composables (useFetch, useRequestURL, etc.)
- references/middleware-plugins.md - if working with middleware or plugins
- references/nuxt-components.md - if using Nuxt components (NuxtLink, NuxtImg, etc.)
- references/nuxt-config.md - if editing nuxt.config.ts
- references/project-setup.md - if setting up CI/ESLint/build tools
- references/nuxt-performance.md - if optimizing performance, lazy loading, or profiling
DO NOT load all files at once. Load only what's relevant to your current task.
Nuxt 4 vs Older Versions
You are working with Nuxt 4+. Key differences:
| Old (Nuxt 2/3) | New (Nuxt 4) |
|---|---|
<Nuxt /> | <NuxtPage /> |
context.params | getRouterParam(event, 'name') |
window.origin | useRequestURL().origin |
| String routes | Typed router with route names |
| Separate layouts/ | Parent routes with <slot> |
If you're unsure about Nuxt 4 patterns, read the relevant guidance file first.
Latest Documentation
When to fetch latest docs:
- New Nuxt 4 features not covered here
- Module-specific configuration
- Breaking changes or deprecations
- Advanced use cases
Official sources:
- Nuxt: https://nuxt.com/docs
- h3 (server engine): https://v1.h3.dev/
- Nitro: https://nitro.build/
Token Efficiency
Main skill: ~300 tokens. Each sub-file: ~800-1500 tokens. Only load files relevant to current task.
When not to use it
- →When working with Nuxt 2 or Nuxt 3 projects
- →When needing Vue-specific composables (VueUse, Composition API patterns)
- →When needing UI components from `nuxt-ui`
Limitations
- →Guidance is specific to Nuxt 4+ (v4.3+)
- →Does not cover Vue composables (VueUse, Composition API patterns)
- →Does not cover UI components from `nuxt-ui`
How it compares
This skill focuses specifically on Nuxt 4+ patterns and conventions, including H3 v1 helpers and Nitropack v2, providing up-to-date guidance distinct from older Nuxt versions or generic web development advice.
Compared to similar skills
nuxt side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| nuxt (this skill) | 0 | 5mo | No flags | Intermediate |
| telegram-mini-app | 62 | 6mo | Review | Advanced |
| shopify-development | 12 | 6mo | Review | Intermediate |
| shopify-apps | 1 | 4mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
telegram-mini-app
davila7
Expert in building Telegram Mini Apps (TWA) - web apps that run inside Telegram with native-like experience. Covers the TON ecosystem, Telegram Web App API, payments, user authentication, and building viral mini apps that monetize. Use when: telegram mini app, TWA, telegram web app, TON app, mini app.
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"
shopify-apps
alinaqi
Shopify app development - Remix, Admin API, checkout extensions
ccxt-typescript
ccxt
CCXT cryptocurrency exchange library for TypeScript and JavaScript developers (Node.js and browser). Covers both REST API (standard) and WebSocket API (real-time). Helps install CCXT, connect to exchanges, fetch market data, place orders, stream live tickers/orderbooks, handle authentication, and manage errors. Use when working with crypto exchanges in TypeScript/JavaScript projects, trading bots, arbitrage systems, or portfolio management tools. Includes both REST and WebSocket examples.
fullstack-guardian
Jeffallan
Use when implementing features across frontend and backend, building APIs with UI, or creating end-to-end data flows. Invoke for feature implementation, API development, UI building, cross-stack work.
add-nodebridge-handler
neovateai
Use this skill when adding a new NodeBridge handler to src/nodeBridge.ts, including updating types in src/nodeBridge.types.ts and optionally testing with scripts/test-nodebridge.ts