GitHub - intlify/vue-i18n-extensions at master (original) (raw)
๐ @intlify/vue-i18n-extensions
Extensions for vue-i18n
This library exports the following extensions:
โญ Features
- directive:
v-tcustom directive for server-side - module:
v-tcustom directive compiler module forvue-template-compilerorvue-loader(compilerModulesoption)
๐ฟ Installation
$ npm i --save-dev @intlify/vue-i18n-extensions
๐ Extensions
directive: v-t custom directive for server-side
This 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) { //
return h('p', { directives: [{ name: 't', rawName: 'v-t', value: ('hello'), expression: "'hello'" }] }) } })renderer.renderToString(app, (err, html) => { console.log(html) // output -> '
hello
' })module: v-t custom directive compiler module
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: {} } }] } }
๐ Changelog
Details changes for each release are documented in the CHANGELOG.md.
โ Issues
Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.
๐ช Contribution
Please make sure to read the Contributing Guide before making a pull request.