i18n - sync language change on custom element

[pawepaw]

Hi,

I've configured to pass i18n to my web component but when I change language on page where I have this web component embedded it's not synced with language on web component. How can I keep it in sync?

beforeCreateVueInstance: rootElement => {
    rootElement.i18n = i18n
    return rootElement
  }

and i18n

const i18n = new VueI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages,
  silentTranslationWarn: true
})

export default i18n

Where messages is just traditional json with translations.

The only way I figured out is to just pass language via binding but it seems to be stupid.

[karol-f]

Can You please prepare CodeSandbox?

[tmcdos]

In your parent web page (where the Web Component is being used) when you change the locale - you should also update the locale attribute of the HTML tag for your Web Component. In your Vue app you should declare locale as a String prop on your App.vue and add a watcher for it. The watcher should change the locale of your Vue-i18n inside the Web Component. IF you want a two-way sync - you should emit an event from your App.vue whenever the locale is changed from inside your WebComponent as opposed to the wrapping web page.