Halo teman-teman semuanya, sekarang kita akan lanjutkan belajar bagaimana cara melakukan installasi dan konfigurasi Vue Router di dalam project Vue.js dan kita juga akan belajar bagaimana cara melakukan installasi Axios dan Bootstrap di dalam project Vue.js.
Langkah 1 - Installasi Axios
Axios merupakan library yang bersifat open source dan digunakan untuk melakukan HTTP request ke dalam server untuk melakukan manipulasi data. Sekarang kita akan tambahkan Axios di dalam project Vue.js. Axios ini akan kita manfaatkan untuk mengelola endpoint API dari Express.js yang sudah kita buat. Silahkan jalankan perintah di bawah ini di dalam terminal/CMD dan berada di project Vue.js.
npm install axios@0.21.1
Langkah 2 - Installasi dan Konfigurasi Bootstrap di Vue.js
Agar tampilan dari aplikasi yang kita bangun menjadi menarik, maka kita bisa menggunakan Bootstrap untuk mempercepat dalam pembuatan sebuah UI atau user interface di dalam project. Sekarang silahkan jalankan perintah berikut ini di dalam terminal/CMD :
npm install bootstrap@5.1.0
Setelah proses installasi selesai, sekarang kita akan lanjutkan untuk melakukan konfigurasi Bootstrap di dalam Vue.js agar bisa digunakan secara global. Silahkan buka file src/main.js, kemudian ubah kode-nya menjadi seperti berikut ini :
import { createApp } from 'vue'
import App from './App.vue'
//import Bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.min'
const app = createApp(App)
app.mount('#app')
Dari perubahan kode di atas, kita melakukan import 2 file, yaitu Bootstrap CSS dan Bootstrap JS.
//import Bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.min'
Dengan begeitu, maka Bootstrap sudah bisa digunakan secara global di dalam project Vue.js.
Langkah 3 - Membuat View / Component di Vue.js
Sekarang kita lanjutkan membuat sebuah view / component yang nanti akan digunakan untuk menampilkan halaman di dalam project, seperti table, form dan lain-lain.
Silahkan buat folder baru dengan nama views di dalam folder src. Setelah itu silahkan buat file baru dengan nama Index.vue di dalam folder views tersebut dan masukkan kode berikut ini :
<template>
<main class="container mt-custom">
<div class="bg-light p-5 rounded">
<h1>EXPRESS.JS + VUE.JS</h1>
<p class="lead">Tutorial FullStack Express.js dan Vue.js oleh <strong>SantriKoding.com</strong></p>
<a class="btn btn-lg btn-primary" href="http://santrikoding.com" target="_blank" role="button">SELENGKAPNYA</a>
</div>
</main>
</template>
<script>
export default {
}
</script>
<style>
</style>
Di atas, kita hanya menambahkan beberapa kode HTML saja dan view ini nanti akan kita gunakan sebagai halaman awal ketika project Vue.js kita diakses.
Setelah itu, kita lanjutkan lagi untuk membuat beberapa view yang nanti akan digunakan untuk menampilkan data dan form tambah data. Silahkan buat folder baru dengan nama posts di dalam folder src/views. Dan di dalam folder posts dilahkan buat 3 file baru, yaitu :
-
Index.vue
-
Create.vue
-
Edit.vue
Dan silahkan ubah isi dari ketiga file tersebut dengan kode berikut ini :
Index.vue
<template>
<div class="container mt-custom">
<div class="row">
<div class="card border-0 rounded shadow-sm">
<div class="card-body">
HALAMAN INDEX POSTS
</div>
</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
Create.vue
<template>
<div class="container mt-custom">
<div class="row">
<div class="card border-0 rounded shadow-sm">
<div class="card-body">
HALAMAN TAMBAH POSTS
</div>
</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
Edit.vue
<template>
<div class="container mt-custom">
<div class="row">
<div class="card border-0 rounded shadow-sm">
<div class="card-body">
HALAMAN EDIT POSTS
</div>
</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
Kode yang kita tambahkan di atas merupakan contoh saja, di pembahasan selanjutnya akan kita ubah sesuai dengan kebutuhan.
Langkah 4 - Membuat Route di Vue.js
Setelah berhasil menambahkan beberapa view / component, sekarang kita akan melakukan konfigurasi router baru dan memanggil view yang sudah kita buat di atas.
Sebelum itu, kita akan lakukan installasi untuk library Vue Router terlebih dahulu. Vue Router merupakan library yang digunakan untuk membuat navigasi di dalam aplikasi Vue.js menjadi SPA atau Single Page Application. Silahkan jalankan perintah di bawah ini di dalam terminal/CMD dan berada di project.
npm install vue-router@4.0.11
Setelah proses installasi selesai, sekarang silahkan buat folder baru dengan nama router di dalam folder src. Dan di dalam folder router silahkan buat file baru dengan nama index.js, kemudian masukkan kode berikut ini di dalamnya.
//import vue router
import { createRouter, createWebHistory } from 'vue-router'
//define a routes
const routes = [
{
path: '/',
name: 'home',
component: () => import( /* webpackChunkName: "home" */ '@/views/Index.vue')
},
{
path: '/posts',
name: 'posts.index',
component: () => import( /* webpackChunkName: "post.index" */ '@/views/posts/Index.vue')
},
{
path: '/posts/create',
name: 'posts.create',
component: () => import( /* webpackChunkName: "post.create" */ '@/views/posts/Create.vue')
},
{
path: '/posts/edit/:id',
name: 'posts.edit',
component: () => import( /* webpackChunkName: "post.edit" */ '@/views/posts/Edit.vue')
}
]
//create router
const router = createRouter({
history: createWebHistory(),
routes // config routes
})
export default router
Di atas, pertama kita import createRouter dan createWebHistory dari Vue Router.
//import vue router
import { createRouter, createWebHistory } from 'vue-router'
createRouter akan digunakan untuk menginisialisasi konfigurasi dari route yang akan kita buat, sedangkan createWebHistory merupakan mode yang digunakan di dalam Vue Router.
Mode di dalam Vue Router ada 2, yaitu createWebHistory dan createWebHashHistory, perbedaanya kurang lebih seperti berikut ini :
createWebHistory
createWebHashHistory
Ya, benar. Jika kita menggunakan jenis createWebHashHistory, maka URL akan di tambahkan # di depannya.
Untuk konfigurasi router di atas, kita menambahkan 4 route baru. Dan untuk penjelasan dari route tersebut kurang lebih seperti berikut ini :
{
path: '/',
name: 'home',
component: () => import( /* webpackChunkName: "home" */ '@/views/Index.vue')
},
Dari route di atas, kurang lebih penjelasannya seperti berikut ini :
-
path - merupakan URL yang akan dibuat, di atas contohnya adalah /.
-
name - merupakan nama dari route yang kita buat, ini digunakan agar mempermudah kita dalam memanggil route di dalam component.
-
component - merupakan view/component yang akan digunakan saat route ini di panggil, di atas contohnya kita akan memanggil file di dalam folder src/views/Index/vue.
INFORMASI :
@ bisa diartikan sebagai ganti dari folder src.
Langkah 5 - Import Router di Main.js
Agar router yang sudah kita buat dapat digunakan di dalam project Vue.js, maka kita perlu melakukan register di dalam file main.js terlebih dahulu. Silahkan buka file src/main.js, kemudian ubah kode-nya menjadi seperti berikut ini :
import { createApp } from 'vue'
import App from './App.vue'
//import Bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.min'
//import router
import router from './router'
const app = createApp(App)
//use vue router
app.use(router)
app.mount('#app')
Dari perubahan kode di atas, pertama kita melakukan import file router yang sudah kita buat sebelumnya.
//import router
import router from './router'
Setelah itu, kita register router tersebut ke dalam instance Vue.js menggunakan keyword use.
//use vue router
app.use(router)
Maka, sekarang router yang kita buat sudah bisa digunakan di dalam project Vue.js.
Langkah 6 - Menampilkan / Render Vue Router
Agar project Vue.js dapat menampilkan sebuah view / component dari konfigurasi router yang kita buat, maka kita perlu melakukan sedikit perubahan di dalam file App.vue.
Silahkan buka file src/App.vue, kemudian ubah semua kode-nya menjadi seperti berikut ini :
<template>
<div>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container">
<a class="navbar-brand" href="#">EXPRESS.JS + VUE.JS</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<router-link :to="{name: 'home'}" class="nav-link" aria-current="page">HOME</router-link>
</li>
<li class="nav-item">
<router-link :to="{name: 'posts.index'}" class="nav-link">POSTS</router-link>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- render vue router -->
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style>
body {
background-color: lightgray !important;
}
.mt-custom {
margin-top: 110px;
}
</style>
Di atas, kita juga menambahkan beberapa kode HTML untuk navbar. Dan di atas untuk menampilkan Vue Router kita menggunakan kode berikut ini :
<!-- render vue router -->
<router-view></router-view>
Sekarang silahkan lihat project Vue.js di dalam http://localhost:8080, jika berhasil maka akan mendapatkan hasil seperti berikut ini :
Sampai disini pembahasan bagaimana cara installasi dan konfigurasi Vue Router di dalam project Vue.js. Di artikel selanjutnya kita akan belajar menampilkan data di dalam Vue.js dari Rest API yang dibuat di Express.js.
Terima Kasih