¿Te gustaría agregar más de un idioma en tu proyecto desarrollado en Vue? En este tutorial te enseñare como generar e integrar la internacionalización en un proyecto de **Vue **desde 0.
Para comenzar, vamos a utilizar Vue CLI, Si, no lo tienes instalado, solo debe abrir tu terminal y copiar el siguiente comando:
npm install @vue/cli -g
Ahora que tenemos la CLI instalada, podemos generar nuestro proyecto. Ingrese el siguiente comando:
vue create vue-internacional
Vue CLI te pedirá que elija un Preset. Tiene la opción de seleccionar un preajuste predeterminado de un listado o seleccionar funciones manualmente. Nosotros vamos a elegir la opción por defecto.
Ahora vamos a ingresar a la carpeta que se generó, para ello usamos el siguiente comando en la terminal:
cd vue-internacional
Una vez que hayas ingresado al directorio, deberás instalar todas las dependencias, esto se realiza con comando:
npm install
Para verificar que todo se está ejecutando correctamente, ingresa este comando:
npm run serve
A continuación, inicia tu navegador de preferencia a localhost:8080 y deberías ver la pantalla por defecto
Ahora solo que instalar el plugin para nuestro proyecto de traducción
Para que nuestro proyecto pueda funcionar debemos instalar el siguiente Plugins vue-i18n. Lo primero que debes hacer es detener el proyecto, si está en funcionamiento. En la misma terminal debes ingresar el comando:
npm install vue-i18n --save
Ya que esto es un Plugin, vamos a crear una carpeta llamada Plugin en su carpeta src. Dentro del directorio crea un archivo llamado i18n.js.
Ahora, lo primero que debemos hacer es decirle a vue que use el Plugin. En el archivo i18n.js ingrese lo siguiente:
import Vue from 'vue'; import VueI18n from 'vue-i18n'; Vue.use(VueI18n);
El siguiente paso es crear las traducciones para cada idioma que admitamos. Para fines de ejemplo, agregaré solo dos idiomas: inglés y español.
Para agregar idiomas tenemos que crear un objeto de mensaje. Agrega el siguiente código debajo de la línea Vue.use en el archivo i18n.js.
const messages = { 'en': {}, 'es': {} };
Ahora, tenemos que crear un nuevo objeto y decirle que lo usemos. Después del objeto de mensajes, agrega el siguiente código:
const i18n = new VueI18n({ locale: 'en', fallbackLocale: 'es', messages, });
Cuando creamos nuestro objeto, debemos indicarle la configuración regional predeterminada que mostraremos inicialmente. Y si existe algún problema podemos mostrar un idioma alternativo.
Por otra parte, **Vue **necesita que le digas que use la internacionalización. Hacemos esto en el archivo main.js. Abra el archivo main.js. Importa el archivo de internacionalización con este comando:
import i18n from '@/plugins/i18n';
Así es como debería verse nuestro archivo main.js:
import Vue from 'vue'; import App from './App.vue'; import i18n from '@/plugins/i18n'; Vue.config.productionTip = false; new Vue({ i18n, render: h => h(App), }).$mount('#app');
Abra el archivo i18n.js. En este archivo crearemos nuestra primera traducción. Para ello debemos escribir el mensaje en forma de objeto.
const messages = { 'en': { welcomeMsg: 'Hello Word’ }, 'es': { welcomeMsg: ‘Hola Mundo’ } };
Ahora que tenemos esta traducción, necesitamos reemplazar el texto que está en inglés para usar nuestro texto de internacionalización. Para ello, abra el componente HelloWorld. En la etiqueta h1, se muestra el mensaje de prop. Vamos a reemplazarlo con el siguiente código:
<h1>{{ $t('welcomeMsg') }}</h1>
El $t especifica que estamos usando el Plugin.
Ya que tenemos los mensajes configurados, tenemos que hacer que se muestre el mensaje traducido, para ello en el archivo App.vue vamos a ingresar la siguiente línea de código:
<button v-on:click="switchLocale()">{{ displayLocale }}</button>
Puedes colocar esta línea en un lugar fácil de visualizar, puede ser arriba del mensaje previamente insertado.
Ahora iremos a la sección de scripts, lo primero que debes hacer es agregar la siguiente línea:
import i18n from '@/plugins/i18n';
Seguido debemos ingresar los **methods **y computed, para que funcione correctamente el botón, estas irían debajo de los **components ** o name, agrega las siguientes líneas de código:methods: { switchLocale () { if (this.$i18n.locale === 'en') { this.$i18n.locale = 'es' } else { this.$i18n.locale = 'en' } } }, computed: { displayLocale () { let other = 'EN' if (this.$i18n.locale === 'en') { other = 'ES' } return other } } }
Le puedes dar estilos al botón a tu gusto, ya tendrías tu página para seguir integrando internacionalización .
Si quieres aprender más y profundizar en los conceptos sobre **Vue **y no olvide ingresar al Curso Profesional de VueJS y para aprender más sobre i18n ingresa a su documentación oficial
Genial. Gracias por compartir. Entre a tu página y note esa particularidad tan espectacular. Simplemente asombroso!