[{"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,"Internationalization (i18n) with Nuxt 3: A Step-by-Step Guide","internationalization-i18n-with-nuxt-3-a-step-by-step-guide",{"en":27,"fr":29},"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!",[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,1792846769179]