Using Vue18n with Vue.customElement('name-for-comp', App);

[wahiche-ideal]

I am having a lot of trouble trying to understand how I am able to add this with the setup that is required for vueI18n to be included.

I am expecting to use ` import Vue from 'vue' import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

function loadLocaleMessages () { const locales = require.context('./locales', true, /[A-Za-z0-9-,\s]+.json$/i) const messages = {} locales.keys().forEach(key => { const matched = key.match(/([A-Za-z0-9-]+)./i) if (matched && matched.length > 1) { const locale = matched[1] messages[locale] = locales(key) } }) return messages }

export default new VueI18n({ locale: 'en-US', fallbackLocale: 'en-US', messages: loadLocaleMessages(), silentTranslationWarn: true })

` But I cannot figure out how to do it, I have read other posts on here that try to explain how to do it, but they are not explained well enough and leave out a lot of the answer.

Please help.

[karol-f]

Please try this https://github.com/karol-f/vue-custom-element/issues/27#issuecomment-309397434

Regards

[wahiche-ideal]

Thanks for the quick reply.

I did not understand it at first but what I did was just add App.i18n = i18n;

With the i18n being this ` import Vue from 'vue' import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

function loadLocaleMessages() { const locales = require.context('./locales', true, /[A-Za-z0-9-,\s]+.json$/i) const messages = {} locales.keys().forEach(key => { const matched = key.match(/([A-Za-z0-9-]+)./i) if (matched && matched.length > 1) { const locale = matched[1] messages[locale] = locales(key) } }) return messages }

export default new VueI18n({ locale: 'en-US', fallbackLocale: 'en-US', messages: loadLocaleMessages(), silentTranslationWarn: true })

` So those in the future can understand what I did and it worked.