# @braindev/auto-i18n-plugin

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

Latest version **1.0.3** (published 2019-08-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @braindev/auto-i18n-plugin
pnpm add @braindev/auto-i18n-plugin
yarn add @braindev/auto-i18n-plugin
bun add @braindev/auto-i18n-plugin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2019-08-09 |
| First published | 2019-08-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 6.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Mikhail Vasilev |
| Maintainers | braindev |

## Links

- npm: https://www.npmjs.com/package/@braindev/auto-i18n-plugin
- npm.io page: https://npm.io/package/@braindev/auto-i18n-plugin

## Dependencies (2)

- [loader-utils](https://npm.io/package/loader-utils.md) ^1.2.3
- [js-yaml-loader](https://npm.io/package/js-yaml-loader.md) ^1.2.2

## Recent versions

- 1.0.3 (latest) — 2019-08-09
- 1.0.2 — 2019-08-09
- 1.0.1 — 2019-08-09

## README

# auto-i18n-plugin

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

## Installation
```sh
npm install -D @braindev/auto-i18n-plugin
```

```js
// 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.<br/>Supported fields: `[name]`,`[loc]`  |
| `locales` | `""` | Names supported locales.<br/>Format: `['en','ru']` or `'en,ru'`.<br/>**Env** variable: **`VUE_APP_SUPPORTED_LOCALES`** |
| `localesDir` | `"__locales"` | The directory where store localization<br/>messages of single file component.<br/>**Env** variable: **`VUE_APP_LOCALES_DIR`** |

## Usage

The file architecture as follows:
```yaml
// @/components/profile/__locales/UserProfile.en.yaml

hello: 'Hello!'

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

hello: 'Привет!'
```

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

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

Will be equivalent to:
```html
// @/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>
```

---
_Source: https://npm.io/package/@braindev/auto-i18n-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._