nuxt
Créer des applications Nuxt 4+
Également disponible depuis: antfu
Les développeurs ont besoin de conseils sur les modèles Nuxt 4 pour les routes serveur, le routage basé sur les fichiers, le middleware, les plugins et la configuration. Cette compétence fournit une documentation de référence progressive avec les dernières conventions Nuxt et des exemples.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "nuxt". Créer une route serveur Nuxt 4 avec validation Zod
Résultat attendu:
- Créer le fichier de route: server/api/users.ts
- Importer Zod et définir le schéma d'entrée avec z.object()
- Utiliser readBody() ou getQuery() pour obtenir l'entrée
- Valider avec schema.parse() et retourner les erreurs de validation
- Retourner la réponse typée avec les codes de statut appropriés
Utilisation de "nuxt". Configurer un middleware d'authentification global
Résultat attendu:
- Créer middleware/auth.global.ts
- Utiliser defineNuxtRouteMiddleware() pour la sécurité des types
- Vérifier l'état d'authentification depuis le store ou la session
- Retourner navigateTo() pour les redirections (pas router.push())
- Exporter la fonction par défaut pour la compatibilité Nuxt 4
Audit de sécurité
SûrDocumentation-only skill containing markdown reference files for Nuxt 4+ development. All static findings are false positives from markdown code examples. No executable code, network calls, or credential access.
Facteurs de risque
🌐 Accès réseau (5)
📁 Accès au système de fichiers (1)
Score de qualité
Ce que vous pouvez construire
Créer des points de terminaison API
Construire des routes serveur avec validation, support WebSocket et SSE en utilisant les helpers h3 et les modèles Nitro.
Configurer le routage et le middleware
Configurer le routage basé sur les fichiers, les groupes de routes, le middleware d'authentification et les gardes de navigation.
Configurer les projets Nuxt
Initialiser nuxt.config.ts avec des modules, la configuration d'exécution, les auto-imports et les layers du projet.
Essayez ces prompts
Je dois créer une route serveur Nuxt 4 à /api/users qui retourne une liste d'utilisateurs avec validation. Charger references/server.md pour les modèles de validation h3 et la structure de route appropriée.
Je veux ajouter un middleware d'authentification qui redirige les utilisateurs non authentifiés. Charger references/middleware-plugins.md pour voir les modèles de middleware Nuxt 4 et les middleware globaux vs nommés.
Comment configurer runtimeConfig dans nuxt.config.ts pour accéder aux variables d'environnement côté serveur ? Afficher les modèles references/nuxt-config.md pour la configuration privée et publique.
Je dois faire une requête fetch dans ma page Nuxt. Charger references/nuxt-composables.md pour voir comment useFetch fonctionne et les considérations SSR appropriées.
Bonnes pratiques
- Utiliser des exports nommés pour le middleware de route au lieu des globaux sauf si vraiment global
- Retourner navigateTo() depuis le middleware, jamais utiliser router.push() directement
- Valider les entrées API avec un schéma Zod au niveau du gestionnaire de route
- Utiliser useFetch() avec des clés appropriées pour la récupération et le cache des données SSR
Éviter
- Utiliser Vue 3 router.push() au lieu de navigateTo() dans le middleware
- Sauter la validation des entrées sur les routes serveur
- Mélanger le code client et serveur uniquement sans utiliser correctement runtimeConfig
- Ne pas utiliser le suffixe .global.ts pour le middleware global
Foire aux questions
Quelle est la différence entre le middleware nommé et global dans Nuxt 4 ?
Comment valider les corps de requête API dans les routes serveur Nuxt ?
Quelle est la méthode appropriée pour gérer les variables d'environnement ?
Comment utiliser les composables Nuxt par rapport aux composables Vue ?
Quelle est la structure de projet recommandée pour Nuxt 4 ?
Comment créer des groupes de routes dans Nuxt 4 ?
Détails du développeur
Structure de fichiers