Need help with vue-i18n-loader?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

intlify
221 Stars 24 Forks MIT License 192 Commits 16 Opened issues

Description

:globe_with_meridians: vue-i18n loader for custom blocks

Services available

!
?

Need anything else?

Contributors list

Vue I18n Loader logo

@intlify/vue-i18n-loader

Build Status npm

vue-i18n loader for custom blocks

NOTE: :warning: This

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

Status: Beta Test


:star: Features

  • i18n resource pre-compilation
  • i18n custom block
    • i18n resource definition
    • i18n resource importing
    • Locale of i18n resource definition
    • Locale of i18n resource definition for global scope
    • i18n resource formatting

:cd: Installation

NPM

$ npm i --save-dev @intlify/[email protected]

YARN

$ yarn add -D @intlify/[email protected]

:rocket: i18n resource pre-compilation

Why do we need to require the configuration?

Since [email protected], 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, [email protected] 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
.

You can pre-commpile by configuring vue-i18n-loader as the webpack loader.

webpack configration

As an example, if your project has the locale messagess in

src/locales
, your webpack config will look like this:
├── dist
├── index.html
├── package.json
├── src
│   ├── App.vue
│   ├── locales
│   │   ├── en.json
│   │   └── ja.json
│   └── main.js
└── webpack.config.js
import { createApp } from 'vue'
import { createI18n } from 'vue-i18n' // import from runtime only
import App from './App.vue'

// import i18n resources import en from './locale/en.json' import ja from './locale/ja.json'

const i18n = createI18n({ locale: 'ja', messages: { en, ja } })

const app = createApp(App) app.use(i18n) app.mount('#app')

In the case of the above project, you can use vue-i18n with webpack configuration to the following for runtime only:

module.exports = {
  module: {
    rules: [
      // ...
      {
        test: /\.(json5?|ya?ml)$/, // target json, json5, yaml and yml files
        type: 'javascript/auto',
        loader: '@intlify/vue-i18n-loader',
        include: [ // Use `Rule.include` to specify the files of locale messages to be pre-compiled
          path.resolve(__dirname, 'src/locales')
        ]
      },
      // ...
    ]
  }
}

The above uses webpack's

Rule.include
to specify the i18n resources to be precompiled. You can also use
Rule.exclude
to set the target.

:rocket: i18n custom block

The below example that

App.vue
have i18n custom block:

i18n resource definition



{
  "en": {
    "hello": "hello world!"
  },
  "ja": {
    "hello": "こんにちは、世界!"
  }
}

The locale messages defined at i18n custom blocks are json format default.

i18n resource importing

You also can use

src
attribute:
// ./myLang.json
{
  "en": {
    "hello": "hello world!"
  },
  "ja": {
    "hello": "こんにちは、世界!"
  }
}

Locale of i18n resource definition

You can define locale messages for each locale with

locale
attribute in single-file components:
{
  "hello": "hello world!"
}



{
  "hello": "こんにちは、世界!"
}

The above defines two locales, which are merged at target single-file components.

Locale of i18n resource definition for global scope

You can define locale messages for global scope with

global
attribute:
{
  "en": {
    "hello": "hello world!"
  }
}

i18n resource formatting

Besides json format, You can be used by specifying the following format in the

lang
attribute:
  • yaml
  • json5

example yaml foramt:

  hello: "hello world!"



  hello: "こんにちは、世界!"

example json5 format:

{
  "en": {
    // comments
    "hello": "hello world!"
  }
}

JavaScript

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import App from './App.vue'

// setup i18n instance with globaly const i18n = createI18n({ locale: 'ja', messages: { en: { // ... }, ja: { // ... } } })

const app = createApp(App)

app.use(i18n) app.mount('#app')

webpack Config

vue-loader
(
next
version):
module.exports = {
  module: {
    rules: [
      // ...
      {
        resourceQuery: /blockType=i18n/,
        type: 'javascript/auto',
        loader: '@intlify/vue-i18n-loader'
      },
      // ...
    ]
  }
}

:wrench: Options

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;})()
  }

webpack configration:

  module.exports = {
    module: {
      rules: [
        // ...
        {
          test: /\.(json5?|ya?ml)$/,
          type: 'javascript/auto',
          include: [path.resolve(__dirname, './src/locales')],
          use: [
            {
              loader: '@intlify/vue-i18n-loader',
              options: {
                forceStringify: true
              }
            }
          ]
        },
        // ...
      ]
    }
  }

:scroll: Changelog

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

:muscle: Contribution

Please make sure to read the Contributing Guide before making a pull request.

:copyright: License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.