Vue-i18n-extensions NPM

:globe_with_meridians: vue-i18n-extensions

Extensions for vue-i18n

This library exports the following extensions:

directive: v-t custom directive for server-side
module: v-t custom directive compiler module for vue-template-compiler or vue-loader (compilerModules option)

:cd: Installation

$ npm i --save-dev vue-i18n-extensions

:rocket: 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 '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>'
})

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.

:warning: 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 '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('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: {}
      }
    }]
  }
}