Exporting Vue individual components as Web Components

Question

I have a Vue app I've put together over the last few days defining a set of components that will be embedded into another app; the Vue app is for rapid development and acts as a test harness for the components.

I've now come to the point of adding these components to the main non-Vue app for which they are intended. I know I can build Web Components with npm run build -- --target wc, but I don't want to build the whole test harness app into a single component; rather, I want to build individual Vue components from the app into separate redistributable Web Components.

How can I achieve this?

Answer 1

With @vue/cli-service-global (currently in beta), you can indeed build Web Components from your Vue SFC.

You can skip your ("test harness") app by specifying your components files as a glob in the entry CLI argument:

$ vue-cli-service build --target wc --name foo 'src/components/*.vue'

However this will still build a single JS file containing all your Custom Elements.

You can further decouple these individual elements in chunks by using the Async Web Components target instead (i.e. wc-async instead of wc):

$ vue-cli-service build --target wc-async --name foo 'src/components/*.vue'

Then you include the generated foo.js loader file as a <script> in your HTML file. It will define all your Custom Elements but not load them before they appear in the DOM.