[{"data":1,"prerenderedAt":57},["ShallowReactive",2],{"jJqeeYLmHc":3,"YBwVQjNS6N":11,"F6ixt2Angr":22},{"data":4},{"id":5,"title":6,"slug":7,"slugs":8,"thumbnail":9,"thumbnail_small":10},6,"Nuxt JS","nuxt-js",{"en":7,"fr":7},"https://app.tomjamon.com/storage/10/conversions/01JER91M3YJXF7EHZR75J054MT-cover.webp","https://app.tomjamon.com/storage/10/conversions/01JER91M3YJXF7EHZR75J054MT-card.webp",{"data":12},[13,20],{"id":14,"title":15,"slug":16,"slugs":17,"thumbnail":18,"thumbnail_small":19},3,"Laravel","laravel",{"en":16,"fr":16},"https://app.tomjamon.com/storage/12/conversions/01JER9785TAJYWQRE60EHP67C4-cover.webp","https://app.tomjamon.com/storage/12/conversions/01JER9785TAJYWQRE60EHP67C4-card.webp",{"id":5,"title":6,"slug":7,"slugs":21,"thumbnail":9,"thumbnail_small":10},{"en":7,"fr":7},{"data":23,"links":41,"meta":44},[24],{"id":25,"title":26,"slug":27,"slugs":28,"summary":30,"content":31,"categories":32,"thumbnail":37,"thumbnail_small":38,"created_at":39,"updated_at":40},2,"Mise en place de l'internationalisation (i18n) dans un projet Nuxt 3","mise-en-place-de-internationalisation-i18n-dans-un-projet-nuxt-3",{"en":29,"fr":27},"internationalization-i18n-with-nuxt-3-a-step-by-step-guide","Apprenez à intégrer facilement l’internationalisation (i18n) dans votre projet Nuxt 3 grâce au module @nuxtjs/i18n. Ce guide détaille les étapes pour configurer plusieurs langues, gérer des routes personnalisées et optimiser l’expérience utilisateur multilingue.","L'internationalisation (i18n) est essentielle pour les applications web visant une audience multilingue. Nuxt 3, avec ses fonctionnalités avancées, rend l'intégration d'i18n simple et efficace. Cet article vous guide à travers la mise en place d'i18n dans un projet Nuxt 3, en utilisant des configurations spécifiques et des fichiers de routes et de langues.\n\n## Prérequis\n\nVous pouvez installer Nuxt 3 et le module i18n en utilisant npm :\n\n```bash\nnpm install nuxt@latest @nuxtjs/i18n\n```\n\n## Configuration de base\n\nNous allons configurer notre projet Nuxt 3 pour supporter plusieurs langues en modifiant le fichier `nuxt.config.ts`. Voici comment configurer le module i18n :\n\n### Étape 1 : Importer les routes\n\nCréez un fichier `routes.json` à la racine de votre projet. Ce fichier contiendra les définitions de vos routes spécifiques à chaque langue. Voici un exemple de fichier `routes.json` :\n\n```json\n{\n    \"about\": {\n        \"en\": \"/about\",\n        \"fr\": \"/a-propos\",\n        \"es\": \"/acerca-de\"\n    },\n    \"contact\": {\n        \"en\": \"/contact\",\n        \"fr\": \"/contact\",\n        \"es\": \"/contacto\"\n    }\n}\n```\n\n### Étape 2 : Modifier `nuxt.config.ts`\n\nModifiez votre fichier `nuxt.config.ts` pour inclure la configuration i18n. Voici un exemple de configuration :\n\n```tsx\nimport routes from './routes.json'\n\nexport default defineNuxtConfig({\n  modules: [\n    '@nuxtjs/i18n',\n  ],\n  i18n: {\n    locales: [\n      { code: 'en', label: 'English', iso: 'en-US', file: 'en.json' },\n      { code: 'fr', label: 'Français', iso: 'fr-FR', file: 'fr.json' },\n      { code: 'es', label: 'Español', iso: 'es-ES', file: 'es.json' },\n    ],\n    defaultLocale: 'fr',\n    strategy: 'prefix_except_default',\n    detectBrowserLanguage: {\n      useCookie: true,\n      cookieKey: 'i18n_redirected_' + process.env.NODE_ENV,\n      alwaysRedirect: true,\n      fallbackLocale: 'fr',\n    },\n    langDir: 'lang/',\n    lazy: true,\n    pages: routes,\n    customRoutes: 'config',\n  }\n})\n```\n\n### Explications des configurations\n\n- `locales` : Définit les langues supportées par votre application.\n- `defaultLocale` : Définit la langue par défaut.\n- `strategy` : Utilise `prefix_except_default` pour préfixer les routes avec les codes de langue, sauf pour la langue par défaut.\n- `detectBrowserLanguage` : Configue la détection de la langue du navigateur et l'utilisation des cookies pour stocker les préférences de langue.\n- `langDir` : Spécifie le répertoire où sont stockés les fichiers de langue.\n- `lazy` : Active le chargement paresseux des fichiers de langue.\n- `pages` : Utilise les routes définies dans `routes.json`.\n- `customRoutes` : Permet de configurer des routes personnalisées.\n\n## Création des fichiers de langue\n\nPour chaque langue, créez un fichier JSON dans le répertoire `lang/`. Par exemple, pour le français, créez `lang/fr.json` :\n\n```json\n{\n  \"welcome\": \"Bienvenue\",\n  \"about\": \"À propos de nous\",\n  \"contact\": \"Contactez-nous\"\n}\n\n```\n\nFaites de même pour `en.json` et `es.json` en traduisant les clés dans les langues respectives.\n\n## Utilisation des traductions dans les composants\n\nPour utiliser les traductions dans vos composants, utilisez le composant `\u003Cnuxt-link>` et la méthode `$t`. Par exemple :\n\n```html\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>{{ $t('welcome') }}\u003C/h1>\n    \u003CNuxtLinkLocale to=\"about\">{{ $t('about') }}r\u003C/NuxtLinkLocale>\n  \u003C/div>\n\u003C/template>\n```\n\n## Détection de la langue du navigateur\n\nLa configuration `detectBrowserLanguage` permet de détecter automatiquement la langue du navigateur de l'utilisateur et de rediriger vers la version appropriée de votre site. Cette configuration utilise des cookies pour stocker la langue préférée de l'utilisateur, assurant ainsi une expérience utilisateur cohérente.\n\n## Gestion des routes personnalisées\n\nGrâce à la configuration `customRoutes`, vous pouvez définir des routes spécifiques pour chaque langue dans votre fichier `routes.json`. Cela permet une gestion plus flexible et granulaire des chemins de votre application.\n\n## Conclusion\n\nL'internationalisation est une étape essentielle pour rendre votre application accessible à une audience mondiale. Avec Nuxt 3 et le module `@nuxtjs/i18n`, la mise en place d'i18n devient simple et efficace. En suivant les étapes décrites dans cet article, vous pouvez configurer votre projet pour supporter plusieurs langues et offrir une expérience utilisateur fluide et locale.\n\nLa flexibilité de Nuxt 3 combinée aux puissantes fonctionnalités d'i18n vous permet de gérer facilement les traductions, les détections de langue et les redirections. Maintenant, vous êtes prêt à rendre votre application Nuxt 3 multilingue et à atteindre un public plus large.\n\nN'hésitez pas à consulter la documentation officielle de Nuxt i18n pour plus de détails et de configurations avancées. Bon codage !",[33,35],{"id":5,"title":6,"slug":7,"slugs":34,"thumbnail":9,"thumbnail_small":10},{"en":7,"fr":7},{"id":14,"title":15,"slug":16,"slugs":36,"thumbnail":18,"thumbnail_small":19},{"en":16,"fr":16},"https://app.tomjamon.com/storage/6/conversions/01JENYFEHS5X3VQQ75A54QCS25-cover.webp","https://app.tomjamon.com/storage/6/conversions/01JENYFEHS5X3VQQ75A54QCS25-card.webp","2024-12-09T14:51:50.000000Z","2024-12-11T15:27:38.000000Z",{"first":42,"last":42,"prev":43,"next":43},"https://app.tomjamon.com/api/posts?page=1",null,{"current_page":45,"from":45,"last_page":45,"links":46,"path":55,"per_page":56,"to":45,"total":45},1,[47,50,53],{"url":43,"label":48,"page":43,"active":49},"« Previous",false,{"url":42,"label":51,"page":45,"active":52},"1",true,{"url":43,"label":54,"page":43,"active":49},"Next »","https://app.tomjamon.com/api/posts",9,1792846768143]