Cara Menggunakan Vue-Router di Laravel 8

wahyunanangwidodo

wahyunanangwidodo Rabu, 25 November 2020

Cara Menggunakan Vue-Router di Laravel 8

Kita hanya perlu manambahkan modul vue-route ke aplikasi dan membuat navigasi route untuk menggunakannya.

Caranya adalah sebagai berikut

Mari kita install laravel, library vue beserta modul pendukung, dan vue-router.

laravel new lavue-router

cd lavue-router
 
npm install

npm install vue vue-loader vue-template-compiler --save-dev

npm install vue-router

Selanjutnya buka app.js lalu buat seperti dibawah ini.

import Vue from 'vue';

import VueRouter from 'vue-router'

Vue.use(VueRouter)

import App from './components/App'
import Home from './components/Home'
import Login from './components/Login'
import Register from './components/Register'

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/register',
      name: 'register',
      component: Register
    },
  ],
})

new Vue({
  el: '#app',
  components: { App },
  router,
});

Silahkan buat folder baru dengan nama components di direktori resources > js dan tambahkan 4 komponen didalamnya dengan nama App.vue, Home.vue, Login.vue, dan Register.vue. Lalu copas template dibawah sesuai component.

//App.vue
<template>
  <div>
    <div class="menu">
      <ul>
        <li>
          <router-link :to="{ name: 'login' }">Login</router-link>
        </li>
        <li>
          <router-link :to="{ name: 'register' }">Register</router-link>
        </li>
      </ul>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>
//Home.vue
<template>
  <div>
    <h1>Welcome</h1>
  </div>
</template>
//Login.vue
<template>
  <div>
    <h1>Halaman Login</h1>
  </div>
</template>
//Register.vue
<template>
  <div>
    <h1>Halaman Register</h1>
  </div>
</template>

Disini App.vue digunakan sebagai komponen induk / main component, sedangkan komponen Login.vue dan Register.vue kita buat sebagai halaman contoh untuk kita gunakan vue-router dan membuat navigasi link menu.

Selanjutnya buka welcome.blade.php dan ubah html yang ada dengan dibawah ini.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{csrf_token()}}">
    <title>Vue-Router</title>  
  </head>
  <body>
    <div id="app">
      <app></app>
    </div>
    <script src="{{ mix('js/app.js') }}"></script>
  </body>
</html>

Terakhir, buka file webpack.mix.js ubah mix yang ada dengan dibawah ini dan jalankan perintah compiling npm run dev.

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js').vue()
npm run dev

✔ Compiled Successfully in 97ms
┌──────────────────────────────────────────────────────┬───────┐
│                                                 File │ Size  │
├──────────────────────────────────────────────────────┼───────┤
│                                           /js/app.js │ 1 MiB │
└──────────────────────────────────────────────────────┴───────┘
webpack compiled successfully

Setelah selesai, silahkan jalankan aplikasi pada browser.

php artisan serve
Cara Menggunakan Vue-Router di Laravel 8

Vue-router siap digunakan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Berlangganan

Berlangganan untuk mendapat pemberitahuan artikel terbaru via email.