I've been exploring ways to use a component from my Vue website on another site by embedding it in HTML. I came across
https://github.com/karol-f/vue-custom-elementAfter installing the npm packages vue-custom-element and document-register-element, I attempted the following in my main.js file:
import Vue from 'vue';
import vueCustomElement from 'vue-custom-element';
import 'document-register-element/build/document-register-element';
import reusableComponent from './components/reusableComponent.vue';
Vue.use(vueCustomElement);
Vue.customElement('reusable-component', reusableComponent);
Subsequently, I tried to incorporate the component into another website using the following code snippet.
<reusable-component></reusable-component>
<link href="/dist/static/css/app.36dd3e0b96e06ae6f3130a58cf185192.css" rel="stylesheet">
<script type="text/javascript" src="/dist/static/js/manifest.2ae2e69a05c33dfc65f8.js">.
</script>
<script type="text/javascript" src="/dist/static/js/vendor.614f0593bd5c53cf6320.js">.
</script>
<script type="text/javascript" src="/dist/static/js/app.1c44a427c10b2e559de0.js"></script>
However, before I could implement the reusable component on another website, my main site encountered a crash due to this error.
https://i.sstatic.net/V9clI.png
Are there others who have come across this issue before? Thank you for your help!