Web components

Versiones compatibles

🆕 9.2+

TIP

Los códigos completos de ejemplo de este capítulo se encuentran aquí

A partir de Vue 3.2, podemos utilizar Web Components tal como se describe en la documentación oficial.

Esto permitirá el uso de Vue I18n en Web Components comenzando con Vue I18n v9.2.

Hay algunos puntos a tener en cuenta cuando se utiliza Vue I18n con Web Components.

Preparar los componentes web para alojar la instancia de i18n

Usando defineCustomElement, que es compatible desde Vue 3.2, podemos proporcionar componentes de Vue implementados en SFC como Web Components. Esto significa que los componentes de Vue implementados usando useI18n pueden ser servidos como Web Components con soporte i18n.

Sin embargo, los Web Components proporcionados no pueden insertarse directamente en HTML. Necesitas preparar los siguientes Web Components para alojar la instancia de i18n creada por createI18n.

Web Components que alojan la instancia de i18n:

<script setup lang="ts">
import { provide } from 'vue'
import { createI18n, I18nInjectionKey } from 'vue-i18n'

/**
 * crear una instancia de i18n para alojarla para otros web components
 */
const i18n = createI18n<false>({
  legacy: false, // debe establecerse a `false`
  locale: 'en',
  messages: {
    en: {
      hello: 'Hello!'
    },
    ja: {
      hello: 'こんにちは！'
    }
  }
})

/**
 * proporcionar la instancia de i18n con `I18nInjectionKey` para otros web components
 */
provide(I18nInjectionKey, i18n)
</script>

<!-- plantilla para insertar el contenido -->
<template>
  <slot />
</template>

El código anterior tiene los siguientes tres puntos.

• Llamar a createI18n para crear una instancia de i18n
• En setup, especificar la instancia de i18n creada con createI18n junto con I18nInjectionKey en provide
• la plantilla solo tiene un elemento slot

En el bloque script, primero usamos createI18n para crear una instancia de i18n. En una aplicación Vue, la instancia de i18n creada por createI18n puede utilizarse como un plugin de Vue especificando la instancia de i18n en el app.use de la aplicación Vue creada por createApp. Para instalar Vue I18n como un plugin de Vue en la aplicación Vue.

Si usas defineCustomElement, el componente Vue ya no puede controlarse desde el lado de la aplicación Vue, por lo tanto, aunque ejecutes la versión de Web Components del componente en tu aplicación Vue, no podrás adjuntar la instancia de i18n creada con createI18n a los Web Components objetivo mediante app.use desde el lado de la aplicación Vue.

Por lo tanto, para adjuntar instancias de i18n a Web Components, usamos provide en setup para exponer las instancias de i18n a otros Web Components. Esto permite que los Web Components que implementan i18n con useI18n funcionen al ser alojados por Web Components que realizan provide.

Luego, para alojar otros Web Components, el bloque template lo hace posible usando el elemento slot.

Exportamos este Web Component alojado de la siguiente manera:

import { defineCustomElement } from 'vue'
import I18nHost from './components/I18nHost.ce.vue'

const I18nHostElement = defineCustomElement(I18nHost)

export { I18nHostElement }

El siguiente useI18n implementa y exporta Web Components:

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
</script>

<template>
  <p>{{ t('hello') }}</p>
</template>

import { defineCustomElement } from 'vue'
import HelloI18n from './components/HelloI18n.ce.vue'

const HelloI18nElement = defineCustomElement(HelloI18n)
export { HelloI18nElement }

Cuando la siguiente aplicación Vue se registra como un elemento personalizado de Web Components:

import { createApp } from 'vue'
import { I18nHostElement } from './path/to/I18nHostElement'
import { HelloI18nElement } from './path/to/HelloI18nElement'
import App from './App.vue'

customElements.define('i18n-host', I18nHostElement)
customElements.define('hello-i18n', HelloI18nElement)

createApp(App).mount('#app')

Así, en App.vue, que es el punto de entrada de una aplicación Vue, la siguiente plantilla funcionará:

<template>
  <i18n-host>
    <h1>Vue I18n en componente web</h1>
    <hello-i18n />
  </i18n-host>
</template>

El ejemplo completo descrito hasta ahora se puede consultar aquí.

Limitaciones

1. El Vue I18n que puede utilizarse para implementar Web Components es solo Composition API.
2. Al implementar Web Components, los componentes de Vue implementados con useI18n no pueden importarse ni utilizarse conjuntamente. Esto se debe a las limitaciones de Provide / Inject de Vue.js para Web Components.