Tu primer sitio multi idioma con NUXT y i18n

Trabajar con varios idiomas en una pagina web es un reto que sólo conoce quien ha tenido la experiencia de gestionar un sitio web en varios idiomas alguna vez. En la actualidad es muy importante que nuestros sitios puedan tener dicha característica, gracias a ello amplias tu campo de atracción a nuevos clientes.

En este post te mostraremos una manera muy sencilla y desde cero con la que podrás tener tu primer sitio multi idioma con NUXT y i18n.

Creación del proyecto

Antes que nada, comencemos con la creación de nuestro proyecto:

npm init nuxt-app <project-name>

Después de terminar la configuración de nuestro proyecto, navegamos a el y iniciamos nuestra app

cd <project-name>

npm run dev

Instalación y configuración de i18n

npm add nuxt-i18n

Después de la instalación, añadiremos la siguiente configuración  a nuestro nuxt.config.js

modules: [
   'nuxt-i18n'
]

i18n : {

        locales : [

            { code: 'es', iso: 'es-ES', file: 'es.js' },

            { code: 'en', iso: 'es-US', file: 'en.js' },

        ],

        lazy: true,

        langDir: 'lang/',

        defaultLocale : 'es',

    }

Locales: Es el arreglo de cada uno de los idiomas que soportara nuestra aplicación, en donde se define el nombre de nuestro archivos que contendran nuestros diccionarios de contenido para cada idioma.

langDir: Directorio donde se encuentran los diccionarios.

Ahora como lo usaremos

Primero creamos nuestros diccionarios en un directorio llamado lang/:

es.js

export default {
    home : {
        title: "Mi primer sitio multi idioma",
        subtitle: "con NUXT y i18n"
    }
}

en.js

export default {
   home : {
      title: "My first multi language site",
      subtitle: "with NUXT and i18n"
   }
}

Ahora creamos un page con el nombre de home.vue con el siguiente contenido:

<template>
<div>
   <h1>{{$t('home.title)}}</h1>
   <h1>{{$t('home.subtitle)}}</h1>
</div>
</template>

Ahora ingresamos a nuestro proyecto en nuestro navegador:

http://your-localhost/home

Resultado:

Esto sucede por que nuestro default language lo definimos como español, ahora si queremos ver la version ingles agregamos el prefijo a la url:

http://your-localhost/en/home

Resultado:

Más configuraciones…

Si necesitas mas configuraciones o una implementación mas especializada puedes ingresar al los siguientes enlaces:

https://i18n.nuxtjs.org/

https://nuxtjs.org/

Y esta es una de las maneras para crear un primer sitio multi idioma con NUXT y i18n. ¿Por qué es importante tenerlo? cuantos más idiomas tenga un sitio, más oportunidades se tiene de llegar a nuevos mercados. La mayoría de personas visitamos sólo webs en los idiomas que hablamos. Excepcionalmente, visitaremos una web en un idioma que no entendemos, excepcionalmente veremos sitios en otro idioma por eso debemos darle la facilidad a cada cliente poder crear una mejor experiencia

Este articulo puede interesarle Como desarrollar un sitio web e-commerce