I need to create a web component that will be used as an embeddable widget in various sites. For this, I'm following the Vue.js docs for using the web component build target of vue-cli.
vue-cli-service build --target wc --name my-element MyElement.vue
This command creates a standalone web component from the MyElement
vue.js component. So far everything works as expected.
My first problem comes from different entry points for the web component and for the "normal" build. For the normal build, we have a main.js
file which loads Vue, registers global plugins with Vue.use(plugin)
and creates a new Vue instance. When using the wc
target, the entry point is just an element, so there are no options to register global plugins with Vue.use()
which needs to be run before creating the Vue instance.
So my first question: How do I load plugins with Vue.use()
when building a web component?
My 2nd question: I use a component library for Vue, like Quasar. (or any other) But I get strange errors when using the built web components, which I don't get when running a "normal" build. Is there some particular reason that certain component libraries wouldn't work for a wc
target? If so, what is it? How can I get around it? Are there any particular component libraries which support web components?