Nuxt.js: Internationalization with nuxt.js

[gary149]

Did someone made a multi-languages app? How did you manage the internationalization? plugin or just with an async call in the data function?

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

[Atinux]

Hi @gary149

This is planned to make an example when the middleware feature will be released.

[koddr]

Very need Nuxt.js multi-languages feature on the box 👍
Btw. It will have its own realization or a port of a plugin such as https://github.com/kazupon/vue-i18n

[Atinux]

The i18n example is out: https://github.com/nuxt/nuxt.js/tree/master/examples/i18n

Demo: http://i18n.nuxtjs.org/

As seen in #234, vue-i18n is not ready for the SSR, but with the nuxt example, anybody can create its own plugin for nuxt.js :)

[koddr]

@Atinux demo link is broken (502 An error occured with your deployment).

[Atinux]

@koddr it's fixed thank you for spotting it

[demyan1411]

Hello, is it right if I want to localize with html tags do this: div(v-html='$t("home.title")') ?

[Atinux]

Try to use a computed property instead @demyan1411

[demyan1411]

Can you please show how computed properties can help me.

And after npm run generate I haven't got html http://prnt.sc/espzpo
how can i get it?

[Atinux]

Actually i18n example does not work with nuxt generate @demyan1411

[dohomi]

Maybe its possible to make use of the new https://github.com/kazupon/vue-i18n/releases/tag/v6.0.0 It supports now SSR and might be a good fit into the NUXT ecosystem?

[Atinux]

I will try it soon @dohomi

[sudhir600]

@koddr
in i18n example, the language code is derived from local storage. Let's say my users have a drop-down to choose a language (note- I don't want to append anything in url like?locale=fr)
when language chosen, either i will save in LocalStorage or send to the server (PHP, saved there in session). But, I don't want 2nd option bcz i am dealing with 3rd party api's. so no own server there for sessions.

Now if my data is saved in LS, then how I will replace locale: store.state.locale, tolocale: localStorage.getItem('locale').

While middleware executes, there is no client right ?
so we can't access LS. then what is the alternate.
Please suggest.

[gitzhaochen]

@koddr i got the same problem , i want get locale from localstorage when reload page and fixed like this

export default ({ app, store }) => {
    // Set i18n instance on app
    // This way we can use it in middleware and pages asyncData/fetch
    let locale=''
    if(process.browser){
        locale=localStorage.tokenup_lang||navigator.language
    }
    app.i18n = new VueI18n({
        locale: locale || store.state.locale,
        fallbackLocale: 'zh',
        messages: {
            zh,
            en
        }
    })

    app.i18n.path = (link) => {
        if (app.i18n.locale === app.i18n.fallbackLocale) {
            return `/${link}`
        }

        return `/${app.i18n.locale}/${link}`
    }
}

[lock[bot]]

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.