Nimble Porridge Muncher

    This package has been deprecated

    Author message:

    WARNING: If you would like to use @kazupon/vue-i18n-loader that is released new features and bug fixes, you need to install @intlify/vue-i18n-loader.

    @kazupon/vue-i18n-loader

    0.5.0 • Public • Published

    Vue I18n Loader logo

    vue-i18n-loader

    Build Status codecov npm @kazupon/vue-i18n-loader Dev Token

    vue-i18n loader for custom blocks


    💿 Installation

    $ npm i --save-dev @kazupon/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('@kazupon/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: '@kazupon/vue-i18n-loader',
          },
        ]
      }
    }

    vue-loader (~v14.x):

    // for webpack config file
    module.exports = {
      module: {
        rules: [{
          test: /\.vue$/,
          loader: 'vue',
          options: {
            loaders: {
              i18n: '@kazupon/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

    Install

    npm i @kazupon/vue-i18n-loader

    DownloadsWeekly Downloads

    26,610

    Version

    0.5.0

    License

    MIT

    Unpacked Size

    14.1 kB

    Total Files

    6

    Last publish

    Collaborators

    • kazupon