# I18n

This project is a collection of internationalized i18n solutions. Implemented via [vue-i18n](https://github.com/kazupon/vue-i18n).

Since the project's ui framework uses `element`, internationalization also needs to be internationalized.
[code](https://github.com/adempiere/adempiere-vue/blob/master/src/lang/index.js).
At the same time, the current `lang` language save in the `cookie`, and the last language setting can be remembered for opening the page next time.

## Global lang

Code: [@/lang](https://github.com/adempiere/adempiere-vue/tree/master/src/lang)
Currently set English and Chinese languages.

Meanwhile, import a language package in `@/lang/index.js` for `element-ui`.

## Async lang

There are some langs that are needed for specific pages, such as the `@/views/i18n` page, you can use async lang.

```js
import local from './local'

this.$i18n.mergeLocaleMessage('en', local.en)
this.$i18n.mergeLocaleMessage('zh', local.zh)
```

# Use $t in js

If you use a component such as `select`, its value comes through `v-for`, such as:

```html
<el-select v-model="value">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value"/>
</el-select>
```

```js
this.options = [
  {
    value: '1',
    label: this.$t('i18nView.one')
  },
  {
    value: '2',
    label: this.$t('i18nView.two')
  },
  {
    value: '3',
    label: this.$t('i18nView.three')
  }
]
```

In this case, i18n will only be executed once, because `this.options` in js will only be executed once during `created`, and its data will not change as your local `lang` changes, so You need to manually reset `this.options` when the `lang` changes.

```js
export default {
  watch: {
    lang() {
      this.setOptions()
    }
  },
  methods: {
    setOptions() {
      this.options = [
        {
          value: '1',
          label: this.$t('i18nView.one')
        },
        {
          value: '2',
          label: this.$t('i18nView.two')
        },
        {
          value: '3',
          label: this.$t('i18nView.three')
        }
      ]
    }
  }
}
```

## Remove i18n

In `src/main.js` remove `import i18n from './lang'` and delete `src/lang` folder.

And remove `this.$t('route.xxxx')` in `src/layout/components/Levelbar`、`src/layout/components/SidebarItem`、`src/layout/components/TabsView` or others.

After the <Badge text="v4.1.0+"/> version, the default master will no longer provide i18n. Because most users are not need i18n, the removal of i18n workload is quite large.

If you have i18n requirements, please use [i18n Branch](https://github.com/adempiere/adempiere-vue/tree/i18n), which is updated synchronously with master.