Vue-i18n: ¿Support for SSR? (Server Side rendering)

[tobeorla]

¿Will SSR be supported?

vue & vue-i18n version

Vue: 2.0.1
vue-i18n: 4.6.0

How i18n is begin applied:

import VueI18n from 'vue-i18n'

Vue.use(VueI18n);

// set locale data
Vue.config.lang = i18nData.language;
Vue.config.fallbackLang = i18nData.language;
Vue.locale(i18nData.language, i18nData.phrases);

// Development options
if (process.env.NODE_ENV == "development") {
    // i18n: track missing translations
    Vue.config.missingHandler = function (lang, missingPhrase) {
        ApiService._call('/translation/add-phrase', {phrase: missingPhrase, locale: lang});
    };
}

Error message:

TypeError: Cannot read property 'dep' of undefined
at getDep (C:\app\node_modules\vue-i18n\dist\vue-i18n.common.js:199:26)
at Config (C:\app\node_modules\vue-i18n\dist\vue-i18n.common.js:212:13)
at plugin (C:\app\node_modules\vue-i18n\dist\vue-i18n.common.js:946:3)
at Function.Vue.use (C:\app\node_modules\vue\dist\vue.common.js:3140:14)
at Object. (vue_ssr_bundle:1576:16)
at webpack_require (vue_ssr_bundle:21:30)
at Object. (vue_ssr_bundle:58:14)
at webpack_require (vue_ssr_bundle:21:30)
at module.exports.Object.defineProperty.value (vue_ssr_bundle:41:18)
at Object. (vue_ssr_bundle:44:10)

[kazupon]

Thank you for your feedback.
I'll try to reproduction at Vue 2.0 & SSR.
Please wait :)

[ktquez]

Hello @tobeorla
Were you able to work with SSR?

---

Thanks @kazupon
I'm waiting!
something already in mind?

[kazupon]

Sorry, I'm very busy ...

[ktquez]

Ok @kazupon, no problem
I'll see what I can help adapt and contribute to the package.

Thank you for the work to maintain this excellent package.

[tobeorla]

@ktquez I temporary switched to phantomJS rendering while Vue's plugins still not support SSR.

[parallelo3301]

Trying to solve with #88

[kazupon]

@fandaa
Thanks for your PR.
I merged #88.
I think can avoid the TypeError: Cannot read property 'dep' of undefined error in Server-Side.

However, vue-i18n sitll can not support the SSR with bundleRenderer, because this pluing have global lang state.
See the detail:
https://github.com/vuejs/vue/tree/dev/packages/vue-server-renderer#externals-caveats

vue-i18 need to drastic changing of internal.

[chuanxd]

It is any way to avoid vue-i18n ERROR on SSR ?
How to implement i18n SSR in Vue js

[quentinus95]

I also need i18n with SSR, @kazupon any news on a potential support?

[smyth64]

SSR is very important!
It seems to work almost but I still get

error during render : /
ReferenceError: window is not defined

[smyth64]

well the error was actually because it wanted to output a warn because of a missing translation.

So at this part I get the error:
ReferenceError: window is not defined

function warn (msg, err) {
  if (window.console) {
    console.warn('[vue-i18n] ' + msg);
    if (err) {
      console.warn(err.stack);
    }
  }
}

This is because on the server side there is no console.
Is it possible to prevent this error and show the warning instead?

Would be awesome!

[kazupon]

You can check v6.0.0-alpha latest version.
see the release note:
https://github.com/kazupon/vue-i18n/releases/tag/v6.0.0-alpha.1

SSR example:
https://github.com/kazupon/vue-i18n/tree/dev/examples/ssr

[wilk]

Hi @kazupon ,

I'm still getting the same error: window is not defined

Further more, I'm in a different situation, but still SSR: locales are loaded asynchronously with an HTTP call (not just a JSON file but a real endpoint), so I put the Vue.locale() inside the router.beforeEach hook of the vue-router.
Doing this, it lets the route not to be resolved until the locales are loaded and thus the view can be rendered correctly.

router.beforeEach((to, from, next) => {
  if (store.state.locales === null) {
    store.dispatch('LOAD_LOCALES')
      .then(() => {
        next()
      })
      .catch(err => {
        console.error(err)
        next(err)
      })
  } else next()
})

LOAD_LOCALES performs an HTTP call and then calls Vue.locale on the response body.
I don't know if this could worsen the situation.

I'm using vue-i18n v6.0.0-alpha.3 and vue v2.2.2

Update 1

With vue-i18n v6.0.0-apha.3 I get the following error:

__WEBPACK_IMPORTED_MODULE_0_vue___default.a.locale is not a function

While with vue-i18n v5.0.3 I get the same error: window is not defined

Update 2

Well, it seems that with vue-i18n v6.0.0 alpha 3, the locale function throw that webpack error.
The problem is that I need to fetch the locales from an endpoint via HTTP and then use Vue.locale to upload the locales.
How can I do that?

[wilk]

Ok, it seems with version 6 the APIs have been changed.
As a temporary workaround:

// app.js
Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en-US',
  fallbackLang: 'en-US'
})

Vue.config.i18n = i18n

const app = new Vue({
  i18n
})

Then, in the LOAD_LOCALES action:

// action.js
  LOAD_LOCALES: ({commit}) => {
    return api.fetchLocales()
      .then(locales => {
        Vue.config.i18n.messages = locales

        commit('SET_LOCALES', {locales})
      })
  }

It works but I hope the new version of vue-i18n will provide a function to change messages dynamically.

[kazupon]

release v6.0.0
https://github.com/kazupon/vue-i18n/releases/tag/v6.0.0

[stbaer]

Nice 👍. How would you use it with nuxt.js though? Nuxt handles the app instantiation..

[kazupon]

Ok! I'll try to ready the Nuxt.js example later! 😉

[noprom]

Any progress on i18n with SSR?