How to create a component Navbar dynamically on Laravel mix Vue Js

Question

I learn and practice about vue js, and want to create a component like 1 view include Navbar, Footer, etc. I created an index for a first view, now I want to add navbar. But this navbar doesn't show in the index view. this my folder structure:

Resource 
    *js
        *spa
            *IndexComponent
            *HeaderComponent
        *app.js
        *App.vue
        *boostrap.js

on my IndexComponent its my code :

     <template>
       <div class="container.is-fullhd"> 
        <section class="section">
        <div class="container is-fluid">

          <table class="table is-hoverable">
            <thead>
              <tr>
                <th><abbr title="Position">#</abbr></th>
                <th>Unit</th>
                <th><abbr title="Pengajuan">Pengajuan</abbr></th>
                <th><abbr title="Quantity">Qty</abbr></th>
                <th><abbr title="Ukuran">Size</abbr></th>
                <th><abbr title="Status Ajuan">Status Ajuan</abbr></th>
                <th><abbr title="Status Urgensi">Status Urgensi</abbr></th>
                <th>Keterangan</th>
              </tr>
            </thead>

            <tbody>
              <tr>
                <th>1</th>
                <td>Bangsal Cempaka</td>
                <td>Tisue Toilet</td>
                <td>12</td>
                <td>Buah</td>
                <td><span class="tag is-warning">Pending</span></td>
                <td><span class="tag is-light" >Non Set</span></td>  
                <td>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat</td>
              </tr>
              <tr>
                <th>1</th>
                <td>Bangsal Cempaka</td>
                <td>Tisue Toilet</td>
                <td>12</td>
                <td>Buah</td>
                <td><span class="tag is-warning">Pending</span></td>
                <td><span class="tag is-light" >Non Set</span></td>  
                <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. A cupiditate, ?</td>
              </tr>

            </tbody>
            </table>

            </div>
         </section>


        </div>
        </template>

I use vue router, and use this to access another page. This is view on App.vue

    <template>
        <router-view></router-view>
        </template>

        <script>
        export default {
        }
        </script>

In this my app.js and boostrap.js

     require('./bootstrap');

     window.Vue = require('vue');

      import VueRouter from 'vue-router';
      Vue.use(VueRouter);

      import VueAxios from 'vue-axios';
      import axios from 'axios';

      import App from './App.vue';
      Vue.use(VueAxios, axios);


      import IndexComponent from './components/spa/IndexComponent.vue';
      import HeaderComponent from './components/spa/HeaderComponent.vue';
      import FooterComponent from './components/spa/FooterComponent.vue';
      import AboutComponent from './components/spa/AboutComponent.vue';



      const routes = [
          {
              name: 'index',
              path: '/',
              component: IndexComponent
          }, 
          {
              name: 'about',
              path: '/about',
              component: AboutComponent
          },    

       ];

       const router = new VueRouter({
        mode: 'history',
           routes: routes
       });

       const app = new Vue(Vue.util.extend({ router }, App)).$mount('#app');

So how can I can add this navbar to be always in view if I change this index? So this navbar will exist on every view.

Answer 1

If you want the Navbar to be always displayed even if you change the route (from "Index" to "About" for example), you can simply add your Navbar component (or your HTML code), in the same level as your <router-view> in App.vue:

<template>
  <!-- Your navbar component/element -->
  <Navbar />
  <!-- The vue-router's binded component (e.g "Index" or "About") -->
  <router-view></router-view>
</template>

<script>
export default {
}
</script>

So that, only the content binded in <router-view> will be updated when navigating, elements/components outside of this will be kept in the view.