I'm new to Vue.js and want to make an SDK of Web Components using it. I can make one single web ponent like this:

main.js:

import Vue from 'vue';
import App from './App.vue';
import wrap from '@vue/web-ponent-wrapper';

const customElement = wrap(Vue, App);

window.customElements.define('sky-chat', customElement);

Cli mand:

vue build --target wc --name sky-chat ./src/main.js

But this is just for one single ponent. How can I build a bunch of .vue files to separate web ponents in separate js files at once?

How can I generate a test html automatically containing all ponents inside it for testing in dist folder after building?

Thanks

I'm new to Vue.js and want to make an SDK of Web Components using it. I can make one single web ponent like this:

main.js:

import Vue from 'vue';
import App from './App.vue';
import wrap from '@vue/web-ponent-wrapper';

const customElement = wrap(Vue, App);

window.customElements.define('sky-chat', customElement);

Cli mand:

vue build --target wc --name sky-chat ./src/main.js

But this is just for one single ponent. How can I build a bunch of .vue files to separate web ponents in separate js files at once?

How can I generate a test html automatically containing all ponents inside it for testing in dist folder after building?

Thanks

• javascript
• vue.js
• vuejs2
• vue-ponent
• native-web-ponent

2 Answers 2

Version 4.3.0 added support for specifying multiple web ponents to be built via ma-separated glob patterns.

Examples:

vue-cli-service build --target wc --name myprefix src/ponents/core*.vue,src/ponents/basic*.vue

vue-cli-service build --target wc --name myprefix src/ponents/myFirst.vue,src/ponents/mySecond.vue

This produces an individual web ponent for each entry point specified, and a single demo.html that contains all ponents. However, there doesn't seem to be support for separate .js files per web ponent. The web ponents are bundled into a single file.

You can create a vue plugin to bundle vue files together.

// plugin.js

// your ponents
import Component1 from '/src/ponents/Component1.vue'
import Component2 from '/src/ponents/Component2.vue'
import Component3 from '/src/ponents/Component3.vue'

// This exports the plugin object.
export default {
  install (Vue, options) {
     // Add a ponent or directive to your plugin, so it will be installed globally to your project.
     Vue.ponent('ponent1', Component1)
     Vue.ponent('ponent2', Component2)
     Vue.ponent('ponent3', Component3)
  }
}


// your main vue file:

import myPlugin from './plugin.js'
Vue.use(myPlugin);

new Vue({
//...
})

Now you can use all the ponents you included in the plugin wherever you want without having to import them in each file.

Did I understand your question correctly?