Static GitHub Issues

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

prev: Why do we get errors with server side libraries missing?
next: how can i rehydrate vuex store in nuxt (without plugins) ?

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

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1641">#c1641</a>)</em></sub></div>