Unable to use Vuex + namespace with Typescript

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

[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

[cah-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.