auto-i18n-plugin

Automatic Imports

auto-i18n-plugin will automatically import all i18n locales for your single file components if they exists

Installation

npm install -D @braindev/auto-i18n-plugin

// vue.config.js

module.exports = {
  chainWebpack: config => {
    config
      .plugin('auto-i18n-plugin')
      .use('@braindev/auto-i18n-plugin', [
        { locales: ['en','ru'] } // plugin options
      ]);
  },
  // Other options...
}

Configrations

auto-i18n-plugin have some plugin options:

| Option | Default | Description | | ------ | ------- | ----------- | | pattern | "[name].[loc]." | The pattern of localization file name.Supported fields: [name],[loc] | | locales | "" | Names supported locales.Format: ['en','ru'] or 'en,ru'.Env variable: VUE_APP_SUPPORTED_LOCALES | | localesDir | "__locales" | The directory where store localizationmessages of single file component.Env variable: VUE_APP_LOCALES_DIR |

Usage

The file architecture as follows:

// @/components/profile/__locales/UserProfile.en.yaml

hello: 'Hello!'

// @/components/profile/__locales/UserProfile.ru.yaml

hello: 'Привет!'

// @/components/profile/UserProfile.vue
<template>
  <p>{{ $t('hello') }}</p>
</template>

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

Will be equivalent to:

// @/components/profile/UserProfile.vue
<i18n locale="en" src="./__locales/UserProfile.en.yaml"></i18n>
<i18n locale="ru" src="./__locales/UserProfile.ru.yaml"></i18n>

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

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