Halo teman-teman semuanya, pada artikel sebelumnya kita telah belajar membuat project Vue 3 TypeScript menggunakan Vite dan pada artikel ini kita semua akan belajar bagaimana cara install dan konfigurasi Vue Router.
Apa itu Vue Router ?
Vue Router adalah library official untuk menangani navigasi dan sistem routing dalam aplikasi Vue.js. Dengan Vue Router, kita bisa membuat Single Page Application (SPA) yang memungkinkan navigasi antar halaman tanpa reload penuh, sehingga pengalaman pengguna lebih mulus dan cepat.
Langkah 1 - Install Vue Router
Silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD dan pastikan sudah berada di dalam project Vue 3.
npm install vue-router@4.5.0
Silahkan tunggu proses installasinya sampai selesai.
Langkah 2 - Integrasi Bootstrap
Disini kita akan melakukan integrasi Bootstrap di dalam project Vue 3. Dan untuk Bootstrap akan kita ambil dari CDN atau Content Delivery Network (Online).
Silahkan buka file index.html, kemudian ubah semua kode-nya menjadi seperti berikut ini.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: lightgray;
font-family: 'Quicksand', sans-serif
}
</style>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
Di atas, kita menambahkan Bootstrap CSS dan JS dari CDN.
Langkah 3 - Membuat View Home
Sekarang kita akan membuat sebuah view yang nanti ditampilkan sebagai homepage dari website yang kita buat.
Silahkan buat folder baru dengan nama views di dalam folder src, kemudian di dalam folder views silahkan buat file baru dengan nama home.vue dan masukkan kode berikut ini di dalamnya.
src/views/home.vue
<script setup lang="ts">
</script>
<template>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="p-5 mt-5 mb-4 bg-light rounded-5">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">VITE + VUE 3 + TS</h1>
<p class="col-md-8 fs-4">
Belajar CRUD dengan Vue 3 dan TypeScript di SantriKoding.com
</p>
</div>
</div>
</div>
</div>
</div>
</template>
Langkah 4 - Konfigurasi Router
Setelah view berhasil dibuat, maka langkah berikutnya adalah membuat konfigurasi router-nya.
Silahkan teman-teman buat folder baru dengan nama routes di dalam folder src dan di dalam folder routes silahkan buat file baru dengan nama index.ts, kemudian masukkan kode berikut ini di dalamnya.
src/routes/index.ts
//import createRouter, createWebHistory and Type RouteRecordRaw from vue-router
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
// Define route type with explicit type annotations
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'home',
component: () => import(/* webpackChunkName: "home" */ '../views/home.vue')
},
]
// Create router with explicit type annotations
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
Dari penambahan kode di atas, pertama kita import createRouter, createWebHistory dan Type RouteRecordRaw dari Vue Router.
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
Setelah itu, kita buat variable baru dengan nama routes yang memiliki jenis array. Dan kita gunakan Type RouteRecordRaw untuk mendefinisikan sebuah array routes.
// Define route type with explicit type annotations
const routes: Array<RouteRecordRaw> = [
//...
]
Di dalamnya, kita mendefinisikan sebuah route baru untuk halaman home.
{
path: '/',
name: 'home',
component: () => import( /* webpackChunkName: "home" */ '../views/home.vue')
}
Dalam pembuatan route yang sederhana, kurang lebih terdapat 3 object, yaitu :
path - digunakan untuk alamat / URL dari route.name - digunakan untuk penamaan route, ini akan mempermudah kita dalam pemanggilan route nantinya.component - merupakan lokasi file view yang dipanggil saat route diakses atau dijalankan.
Setelah itu, kita buat instance router dari array routes yang kita buat di atas.
const router = createRouter({
history: createWebHistory(),
routes
})
Di atas kita gunakan createWebHistory() pada konfigurasi history, yang artinya URL yang dihasilkan tidak ada tanda #.
Contoh URL yang dihasilkan.
https://example.com/posts
Berbeda jika teman-teman menggunakan hash mode createWebHashHistory() pada konfigurasi history, maka URL yang dihasilnya kurang lebih seperti berikut ini.
https://example.com/#/posts
Setelah itu, kita daftarkan routes array yang sudah kita definisikan sebelumnya.
routes
Langkah 5 - Register Route
Agar route bisa diakses dari seluruh aplikasi Vue 3, maka kita perlu mengaturnya secara global. Di dalam Vue 3 untuk mengatur konfigurasi secara global kita bisa letakkan di dalam file main.ts.
Jadi, silahkan teman-teman buka file src/main.ts, kemudian ubah kode-nya menjadi seperti berikut ini.
src/main.ts
//import createApp from Vue
import { createApp } from 'vue';
//import component App
import App from './App.vue';
//import config routes
import routes from './routes'
//create App Vue
const app = createApp(App);
//gunakan "routes" di Vue dengan plugin "use"
app.use(routes);
app.mount('#app');
Di atas, kita import konfigurasi routes-nya terlebih dahulu.
//import config routes
import routes from './routes'
Setelah itu, kita letakkan createApp dari Vue di dalam variable yang bernama app. Ini bertujuan agar kita bisa lebih mudah dalam menggunakannnya.
//create App Vue
const app = createApp(App);
Dan untuk melakukan register routes, kita bisa menggunakan keyword use.
//gunakan "routes" di Vue dengan plugin "use"
app.use(routes);
Langkah 6 - Konfigurasi Router View
Agar view dari router bisa dirender pada halaman browser, maka kita perlu memanggil component dari Vue Router yang bernama <view-router />.
Di dalam Vue 3, component yang bersifat global adalah App.vue, maka kita akan letakkan component dari Vue Router di dalam file tersebut.
Silahkan buka file src/App.vue, kemudian ubah semua kode-nya menjadi seperti berikut ini.
src/App.vue
<template>
<div>
<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
<div class="container">
<router-link :to="{ name: 'home' }" class="navbar-brand">HOME</router-link>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<router-link to="/products" class="nav-link active" aria-current="page">PRODUCTS</router-link>
</li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0" role="search">
<a href="https://santrikoding.com" target="_blank" class="btn btn-success">SANTRIKODING.COM</a>
</ul>
</div>
</div>
</nav>
<!--- render router view -->
<router-view />
</div>
</template>
Di atas, kita menambahkan layout untuk project ini dan untuk me-render setiap route pada layout tersebut, kita gunakan kode berikut ini.
<!--- render router view -->
<router-view />
Langkah 7 - Uji Coba Project
Sekarang silahkan reload / refresh project Vue 3, jika berhasil maka kita akan mendapatkan hasil seperti berikut ini.
Kesimpulan
Pada artikel ini, kita semua telah belajar mengenal apa itu Vue Router, kemudian melakukan installasi dan konfigurasi Vue Router di dalam project Vue 3 TypeScript.
Pada artikel selanjutnya, kita semua akan belajar bagaimana cara menampilkan data dari Rest API di dalam Vue 3 TypeScript.
Terima Kasih