search

karol-f / vue-custom-element

Vue Custom Element - Web Components' Custom Elements for Vue.js
https://karol-f.github.io/vue-custom-element/
MIT License
1.97k stars 187 forks source link

i18n - sync language change on custom element #236

Open pawepaw opened 3 years ago

pawepaw commented 3 years ago

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 commented 3 years ago

Can You please prepare CodeSandbox?

tmcdos commented 9 months ago

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.