Extensions for vue-i18n
This library exports the following extensions:
- directive:
v-tcustom directive for server-side - module:
v-tcustom directive compiler module forvue-template-compilerorvue-loader(compilerModulesoption)
$ npm i --save-dev @intlify/vue-i18n-extensionsThis directive is v-t custom directive for server-side-rendering. You can specify it as directives option of createRenderer function.
The following example:
import Vue from 'vue' import VueI18n from 'vue-i18n' import { createRenderer } from 'vue-server-renderer' import { directive as t } from '@intlify/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>' })This module is v-t custom directive module for vue compiler. You can specify it as modules option of vue-template-compiler.
β οΈ NOTE: This extension is not isomorphic/universal codes. for Node.js environment only.
The following example that use compile function of vue-template-compiler:
import Vue from 'vue' import VueI18n from 'vue-i18n' import { compile } from 'vue-template-compiler' import { module } from '@intlify/vue-i18n-extensions' Vue.use(VueI18n) const i18n = new VueI18n({ locale: 'en', messages: { en: { hello: 'hello' }, ja: { hello: 'γγγ«γ‘γ―' } }, missing: (locale, key) => { console.log(`translation missing: locale=${locale}, key=${key}`) } }) const i18nModule = module(i18n) const { ast, render } = compile(`<p v-t="'hello'"></p>`, { modules: [i18nModule] }) console.log(ast.i18n) // output -> 'hello' console.log(render) // output -> `with(this){return _c('p',{domProps:{"textContent":_s("hello")}})}`The following configration example of vue-loader:
const Vue = require('vue') const VueI18n = require('vue-i18n') const i18nExtensions = require('@intlify/vue-i18n-extensions') const messages = require('./locales.json') Vue.use(VueI18n) const i18n = new VueI18n({ locale: 'ja', messages: messages }) module.exports = { module: { rules: [{ test: /\.vue$/, loader: 'vue', options: { compilerModules: [i18nExtensions.module(i18n)], // other vue-loader options go here loaders: {} } }] } }Details changes for each release are documented in the CHANGELOG.md.
Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.
Please make sure to read the Contributing Guide before making a pull request.