Build & configuration (Nuxt / Tailwind / Locales)
Build & configuration (Nuxt / Tailwind / Locales)
Regard synthétique des réglages, thèmes, scripts et traductions — ce que vous pouvez changer et comment.
Maîtrisez la configuration du projet : runtime, thème visuel, scripts de build et traductions. Cette page vous guide rapidement vers les pages détaillées. Le fichier de configuration Tailwind a été migré vers TypeScript : tailwind.config.ts (voir notes sur les chemins de contenu et les points d’arrêt centralisés).
La section “Build & configuration” regroupe tout ce qui touche au fonctionnement de l’application en développement et en production : paramètres du framework, thème visuel (tokens), commandes de build, gestion des langues et ressources publiques. C’est utile pour adapter l’application à un environnement, ajuster l’apparence et maintenir les traductions sans surprises.
Capacités principales
Paramètres du framework
Contrôlez les options globales (méta, rendu côté client/serveur, serveur de dev, variables publiques). Utile pour activer/désactiver des comportements et exposer les URLs ou clés nécessaires à l’app. Notez que nuxt.config.ts contient désormais des flags et options supplémentaires (par ex. options de build/runtime) ainsi que la prise en charge d’un cache pour la documentation Swagger — vérifiez et documentez ces clés lors des modifications de configuration.
Thème & design tokens
Mettez à jour les couleurs et variables de thème centralisées. La configuration Tailwind se trouve désormais dans tailwind.config.ts (TypeScript). Les points d’arrêt sont centralisés dans lib/tailwindBreakpoints.ts — ce fichier exporte les breakpoints utilisés par tailwind.config.ts et le composable useBreakpoint.ts ; ajustez aussi les chemins de contenu définis dans tailwind.config.ts si vous ajoutez de nouveaux dossiers ou composants, et vérifiez le fichier assets/css/tailwind.css (imports et directives) si vous avez des personnalisations CSS. Permet d’adapter l’identité visuelle (branding) et d’avoir une source unique pour toutes les couleurs du site.
Scripts de build & dev
Démarrez le serveur de développement, lancez un build de production, prévisualisez la version générée ou exécutez des tâches post-installation. Permet des cycles rapides de développement et des déploiements reproductibles.
Localisation (i18n)
Ajoutez ou mettez à jour les traductions et configurez les langues disponibles. Indispensable pour afficher le contenu dans la langue adéquate et tester le comportement multilingue.
Ressources publiques
Gérez les fichiers accessibles publiquement (robots, images, fichiers statiques). Pratique pour contrôler l’indexation, assets marketing et fichiers servis directement au navigateur.
Variables de runtime
Ajustez les valeurs publiques utilisées côté client (URLs, flags, logos, intégrations). Elles rendent l’application adaptative selon l’environnement (dev, staging, prod). Le runtime peut maintenant contenir des options de cache (notamment pour la documentation Swagger) et des flags additionnels définis dans nuxt.config.ts — documentez ces clés et leurs valeurs par environnement.
Design rapide
Expérimentez les couleurs en direct et exportez des palettes prêtes à partager. Accélère les itérations visuelles sans casser les composants.
Gestion des scripts
Standardisez les commandes (dev, build, generate, preview, postinstall) pour l’équipe. Facilite l’onboarding et l’automatisation CI/CD.
Contrôle des accès linguistiques
Définissez la langue par défaut et la détection automatique. Améliore l’expérience utilisateur dès la première visite.
Flux de travail courant — résumé rapide
Modifier et tester la configuration
Ajustez les options publiques ou d’environnement, puis relancez le mode développement pour vérifier le comportement. Si vous modifiez des flags runtime ou les paramètres de cache (ex. cache Swagger), videz ou invalidez le cache concerné et redémarrez le serveur dev pour que les changements prennent effet.
Adapter le thème (tokens)
Changez les couleurs ou variables de thème centralisées, mettez à jour tailwind.config.ts et assets/css/tailwind.css si nécessaire, puis regénérez le CSS et contrôlez l’affichage.
Mettre à jour les traductions
Ajoutez/éditez les textes traduits, rechargez l’interface en mode dev et activez la détection de langue si nécessaire ; vérifiez aussi les textes manquants dans l’aperçu.
Gérer ressources publiques & build
Ajoutez ou mettez à jour des ressources publiques (robots, images), puis lancez la génération/preview avant déploiement.
Bonne pratique recommandée
Centralisez les variables partagées (URLs, flags, couleurs) et documentez les changements. Pour les couleurs, maintenez une palette unique pour éviter les variantes visuelles et faciliter les revues design. Si vous modifiez les points d’arrêt ou la configuration Tailwind, mettez à jour lib/tailwindBreakpoints.ts et tailwind.config.ts de concert — mettez à jour aussi le composable useBreakpoint.ts si vous modifiez la logique responsive côté JavaScript, et vérifiez également assets/css/tailwind.css si vous utilisez des imports ou directives personnalisés. Documentez également les nouveaux flags/runtime keys et les paramètres de cache (ex. Swagger) ajoutés à nuxt.config.ts pour chaque environnement.
Limites & précautions importantes
Les modifications de configuration runtime ou des tokens visuels peuvent nécessiter de relancer le serveur de développement ou de regénérer le CSS pour être prises en compte. La configuration Tailwind est maintenant en TypeScript : tailwind.config.ts — vérifiez les chemins “content” définis dans ce fichier (ils doivent inclure pages, components, composables, lib, etc.). Les breakpoints sont centralisés dans lib/tailwindBreakpoints.ts et sont importés par tailwind.config.ts pour générer les classes responsive ; le composable useBreakpoint.ts consomme les mêmes valeurs côté composant si vous avez besoin de logique responsive en JavaScript/Vue. Le fichier assets/css/tailwind.css a également été modifié : contrôlez les imports et directives (@layer, @apply, etc.) et regénérez le CSS après vos changements. Notez que nuxt.config.ts inclut désormais des options de cache (notamment pour Swagger) et des flags supplémentaires : pensez à invalider les caches appropriés (ou désactiver temporairement le cache) et à vérifier les en-têtes de cache lors des tests en staging/production. Les ressources publiques sont servies telles quelles : vérifiez l’indexation (robots) et le cache avant déploiement.
- Documentation détaillée : Configuration Nuxt & runtime
- Documentation détaillée : Tailwind & design tokens
- Documentation détaillée : Scripts NPM & processus de build
- Documentation détaillée : Localisation (i18n) et gestion des langues
- Documentation détaillée : Public & ressources statiques (robots, images)
Accéder aux pages détaillées
Chaque page détaille les étapes, conseils et vérifications à faire avant et après vos modifications (rebuild, caches, tests multilingues).