mount Vue apps into container of main Vue app

Question

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 wan

Answer 1

I finally got it working with the following approach and maybe this will help someone. Suggestions highly appreciated!

---

Base App:

The base app which renderes all the sub-apps has a CustomAppContainer view that loads the sub-apps into a div container.

Further I added mode: 'history' to the router.

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/apps/*',
      component: CustomAppContainer,
    }
  ]
})

I put the build files of that app into my production directory in a folder called base

---

File Server:

I created a static Express file server that always serves the index.html file of the base app. But I can request the index.html file of the sub-app too.

const express = require('express');
const path = require('path');
const fs = require('fs');
const cors = require('cors');
const app = express();
const router = express.Router();

app.use(cors());

app.use(express.static(path.resolve(__dirname, '../base')));

fs.readdirSync(path.resolve(__dirname, '../apps')).forEach(appName => {
    app.use(express.static(path.resolve(__dirname, `../apps/${appName}`)));
});

router.get('/subApps/:appName', function(req, res) {
    res.sendFile(path.resolve(__dirname, `../apps/${req.params.appName}/index.html`));
});

router.get('*', function(req, res) {
    res.sendFile(path.resolve(__dirname, '../base/index.html'));
});

app.use('/', router);

app.listen(3000, function() {
    console.log('Fileserver listening on port 3000');
});

---

Custom App:

When creating custom apps all I have to do is to extend the router config

export default new Router({
    base: '/my-first-custom-app/',
    mode: 'history',
    routes: [
        {
            path: '/',
            component: PageOne,
        },
        {
            path: '/two',
            component: PageTwo,
        },
    ],
});

and rename the #app ID to #customApp in the index.html, main.js and App.vue.

Further I put the build files of that sub-app into my production directory in a folder called apps.

---

This allows me to create mulitple apps and render them into a div container of my main app container. The sub-app itself doesn't have to be a Vue app. I can create new apps with Jquery, Angular or React too, or even just a plain .html file.