1.0.3 • Published 5 years ago
@braindev/auto-i18n-plugin v1.0.3
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>