Package Exports

vue-i18n-extensions

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-i18n-extensions) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🌐 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)

💿 Installation

$ npm i --save-dev 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 '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.

⚠️ 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: {}
      }
    }]
  }
}

📜 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.

©️ License

MIT