Tutorial Cara Membuat SPA Menggunakan Laravel dan Vue JS #2 : Membuat Component & Router - Halo teman-teman semuanya, di artikel sebelumnya kita sudah membahas cara membuat peoject baru dengan Laravel dan sekaligus cara install Vue JS dan Vue Router menggunakan NPM.
Pada kesempatan kali ini kita akan belajar membuat sebuah component di dalam Vue JS untuk menampilkan content yang akan di tampilkan di layar web browser.
Langkah 1 - Membuat Component
Langsung saja kita mulai, pada praktek kali ini kita bersama-sama akan mencoba membuat beberapa component diantaranya
-
Home - component ini akan kita gunakan menampilkan isi content dari halaman Home.
-
About - component ini akan kita gunakan untuk menampilkan content dari halaman Tentang.
-
Contact - component ini akan kita gunakan untuk menampilkan content dari halaman Kontak.
-
Navigation - dan component ini akan kita gunakan sebagai main menu untuk berpindah halaman dan nanti kita akan jadikan sebagai navbar.
Sekarang, seilahkan teman-teman buat sebuah folder baru dengan nama components dan router di dalam folder resources/js, jadi strukturnya seperti berikut ini :
resources/js/
├── components
├── router
├── app.js
├── bootstrap.js
Setelah itu, silahkan buat beberapa file Vue JS di dalam folder component, diantaranya
- Home.vue
- About.vue
- Contact.vue
- Navigation.vue
Jadi strukturnya kurang lebih sepert berikut ini :
resources/js/
└── components
├── About.vue
└── Contact.vue
└── Home.vue
└── Navigation.vue
├── router
├── app.js
├── bootstrap.js
Silahkan buka file Navigation.vue dan masukkan kode berikut ini :
<template>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<router-link :to="{ name: 'home' }" class="navbar-brand">SANTRIKODING</router-link>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<router-link :to="{ name: 'home' }" class="nav-link">HOME</router-link>
</li>
<li class="nav-item">
<router-link :to="{ name: 'about' }" class="nav-link">TENTANG</router-link>
</li>
<li class="nav-item">
<router-link :to="{ name: 'contact' }" class="nav-link">KONTAK</router-link>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">CARI</button>
</form>
</div>
</nav>
</template>
<script>
export default {
}
</script>
Buka file Home.vue dan masukkan kode berikut ini :
<template>
<div class="jumbotron">
<h1 class="display-4">SANTRI KODING</h1>
<p class="lead">Belajar Laravel Vue SPA - Single Page Application</p>
<hr class="my-4">
<router-link :to="{ name: 'about' }" class="btn btn-primary btn-lg" role="button">SELENGKAPNYA</router-link>
</div>
</template>
<script>
export default {
}
</script>
Buka file About.vue dan masukkan kode berikut ini :
<template>
<div class="container-fluid" style="margin-top:50px">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-body">
TENTANG
<hr>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
Buka file Contact.vue dan masukkan kode berikut ini :
<template>
<div class="container-fluid" style="margin-top:50px">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-body">
KONTAK
<hr>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
Langkah 2 - Membuat Vue Router
Oke, setelah beberapa component sudah dibuat, sekarang kita akan membuat router untuk beberapa component kita tadi.
Silahkan buat file baru dengan nama index.js di dalam folder resources/js/router kurang lebih strukturnya seperti berikut ini :
resources/js/
└── components
├── About.vue
└── Contact.vue
└── Home.vue
└── Navigation.vue
├── router
└── index.js
├── app.js
├── bootstrap.js
Sekarang, silahkan buke file index.js dan masukkan kode di bawah ini :
import Home from '../components/Home.vue'
import About from '../components/About.vue'
import Contact from '../components/Contact.vue'
export default {
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/about',
name: 'about',
component: About,
},
{
path: '/contact',
name: 'contact',
component: Contact,
}
]
}
Sekarang, silahkan buka file app.js di dalam folder resources/js dan ubahlah kodenya menjadi seperti berikut ini :
require('./bootstrap');
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import routes from './router'
Vue.component('navigation', require('./components/Navigation').default);
const app = new Vue({
el: '#app',
router: new VueRouter(routes),
});
Langkah 3 - Membuat View
Secara default Laravel memiliki view dengan nama welcome.blade.php dan sekarang kita akan membuat sebuah view baru di dalam folder resources/views dengan nama app.blade.php
Jadi kurang lebih struktur foldernya seperti berikut ini :
resources/views/
├── app.blade.php
├── welcome.blade.php
Sekarang buka file app.blade.php dan masukkan kode berikut ini :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<title>Laravel Vue SPA - SantriKoding.com</title>
</head>
<body style="background-color: #edf2f7;">
<main id="app">
<navigation></navigation>
<router-view></router-view>
</main>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" ></script>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
Langkah 4 - Menambahkan Route di Laravel
Silahkan buka file routes/web.php dan ubah semua kodenya menjadi seperti dibawah ini :
Route::get('/', function () {
return view('app');
});
Route::view('/{any}', 'app')->where('any', '.*');
Langkah 5 - Compile File JS Dengan Laravel MIX
Sebelum kita menjalankan project kita, kita akan melakukan copile atau bundle semua file JavaScript dan Vue kita menggunakan Laravel MIX.
jalankan perintah dibawah ini untuk melakukan compile :
npm run dev && npm run watch
Silahkan tunggu proses compile sampai selesai, setelah selesai kita bisa melihat project kita dengan mengetikkan di browser http://localhost:8000 atau jika teman-teman menggunakan valet bisa langsung http://laravel-vue-spa.test.
Jika berhasil, kurang lebih hasilnya seperti berikut ini
KESIMPULAN
Kita telah belajar bagaimana cara membuat Vue Component dan Vue Router di. Laravel 6. Jika teman-teman memiliki pertanyaan atau kebingungan saat mencobanya, silahkan bisa berkomentar di bawah ini artikel ini.
Terima Kasih