Package Exports

@intlify/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 (@intlify/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

🌐 @intlify/vue-i18n-extensions

Extensions for vue-i18n

NOTE: ⚠️ This next branch is development branch for Vue 3! The stable version is now in master branch!

Status: Alpha

This library exports the following extensions:

⭐ Features

module: v-t custom directive compiler module for the following:
- @vue/compiler-core (options at baseCompile function)
- @vue/compiler-dom (options at compile function)
- @vue/compiler-sfc (compilerOptions at compileTemplate function)
- vue-loader (compilerOptions at options)

💿 Installation

$ npm i --save-dev @intlify/vue-i18n-extensions@alpha

🚀 Extensions

module: `v-t` custom directive compiler module

This module is v-t custom directive module for vue compilers. You can specify it.

The following example that use compile function of @vue/compiler-dom:

import { compile } from '@vue/compiler-dom'
import { createI18n } from 'vue-i18n'
import { defineTransformVT } from '@intlify/vue-i18n-extensions'

const i18n = createI18n({
  locale: 'ja',
  messages: {
    en: {
      hello: 'hello'
    },
    ja: {
      hello: 'こんにちは'
    }
  }
})
const transformVT = defineTransformVT(i18n)

const { code } = compile(`<p v-t="'hello'"></p>`, {
  mode: 'function',
  hoistStatic: true,
  prefixIdentifiers: true,
  directiveTransforms: { t: transformVT }
})
console.log(codel)
/* output -> 'hello'
  const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue

  const _hoisted_1 = { textContent: "こんにちは" }

  return function render(_ctx, _cache) {
    return (_openBlock(), _createBlock("p", _hoisted_1))
  }
*/

The following configration example of vue-loader:

const { VueLoaderPlugin } = require('vue-loader')
const { createI18n } = require('vue-i18n')
const { defineTransformVT } = require('@intlify/vue-i18n-extensions')

const i18n = createI18n({
  locale: 'ja',
  messages: {
    en: {
      hello: 'hello'
    },
    ja: {
      hello: 'こんにちは'
    }
  }
})
const transformVT = defineTransformVT(i18n)

module.exports = {
  module: {
    // ...
    rules: [
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'vue-loader',
            options: {
              compilerOptions: {
                directiveTransforms: { t: transformVT }
              }
            }
          }
        ]
      },
      // ...
    ]
  },
  plugins: [new VueLoaderPlugin()]
}

©️ License

MIT