After creating a new Vue.js project with vue-cli and building it using the command:
vue build --target lib --name myWidget src/main.js
I needed to utilize Requirejs for loading:
<script>
requirejs.config({
paths: {
"Vue": "https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0b6b5a580f2eef5eef1f7">[email protected]</a>/dist/vue",
"myWidget": "https://codematic.tech/yamaWidget.umd",
}
});
</script>
<script>
require(["Vue"], function (Vue) {
console.log('Vue loaded');
require(["myWidget"], function (widget) {
console.log('Widget loaded');
});
});
</script>
Although everything seemed set up correctly, I encountered an error:
TypeError: Cannot read property 'config' of undefined
This error was traced back to the line:
Vue.config.productionTip = false
To resolve this issue, I had to add Vue = window.Vue; in the main.js file and window.Vue = Vue in the <script> tag after requiring Vue. The library was successfully loaded and mounted in #app, despite the workaround.
The problem arose when importing a module in the Vue's main.js file. For instance,
import Snotify from 'vue-snotify';resulted in the error:
Cannot read property 'extend' of undefinedwhich pointed to the line:
var script = external_commonjs_vue_commonjs2_vue_root_Vue_default.a.extend({Interestingly, loading both Vue.js and myWidget.umd.js directly through the <script> tag worked without any issues!