How to config vue-i18n v-t directive with nuxt ?

[alanaasmaa]

I just cant figure it out.

Here is an example:

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import { createRenderer } from 'vue-server-renderer'
import { directive as t } from 'vue-i18n-extensions'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en',
  messages: {
    en: {
      hello: 'hello'
    },
    ja: {
      hello: 'こんにちは'
    }
  }
})
const renderer = createRenderer({ directives: { t } })

const app = new Vue({
  i18n,
  render (h) {
    // <p v-t="'hello'"></p>
    return h('p', {
      directives: [{
        name: 't', rawName: 'v-t',
        value: ('hello'), expression: "'hello'"
      }]
    })
  }
})

renderer.renderToString(app, (err, html) => {
  console.log(html) // output -> '<p data-server-rendered="true">hello</p>'
})

https://github.com/kazupon/vue-i18n-extensions

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

[cretueusebiu]

Why don't just use {{ $t('hello') }} ? It will render on the server side too.

[alanaasmaa]

@cretueusebiu I'm using now but i wanna PERFORMANCEEE http://kazupon.github.io/vue-i18n/en/directive.html#t-vs-v-t

[kazupon]

You can check the example. 👀
https://github.com/kazupon/vue-i18n/tree/dev/examples/ssr/nuxt

[kazupon]

And the compiler module.
https://github.com/kazupon/vue-i18n/tree/dev/examples/module/nuxt

[alanaasmaa]

@kazupon Thanks i got it to work now, how could i load i18n as a plugin ? Is it somehow possible ?

I would like to use vuex to define locale option. But i can't access store in config.

export default ({app, store}) => {
  app.$i18n = new VueI18n({
    locale: store.state.locale,
    fallbackLocale: 'en',
    messages: {
      'fi': require('~/locales/fi.json'),
      'en': require('~/locales/en.json')
    }
  })
}

EDIT: I can't keep the locale without refresh, and adonisjs sends to vuex the locale that is set from server

EDIT2: It seems i have to wire a module for i18n ? But how can i access i18n plugin in module.

My code goes like this =>

1. AdonisJS sends current locale to Nuxt in request
2. Vuex Store then saves lang from request on nuxtServerInit => https://nuxtjs.org/guide/vuex-store/#the-nuxtserverinit-action
3. i18n plugin loads and gets current locale from store => this is the place im stuck...

[paulmelero]

Accessing the store, @alanaasmaa:

export default ({ app, isClient, store }) => {
    app.i18n = new VueI18n({
        locale: store.state.locale,
        fallbackLocale: 'en',
        messages
    });
};

A little bit different than what the author of vue-i18n, @kazupon, suggests in:

kazupon/vue-i18n@44d4ebe#diff-e635ad7197be34317008bbbec46c7b7b

[lock]

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.