intlify/rollup-plugin-vue-i18n

README

🌐 @intlify/rollup-plugin-vue-i18n

Rollup plugin for Vue I18n

⚠️ Notice

This package is maintained for Vue I18n v8 (Vue 2).

If you want to use Vue I18n v9 (Vue 3) or later, See the @intlify/bundle-tools repo.

❗ Requirement

You need to install the follwoing:

rollup-plugin-vue@5.1.4 later

If you use rollup-plugin-vue, We recommend you should read the docs

💿 Installation

npm:

$ npm i --save-dev @rollup/plugin-json
$ npm i --save-dev @rollup/plugin-yaml # if you use locale messages with YAML format
$ npm i --save-dev @intlify/rollup-plugin-vue-i18n

yarn:

$ yarn add -D @rollup/plugin-json
$ yarn add -D @rollup/plugin-yaml # if you use locale messages with YAML format
$ yarn add -D @intlify/rollup-plugin-vue-i18n

🚀 Usages

the below example that example/Hello.vue have i18n custom block:

<template>
  <p>{{ $t('hello') }}</p>
</template>

<script>
export default {
  name: 'Hello'
}
</script>

<i18n>
{
  "en": {
    "hello": "Hello World!"
  },
  "ja": {
    "hello": "こんにちは、世界！"
  }
}
</i18n>

If you would like to bundle as common library with rollup, you can configure the following for ES Module:

const vue = require('rollup-plugin-vue')
const yaml = require('@rollup/plugin-yaml')
const json = require('@rollup/plugin-json')
const { default: i18n } = require('../lib/index')

export default {
  input: './example/index.js',
  output: {
    format: 'esm',
    file: './example/components.esm.js'
  },
  external: [
    // Externalize so that the output code is readable.
    'vue',
    'vue-runtime-helpers',
    'vue-i18n'
  ],
  plugins: [
    yaml(),
    json(),
    i18n(),
    vue({
      customBlocks: ['i18n']
    })
  ]
}

Locale Messages formatting

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

json (default)
yaml

example yaml foramt:

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

⚠️ Limitations

Currently, There are the following limitations:

Not support json5 format
Not support locale attributes

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

©️ License

MIT

README