Halo teman-teman semuanya, di artikel sebelumnya kita telah berhasil menginstall/membuat project baru di Vue Js dan sekaligus menjalankannya. Di artikel kali ini kita semua akan belajar untuk menginstall dan mengkonfigurasi beberapa library yang akan kita gunakan di dalam project Vue Js, diantaranya yaitu : Axios, Vue Router, Bootstrap.
Langkah 1 - Installasi Axios
Axios merupakan salah satu library yang sangat populer untuk melakukan HTTP request ke dalam sebuah server, ini bisa kita gunakan untuk mendapatkan data, mengirim data dan yang lain ke sebuah server dengan Rest API. Kemudian jalankan perintah di bawah ini untuk menginstall Axios di dalam project Vue Js.
npm i axios
Dan silahkan tunggu proses installasinya sampai selesai, dan pastikan harus terhubung dengan internet karena axios akan di unduh secara online.
Langkah 2 - Installasi Vue Router
Vue Router merupakan library official dari Vue Js untuk membuat sebuah route dengan lebih mudah dan SPA atau Single Page Application. Kita bisa dengan mudah menambahkan library ini di dalam project Vue Js, silahkan jalankan perintah di bawah ini untuk menambahkan Vue Router.
npm i vue-router@next
Langkah 3 - Installasi Bootstrap, jQuery dan Popper.js
Bootstrap merupakan salah satu CSS Framework yang sangat populer dan banyak sekali digunakan oleh para web developer dalam mengembangkan sebuah aplikasi dan website, karena kemudahan dan memiliki banyak component yang di sediakan untuk mempercepat dalam membangun sebuah tampilan website secara responsive.
Jalankan perintah di bawah ini untuk menginstall Bootstrap, jQuery dan Popper.js di dalam project Vue Js kita.
npm i bootstrap jquery popper.js
Langkah 4 - Membuat View
Sebelum kita melakukan konfigurasi Vue Router, sekarang kita akan membuat basic template/view yang akan kita gunakan untuk menampilkan halaman form register, login dan dashboard.
Silahkan buat folder baru dengan nama views di dalam folder src. Kemudian di dalam folder views silahkan buat folder lagi dengan nama auth dan di dalam folder auth silahkan buat 2 file baru, yaitu : Register.vue dan Login.vue.
Kemudian, di dalam folder src/views silahkan buat folder baru lagi dengan nama dashboard dan di dalam folder dashboard silahkan buat file baru dengan nama Index.vue. Kurang lebih struktur foldernya seperti berikut ini :
Sekarang, kita lanjutkan untuk memberikan basic template di masing-masing view di atas. Silahkan buka file src/views/auth/Register.vue, kemudian masukkan kode berikut ini :
<template>
<div>
<h1>REGISTER</h1>
</div>
</template>
<script>
export default {
}
</script>
Kemudian buka file src/views/auth/Login.vue dan masukkan kode berikut ini :
<template>
<div>
<h1>LOGIN</h1>
</div>
</template>
<script>
export default {
}
</script>
Terakhir, buka file src/views/dashboard/Index.vue dan masukkan kode berikut ini :
<template>
<div>
<h1>DASHBOARD</h1>
</div>
</template>
<script>
export default {
}
</script>
Di atas, kita hanya memberikan sample basic template saja dan kita akan ubah di langkah-langkah selanjutnya.
Langkah 5 - Membuat Route
Sekarang, kita akan belajar membuat sebuah route di dalam aplikasi Vue. Silahkan buat folder baru dengan nama router di dalam folder src. Kemudian, silahkan buat file baru di dalam folder router dengan nama index.js. Dan masukkan kode berikut ini :
//import vue router
import { createRouter, createWebHistory } from 'vue-router'
//define a routes
const routes = [
{
path: '/login',
name: 'login',
component: () => import( /* webpackChunkName: "login" */ '@/views/auth/Login.vue')
},
{
path: '/register',
name: 'register',
component: () => import( /* webpackChunkName: "register" */ '@/views/auth/Register.vue')
},
{
path: '/dashboard',
name: 'dashboard',
component: () => import( /* webpackChunkName: "dashboard" */ '@/views/dashboard/Index.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 history dari Vue Router.
Mode history 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.
Kemudian, kita define 3 route, contohnya seperti ini :
{
path: '/login',
name: 'login',
component: () => import( /* webpackChunkName: "login" */ '@/views/auth/Login.vue')
}
Dari route di atas, kurang lebih penjelasannya seperti berikut ini :
-
path - merupakan URL yang akan dibuat, di atas contohnya adalah /login.
-
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/auth/Login.vue.
INFO :
@ bisa diartikan sebagai folder src
Langkah 6 - Register Router di Main.js
Sekarang, kita lanjutkan untuk proses register vue router agar bisa diakses secara global di dalam project Vue. Silahkan buka file src/main.js kemudian, ubah semua kode-nya menjadi seperti berikut ini :
import { createApp } from 'vue'
import App from './App.vue'
//import router
import router from './router'
const app = createApp(App)
//use vue router
app.use(router)
app.mount('#app')
Di atas, pertama kita import router dari folder router.
//import router
import router from './router'
Setelah itu, kita gunakan Router di dalam Vue Js menggunakan plugin use.
//use vue router
app.use(router)
Langkah 7 - Konfigurasi Bootstrap di Vue Js
Sekarang, kita lanjutkan untuk mengkonfigurasi Bootstrap agar bisa digunakan di dalam project Vue. Silahkan buka file src/main.js kemudian ubah kode-nya menjadi seperti berikut ini :
import { createApp } from 'vue'
import App from './App.vue'
//import router
import router from './router'
//import Bootstrap, Popper, jQuery
import 'bootstrap/dist/css/bootstrap.css'
import 'jquery/dist/jquery.min'
import 'popper.js/dist/popper.min'
import 'bootstrap/dist/js/bootstrap.min'
const app = createApp(App)
//use vue router
app.use(router)
app.mount('#app')
Di atas, kita menambahkan beberapa kode untuk mengimport bootstrap, yaitu :
//import Bootstrap, Popper, jQuery
import 'bootstrap/dist/css/bootstrap.css'
import 'jquery/dist/jquery.min'
import 'popper.js/dist/popper.min'
import 'bootstrap/dist/js/bootstrap.min'
Langkah 8 - Konfigurasi App.vue
Terakhir, agar vue router kita dapat di tampilkan di dalam project, maka kita akan menambahkan sintak <router-view /> di dalam file src/App.vue. Silahkan buka file src/App.vue, ubah kode-nya menjadi seperti berikut ini :
<template>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<router-link :to="{name: 'login'}" class="navbar-brand">LARAVEL PASSPORT + VUE</router-link>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<router-link :to="{name: 'register'}" class="nav-link" href="">REGISTER</router-link>
</li>
<li class="nav-item">
<router-link :to="{name: 'login'}" class="nav-link" href="#">LOGIN</router-link>
</li>
</ul>
</div>
</nav>
<router-view />
</template>
<script>
export default {
}
</script>
<style>
body {
background: lightgray!important;
}
</style>
Di atas, kita menambahkan beberapa element HTML dari bootstrap untuk membuat navigasi menu. Dan kita juga menambahkan kode yang digunakan untuk merender Vue Router.
<router-view />
Sekarang, jika kita jalankan/refresh project Vue, maka tampilannya akan berubah menjadi seperti berikut ini :
Silahkan klik REGISTER dan LOGIN, maka kita akan mendapatkan hasil yang kurang lebih seperti berikut ini :
Di atas, kita sudah berhasil menampilkan halaman menggunakan Vue Router. Di artikel selanjutnya kita semua akan belajar bagaimana cara membuat proses register menggunakan Laravel Passport dan Vue Js.
Terima Kasih
EBOOK - Membangun Toko Online Dengan Laravel, Vue Js dan Payment Gateway : https://bit.ly/lp-ebook-laravel-vue-payment-gateway