How to include store?

[metacurb]

Hi there,

Big fan of your wrapper, very cool idea.

I have a project that is taking my entire app, and turning it into a custom element.

import 'es6-promise/auto';
import 'babel-polyfill';

import Vue from 'vue';
import Vue2Filters from 'vue2-filters';
import vueCustomElement from 'vue-custom-element';
import 'document-register-element/build/document-register-element';

import App from './App';
import store from './store';

import myPlugin from './plugins/myPlugin';
import scrollToElement from './mixins/scrollToElement';
import './filters';

require('smoothscroll-polyfill').polyfill();

Vue.config.productionTip = false;

Vue.use(myPlugin);
Vue.use(scrollToElement);
Vue.use(api);
Vue.use(Vue2Filters);
Vue.use(vueCustomElement);

Vue.mixin(
  scrollToElement,
);

Vue.customElement('my-custom-widget', App);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  template: '<App/>',
  components: { App },
});

I get lots of errors, such as - "TypeError: Cannot read property 'getters' of undefined"

And I assume that this is due to me not importing my store into the custom element. I'm wondering the process of how to do this?

I've also noticed that I get errors in IE as well - Object doesn't support property or method 'call' (this example doesn't even load in IE)

I have document-register-element included, so I'm not sure what would cause this.

Any help would be much appreciated!

[karol-f]

Hi, first of all if you are using Vue.customElement(...) You don't need new Vue({...}). Just insert my-custom-widget into HTML.

If your app works without Vue.customElement(), it should also work with it as vue-custom-element is just a wrapper.

My guess is that it's also not working with new Vue() so errors are not related to this library.

Please prepare example on https://codesandbox.io/s/vue and I will gladly help. Regards!

[metacurb]

Hi @karol-f ,

You are right, my mistake. In the example I supplied in the original issue, I have now removed it.

However, I still cannot access the store. I can't access getters because my webapp never registers the store. Normally I would do -

new Vue({
  el: '#app',
  store, // store is imported into the app
  template: '<App/>',
  components: { App },
});

See this example, where I have no access to the store, but it is imported in the same way. https://codesandbox.io/s/7z9m0890yx

[karol-f]

@BeauAgst vue-custom-element is just a wrapper. Just add App.store = store; - https://codesandbox.io/s/vj1m6y60ml and it will work.

Regards! Feel free to re-open issue.

[metacurb]

@karol-f that doesn't make my store globally available. Now the store is only available to the App.vue, whereas usually you declare it in new Vue and it's available to all components.

See in even the Vuex shopping cart example, the store is registered within new Vue, making it globally accessible.

Sorry - link! https://github.com/vuejs/vuex/blob/dev/examples/shopping-cart/app.js

I feel like maybe I'm missing something obvious, but if not, it might be worth updating how to add the store globally in the docs :)

[karol-f]

@BeauAgst Of course it is working - check https://codesandbox.io/s/vj1m6y60ml where I've added store getter in HelloWorld.vue. It works for all sub-components of App.vue.

One regard - every Vue.customElement(...) is new Vue(...) but if you inject to every custom element same store instance (like you do with App.store = store) you will have it accessible in every custom element.

[metacurb]

What!? I'm so sorry, for some reason it didn't work on my initial attempt. It now works in Chrome.

However, I'm still getting an issue in IE whereby it doesn't look because of the call method. The example doesn't load in IE either -

The line causing an issue is var _this = _possibleConstructorReturn(this, (CustomElement.__proto__ || Object.getPrototypeOf(CustomElement)).call(this));

[karol-f]

@BeauAgst I've checked demo again (https://karol-f.github.io/vue-custom-element) on IE 10/11/Edge and it's working there. Is it working without Vue.customElement(...) (with new Vue(...))?

What IE version is not working?

Can you prepare GitHub repository with code to check?

[metacurb]

If I switch it back to new Vue it works fine. I have

import 'document-register-element/build/document-register-element'; at the top of my file, and I also have babel-polyfill.

I am checking in IE11.

It's coming from line 33 of - https://github.com/karol-f/vue-custom-element/blob/38be647167aff30d22dd94d04feb791ac38eb0a8/src/utils/registerCustomElement.js

[karol-f]

It's very strange as it's only executed in if (isES2015) {...} and IE won't get there.

Check this site on IE 11 - it's working for me. It's simplest usage of this library - https://jsbin.com/xubekab/2/edit?html,output

Check if you have newest libraries versions.

[metacurb]

Wow! So if I import document-register-element from unpkg it works fine, however if I use the npm package it breaks. The problem is, I need it to be packaged up inside my component!

Very strange, I'll look into this further. Thanks for your help!

[karol-f]

unpkg it's just proxy to NPM so it is exact same version as in NPM. Check if you have latest version (1.7.2). However it was working for me without problems with previous versions too.

[metacurb]

I'm such a fool. Thanks for your help and I'm sorry for wasting your time.

I was importing document-register-element after vue-custom-element. Again, so sorry and thanks!

[karol-f]

I'm glad it works. Regards.