Package Exports

@intlify/vue-i18n-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@intlify/vue-i18n-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@intlify/vue-i18n-loader

vue-i18n loader for custom blocks

💿 Installation

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

🚀 Usage

the below example thatApp.vue have i18n custom block:

Basic

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

<script>
export default {
  name: 'app',
  // ...
}
</script>

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

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

Source importing

you also can:

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

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

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

Locale Messages 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 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'
        }
      }
    }]
  }
}

📜 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