How to mount two seperate applications inside one Vue project?

March 7, 2022

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?

>Solution :

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);
}