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
247 Stars 31 Forks MIT License 134 Commits 7 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

webpack loader for Vue I18n


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

:cd: Installation

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

:rocket: Usage

the below example that

App.vue
have
i18n
custom block:

Basic



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

The locale messages defined at

i18n
custom blocks are json format default.

Source importing

you also can:

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

Locale definition

You can define locale messages for each locale with

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



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

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

Locale Messages 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 Vue from 'vue'
import VueI18n from 'vue-i18n'
import App from './App.vue'

Vue.use(VueI18n)

const i18n = new VueI18n({ locale: 'en', messages: { en: { // ... }, ja: { // ... } } }) new Vue({ i18n, render: h => h(App) }).$mount('#app')

Webpack Config

vue-loader
(v15 or later):
// for vue.config.js (Vue CLI)
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('i18n')
      .resourceQuery(/blockType=i18n/)
      .type('javascript/auto')
      .use('i18n')
      .loader('@intlify/vue-i18n-loader')
  }
}

vue-loader
(v15 or later):
// for webpack.config.js (Without Vue CLI)
module.exports = {
  module: {
    rules: [
      {
        resourceQuery: /blockType=i18n/,
        type: 'javascript/auto',
        loader: '@intlify/vue-i18n-loader',
      },
    ]
  }
}

vue-loader
(~v14.x):
// for webpack config file
module.exports = {
  module: {
    rules: [{
      test: /\.vue$/,
      loader: 'vue',
      options: {
        loaders: {
          i18n: '@intlify/vue-i18n-loader'
        }
      }
    }]
  }
}

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