Bundle the vue dependency into a web component build using vue-cli 3

Question

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.

Answer 1

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