1
votes

I'm using vue-cli 3 to bundle my vue components into web components, using a command simmilar like that:

package.json

"build:wc": "vue-cli-service build --target wc-async --name webcomponent-global 'src/components/*/*.vue'"

This all works fine, however according to the docs you need a global vue dependency in order for this to work, as the vue runtime is excluded from the build:

Note the bundle relies on Vue being globally available on the page.

This forces me to include the web component using two script tags like so:

<script src="https://unpkg.com/vue"></script>
<script src="path/to/my-element.js"></script>

<!-- use in plain HTML, or in any other framework -->
<my-element></my-element>

Is there any way to tell vue-cli to include the vue dependency into the webcomponent bundle itself, so that only a single script needs to be included in order for the web component to work properly.

1
Why do you need to build this as web components then? I thought exclusion of Vue is a feature of this mode, not a deficiency. Still, this issue might be helpful.raina77ow
It is a feature as it prevents the vue runtime from being bundled into every single of your web components, therefore decreasing bundle size and loading times. This is what you want 99% of the time, just in the case of my production environment I can't do it that way. Thank you for the issue, I'll have a look.Philip Feldmann
I am in the same situation. A certain piece of our app has use for others in my organization. We are externalizing this piece so others can use it, however we do not want to require them to import Vue themselves. We wanted the user not to know Vue is being used internally. We were going to create various adapters (angular, react etc etc..) that people could use transparently in their applications not knowing ultimately our piece is a vue component.Matthew Kirkley

1 Answers

2
votes

You can inline Vue by passing --inline-vue flag as mentioned here: https://cli.vuejs.org/guide/build-targets.html#web-component