Seperate Dashbord and Forum Component From App component in vuejs

Is there a way to mount multiple components on a single vue instance.
I have my admin dashboard and a forum page and i don't want header and navigation to show up on these pages.

Here's what I've tried:

import App from "./App.vue";
import Admin from "./Admin.vue";
import Forum from "./Forum.vue";

const app = new Vue({
    router,
    store,
    
    components: {
      App, Admin, Forum
    }
}).$mount("#app");

Then in my App.vue, I have other child components

<template>
<div>
  <div class="general-page">
    <AppHeader></AppHeader>
      <transition name="fade">
        <router-view></router-view>
    </transition>
    <AppFooter></AppFooter>
  </div>
</div>
</template>

<script>
import AppHeader from "./components/AppHeader";

import Login from "./components/Login.vue";
import Register from "./components/Register.vue";

import AppFooter from "./components/AppFooter.vue";

export default {
  components: {
    AppHeader,
    Login,
    Register,
    AppFooter
  }
};
</script>

In Forum.vue

<template>
<div>
  <div class="forum-page">
    <ForumHeader></ForumHeader>
      <transition name="fade">
        <router-view></router-view>
    </transition>
    <ForumFooter></ForumFooter>
  </div>
</div>
</template>

<script>
import ForumHeader from "./components/ForumHeader";

import ForumFooter from "./components/ForumFooter.vue";

export default {
  components: {
    ForumHeader,
    ForumFooter
  }
};
</script>

Admin.vue

<template>
<div>
  <div class="admin-page">
    <AdminHeader></AdminHeader>
      <transition name="fade">
        <router-view></router-view>
    </transition>
    <AdminFooter></AdminFooter>
  </div>
</div>
</template>

<script>
import AdminHeader from "./components/AdminHeader";

import AdminFooter from "./components/AdminFooter.vue";

export default {
  components: {
    AdminHeader,
    AdminFooter
  }
};
</script>

Routes for Forum and Admin

{
            path: '/admin',
            name: 'Admin',
            component: Admin,
            meta: {
                requiresAuth: true
            },
            children: [
                { 
                    path: '', 
                    name: 'Profile',
                    component: Profile
                },
                { 
                    path: 'uploads',
                    name: 'Uploads',
                    component: Uploads,
                    meta: {
                        requiresCreatorAccess: true
                    } 
                },
                { 
                    path: 'add-post',
                    name: 'AddPost',
                    component: AddPost,
                    meta: {
                        requiresCreatorAccess: true
                    } 
                }
            ]
        },

        {
            path: '/forum',
            name: 'Forum',
            component: Forum,
            children: [
                { 
                    path: '', 
                    name: 'Channel',
                    component: Channel
                },
                { 
                    path: 'threads',
                    name: 'Threads',
                    component: Threads
                },
                { 
                    path: 'topic',
                    name: 'Topic',
                    component: Topic 
                }
            ]
        },

How do I dynamically go to each route and mount each component on el: #app ?

Without changing any routing and template structure, you could use CSS to hide the app header, footer.

Another option may be to v-if the app header,footer to not render when on those routes using something like $router.currentRoute for matching.

CSS

/* 
Assuming app header and footer have an id attribute
  Change to your needs
*/
#app-header,
#app-footer {
  display: none;
}

v-if on currentRoute

We have to do a few of things here.

• Create a data variable (showMe: true)
• Create a method (evaluateShowMe)
• Create a watcher for the route ('$route'()) Be aware of the quotes!

Note: Feel free to rename the variable and function to suit your needs.

We need to watch $route because this is outside of a <router-view/> so we need to do this dynamically so the variable performs the evaluator function every time the route changes.

App.vue:

<template>
<div>
  <div class="general-page">
    <AppHeader
      v-if="showMe"
    ></AppHeader>
      <transition name="fade">
        <router-view></router-view>
    </transition>
    <AppFooter
      v-if="showMe"
    ></AppFooter>
  </div>
</div>
</template>

<script>
import AppHeader from "./components/AppHeader";

import Login from "./components/Login.vue";
import Register from "./components/Register.vue";

import AppFooter from "./components/AppFooter.vue";

export default {
  components: {
    AppHeader,
    Login,
    Register,
    AppFooter
  },
  data() {
    return {
      showMe: true
    }
  },
  methods: {
    evaluateShowMe() {
      // Get the substring of the path between first and second slash
      // This will allow to include any child pathing
      // NOTE: In my test the first index ([0]) was empty so used one ([1]) for the `filter`
      const entryPath = this.$router.currentRoute.path.split('/').filter((x,i) => i === 1);

      // We want to exclude the following paths i.e. hide when on these
      // There should only be one item in the array so we extract with `[0]`
      return (entryPath[0] !== 'admin' || entryPath[0] !== 'forum');
    }
  },
  watch: {
    '$route'() {      
      this.showMe = this.evaluateShowMe();
    }
  }
};
</script>


</details>