Composants web

Versions prises en charge

🆕 9.2+

TIP

Les exemples complets de ce chapitre se trouvent ici

À partir de Vue 3.2, nous pouvons utiliser les WebComponents comme décrit dans la documentation officielle.

Cela permet d'utiliser Vue I18n dans les composants web à partir de Vue I18n v9.2.

Il y a quelques points à garder à l'esprit lors de l'utilisation de Vue I18n avec les composants web.

Préparer les composants web pour héberger l'instance i18n

En utilisant defineCustomElement, qui est pris en charge depuis Vue 3.2, nous pouvons fournir des composants Vue implémentés dans des fichiers SFC sous forme de composants web. Cela signifie que les composants Vue implémentés avec useI18n peuvent être fournis sous forme de composants web avec prise en charge de l'internationalisation.

Cependant, les composants web fournis ne peuvent pas être insérés directement dans le HTML. Vous devez préparer les composants web suivants pour héberger l'instance i18n créée par createI18n.

Composants web qui hébergent l'instance i18n :

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

/**
 * créer une instance i18n pour l'héberger pour d'autres composants web
 */
const i18n = createI18n<false>({
  legacy: false, // doit être défini sur `false`
  locale: 'en',
  messages: {
    en: {
      hello: 'Hello!'
    },
    ja: {
      hello: 'こんにちは！'
    }
  }
})

/**
 * fournir l'instance i18n avec `I18nInjectionKey` pour d'autres composants web
 */
provide(I18nInjectionKey, i18n)
</script>

<!-- template pour insérer le contenu -->
<template>
  <slot />
</template>

Le code ci-dessus présente les trois points suivants.

• Appeler createI18n pour créer une instance i18n
• Dans setup, spécifier l'instance i18n créée avec createI18n ainsi que I18nInjectionKey dans provide
• le template ne contient que l'élément slot

Dans le bloc script, nous utilisons d'abord createI18n pour créer une instance i18n. Dans une application Vue, l'instance i18n créée par createI18n peut être utilisée comme plugin Vue en spécifiant l'instance i18n dans le app.use de l'application Vue créée par createApp. Pour l'instance i18n dans l'application Vue app.use générée par createApp, nous devions installer Vue I18n comme plugin Vue dans l'application Vue.

Si vous utilisez defineCustomElement, le composant Vue ne peut plus être contrôlé côté application Vue, donc même si vous exécutez la version composants web du composant dans votre application Vue, vous ne pouvez pas attacher l'instance i18n créée avec createI18n aux composants web cibles via app.use côté application Vue.

Ainsi, afin d'attacher les instances i18n aux composants web, nous utilisons provide dans setup pour exposer les instances i18n aux autres composants web. Cela permet aux composants web qui implémentent l'internationalisation avec useI18n de fonctionner en étant hébergés par des composants web qui implémentent provide.

Ensuite, pour héberger d'autres composants web, le bloc template permet cela en utilisant l'élément slot.

Exportez ces composants web hébergés comme suit :

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

const I18nHostElement = defineCustomElement(I18nHost)

export { I18nHostElement }

L'implémentation suivante de useI18n et l'exportation des composants web :

<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 }

Quand l'application Vue suivante est enregistrée comme élément personnalisé de composants web :

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')

Donc, dans App.vue, qui est le point d'entrée d'une application Vue, le template suivant fonctionnera :

<template>
  <i18n-host>
    <h1>Vue I18n dans le composant web</h1>
    <hello-i18n />
  </i18n-host>
</template>

L'exemple complet décrit jusqu'à présent peut être consulté ici.

Limitations

1. Le Vue I18n qui peut être utilisé pour implémenter des composants web n'est que l'API Composition.
2. Lors de l'implémentation de composants web, les composants Vue implémentés avec useI18n ne peuvent pas être importés et utilisés ensemble. Cela est dû aux limitations de l'Injection / Fourniture de Vue.js pour les composants web.