I am using vue cli 3 with typescript support. Actually, i'm trying to create web component using vuejs.
main.ts
import Vue from 'vue';
import './plugins/vuetify';
import App from './App.vue';
import router from './router';
import store from './store';
import wrap from '@vue/web-component-wrapper';
import RoleManagement from './views/role-management/RoleManagement.vue';
const CustomElement = wrap(Vue, RoleManagement);
window.customElements.define('custom-component', CustomElement);
Vue.config.productionTip = false;
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');
Command to create web component is as follows,
vue-cli-service build --target wc --name custom-component ./src/main.ts
After this getting error,
Cannot find module '@vue/cli-plugin-babel'
facing this issue with v3.1.2 but it works when i downgrade to v3.1.0 (with a warning that this version is no longer maintained) a temporary work around.This can be a possibility to your problem
It seems that doesn't run when the vue-cli-service
is called directly.
Somehow it can be workarounded by calling via npm script.
Why don't you try setting
scripts: {
build: "vue-cli-service build"
}
in your package.json
and try later with
npm run build --target wc --name custom-component ./src/main.ts
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With