How to mount two seperate applications inside one Vue project?

user_7826511 0
Viewed 577

I am creating a frontend and a backend application inside one Vue 3 project. Everything works fine except that app.js is throwing following error, depending on which component is visited in the browser.

I you visit the app.vue:

[Vue warn]: Failed to mount app: mount target selector "#cms" returned null.

and if you visit the cms.vue:

[Vue warn]: Failed to mount app: mount target selector "#app" returned null.

The mounting file app.js looks like this:

require('./bootstrap');

import {createApp} from 'vue';
import app from "../vue/app";
import cms from "../vue/cms";
import router from "./router";

createApp(app)
    .use(router)
    .mount("#app");

createApp(cms)
    .use(router)
    .mount("#cms");

Is there any way I can prevent the browser warning?

vuejs3 vue-component vue.js
1 Answers

You could query the document for those elements, and only mount the ones that exist:

const appEl = document.querySelector('#app');
if (appEl) {
  createApp(app).use(router).mount(appEl);
}

const cmsEl = document.querySelector('#cms');
if (cmsEl) {
  createApp(cms).use(router).mount(cmsEl);
}
user_62771510
Related