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

⚠️ Notice

This next branch is development branch for Vue 3! The version for Vue 2 is now in master branch!

🤝 Supporting Intlify Project

Intlify Project is an open source project that is included Vue I18n and i18n tooling and libralies with its ongoing development made possible entirely by the support of Sponsors. If you would like to become a sponsor, please consider:

Become a Sponsor on GitHub

🥇 Gold Sponsors

🥈 Silver Sponsors

🥉 Bronze Sponsors

This library exports the following extensions:

⭐ Features

Server-side rendering for v-t custom directive
Pre-Translation

💿 Installation

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

🚀 Extensions

Server-side rendering for `v-t` custom directive

You can use tnrasform offered with this package, to support Server-side rendering for v-t custom directives.

In order to use this feature, you need to specify to Vue compiler option. The following example that use compile of @vue/compiler-ssr:

import * as runtimeDom from '@vue/runtime-dom'
import { compile } from '@vue/compiler-ssr'
import { defineComponent, createSSRApp } from 'vue'
import { renderToString } from '@vue/server-renderer'
import { createI18n, useI18n } from 'vue-i18n'
import { transformVTDirective } from '@intlify/vue-i18n-extensions'

// create i18n instance
const i18n = createI18n({
  locale: 'ja',
  messages: {}
})

// get transform from  `transformVTDirective` function
const transformVT = transformVTDirective()

// compile your source
const source = `<div v-t="{ path: 'dessert', locale: 'en', plural: 2, args: { name: 'banana' } }"/>`
const { code } = compile(source, {
  mode: 'function',
  directiveTransforms: { t: transformVT } // <- you need to specify to `directiveTransforms` option!
})

// render functionalization
const render = Function('require', 'Vue', code)(require, runtimeDom)

// e.g. set render function to App component
const App = defineComponent({
  setup() {
    return useI18n({
      locale: 'en',
      inheritLocale: false,
      messages: {
        en: {
          apple: 'no apples | one apple | {count} apples',
          banana: 'no bananas | {n} banana | {n} bananas',
          dessert: 'I eat @:{name}!'
        }
      }
    })
  },
  ssrRender: render
})

// create SSR app
const app = createSSRApp(App)

// install vue-i18n
app.use(i18n)

console.log(await renderToString(app))
// output -> <div>I eat 2 bananas!</div>`

Pre-Translation with using `v-t` custom directive

You can pre-translation i18n locale messsages of vue-i18n.

⚠️ NOTE: Only the scope of global i18n locale messages can be pre-translated !!

⚠️ NOTE: Currently only v-t custom directive is supported !!

In order to use this feature, you need to specify to Vue compiler option. The following example that use compile of @vue/compiler-dom:

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

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

// get transform from  `transformVTDirective` function, with `i18n` option
const transformVT = transformVTDirective({ i18n })

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

    return function render(_ctx, _cache) {
      return (_openBlock(), _createBlock(\\"div\\", null, \\"こんにちは！\\"))
    }
*/

The following configration example of vue-loader:

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

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

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

You can specify the transform resulting from transformVTDirective in the compiler options for each package offered by vue-next, and tool chains:

@vue/compiler-core (options at baseCompile function)
@vue/compiler-dom (options at compile function)
@vue/compiler-ssr (options at compile function)
@vue/compiler-sfc (compilerOptions at compileTemplate function)
vue-loader (compilerOptions at options)
rollup-plugin-vue (compilerOptions at Options)
vite (vueCompilerOptions at CoreOptions)

API

About details, See docs

©️ License

MIT