Internationalisation

Documentation

Module Nuxt i18n

Module @nuxtjs/i18n

1. Installation

   npx nuxi@latest module add i18n

2. Configuration

   nuxt.config.ts

   ...
   i18n: {
       vueI18n: './i18n.config.ts',
       locales: ['en', 'fr'],
       defaultLocale: 'fr',
   },
   ...

3. Personnalisation i18n.config.ts

   i18n.config.ts

   export default defineI18nConfig(() => ({
       legacy: false,
       locale: 'fr',
       messages: {
           en: {
               welcome: 'Welcome'
           },
           fr: {
               welcome: 'Bienvenue'
           }
       }
   }))

Routes

1. Ajouter des Routes

   nuxt.config.ts

   ...
   i18n: {
       vueI18n: './i18n.config.ts',
       locales: ['en', 'fr'],
       defaultLocale: 'fr',
       customRoutes: 'config',
           pages: {
               index: {
                   fr: '/',
                   en: '/'
               },
   },
   ...

2. Ajouter des routes dynamiques

   nuxt.config.ts

   ...
   i18n: {
       vueI18n: './i18n.config.ts',
       locales: ['en', 'fr'],
       defaultLocale: 'fr',
       customRoutes: 'config',
           pages: {
               index: {
                   fr: '/',
                   en: '/'
               },
               articles: {
                   fr: '/articles',
                   en: '/articles'
               },
               'articles-slug': {
                   fr: '/articles/[slug]',
                   en: '/articles/[slug]'
               }
   },
   ...