mount Vue apps into container of main Vue app

I would like to create a base Vue app providing basic functionality like signing in, navigating through a sidebar etc. But the navbar items have to be interchangeable. I want to create separate Vue apps representing these navbar items.

---

Basic idea: A REST API and a basic container (Vue app), which is able to render other Vue apps in a specifc div element, should be provided. This would allow other ones to add their own frontend apps and work with that API if they want to. So I will just provide some basic apps. The main idea is to create a Plug and Play system for a very modular administration system. I will provide a registration process for that custom app so the API knows that app and it's base url and my base app can fetch all those apps.

---

Base app setup

So my base app provides a route for these custom apps

{
  path: '/app/*',
  component: CustomAppContainer,
},

and will render this view

<template>
  <div id="customAppContainer">Render custom apps here</div>
</template>

and my navbar could provide the link /app/one to navigate and render the app called 'one' in that customAppContainer.

---

Custom app setup

When defining my routes I have to set the base url

export default new Router({
  base: '/one/',
  routes: [
    {
      path: '/',
      component: Home,
    },
  ],
});

but for the main.js I am not sure how to set it up. I think I have to update this to something like

new Vue({
  router,
  render: h => h(CustomAppContainer),
}).$mount('#customAppContainer');

but obviously this app doesn't know CustomAppContainer and #customAppContainer.

---

Further I'm thinking about the distribution when I only have some index.html files and want to integrate one into another. So how could I deploy a base app and when the user wants to access a custom app via /app/myCustomApp I mount the custom app into the customAppContainer ?

A similiar example would be Nextcloud

When developing a new Vue app I can run it as a standalone application. But for production I want to take the files from the dist folder and put them into a apps directory and when running my base container application it knows about all those sub-apps on start.

Please let me know if you need more information!

from mount Vue apps into container of main Vue app