Hot reloading

Você pode usar o recurso Hot Module Replacement (HMR) (opens new window), você pode rastrear as mudanças em arquivos de localização e recarregá-los automaticamente em seu aplicativo.

Exemplo básico

Para um conjunto estático de localidades, você pode especificar explicitamente o recarregamento automático dessas traduções:

import Vue from "vue"
import VueI18n from "vue-i18n"
import en from './en'
import pt from './pt'

const messages = {
  en,
  pt
}

// Instância VueI18n
const i18n = new VueI18n({
  locale: 'en',
  messages
})

// Iniciando aplicativo
const app = new Vue({
  i18n
  // ...
}).$mount('#app')

// Atualizações automática
if (module.hot) {
  module.hot.accept(['./en', './pt'], function() {
    i18n.setLocaleMessage('en', require('./en').default)
    i18n.setLocaleMessage('pt', require('./pt').default)
    // Ou adicione um recarregamento automático por meio da propriedade $i18n
    // app.$i18n.setLocaleMessage('en', require('./en').default)
    // app.$i18n.setLocaleMessage('pt', require('./pt').default)
  })
}

Exemplo avançado

Se precisar de suporte para uma mudança no conjunto de traduções, você pode implementar o recarregamento automático para todos os locais dinamicamente usando require.context:

import Vue from "vue";
import VueI18n from "vue-i18n";

Vue.use(VueI18n);

// Carregue todos os locais e lembre-se do contexto
function loadMessages() {
  const context = require.context("./locales", tpte, /[a-z0-9-_]+\.json$/i);

  const messages = context
    .keys()
    .map((key) => ({ key, locale: key.match(/[a-z0-9-_]+/i)[0] }))
    .reduce(
      (messages, { key, locale }) => ({
        ...messages,
        [locale]: context(key),
      }),
      {}
    );

  return { context, messages };
}

const { context, messages } = loadMessages();

// Instância VueI18n
const i18n = new VueI18n({
  locale: "en",
  messages,
});

// Iniciando aplicativo
const app = new Vue({
  i18n,
  // ...
}).$mount('#app');

// Atualizações automática
if (module.hot) {
  module.hot.accept(context.id, () => {
    const { messages: newMessages } = loadMessages();

    Object.keys(newMessages)
      .filter((locale) => messages[locale] !== newMessages[locale])
      .forEach((locale) => {
        messages[locale] = newMessages[locale];
        i18n.setLocaleMessage(locale, messages[locale]);
      });
  });
}