Localización Basada en Ámbito Local

Opciones del componente i18n

En 'Ámbito y Cambio de Configuración Regional', Vue I18n tiene dos conceptos de ámbito, ámbito global y ámbito local.

En general, la información de configuración regional (por ejemplo, locale, messages, etc.) se establece como opción de createI18n y se configura (instala) con app.use. Para resumir, usa las funciones de traducción de ámbito global $t para localizarlos.

A veces es necesario localizar por componente mientras aún se gestionan los recursos de los mensajes locales. En este caso puede ser útil localizar cada ámbito local usando la opción i18n del componente en lugar del ámbito global.

El siguiente es un ejemplo de localización basada en ámbito local:

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'

// configurando la información de configuración regional usada por el ámbito global como opciones
const i18n = createI18n({
  locale: 'ja',
  messages: {
    en: {
      message: {
        hello: 'hello world',
        greeting: 'good morning, world!'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、世界',
        greeting: 'おはよう、世界！'
      }
    }
  }
})

// definir componente
const Component1 = {
  template: `
    <div id="component">
      <h1>Component1</h1>
      <p>Component1 locale messages: {{ $t("message.hello") }}</p>
      <p>Fallback global locale messages: {{ $t("message.greeting") }}</p>
    </div>
  `,
  i18n: {
    messages: {
      en: { message: { hello: 'hello component1' } },
      ja: { message: { hello: 'こんにちは、component1' } }
    }
  }
}

const app = createApp({
  components: { Component1 }
})
app.use(i18n)
app.mount('#app')

Plantilla:

<div id="app">
  <h1>Root</h1>
  <p>{{ $t("message.hello") }}</p>
  <Component1 />
</div>

Genera la siguiente salida:

<div id="app">
  <h1>Root</h1>
  <p>こんにちは、世界</p>
  <div class="component">
    <p>Mensajes de configuración regional del Component1: こんにちは、component1</p>
    <p>Mensajes de configuración regional globales de reserva: おはよう、世界！</p>
  </div>
</div>

Como en el ejemplo anterior, si el componente no tiene el mensaje de configuración regional, hace fallback al ámbito global. Como se explicó aquí, debido a que locale del ámbito local hereda del ámbito global, así que el componente usa el idioma establecido en el ámbito global (en el ejemplo anterior: locale: 'ja')

Y también, como se explicó aquí, ten en cuenta que, por defecto, hacer fallback al ámbito global genera dos advertencias en la consola:

[intlify] No se encontró la clave 'message.greeting' en los mensajes de configuración regional 'ja'.
[intlify] Se hace fallback para traducir 'message.greeting' con la configuración regional raíz.

Si quieres localizar usando la configuración regional del componente, puedes hacerlo con sync: false y locale en la opción i18n del componente.

Mensajes de configuración regional compartidos para componentes

A veces puede que quieras importar mensajes de configuración regional compartidos para ciertos componentes, sin hacer fallback desde los mensajes de configuración regional del ámbito global (por ejemplo, mensajes comunes de una funcionalidad específica para componentes).

Puedes usar la opción sharedMessages de i18n.

Ejemplo de mensajes de configuración regional comunes:

export default {
  en: {
    buttons: {
      save: "Save",
      // ...
    }
  },
  ja: {
    buttons: {
      save: "保存",
      // ...
    }
  }
}

Componentes:

import commonMessage from './locales/common' // importar mensajes de configuración regional comunes

export default {
  name: 'ServiceModal',
  template: `
    <div class="modal">
      <div class="body">
        <p>This is good service</p>
      </div>
      <div class="footer">
        <button type="button">{{ $t('buttons.save') }}</button>
      </div>
    </div>
  `,
  i18n: {
    messages: { ... },
    sharedMessages: commonMessages
  }
}

Si se especifica la opción sharedMessages junto con la opción messages, esos mensajes se fusionarán en los mensajes de configuración regional en la instancia VueI18n del componente objetivo.