I encountered an issue that I need help with. Here is the scenario:
I have built a Vue application called my-admin micro app consisting of 4-5 screens/components (manage user, manage notifications, manage roles, etc.). I created a router.js file where I defined the following routes:
...imports...
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'main-layout',
component: MainLayout,
children:[
{
path : 'manage-user',
name : 'manage-user',
component : ManageUserComponent
},
{
path : 'manage-role',
name : 'manage-role',
component : ManageRoleComponent
}
]
}
]
const router = new VueRouter({
routes
})
export default router
I imported this router object in my main.js as follows:
...imports...
new Vue({
router,
render: h => h(App),
}).$mount('#app')
Lastly, I wrapped my micro app as a web component (MainLayout component) in main.js like so:
const myAdmin = wrap(Vue,MainLayout)
window.customElements.define('my-admin', myAdmin)
I built this micro app using the following command:
"build": "vue-cli-service build --target wc --name my-admin ./src/main.js",
This micro app runs perfectly when launched individually.
In my situation, I also have a shell application named my-shell developed in Vue. This shell application has its own vue router and is imported in its main.js as shown below:
Shell router:
...imports...
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'container',
component: Container,
children:[
{
path : 'admin',
name : 'admin-microapp',
component : AdminMicroAppContainerComponent
},
{
path : 'other',
name : 'other-microapp',
component : OtherMicroAppContainerComponent
}
]
}
]
const router = new VueRouter({
routes
})
export default router
I imported this router object into my-shell's main.js as follows:
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
Within my-shell's index.html file, I added script tags to load my micro apps' builds (my-admin.js file) like so:
<script src="../assets/my-admin/dist/my-admin.js"></script>
<script src="../assets/other-microapps/dist/micro-app.js"></script>
However, upon starting my-shell application, it throws the following error:
Uncaught TypeError: Cannot redefine property: $router.
I am seeking advice on resolving this error. How can I fix this?