Unable to use Vuex + namespace with Typescript

[eni9889]

Hi,

I am doing the following in typescript

Vue.customElement('coupon-preview', new CouponPreview({ store }).$options);

But I am getting the following error because the store is not present in the new component:

Cannot read property '_modulesNamespaceMap' of undefined"

If I instead do

Vue.customElement('coupon-preview', new CouponPreview({ store }));

The store is there but the component fails to render:

template or render function not defined

Anything I can do to include the store in typescript?

I also tried the suggestion here but no dice https://github.com/karol-f/vue-custom-element/issues/161

[karol-f]

Maybe const component = new CouponPreview({ store })

And

Vue.customElement('coupon-preview', component.$options);?

[AlexanderErmoshkin]

Hi, I'm facing the same issue. Unfortunately such code doesn't fix it:

const component = new App({ store }) Vue.customElement('custom-element', component.$options);

Are there any workarounds?

[eni9889]

@karol-f that does not work either. The only way I got this to work was by manually setting this.$store = store in beforeCreate of the component which is less than ideal

[karol-f]

Unfortunately I don't have much experience with Typescript (yet). PR's are welcome.

We can ask if @isaaclyman can have a look but I assume he is now busy man (like we all due to virus). Did You try his demo repo - https://github.com/isaaclyman/vue-custom-element-ts-example?

[isaaclyman]

I don't see any TypeScript-specific annotations or errors. If it were a TS issue, casting to any would solve it.

[karol-f]

There was minor fix by @qpitlove (https://github.com/karol-f/vue-custom-element/pull/200) - I don't know if it's related

[outcomes-keyan-hardman]

If anyone stumbles upon this thread I found an extremely simple solution to this issue. This works for issues with VueX store as well as Vue Router.

When defining your parent component you can do the following -

@Component({ store, router })
export default class App extends Vue {}

In your main.ts -

//vue-custom-element & IE11 polyfill
import VueCustomElement from 'vue-custom-element';
import 'document-register-element/build/document-register-element';
Vue.use(VueCustomElement);
Vue.customElement('your-new-tag', (new App().$options));

You will then be able to access your vuex-class namespaces.