My goal is to establish a foundational Vue application that offers essential features such as signing in, navigating with a sidebar, and the flexibility to interchange navbar items. I envision creating separate Vue applications for each navbar item.
Main concept:
The plan is to provide a REST API and a fundamental container (Vue app) capable of rendering other Vue apps within a specific div element. This setup will enable others to incorporate their own frontend apps and interact with the API if needed. Instead of creating numerous apps from scratch, the primary objective is to develop a highly modular administration system with a seamless Plug and Play system. A registration process will be implemented for custom apps, allowing the API to recognize these apps along with their base URLs so that my base app can retrieve them.
https://i.sstatic.net/3qQBl.png
Setting up the base app
The base app will have a route for custom apps
{
path: '/app/*',
component: CustomAppContainer,
},
and will display this view
<template>
<div id="customAppContainer">Render custom apps here</div>
</template>
The navbar will contain a link /app/one to navigate and render the 'one' app in the customAppContainer.
Configuring custom apps
When defining routes for custom apps, the base URL needs to be specified
export default new Router({
base: '/one/',
routes: [
{
path: '/',
component: Home,
},
],
});
In the main.js, updating it like this may be necessary
new Vue({
router,
render: h => h(CustomAppContainer),
}).$mount('#customAppContainer');
However, the challenge lies in ensuring that the app recognizes the CustomAppContainer and #customAppContainer.
Another consideration is how to distribute when only having some index.html files and needing to integrate one into another. How can a base app be deployed so that when a user wants to access a custom app via /app/myCustomApp, it gets mounted into the customAppContainer?
An example akin to this scenario is illustrated in Nextcloud
During Vue app development, running it as a standalone entity is feasible. However, for production purposes, the plan involves moving files from the dist folder into an apps directory. Upon launching the base container application, it should automatically detect all sub-applications present.
If more details are required, please feel free to request!