I've set up a Vue.js app to act as a container for multiple other "apps". The goal was to:
- have a reusable codebase for discovering/loading components
- develop the other apps as Vue.js libraries to allow component loading
In my first library, I have a main.js file:
import HelloRadar from './components/HelloRadar.vue'
export default HelloRadar
and the HelloRadar component:
<template>
<div>
Hello from radar !
</div>
</template>
<script>
export default {
name: 'HelloRadar'
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
Now, in my main app, I have this code:
<template>
<div>
<ul>
<li v-for="module in modules" :key="module" @click="loadModule(module)">
{{ module }}
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'HelloWorld',
data() {
return {
modules: [],
selectedModuleMenu: null,
selectedModuleApp: null
}
},
created: function () {
axios.get("/orbit/api/modules").then((response) => {
var modulesList = response.data;
this.modules = modulesList;
});
},
methods: {
loadModule: function (moduleName) {
this.loadExternalComponent("/modules/" + moduleName + "/" + moduleName + ".umd.js");
},
loadExternalComponent: function(url) {
const name = url.split('/').reverse()[0].match(/^(.*?)\.umd/)[1];
if (window[name]) return window[name];
window[name] = new Promise((resolve, reject) => {
const script = document.createElement('script');
script.async = true;
script.addEventListener('load', () => {
resolve(window[name]);
});
script.addEventListener('error', () => {
reject(new Error(`Error loading ${url}`));
});
script.src = url;
document.head.appendChild(script);
});
return window[name];
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
The problem is that the function loadExternalComponent doesn't seem to be working. I'm getting this JavaScript error in the console:
Uncaught TypeError: Cannot read property 'createVNode' of undefined
Uncaught (in promise) TypeError: Chaining cycle detected for promise #
I found this method here
Any ideas on how to improve this kind of application? Is using libraries the right approach? Thanks for your assistance.