Веб-компоненты

Поддерживаемые версии

🆕 9.2+

TIP

Полный пример кода этого раздела находится здесь

Начиная с Vue 3.2, мы можем использовать веб-компоненты, как описано в официальной документации.

Это поддерживает использование Vue I18n в веб-компонентах, начиная с Vue I18n v9.2.

Есть несколько моментов, которые необходимо учитывать при использовании Vue I18n с веб-компонентами.

Подготовка веб-компонентов для хостинга экземпляра i18n

Используя defineCustomElement, которая поддерживается с Vue 3.2, мы можем предоставлять Vue-компоненты, реализованные в SFC, как веб-компоненты. Это означает, что Vue-компоненты, реализованные с помощью useI18n, могут быть представлены как веб-компоненты с поддержкой i18n.

Однако предоставленные веб-компоненты нельзя напрямую вставить в HTML. Вам нужно подготовить следующие веб-компоненты для хостинга экземпляра i18n, созданного с помощью createI18n.

Веб-компоненты, которые хостят экземпляр i18n:

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

/**
 * создать экземпляр i18n для хостинга других веб-компонентов
 */
const i18n = createI18n<false>({
  legacy: false, // обязательно установить в `false`
  locale: 'en',
  messages: {
    en: {
      hello: 'Hello!'
    },
    zh: {
      hello: '你好！'
    }
  }
})

/**
 * предоставить экземпляр i18n с `I18nInjectionKey` для других веб-компонентов
 */
provide(I18nInjectionKey, i18n)
</script>

<!-- шаблон для слота контента -->
<template>
  <slot />
</template>

Приведенный выше код имеет следующие три момента.

• Вызов createI18n для создания экземпляра i18n
• В setup указать экземпляр i18n, созданный с помощью createI18n вместе с I18nInjectionKey в provide
• шаблон содержит только элемент slot

В блоке script мы сначала используем createI18n для создания экземпляра i18n. В приложении Vue экземпляр i18n, созданный с помощью createI18n, может использоваться как плагин Vue, указав экземпляр i18n в app.use Vue-приложения, созданного с помощью createApp. Чтобы установить Vue I18n как плагин Vue в приложение Vue, мы должны были установить Vue I18n как плагин в Vue-приложение.

Если вы используете defineCustomElement, Vue-компонент больше не может управляться со стороны приложения Vue, поэтому даже если вы запустите версию компонента веб-компонентов в своем приложении Vue, вы не сможете присоединить экземпляр i18n, созданный с помощью createI18n, к целевым веб-компонентам через app.use со стороны приложения Vue.

Поэтому, чтобы присоединить экземпляры i18n к веб-компонентам, мы используем provide в setup для предоставления экземпляров i18n другим веб-компонентам. Это позволяет веб-компонентам, реализующим i18n с помощью useI18n, работать, будучи размещёнными веб-компонентами, которые делают provide.

Затем, чтобы размещать другие веб-компоненты, блок template позволяет сделать это с помощью элемента slot.

Экспортируйте размещённые веб-компоненты следующим образом:

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

const I18nHostElement = defineCustomElement(I18nHost)

export { I18nHostElement }

Следующий useI18n реализует и экспортирует веб-компоненты в:

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

Когда следующее приложение Vue регистрируется как пользовательский элемент веб-компонентов:

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

Таким образом, в App.vue, который является точкой входа Vue-приложения, следующий шаблон будет работать:

<template>
  <i18n-host>
    <h1>Vue I18n в веб-компоненте</h1>
    <hello-i18n />
  </i18n-host>
</template>

Полный пример, описанный выше, можно найти здесь.

Ограничения

1. Vue I18n, который может использоваться для реализации веб-компонентов, — это только Composition API.
2. При реализации веб-компонентов Vue-компоненты, реализованные с помощью useI18n, не могут быть импортированы и использованы вместе. Это связано с ограничениями Provide / Inject Vue.js для веб-компонентов.