Integración con Nuxt 3

Recomendamos utilizar Nuxt I18n (@nuxtjs/i18n) para usar Vue I18n con Nuxt 3 con funciones avanzadas como rutas localizadas, etiquetas SEO y más.

Creando tu propia integración con Nuxt 3

Lo siguiente es un tutorial sobre cómo configurar una aplicación Nuxt 3 con tu propia integración añadiendo Vue I18n mediante un plugin de Nuxt.

AVISO

Este tutorial de integración no soporta funciones i18n avanzadas (como rutas y etiquetas SEO) y está destinado a propósitos demostrativos, considera usar el módulo Nuxt I18n consulta sus documentos en i18n.nuxtjs.org para más detalles.

Requisitos

El requisito de Node.js para este tutorial es el mismo entorno que Nuxt 3.

Por favor revisa aquí para ver la versión de Node.js de Nuxt 3.

Códigos de ejemplo

Puedes obtener el código del tutorial a continuación en examples/frameworks/nuxt3.

También puedes ver una aplicación desplegada siguiendo este tutorial con una acción personalizada de GitHub para proporcionar traducciones desde DeepL en el proyecto nuxt3-app-vue-i18n.

Configuración de vue-i18n en una aplicación Nuxt 3

Ahora configuraremos el entorno inicial para usar Vue I18n con Nuxt 3.

Crear aplicación Nuxt 3

Ejecuta el siguiente comando para crear una aplicación Nuxt 3:

npx

npx nuxi init nuxt3-app-vue-i18n

pnpm

pnpm dlx nuxi init nuxt3-app-vue-i18n

Una vez ejecutado el comando anterior, el proyecto inicial creado de Nuxt 3 tendrá la siguiente estructura de directorios:

cd nuxt3-app-vue-i18n
tree -L 1
.
├── README.md
├── app.vue
├── nuxt.config.ts
├── package.json
└── tsconfig.json

Instalar Vue I18n

Instala Vue I18n con el siguiente comando:

npm

npm install vue-i18n -D

yarn

yarn add vue-i18n -D

pnpm

pnpm add -D vue-i18n

Configurar el plugin de Nuxt

Crea un directorio plugins de la siguiente manera:

mkdir plugins

A continuación, crea un archivo de plugin de Nuxt para configurar Vue I18n.

touch plugins/i18n.ts

Una vez creado, define el plugin como sigue:

import { createI18n } from 'vue-i18n'

export default defineNuxtPlugin(({ vueApp }) => {
  const i18n = createI18n({
    legacy: false,
    globalInjection: true,
    locale: 'en',
    messages: {
      en: {
        hello: '¡Hola, {name}!'
      }
    }
  })

  vueApp.use(i18n)
})

La configuración de los recursos locales para localizar una aplicación Nuxt 3 se describe en la siguiente sección

Ejecutar la aplicación Nuxt 3

Veamos si Vue I18n funciona con Nuxt 3.

Editaremos app.vue de la aplicación Nuxt 3 configurada de la siguiente manera:

<template>
  <div>
    <NuxtWelcome /> // [!code --]
    <h1>{{ $t('hello', { name: 'vue-i18n' }) }}</h1> // [!code ++]
  </div>
</template>

Hemos editado y guardado, ejecuta el siguiente comando para ejecutar la aplicación Nuxt 3 localmente:

npm

npm run dev

yarn

yarn dev

pnpm

pnpm dev

Una vez que la aplicación se sirva en http://localhost:3000, veremos lo siguiente:

Localiza tu aplicación Nuxt 3

Hasta ahora hemos podido integrar Vue I18n en nuestra aplicación Nuxt 3. Vamos a implementar el cambio de idioma e importar los recursos locales desde fuera.

Al implementar el cambio de idioma estamos efectivamente internacionalizando nuestra aplicación Nuxt 3. 🌎 🌍 🌏

Además, cuando separamos los recursos locales del código fuente (externalizándolos), podemos usar un flujo de trabajo separado con la ayuda del servicio de localización con el fin de localizar la aplicación.

En las siguientes secciones, habilitaremos el soporte para inglés, francés y japonés en nuestra aplicación Nuxt 3.

Agregar cambio de idioma

Agregaremos la función de cambio de idioma a app.vue de la siguiente manera:

<template>
  <div>
    <h1>{{ $t('hello', { name: 'vue-i18n' }) }}</h1>
    <form>
      <label for="locale-select">{{ $t('language') }}: </label> // [!code ++]
      <select
        id="locale-select"
        v-model="$i18n.locale"
      >
        <option value="en">
          en
        </option> // [!code ++]
        <option value="fr">
          fr
        </option> // [!code ++]
        <option value="ja">
          ja
        </option> // [!code ++]
      </select> // [!code ++]
    </form> // [!code ++]
  </div>
</template>

El cambio de idioma se implementa usando el elemento select en form. El valor de cada opción se define como el valor del código de idioma, el cual se explicará más adelante en la externalización de los recursos locales.

El valor de cada opción define el valor del código de idioma, el cual se explicará más adelante en la externalización de los recursos locales.

Externalizar los recursos locales

Definiremos los recursos locales como externos.

Hay varios formatos de archivo de recursos soportados por Vue I18n, elegiremos JSON en este caso particular.

Creemos un directorio no-"estándar de Nuxt-3" llamado locales ejecutando:

mkdir locales

Ahora creemos los archivos JSON para cada uno de los idiomas que queremos soportar:

touch locales/en.json # para inglés
touch locales/fr.json # para francés
touch locales/ja.json # para japonés

Los llenamos con lo siguiente:

Para inglés en locales/en.json:

{
  "hello": "Hello, {name}!",
  "language": "Language"
}

Para francés en locales/fr.json:

{
  "hello": "Bonjour, {name}!",
  "language": "Langue"
}

Para japonés en locales/ja.json:

{
  "hello": "こんにちは、{name}！",
  "language": "言語"
}

Importar recursos locales

"Registremos" los idiomas en nuestro plugin (plugins/i18n.ts) de la siguiente manera:

import { createI18n } from 'vue-i18n'
import en from '../locales/en.json'
import fr from '../locales/fr.json'
import ja from '../locales/ja.json'

export default defineNuxtPlugin(({ vueApp }) => {
  const i18n = createI18n({
    legacy: false,
    globalInjection: true,
    locale: 'en',
    messages: {
      en: { 
        hello: "Hello, {name}!"
      } 
      en, 
      fr, 
      ja 
    }
  })

  vueApp.use(i18n)
})

La opción messages será la que contenga los recursos locales que registramos y que sea tan granular como deseemos. Esta granularidad facilita la integración con el servicio de localización.

Ejecutemos npm run dev (o yarn dev o pnpm dev) y vayamos a http://localhost:3000 para ver si los cambios hasta ahora funcionan.

¡La aplicación Nuxt 3 está lista ahora para la internacionalización básica! 🎉

Optimización con @intlify/unplugin-vue-i18n

Hasta ahora, has podido usar Vue I18n para soportar el cambio de idioma en la aplicación Nuxt 3. Además, al externalizar los recursos locales, los has separado del código fuente, haciendo más fácil gestionar los recursos locales e integrarlos con el servicio de localización.

Sin embargo, como se describe en Optimización, la aplicación Nuxt 3 preparada hasta ahora tiene un tamaño de paquete subóptimo.

Desde Vue I18n v9, el compilador de mensajes permite precompilar los recursos locales para mejorar el rendimiento, pero aún no ha sido optimizado para ese rendimiento.

Entonces entra @intlify/unplugin-vue-i18n, una herramienta de Vue I18n para optimizar el rendimiento.

Instalar @intlify/unplugin-vue-i18n

npm

npm install @intlify/unplugin-vue-i18n -D

yarn

yarn add @intlify/unplugin-vue-i18n -D

pnpm

pnpm add -D @intlify/unplugin-vue-i18n

Configurar la configuración de Nuxt

Configura nuxt.config.ts como sigue:

import { defineNuxtConfig } from 'nuxt'
import { resolve, dirname } from 'node:path'
import { fileURLToPath } from 'url'
import VueI18nVitePlugin from '@intlify/unplugin-vue-i18n/vite'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  build: { 
    transpile: ['vue-i18n'] 
  }, 
  vite: { 
    plugins: [ 
      VueI18nVitePlugin({ 
        include: [ 
          resolve(dirname(fileURLToPath(import.meta.url)), './locales/*.json') 
        ] 
      }) 
    ] 
  } 
})

El empaquetador para Nuxt 3 es vite por defecto. Por tanto usaremos la opción vite aquí para la optimización.

En vite.plugins, se configura el plugin para @intlify/unplugin-vue-i18n. Como opción para este plugin, la opción include especifica los recursos locales en formato json ubicados en el directorio locales. Esto permite que @intlify/unplugin-vue-i18n precompile los recursos locales en tiempo de empaquetado usando internamente el compilador de mensajes de Vue I18n. Esto mejora el rendimiento de traducción de Vue I18n y consecuentemente el rendimiento de renderizado de aplicaciones Nuxt 3.

Dentro del empaquetado con optimización

Una vez finalizada la configuración, ejecuta npm run dev para comprobarlo.

Tras acceder a http://localhost:3000, el comportamiento de la aplicación Nuxt 3 permanece igual, pero hay un cambio en el ancho de banda de la aplicación Nuxt 3.

A continuación se muestra una comparación de los tamaños de paquetes medidos en la pestaña de herramientas de desarrollo con y sin @intlify/unplugin-vue-i18n:

El área resaltada en azul es el código empaquetado por vite.

Al configurar este plugin, el plugin establecerá internamente un módulo Vue I18n que solo es de ejecución. Específicamente, en la configuración de vite resolve.alias, se establece el alias vue-i18n para usar únicamente el tiempo de ejecución de Vue I18n (vue-i18n/dist/vue-i18n.runtime.esm-bundler.js). Este ajuste reduce el tamaño del paquete ya que el compilador de mensajes usado por Vue I18n no está incluido.

Para más detalles, consulta la documentación de @intlify/unplugin-vue-i18n docs

También puedes ver los cambios en el empaquetado de los recursos locales.

El código de recursos locales, dependiendo de si el plugin @intlify/unplugin-vue-i18n en vite.plugins está o no configurado. A continuación:

Sin el plugin @intlify/unplugin-vue-i18n en vite.plugins, los recursos locales están empaquetados como json, pero con este plugin configurado, los recursos locales son convertidos de json a código JavaScript para reducir el ancho de banda.

Vue I18n simplemente llama a las funciones ya que ya han sido compiladas.

En esta guía, la aplicación Nuxt 3 es pequeña, por lo que no podemos experimentar suficientemente el rendimiento de la optimización, pero cuando la aplicación se hace más grande, definitivamente se beneficiará de ella.