Как я могу использовать vue-i18n в веб-компоненте Vue? - PullRequest
Новая
       22

Как я могу использовать vue-i18n в веб-компоненте Vue?

0 голосов
/ 16 ноября 2018

Я создаю веб-компонент Vue, используя vue-cli 3 и параметр --target wc. Мне также нужен компонент для использования плагина vue-i18n, который требует передачи некоторых опций в основной экземпляр Vue, например: 

new Vue({
    i18n: new VueI18n({ ... ])
    ...
})

В обычном приложении Vue это нормально, потому что я управляю созданием основного экземпляра Vue. Однако при создании в качестве веб-компонента создание основного объекта Vue генерируется vue-web-component-wrapper, и я не вижу очевидного способа повлиять на него.

Как я могу использовать плагин vue-18n в своем веб-компоненте?

1 Ответ

0 голосов
/ 20 ноября 2018

Плагин i18n необходимо инициализировать на компоненте «запись» (т. Е. На том, который формирует основу веб-компонента) вместо корневого компонента.

Но даже при этом важно, чтобы все сообщения были определены в компоненте ввода . Определение сообщений в дочернем компоненте, либо непосредственно в компоненте, либо с использованием элемента <i18n>, эффективно переопределяет конфигурацию vue-i18n из компонента entry и заставляет этот дочерний компонент использовать язык по умолчанию en-US.

Вот простой рабочий пример:

Компонент ввода 

<template>
  <div>
    <p>{{ $t('hello') }}</p>
    <child-component />
  </div>
</template>

<script>
import ChildComponent from "./child.vue"
import Vue from "vue"
import VueI18n from "vue-i18n"
Vue.use(VueI18n)

export default {
  name: "App",
  i18n: new VueI18n({
    locale: 'ja',
    messages: {
      en: {
        hello: "hello in en",
        test: "test in en"
      },
      ja: {
        hello: "hello in ja",
        test: "test in ja"
      },
    }
  }),
  components: { ChildComponent }
};
</script>

дочерний компонент 

<template>
  <div>{{ $t("test") }}</div>
</template>

<script>
export default {
  name: "child-component"
};
</script>
...