adhik13th
6 months ago
403
0
Vue

The best way to create component Laravel Vue SPA

Posted 6 months ago by adhik13th

I learn and practice about vue js , and want to create a component like 1 view include Navbar , Footer , etc. I create index for a first view now i want to add navbar . but this navbar cant showed 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>
  <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 using 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 i can add this navbar to always on view if i change this index ? so this navbar will dinamic on every view

Please sign in or create an account to participate in this conversation.