Guía completa para crear un sitio web internacional con Vue 3 y Vite.

Por:

Denisse Abreu
sept 10, 2022 7pm ET

Eng/Spa 6-min

# ¿Cómo usar Vue I18n dentro de los componentes de Vue 3? # ¿Cómo traducir un Artículo o Blog completo? # ¿Cómo validar un elemento input usando i18n?

Hola 👋🏼, en este tutorial, te mostraré cómo crear un sitio web internacional. Cubriré todo, desde cómo traducir palabras claves hasta la traducción de un blog completo y cómo validar un elemento de entrada (input) usando su traducción correspondiente. Nuestro entorno de trabajo es Vue 3 con la última integración de Vite más TypeScript, Vue I18n y Vee Validate.
¡Empecemos!

¿Qué vamos a construir?

Primero, necesitamos instalar Vue 3. Si no sabe cómo instalar Vue, vaya a la Guía de instalación de Vue 3.

Terminal

  npm init vue@latest

  # Preguntas de vue create
  Project name: international-tutorial
  Add TypeScript? yes

A continuación, vamos a instalar Vue I18n con su plugin Intlify de Vite.

Terminal

  npm install vue-i18n@9
  npm i --save-dev @intlify/vite-plugin-vue-i18n

Vaya a vite.config.ts, importe y use el plugin de Intlify.

vite.config.ts

Dentro de la carpeta src, cree la carpeta locales; esta carpeta contendrá los archivos JSON de idiomas con las palabras claves que usaremos.

Estructura de archivos

Pegue las siguientes palabras claves en su archivo de idioma correspondiente.

en.json

es.json

fr.json

Próximo, es hora de usar los archivos JSON que acabamos de crear. Dentro de la carpeta src, crea un nuevo directorio y llámalo plugins; dentro de esta carpeta de plugins, cree i18n.ts, importe los idiomas y exporte este archivo i18n.

src/plugins/i18n.ts

Vaya a main.ts e importe el archivo I18n que acabamos de crear.

src/main.ts

¿Cómo usar Vue I18n dentro de los componentes de Vue 3?

llegó el momento de usar I18n y realizar cambios en el U/I. En el archivo App.vue, crea un botón dropdown con los tres idiomas que tenemos en la carpeta locales. Este botón traducirá el mensaje de bienvenida que estamos pasando como prop al componente hello world.

src/App.vue

Demostración del componente hello world y el elemento select.

Si quieres el CSS, cópialo a continuación 👇.

src/App.vue

  select {
    width: 11rem;
    height: 2rem;
    margin-top: 1rem;
    border: solid green 1px;
    border-radius: 3px;
  }
  input {
    height: 2rem;
    width: 11rem;
    border: solid green 1px;
    border-radius: 3px;
  }
  div.select {
    text-align: center;
  }

¿Cómo traducir un Artículo o Blog completo?

Traducir palabras está bien, pero ¿qué pasa si tienes un blog completo y quieres traducirlo? Es bastante simple, ve a la carpeta de componentes y agrega TheWelcomeEs.vue; este componente tendrá la traducción al español del componente original TheWelcome.vue; Haz esto por cada idioma que desee, verifica condicionalmente la palabra clave "language" que agregamos previamente a la carpeta de locales o consulta directamente el valor de locale de I18n. ⚠ No olvides importar estos nuevos archivos en App.vue.

src/App.vue

¿Cómo validar un elemento input usando i18n?

Si tiene un elemento de entrada (input) en su sitio web, querrá mostrarle a su usuario el mensaje de retroalimentación en el idioma de su elección. En la última parte de esta guía, construiremos un elemento input y usaremos Vee Validate con i18n. Primero, instale la librería de Vee Validate con su i18n.

Terminal

  npm i vee-validate --save
  npm install @vee-validate/i18n @vee-validate/rules

Vaya a main.ts e importe las librerías que acabamos de instalar. Al importar reglas de Vee Validate, se recomienda importar solo las reglas que necesitas; Si desea consultar la lista de reglas, vaya al Lista de reglas de validación de Vee Validate.

src/main.ts

Esta es la última parte de esta guía. Vaya a App.vue, importe Field y locale de la librería de Vee Validate y crea tu elemento input.

src/App.vue

Envuelva el elemento input dentro del componente 'Field' de Vee Validate; pasa tus reglas y obtén los errores usando v-slot. Eso es todo, ¡Hasta la próxima!

Elemento input dentro de 'Field' de Vee Validate.