@intlify/vue-i18n-loader

vue-i18n loader for custom blocks

NOTE: ⚠️ This next branch is development branch for Vue 3! The stable version is now in master branch!

Status: Alpha

⭐ Features

• i18n custom block
  • i18n resource definition
  • i18n resource importing
  • Locale of i18n resource definition
  • i18n resource formatting
• i18n resource optimaization

💿 Installation

NPM

$ npm i --save-dev @intlify/vue-i18n-loader@alpha

YARN

$ yarn add -D @intlify/vue-i18n-loader@alpha

🚀 i18n custom block

the below example thatApp.vue have i18n custom block:

i18n resource definition

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

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

export default {
  name: 'app',
  setup() {
    // Somthing todo ...
    return {
      ...,
      ...useI18n({
        // ...
      })
    }
  }
}
</script>

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

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

i18n resource importing

you also can use src attribute:

<i18n src="./myLang.json"></i18n>

// ./myLnag.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:

<i18n locale="en">
{
  "hello": "hello world!"
}
</i18n>

<i18n locale="ja">
{
  "hello": "こんにちは、世界!"
}
</i18n>

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

i18n resource formatting

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

• yaml
• json5

example yaml foramt:

<i18n locale="en" lang="yaml">
  hello: "hello world!"
</i18n>

<i18n locale="ja" lang="yml">
  hello: "こんにちは、世界！"
</i18n>

example json5 format:

<i18n lang="json5">
{
  "en": {
    // comments
    "hello": "hello world!"
  }
}
</i18n>

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'
      },
      // ...
    ]
  }
}

🚀 i18n resource optimization

You can optimize your localization performance with pre-compiling the i18n resources.

You need to specify the preCompile: true option in your webpack config as below:

module.exports = {
  module: {
    rules: [
      // ...
      {
        resourceQuery: /blockType=i18n/,
        type: 'javascript/auto',
        use: [
          {
            loader: '@intlify/vue-i18n-loader',
            options: {
              preCompile: true // you need to specify at here!
            }
          }
        ]
      },
      // ...
    ]
  }
}

📜 Changelog

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

💪 Contribution

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

©️ License

MIT