vue-i18n add locale messages runtime

by Rocka

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-i18n.js"></script>
<div id="app">
  <p>{{ $t('hello') }}</p>
  <p>{{ $t('world') }}</p>
</div>

JavaScript

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en',
  messages: {
    en: { hello: 'Hello' },
    zh: { hello: '你好' }
  }
})

function appendMessages(locale, messages) {
	i18n.setLocaleMessage(locale, { ...i18n.messages[locale], ...messages })
}

const instance = new Vue({
	el: '#app',
  i18n,
  mounted() {
  	setTimeout(() => {
    	i18n.locale = 'zh'
      appendMessages('en', { world: 'World' })
      appendMessages('zh', { world: '世界' })
    }, 2000)
  }
})