What module to use for i18n with nuxt 3?

[n4an]

What module to use for i18n with nuxt 3 And how to configure

[urbgimtam]

I'm searching for the same thing. I've found https://github.com/intlify/nuxt3 which seems to be used to connect both... But I haven't tried it yet.

[brolnickij]

@urbgimtam https://github.com/intlify/nuxt3/issues/44#issuecomment-1061605139

[lessborders]

https://github.com/intlify/nuxt3 works but without the automatic localized routes

[rchl]

The work on Nuxt-3/Bridge compatible version is ongoing on the next branch. See the readme at https://github.com/nuxt-community/i18n-module/tree/next

https://github.com/intlify/nuxt3 is a minimal module that provides a way to use vue-i18n without any extra features provided by this module.

[raphmarot]

Is vueI18nLoader supported yet by next/edge version?

[copostic]

https://github.com/intlify/nuxt3 works but without the automatic localized routes

Can you tell me more about it ? Because I cannot find a way to have the localized routes with @intlify/nuxt3...

[urbgimtam]

I've found this production template of nuxt3 which is using intlify. Haven't been able to test it, though. https://github.com/productdevbook/oku-nuxt3-template If someone succeeds in using it, please let us know in the comments.

[Skyost]

Hey guys.

I've created a little module for one of my project (this website) which allows to have localized routes using @intlify/nuxt3. Here's a detailed guide on how to implement it.

Disclaimer

I know it's not the perfect solution, but at least it's easy to implement, and you can perfectly adapt it according to your needs. Also, I can't share my repo source code with you because it belongs to a closed source project.

1. Install @intlify/nuxt3

If you haven't installed it, then follow the instructions here. Create a locales folder in your app root directory. It should contain your locale JSON files, and a availableLocales.ts file containing a list of your locales.

For instance, this is my locales folder structure.

Click to show

locales/
├── availableLocales.ts
├── en.json
└── fr.json

And this is the content of my availableLocales.ts file.

Click to show

export default [
  'en', 'fr'
]

Don't forget to configure @intlify/nuxt3 in your nuxt.config.ts ! Here's what I did.

Click to show

import availableLocales from './locales/availableLocales'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  // Other Nuxt config parameters.

  intlify: {
    vueI18n: {
      locale: availableLocales[0],
      fallbackLocale: availableLocales[0],
      availableLocales,
      sync: true
    }
  }

  // ...
});

2. Install other required dependencies

We'll only need @nuxt/kit. Run npm install @nuxt/kit to install it.

3. Create the module

Create a new modules directory inside the root folder of your app and add a generate-locale-routes folder inside of it. Then create three files :

1. generate-locale-routes/index.ts : It will contain our module code.
2. generate-locale-routes/plugin.ts : This plugin will allow us to configure the middleware that injects the route locale into vue-i18n.
3. generate-locale-routes/redirect.vue : This page will be our app root and will redirect users according to their browser locale.

Here's my modules folder structure.

Click to show

modules/
└── generate-locale-routes/
         ├── index.ts
         ├── plugin.ts
         └── redirect.vue

Now, put the following content inside of generate-locale-routes/index.ts.

Click to show

import { defineNuxtModule, extendPages, addPlugin, createResolver } from '@nuxt/kit'
import { NuxtPage } from '@nuxt/schema'

export default defineNuxtModule({
  meta: {
    name: 'generate-locale-routes',
    version: '0.0.1',
    configKey: 'localRoutesGenerator',
    compatibility: { nuxt: '^3.0.0' }
  },
  defaults: {
    availableLocales: ['en']
  },
  setup: (options) => {
    const resolver = createResolver(import.meta.url)

    function extendPagesHook (pages: NuxtPage[]) {
      const result: NuxtPage[] = []
      for (const page of pages) {
        for (const locale of options.availableLocales) {
          result.push({
            name: `${locale}-${page.name}`,
            path: `/${locale}${page.path}`,
            file: page.file
          })
        }
      }
      result.push({
        name: 'locale-redirect',
        path: '/',
        file: resolver.resolve('./redirect.vue')
      })
      pages.splice(0, pages.length)
      pages.push(...result)
    }

    extendPages(extendPagesHook)
    addPlugin({ src: resolver.resolve('./plugin.ts') })
  }
})

Then, put the following content inside of generate-locale-routes/plugin.ts.

Click to show

import { addRouteMiddleware, defineNuxtPlugin, useNuxtApp } from '#app'

export default defineNuxtPlugin(() => {
  addRouteMiddleware('change-vue-locale', (to) => {
    let path = to.path
    if (path.startsWith('/')) {
      path = path.substring(1)
    }
    const routeParts = path.split('/')
    if (routeParts.length < 1) {
      return
    }
    const { vueApp } = useNuxtApp()
    const routeLocale = routeParts[0]
    if (vueApp.config.globalProperties.$i18n.availableLocales.includes(routeLocale)) {
      vueApp.config.globalProperties.$i18n.locale = routeLocale
    }
  }, { global: true })
})

Finally, put the following content inside of generate-locale-routes/redirect.vue.

Click to show

<template>
  <p>
    Redirecting you to the correct website language according to your browser settings,
    please wait or click <nuxt-link :to="`/${locale}/`">here</nuxt-link> if you're not being redirected…
  </p>
</template>

<script>
import availableLocales from '../../locales/availableLocales'

export default {
  name: 'LocaleRedirect',
  head: {
    title: 'Redirecting'
  },
  computed: {
    locale () {
      let language = typeof navigator === 'undefined' ? availableLocales[0] : navigator.language || navigator.browserLanguage
      if (language.includes('-')) {
        language = language.split('-')[0]
      }
      return availableLocales.includes(language) ? language : availableLocales[0]
    }
  },
  mounted () {
    this.$router.push(`/${this.locale}/`)
  }
}
</script>

4. Add the module to nuxt.config.ts

You should now add the generate-locale-routes module to your nuxt.config.ts file.

Click to show

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  // Other Nuxt config parameters.

  modules: [
    // Other modules.
    '@intlify/nuxt3',
    './modules/generate-locale-routes'
  ],

  localRoutesGenerator: {
    availableLocales
  },

  // ...
});

And I think we're good :wink:

[kazupon]

@nuxtjs/i18n for Nuxt3 has been already released v8 beta version. Thank you!