Combine/composite two independet vue apps together

userB3go 0
Viewed 25

I have two vue apps that are developed independently of each other.

  • User UI
  • Admin UI

Both have own routes, store, configs, etc.
I found this comment https://forum.vuejs.org/t/composing-multiple-apps-as-a-single-spa/12622/16 which handles each app as a component inside a main app.

I tried and it and got it working till i tried it with my "real" apps.
They fail miserably because they cant resolve paths and missing stuff like the routing.

Main: App.vue

<script>
export default {
  name: "MainApp",
  data() {
    return {
      app: "user",
    };
  },
  methods: {
    changeApp(name) {
      console.log("Change app called", name);
      this.app = name;
    },
  },
};
</script>

<template>
  <div>
    <UserApp v-if="app === 'user'" @changeApp="changeApp"></UserApp>
    <AdminApp v-else-if="app === 'admin'" @changeApp="changeApp"></AdminApp>
    <div v-else>Default App ({{ app }})</div>
  </div>
</template>

Main: main.js

import { createApp } from "vue";
import Main from "./App.vue";

import UserApp from '../apps/user/src/App.vue';
import AdminApp from '../apps/admin/src/App.vue';

const main = createApp(Main);

main.component("UserApp", UserApp);
main.component("AdminApp", AdminApp);

main.mount("#main");

Main: index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
  <title>OpenHaus</title>
</head>

<body>
  <div id="main"></div>
  <script type="module" src="/src/main.js"></script>
</body>

</html>

Inside the main vue app i have a folder called "apps" which contains the admin & user apps.
Each App.vue file is then imported and handled as a file.

Doing this, a important step is missing: How tho handle from each sub-app the main.js file?

Treating each app as a component for the main app sees not as good as thought as first. How can i combine the two apps together as a single app, while i maintain/develop/test each app separate?

Perhaps after "compiling" as library: https://vitejs.dev/guide/build.html#library-mode ?

User App: https://github.com/OpenHausIO/frontend
Admin App: https://github.com/OpenHausIO/admin-frontend
Main App: https://github.com/OpenHausIO/frontend-composition

single-page-application vue.js javascript html
1 Answers

I have personally never heard of a setup where two apps are combined into one. I can understand why this would cause the conflicts that you mention. If I was in your shoes I would probably go with a different approach.

It seems that you have a user and admin app. If the intention is to have a user and admin environment where the content is similar, but certain things can only be accessed if you are an admin. I would create one app that establishes based on your credentials whether you will be in the 'admin' or 'user' environment. Which will be one app that is not split up into two.

If the user and admin apps will be completely different in content, then I would simply create two different apps. This will not only resolve the conflicts, but I think it will also give you a clearer overview of the apps that you are working on. It can become difficult to make the distinction on which of the apps you are making a change when both are combined into one. Especially if you intend to upscale the apps in the future.

kelvinCodeK0
Related