Cannot pass vue-i18n object into web-component
See original GitHub issueI have a component that uses vue-i18n and works as a normal vue component.
When creating web component I had TypeError: this is undefined
error with typescript, then created the component with this approach:
const layout = new ModuleLayout().$options;
Vue.customElement('my-layout', layout);
And this is my i18n object:
import messages from '@/locales/i18n.json';
export const i18n = new VueI18n({
locale: process.env.VUE_APP_I18N_LOCALE || 'en',
fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
messages: messages
})
For adding i18n I tried these approaches but none works:
const layout = new ModuleLayout({ i18n }).$options;
Vue.customElement('my-layout', layout);
const layout = new ModuleLayout().$options;
layout.i18n = i18n;
Vue.customElement('my-layout', layout);
In both ways I have these errors:
TypeError: "this.$i18n is undefined"
TypeError: "i18n is undefined"
Issue Analytics
- State:
- Created 3 years ago
- Comments:6 (2 by maintainers)
Top Results From Across the Web
Vuejs: Can't pass object to web component using v-bind
v-bind assumes an attribute if it can't determine that the target is a property, which would be the case for Stencil components.
Read more >Web components - Vue I18n
However, the provided Web Components cannot be inserted directly into HTML. You need to prepare the following Web Components to host the i18n...
Read more >How to integrate Web Components using Lit in Angular
In this case, we'll install it using npm. npm install --save @webcomponents/webcomponentsjs. Then you can ...
Read more >Deep dive into WebComponents - ITNEXT
This is a size comparison between the most common web frameworks: Vanilla Custom Elements → ready to use; LitElement → ~5kb; Vue.js →...
Read more >Web Components integration guide - Adyen Docs
You cannot set the session expiry to more than 24 hours after session ... sessionData : the payment session data you need to...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
it works , but with a typescript error:
Update: While serving, after recompiling
this.$i18n is undefined
error appears again.Hi, it seems to work like this. Please let me know if it will work for You - https://codesandbox.io/s/vue-template-72o5z?file=/src/main.js