vue-i18n rollup plugin for custom blocks

@intlify/rollup-plugin-vue-i18n

vue-i18n rollup plugin for i18n resource pre-compilation and custom blocks.

Features

• i18n resources pre-compilation
• i18n custom block

Installation

NPM

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

YARN

$ yarn add -D @intlify/rollup-plugin-vue-i18n@next

Usages

i18n resource pre-compilation

Since vue-i18n@v9.0, The locale messages are handled with message compiler, which converts them to javascript functions after compiling. After compiling, message compiler converts them into javascript functions, which can improve the performance of the application.

However, with the message compiler, the javascript function conversion will not work in some environments (e.g. CSP). For this reason, vue-i18n@v9.0 and later offer a full version that includes compiler and runtime, and a runtime only version.

If you are using the runtime version, you will need to compile before importing locale messages by managing them in a file such as .json.

Rollup Config

The below rollup configi example:

import VuePlugin from 'rollup-plugin-vue'
import VueI18nPlugin from 'rollup-plugin-vue-i18n'
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import path from 'path'

export default [
  {
    input: path.resolve(__dirname, `./path/to/src/main.js`),
    output: {
      file: path.resolve(__dirname, `./path/to/dist/index.js`),
      format: 'cjs'
    },
    plugins: [
      // set `customBlocks` opton to `rollup-plugin-vue`
      VuePlugin({ customBlocks: ['i18n'] }),
      // set `rollup-plugin-vue-i18n` after **`rollup-plugin-vue`**
      VueI18nPlugin({
        // `include` option for i18n resources bundling
        include: path.resolve(__dirname, `./path/to/src/locales/**`)
      }),
      resolve(),
      commonjs()
    ]
  }
]

Notes on using with other i18n resource loading plugins

If you use the plugin like @rollup/plugin-json, make sure that the i18n resource to be pre-compiled with rollup-plugin-vue-i18n is not loaded. you need to filter with the plugin options.

i18n custom block

the below example that examples/composition/App.vue have i18n custom block:

<template>
  <form>
    <label>{{ t('language') }}</label>
    <select v-model="locale">
      <option value="en">en</option>
      <option value="ja">ja</option>
    </select>
  </form>
  <p>{{ t('hello') }}</p>
  <Banana />
</template>

<script>
import { useI18n } from 'vue-i18n'
import Banana from './Banana.vue'

export default {
  name: 'App',
  components: {
    Banana
  },
  setup() {
    const { t, locale } = useI18n({
      inheritLocale: true,
      useScope: 'local'
    })
    return { t, locale }
  }
}
</script>

<i18n>
{
  "en": {
    "language": "Language",
    "hello": "hello, world!"
  },
  "ja": {
    "language": "言語",
    "hello": "こんにちは、世界！"
  }
}
</i18n>

Locale Messages formatting

You can be used by specifying the following format in the lang attribute:

• json (default)
• yaml
• json5

example yaml foramt:

<i18n lang="yaml">
en:
  hello: "Hello World!"
ja:
  hello: "こんにちは、世界！"
</i18n>

Options

include

• Type: string | string[] | undefined

• Default: undefined

  A minimatch pattern, or array of patterns, you can specify a path to pre-compile i18n resources files. The extensions of i18n resources to be precompiled are as follows:

  - json
  - json5
  - yaml
  - yml
  

forceStringify

• Type: boolean

• Default: false

  Whether pre-compile number and boolean values as message functions that return the string value.

  for example, the following json resources:

  {
    "trueValue": true,
    "falseValue": false,
    "nullValue": null,
    "numberValue": 1
  }
  

  after pre-compiled (development):

  export default {
    "trueValue": (()=>{const fn=(ctx) => {const { normalize: _normalize } = ctx;return _normalize(["true"])};fn.source="true";return fn;})(),
    "falseValue": (()=>{const fn=(ctx) => {const { normalize: _normalize } = ctx;return _normalize(["false"])};fn.source="false";return fn;})(),
    "nullValue": (()=>{const fn=(ctx) => {const { normalize: _normalize } = ctx;return _normalize(["null"])};fn.source="null";return fn;})(),
    "numberValue": (()=>{const fn=(ctx) => {const { normalize: _normalize } = ctx;return _normalize(["1"])};fn.source="1";return fn;})()
  }
  

  Configration example:

  import VuePlugin from 'rollup-plugin-vue'
  import VueI18nPlugin from 'rollup-plugin-vue-i18n'
  import resolve from '@rollup/plugin-node-resolve'
  import commonjs from '@rollup/plugin-commonjs'
  import path from 'path'
  
  export default [
    {
      input: path.resolve(__dirname, `./src/main.js`),
      output: {
        file: path.resolve(__dirname, `./dist/index.js`),
        format: 'cjs'
      },
      plugins: [
        VuePlugin({ customBlocks: ['i18n'] }),
        VueI18nPlugin({
          include: path.resolve(__dirname, `./path/to/src/locales/**`)
          // `forceStringify` option
          forceStringify: true
        }),
        resolve(),
        commonjs()
      ]
    }
  ]
  

GitHub