Localisation Vue.js & Nuxt
Organisez les fichiers de locale vue-i18n par module fonctionnel pour les grands projets. Plutôt qu'un seul locales/en.json contenant toutes les chaînes, divisez en fichiers séparés pour l'interface commune, l'authentification et le contenu du tableau de bord, et configurez le module nuxtjs/i18n pour charger chaque module de manière différée. Le chargement différé signifie que le navigateur d'un utilisateur francophone ne charge les chaînes françaises du tableau de bord que lorsqu'il navigue vers cette section, réduisant considérablement la charge utile initiale de la page. Cela facilite également l'attribution des tâches de traduction par domaine produit.
Nommez les clés de traduction par composant et intention : header.nav.pricing est plus maintenable que pricing_nav_link et survit à une restructuration sans briser les traductions. Évitez les clés avec une signification positionnelle ou numérique — elles se brisent dès que l'ordre ou le contenu change. Pour les chaînes qui incorporent des liens ou des spans formatés, utilisez l'interpolation de composants de vue-i18n dans le template avec la syntaxe de slot nommé plutôt que de diviser la phrase ou d'incorporer du HTML directement dans les valeurs de traduction.
Dans Nuxt 3, configurez le module nuxtjs/i18n dans nuxt.config.ts. Utilisez la stratégie prefix_except_default pour que votre locale par défaut ait des URLs propres et que les autres locales obtiennent un préfixe de langue. Définissez detectBrowserLanguage avec une stratégie de cookie pour mémoriser le choix de locale de l'utilisateur entre les sessions. Utilisez defineI18nRoute dans les pages pour restreindre des locales spécifiques sur les routes qui n'ont pas encore de traductions, et activez lazy: true pour activer les fichiers de locale à chargement différé.
Connectez votre dépôt GitHub, Bitbucket ou Azure Repos à Language Monster. Language Monster détecte automatiquement les fichiers de locale dans le répertoire configuré. Les chaînes modifiées dans votre locale source sont extraites, traduites avec le Glossaire et la Translation Memory appliqués, et repoussées vers une branche sous forme de pull request. La Language Hierarchy vous permet de définir l'anglais britannique comme locale parente et l'anglais australien comme enfant — l'enfant hérite de toutes les chaînes parentes et ne remplace que là où le contenu diffère réellement.
Activez le mode type-safe de vue-i18n en générant des définitions de types TypeScript à partir de votre fichier de locale source — cela donne une utilisation des clés de traduction vérifiée par type dans toute votre base de code et fait apparaître les clés manquantes au moment de la compilation. Les contrôles d'intégrité des espaces réservés de Language Monster vérifient que les paramètres nommés présents dans les chaînes source apparaissent dans chaque chaîne traduite avant que les fichiers ne soient validés dans votre dépôt.
En savoir plus Format yaml général