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.

Mkknx · Accepted Answer · 2020-04-02 10:08:47Z

2

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.

answered Apr 2, 2020 at 10:08

Mkknx

865 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related