...
Para inicializar i18n, crearemos la instancia en el archivo src/locales/indexi18n.js, de la siguiente manera:
| Bloque de código | ||
|---|---|---|
| ||
import Vue from "'vue"'; import VueI18n from "'vue-i18n"'; Vue.use(VueI18n); // Importamos locales import es from "./es.js"; import en from "./en.js"; export const messages = { es, en, }; function loadLocaleMessages() { const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i); const messages = {}; locales.keys().forEach((key) => { const matched = key.match(/([A-Za-z0-9-_]+)\./i); if (matched && matched.length > 1) { const locale = matched[1]; messages[locale] = locales(key); } }); return messages; } export default new VueI18n({ locale: process.env.VUE_APP_I18N_LOCALE || "'es"', fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || "'es"', silentTranslationWarn: true, messages: loadLocaleMessages(), }); |
Además, al crear la instancia de Vue, tendremos que importarlo e incluirlo en el new Vue del archivo main.js:
| Bloque de código | ||
|---|---|---|
| ||
import i18n from '@/localesi18n' new Vue({ router, store, i18n, render: h => h(App) }).$mount("#app"); |
...
La forma más intuitiva de gestionar los diferentes locales disponibles, será tener cada uno en un archivo JSON dentro de de src/locales. Si por ejemplo tenemos Tendremos, al menos, español e inglés, tendremos en los archivos es.js json y en.jsjson, respectivamente, y seguirán la siguiente estructura:
| Bloque de código | ||
|---|---|---|
| ||
// es.js export default { "helloworld": "¡Hola mundo!", "test": "Esto es una prueba", }; // en.js export default { "helloworld": "Hello world!", "test": "This is a test", }; |
Por último, el como hemos visto previamente, los dos archivos se importan en el src/locales/index.js, se juntan en una variable y se pasa en la creación de la instancia de VueI18n.
...