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 localization messages 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>