# I18n

laravue provides internationalized i18n solutions implemented by vue-i18n.

The current lang language will be saved in the cookie, and the last language setting can be remembered for opening the page next time.

# Global lang

Language files are in @/lang which are Vietnamese, English, Chinese and Russian languages. element-ui language packs are also imported in @/lang/index.js.

# Local lang

There are some pages or components which have their own langs, such as the @/views/i18n page. You can use asynced lang.

import local from './local';

this.$i18n.mergeLocaleMessage('en', local.en);
this.$i18n.mergeLocaleMessage('vi', local.vi);

# Use $t in js

If you use a component such as select, you can assign translated value by this.$t from js and transfer value through v-for, example:

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

created() {
  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 in created which will be executed only one time during rendering. this.options won't change if your local lang changes. You have to manually manage this.options if you want to reflect the changes from your local. Example:

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 @resources/js/main.js remove import i18n from './lang' and delete @resources/js/lang.
• Fix generateTitle method (source code)
• Remove this.$t('xxx.yyy') in @resources/js/views/i18n/index.vue、@resources/js/views/role-permission/List.vue、@resources/js/views/permission/components/SwitchRoles.vue and other appearences