Usage of external libs in custom element

[mahenzon]

I'm trying to use an external library for tooltips inside my custom element. I tried vue-directive-tooltip, v-tooltip, but they doesn't work.

Here's how I install and try to use it:

• yarn add %libname%
• import it in main.js and Vue.use(tooltipLib) (if doing console.log(tooltipLib), it shows that it's installed)
• try to use new directive - tooltip doesn't appear nor on hover nor on programmatic show

I checked if popper.js is available (tooltips depend on this lib) - and yes, I can import it without any errors. I tried to use a component instead of directive (v-tooltip example), it doesn't work too :(

Are there any limitations for using external libs? Or maybe some limitations for any added directives? Is there any way to use such a lib like v-tooltip inside vue-custom-element?

[karol-f]

Remember that all custom elements are separate Vue Instances. Add that libs to component's root or the same Vue instance You are using.

Check github issues of this lib for "store" or "vuex". Hope it helps.

[mahenzon]

Thanks for a fast answer I read a dozen of issues about Vuex and store, but that doesn't help at all. I have Vuex inside the custom-element and it works. I use it this way:

• store/modules folder with modules and store/index.js with Vuex initialization
• import it this way import store from './store';
• and use this way store.dispatch(...

---

anyway I found the problem, sorry for inconvenience

I'm using micromodal lib and its z-index is 99999. I've added z-index: 100000; for the tooltip, so now it's shown above the modal (discovered it when added a long line for the tooltip, and it appeared from behind the modal)

Hope it'll help someone