[{"data":1,"prerenderedAt":37},["ShallowReactive",2],{"55KlO5n6TM":3,"YBwVQjNS6N":31},{"data":4},{"id":5,"title":6,"slug":7,"slugs":8,"summary":10,"content":11,"categories":12,"thumbnail":27,"thumbnail_small":28,"created_at":29,"updated_at":30},2,"Internationalization (i18n) with Nuxt 3: A Step-by-Step Guide","internationalization-i18n-with-nuxt-3-a-step-by-step-guide",{"en":7,"fr":9},"mise-en-place-de-internationalisation-i18n-dans-un-projet-nuxt-3","Learn how to easily implement internationalization (i18n) in your Nuxt 3 project using the @nuxtjs/i18n module. This guide covers setting up multiple languages, managing custom routes, and optimizing the multilingual user experience.","Internationalization (i18n) is essential for web applications targeting a multilingual audience. Nuxt 3, with its advanced features, makes integrating i18n simple and effective. This article guides you through setting up i18n in a Nuxt 3 project using specific configurations and route and language files.\n\n## Prerequisites\n\nInstall Nuxt 3 and the i18n module using npm:\n\n```bash\nnpm install nuxt@latest @nuxtjs/i18n\n```\n\n## Basic Configuration\n\nWe will configure our Nuxt 3 project to support multiple languages by editing the nuxt.config.ts file. Here’s how to set up the i18n module:\n\n### Step 1: Import Routes\n\nCreate a `routes.json` file at the root of your project. This file will define your routes for each language. Example:\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### Step 2: Update nuxt.config.ts\n\nEdit your `nuxt.config.ts` file to include i18n configurations. Example:\n\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### Configuration Explanation\n\n- `locales`: Defines the supported languages.\n- `defaultLocale`: Sets the default language.\n- `strategy`: Uses `prefix_except_default` to prefix routes with language codes, except for the default language.\n- `detectBrowserLanguage`: Detects the user’s browser language and uses cookies to store preferences.\n- `langDir`: Specifies the directory for language files.\n- `lazy`: Enables lazy loading of language files.\n- `pages`: Uses routes defined in `routes.json`.\n- `customRoutes`: Allows flexible custom route management.\n\n## Creating Language Files\n\nFor each language, create a JSON file in the `lang/` directory. Example for French (lang/fr.json):\n\n```json\n{\n  \"welcome\": \"Bienvenue\",\n  \"about\": \"À propos de nous\",\n  \"contact\": \"Contactez-nous\"\n}\n\n```\n\nRepeat for `en.json` and `es.json`, translating keys accordingly.\n\n## Using Translations in Components\n\nUse translations in components with the `\u003Cnuxt-link>` component and the `$t` method. Example:\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## Browser Language Detection\n\nThe `detectBrowserLanguage` configuration automatically detects the user’s browser language and redirects to the appropriate version of your site. It ensures a consistent user experience by storing language preferences in cookies.\n\n## Managing Custom Routes\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.\nWith the customRoutes configuration, you can define language-specific routes in `routes.json`, allowing granular control of your application’s paths.\n\n\n## Conclusion\n\nInternationalization is a crucial step for making your application accessible to a global audience. Nuxt 3 and the `@nuxtjs/i18n` module simplify and streamline the i18n setup. By following this guide, you can configure your project to support multiple languages and deliver a seamless localized user experience.\n\nNuxt 3’s flexibility, combined with i18n’s robust features, makes it easy to manage translations, language detection, and redirections. Now you’re ready to make your Nuxt 3 app multilingual and reach a broader audience.\n\nFor more details and advanced configurations, consult the official Nuxt i18n documentation. Happy coding!",[13,20],{"id":14,"title":15,"slug":16,"slugs":17,"thumbnail":18,"thumbnail_small":19},6,"Nuxt JS","nuxt-js",{"en":16,"fr":16},"https://app.tomjamon.com/storage/10/conversions/01JER91M3YJXF7EHZR75J054MT-cover.webp","https://app.tomjamon.com/storage/10/conversions/01JER91M3YJXF7EHZR75J054MT-card.webp",{"id":21,"title":22,"slug":23,"slugs":24,"thumbnail":25,"thumbnail_small":26},3,"Laravel","laravel",{"en":23,"fr":23},"https://app.tomjamon.com/storage/12/conversions/01JER9785TAJYWQRE60EHP67C4-cover.webp","https://app.tomjamon.com/storage/12/conversions/01JER9785TAJYWQRE60EHP67C4-card.webp","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",{"data":32},[33,35],{"id":21,"title":22,"slug":23,"slugs":34,"thumbnail":25,"thumbnail_small":26},{"en":23,"fr":23},{"id":14,"title":15,"slug":16,"slugs":36,"thumbnail":18,"thumbnail_small":19},{"en":16,"fr":16},1792846769386]