Negatory. Postpone Mission.

    @intlify/rollup-plugin-vue-i18n
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.1 • Public • Published

    @intlify/rollup-plugin-vue-i18n

    Lint Test npm

    Rollup plugin for Vue I18n

    ⚠️ Notice

    This package of @intlify/bundle-tools is for Vue I18n v9 or later!

    The version for Vue I18n v8.x is now in @intlify/rollup-plugin-vue-i18n repo!

    Requirement

    You need to install the follwoing:

    • rollup-plugin-vue@6.0.0

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

    🌟 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()
          ]
        }
      ]

    📜 Changelog

    Details changes for each release are documented in the CHANGELOG.md

    ©️ License

    MIT

    Install

    npm i @intlify/rollup-plugin-vue-i18n

    DownloadsWeekly Downloads

    191

    Version

    3.0.1

    License

    MIT

    Unpacked Size

    18.1 kB

    Total Files

    10

    Last publish

    Collaborators

    • kazupon
    • ota-meshi