Nuxt.js: Recommended setup for i18n?

Created on 14 Aug 2017 · 9Comments · Source: nuxt/nuxt.js

There are several Vue libraries available for i18n, but which one provides the most seamless experience with Nuxt?

Also, will the example be revised for the upcoming release? Current one fails to specify <html lang="fr"> attribute, which is required for the browser to assign correct quotation marks and date format for example.

_{This question is available on Nuxt.js community (#c1215)}

example question

Source

luminarious

Most helpful comment

There is also a plugin called nuxt-i18n now!

manniL on 9 Mar 2018

👍3

All 9 comments

I'm also struggling with my project and integrating i18n, the examples used in https://nuxtjs.org/examples/i18n/ aren't working for me..

noudadrichem on 16 Aug 2017

👍2

Not an expert on i18n but also interested in different ways of going about this.

For my current project I decided to stick with vue-i18n as seen in the nuxt i18n example, I also use this library in the api, server side to respond with localized messages. This library does not have any fancy pluralization support, but I think heaving unique message strings for every language is better anyway.

The html lang attribute can be changed using nuxt.config.js, or inside a page or layout file with:

<script>
  export default {
    head () {
      return {
        title: this.$t('global.myLocalizedPageName') + ' | ' + this.$store.state.site.name,
    htmlAttrs: {
          lang: this.$store.state.locale
        }
      }
    }
  }
</script>

In my current setup nuxt serves two domains, domain.nl and domain.com and the default locale is determined based on the users preference, then the requested domain. I have localized directories inside the pages directory. For instance /pages/profiel for Dutch and /pages/profile for English. inside the "profiel" directory I have this:

<script>
  import Index from '~/pages/profile/index'
  export default Index
</script>

This way I have only a single page to maintain for the profile page (I don't want to prefix my urls with /en, /nl, etc). However this might not be the best way to go about localized urls. For instance, nuxt ssr renders only for a single language and has to switch language at run-time, causing a short flicker. So running two instances is probably the only way to solve it.

arenddeboer on 21 Aug 2017

👍2

@luminarious Hello there, I use htmlAttrs for setting , its work for me.

  head () {
    return {
      meta: [
         /* meta propety */
      ],
      htmlAttrs: {
        lang: 'fr'
      }
    }
  }

myread02 on 21 Aug 2017

If anybody has an issue with the i18n example starting, change the following:

In pages/about.vue change import About from '~/pages/_lang/about' to import About from '@/pages/_lang/about'.

In pages/index.vue change import About from '~/pages/_lang/index' to import index from '@/pages/_lang/index'.

MariuszDabrowski on 22 Aug 2017

I fixed it by just exporting the new VueI18n instance with locale and messages like so:

export default new VueI18n({
  locale: 'en',
  messages: { en }
})

The { en } here is my own object with required JSON data for my own project. 🤓

noudadrichem on 22 Aug 2017

Since you seem to be using vue-i18n, and all doing it based on the example, have you guys experienced #1535 ?

qm3ster on 31 Aug 2017

I decided to switch from nuxt to regular "bare metal" vue ssr (to have more control over vue-router) using the hackernews example, but experienced this issue on both setups.

I fixed this by making sure the "browser" i18n instance has the same locale as the to be hydrated store locale: (in the hackernews example this is file src/entry-client.js)

if (window.__INITIAL_STATE__) {
  app.$i18n.locale = window.__INITIAL_STATE__.locale
  store.replaceState(window.__INITIAL_STATE__)
}

This is similar to the nuxt version found in nuxt.js/lib/app/index.js:

<% if (store) { %>
  if (process.browser) {
    // Replace store state after calling plugins
    if (window.__NUXT__ && window.__NUXT__.state) {
      store.replaceState(window.__NUXT__.state)
    }
  }

If vueI18n.locale is different than the rendered version, this will show on hydration, so make sure to change it before the call to store.replaceState

arenddeboer on 1 Sep 2017

❤2

There is also a plugin called nuxt-i18n now!

manniL on 9 Mar 2018

👍3

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.