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>