Create Vue app that is able to render other Vue apps within a container

I want to create a basic Vue app which is able to render multiple Vue apps within a div container. It would be awesome to support React and Angular apps too and even plain HTML or HTML with Jquery. That’s why I just care for the index.html file.

I have a static Express server which serves the basic Vue app and the apps I want to render in a container. This server just looks for the index.html file and sends it back to the client.

This container tries to parse the HTML response by using the fetch API and updates the innerHTML of that container.

<template>
  <div id="customAppContainer"></div>
</template>

<script>
export default {
  async mounted() {
    await this.updateCustomAppContainer();
  },
  methods: {
    async updateCustomAppContainer() {
      const fullRoute = this.$router.currentRoute.fullPath;
      const routeSegments = fullRoute.split("/");
      const appsIndex = routeSegments.indexOf("apps");
      const appKey = routeSegments[appsIndex + 1];

      // document.getElementById(
      //   "customAppContainer"
      // ).innerHTML = `<object style="width: 100%; height:100%;" data="http://localhost:3000/subApps/${appKey}"></object>`;

      const response = await fetch(`http://localhost:3000/subApps/${appKey}`);
      const htmlContent = await response.text();
      document.getElementById("customAppContainer").innerHTML = htmlContent;
    }
  },
  watch: {
    async $route(to, from) {
      await this.updateCustomAppContainer();
    }
  }
};
</script>

Unfortunately the app container only renders the plain HTML file, not the Vue app. When I use the object approach it will render both sub-apps but I am not able to update the browser URL.

I created a minimalistic repository for reproduction. Here you can play around and see what problems I am facing :slight_smile:

The development directory contains the static fileserver, the base Vue app that should render the vue apps and the apps themselves. Please keep in mind that the first app is a Vue app and the second app is just a basic HTML file.

The production directory contains the fileserver, the distributed Vue apps and the html file. Simply run the static fileserver from the production directory and go to http://localhost:3000 you should see my current work then.

It would be awesome if someone knows how to setup a basic app container rendering sub-apps that are able to update the browser URL (when navigating within the sub-app).

Thanks in advance :slight_smile:

Update:

This is the response I get from the server when fetching a sub-app

and this is the content I get when I use await response.text();

Hope this helps…