Maison

Skill

Développement Web

nuxt

antfu/skills

Développez des applications Vue « full-stack » avec Nuxt 4 : découvrez le SSR, le routage basé sur les fichiers, les importations automatiques, les routes serveur et le déploiement.

...Développer tout

Heure mise à jour 6 septembre 2026

# deployment # vue # ssr # nuxt # auto imports # file based routing # nitro # server routes

Nuxt est un framework Vue « full-stack » qui offre un rendu côté serveur, un routage basé sur les fichiers, des importations automatiques et un puissant système de modules. Il utilise Nitro comme moteur serveur pour un déploiement universel sur Node.js, les environnements « serverless » et les plateformes « edge ».

Cette compétence s'appuie sur Nuxt 4.x, générée le 22 juin 2026.

Nuxt Remarque 4 : la valeur par défaut srcDir est app/ — Le code de l’application Vue (app.vue, components/, composables/, pages/, etc.) se trouve dans le répertoire app/, tandis que server/, shared/, public/, modules/, layers/ et nuxt.config.ts restent à la racine du projet. Les ~/@ alias pointent désormais vers app/; utilisez ~~/@@ pour la racine.

Thème

Sujet	Description	Référence
Structure des répertoires	Nuxt 4 `app/` srcDir, `shared/`, alias, conventions	structure-du-répertoire-principal
Configuration	nuxt.config.ts, app.config.ts, alias, compatibilityVersion, experimental	configuration-de-base
Commandes CLI	Commandes du serveur de développement, de compilation, de génération, d’aperçu et utilitaires	core-cli
Routage	Routage basé sur des fichiers, routes dynamiques, vues nommées, propriétés de mise en page, middleware	core-routing
Récupération de données	useFetch, useAsyncData, $fetch, fabriques createUseFetch, mise en cache	core-data-fetching
Modules	Création et utilisation des modules « Nuxt », utilitaires du kit « Nuxt »	modules-de-base
Déploiement	Déploiement indépendant de la plateforme avec Nitro, Vercel, Netlify, Cloudflare	déploiement-de-base

Fonctionnalités

Thème	Description	Référence
Composables : importations automatiques	Composables Vue/Nuxt, composables personnalisés, `shared/`, useAnnouncer	fonctionnalités-composables
Importations automatiques de composants	Nommage des composants, chargement différé, stratégies d'hydratation	fonctionnalités-composants-importation-automatique
Composants intégrés	NuxtLink, NuxtPage, NuxtLayout, NuxtAnnouncer, ClientOnly, et bien d’autres encore	fonctionnalités-composants
Gestion de l'état	Composable useState, état compatible avec le SSR, intégration de Pinia	fonctionnalités-état
Routes serveur	Routes API, middleware serveur, moteur serveur Nitro	fonctionnalités-serveur

Rendu

Thème	Description	Référence
Modes de rendu	Rendu universel (SSR), côté client (SPA), rendu hybride, règles de routage	modes-de-rendu

Meilleures pratiques

Rubrique	Description	Référence
Modèles de récupération des données	Récupération efficace, mise en cache, requêtes parallèles, gestion des erreurs	meilleures-pratiques-récupération-des-données
SSR et hydratation	Éviter les fuites de contexte, les incohérences d’hydratation, modèles composables	meilleures-pratiques-ssr

Avancé

Sujet	Description	Référence
Couches	Extension des applications à l’aide de couches réutilisables	couches-avancées
Crochets de cycle de vie	Hooks de compilation, d'exécution et de serveur	hooks-avancés
Création de modules	Modules publiables avec le kit d'Nuxt, composables indexés, dépendances	création-avancée-de-modules

Voir sur GitHub

---
name: nuxt
description: Build full-stack Vue applications with Nuxt 4, covering SSR, file-based routing, auto-imports, server routes, and deployment.
---

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 `srcDir` is `app/` — Vue app code (`app.vue`, `components/`, `composables/`, `pages/`, etc.) lives under `app/`, while `server/`, `shared/`, `public/`, `modules/`, `layers/` and `nuxt.config.ts` stay at the project root. The `~`/`@` aliases now point at `app/`; use `~~`/`@@` for the root.

## Core

| Topic | Description | Reference |
|-------|-------------|-----------|
| Directory Structure | Nuxt 4 `app/` srcDir, `shared/`, aliases, conventions | [core-directory-structure](references/core-directory-structure.md) |
| Configuration | nuxt.config.ts, app.config.ts, aliases, compatibilityVersion, experimental | [core-config](references/core-config.md) |
| CLI Commands | Dev server, build, generate, preview, and utility commands | [core-cli](references/core-cli.md) |
| Routing | File-based routing, dynamic routes, named views, layout props, middleware | [core-routing](references/core-routing.md) |
| Data Fetching | useFetch, useAsyncData, $fetch, createUseFetch factories, caching | [core-data-fetching](references/core-data-fetching.md) |
| Modules | Creating and using Nuxt modules, Nuxt Kit utilities | [core-modules](references/core-modules.md) |
| Deployment | Platform-agnostic deployment with Nitro, Vercel, Netlify, Cloudflare | [core-deployment](references/core-deployment.md) |

## Features

| Topic | Description | Reference |
|-------|-------------|-----------|
| Composables Auto-imports | Vue/Nuxt composables, custom composables, `shared/`, useAnnouncer | [features-composables](references/features-composables.md) |
| Components Auto-imports | Component naming, lazy loading, hydration strategies | [features-components-autoimport](references/features-components-autoimport.md) |
| Built-in Components | NuxtLink, NuxtPage, NuxtLayout, NuxtAnnouncer, ClientOnly, and more | [features-components](references/features-components.md) |
| State Management | useState composable, SSR-friendly state, Pinia integration | [features-state](references/features-state.md) |
| Server Routes | API routes, server middleware, Nitro server engine | [features-server](references/features-server.md) |

## Rendering

| Topic | Description | Reference |
|-------|-------------|-----------|
| Rendering Modes | Universal (SSR), client-side (SPA), hybrid rendering, route rules | [rendering-modes](references/rendering-modes.md) |

## Best Practices

| Topic | Description | Reference |
|-------|-------------|-----------|
| Data Fetching Patterns | Efficient fetching, caching, parallel requests, error handling | [best-practices-data-fetching](references/best-practices-data-fetching.md) |
| SSR & Hydration | Avoiding context leaks, hydration mismatches, composable patterns | [best-practices-ssr](references/best-practices-ssr.md) |

## Advanced

| Topic | Description | Reference |
|-------|-------------|-----------|
| Layers | Extending applications with reusable layers | [advanced-layers](references/advanced-layers.md) |
| Lifecycle Hooks | Build-time, runtime, and server hooks | [advanced-hooks](references/advanced-hooks.md) |
| Module Authoring | Publishable modules with Nuxt Kit, keyed composables, dependencies | [advanced-module-authoring](references/advanced-module-authoring.md) |