Skip to content
🌐 vue-i18n extensions
JavaScript
Branch: dev
Clone or download
dependabot and kazupon chore(deps): bump lodash.template from 4.4.0 to 4.5.0 (#10)
Bumps [lodash.template](https://github.com/lodash/lodash) from 4.4.0 to 4.5.0.
- [Release notes](https://github.com/lodash/lodash/releases)
- [Commits](lodash/lodash@4.4.0...4.5.0)

Signed-off-by: dependabot[bot] <support@github.com>
Latest commit 31b4d16 Jul 12, 2019

README.md

🌐 vue-i18n-extensions

CircleCI npm vue-i18n-extensions Dev Token

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

You can’t perform that action at this time.