vue-i18n-loader

by intlify

:globe_with_meridians: vue-i18n loader for custom blocks

211 Stars 22 Forks Last release: about 1 month ago (v2.0.0-beta.1) MIT License 170 Commits 16 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Vue I18n Loader logo

@intlify/vue-i18n-loader

Build Status npm @intlify/vue-i18n-loader Dev Token

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: Alpha Test


:star: Features

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

:cd: Installation

NPM

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

YARN

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

: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:
// ./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:
{
  "hello": "hello world!"
}



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

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:

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

:rocket: 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!
            }
          }
        ]
      },
      // ...
    ]
  }
}

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