Nuxt 4 core framework fundamentals: project setup, configuration, routing, SEO, error handling, and directory structure. Use when: creating new Nuxt 4 projects, configuring nuxt.config.ts, setting up routing and middleware, implementing SEO with useHead/useSeoMeta, handling errors with error.vue and NuxtErrorBoundary, or understanding Nuxt 4 directory structure. Keywords: Nuxt 4, nuxt.config.ts, file-based routing, pages directory, definePageMeta, useHead, useSeoMeta, error.vue, NuxtErrorBoundary, middleware, navigateTo, NuxtLink, app directory, runtime config
View on GitHubsecondsky/claude-skills
nuxt-v4
January 24, 2026
Select agents to install to:
npx add-skill https://github.com/secondsky/claude-skills/blob/main/plugins/nuxt-v4/skills/nuxt-core/SKILL.md -a claude-code --skill nuxt-coreInstallation paths:
.claude/skills/nuxt-core/# Nuxt 4 Core Fundamentals Project setup, configuration, routing, SEO, and error handling for Nuxt 4 applications. ## Quick Reference ### Version Requirements | Package | Minimum | Recommended | |---------|---------|-------------| | nuxt | 4.0.0 | 4.2.x | | vue | 3.5.0 | 3.5.x | | nitro | 2.10.0 | 2.12.x | | vite | 6.0.0 | 6.2.x | | typescript | 5.0.0 | 5.x | ### Key Commands ```bash # Create new project bunx nuxi@latest init my-app # Development bun run dev # Build for production bun run build # Preview production build bun run preview # Type checking bun run postinstall # Generates .nuxt directory bunx nuxi typecheck # Add a page/component/composable bunx nuxi add page about bunx nuxi add component MyButton bunx nuxi add composable useAuth ``` ## Directory Structure (Nuxt v4) ``` my-nuxt-app/ ├── app/ # Default srcDir in v4 │ ├── assets/ # Build-processed assets (CSS, images) │ ├── components/ # Auto-imported Vue components │ ├── composables/ # Auto-imported composables │ ├── layouts/ # Layout components │ ├── middleware/ # Route middleware │ ├── pages/ # File-based routing │ ├── plugins/ # Nuxt plugins │ ├── utils/ # Auto-imported utility functions │ ├── app.vue # Main app component │ ├── app.config.ts # App-level runtime config │ ├── error.vue # Error page component │ └── router.options.ts # Router configuration │ ├── server/ # Server-side code (Nitro) │ ├── api/ # API endpoints │ ├── middleware/ # Server middleware │ ├── plugins/ # Nitro plugins │ ├── routes/ # Server routes │ └── utils/ # Server utilities │ ├── public/ # Static assets (served from root) ├── shared/ # Shared code (app + server) ├── content/ # Nuxt Content files (if using) ├── layers/