Halo teman-teman semuanya, di artikel sebelumnya kita semua telah belajar bagaimana cara installasi Vue Js dan menjalankannya, sekarang kita semua akan belajar bagaimana cara menginstall library pendukung untuk kebutuhan project yang kita bangun beserta konfigurasi-nya.
Langkah 1 - Installasi Vue Router
Pertama, kita akan lakukan installasi untuk library Vue RouterVue Router merupakan library yang digunakan untuk membuat navigasi di dalam aplikasi Vue menjadi SPA atau Single Page Application. Silahkan jalankan perintah di bawah ini di dalam terminal/CMD dan berada di project Vue kita.
npm install vue-router@next
Langkah 2 - 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, axios ini akan kita manfaatkan untuk mengelola endpoint API dari Laravel yang sudah kita buat. Silahkan jalankan perintah di bawah ini di dalam terminal/CMD dan berada di project Vue kita.
npm install axios
Langkah 3 - Installasi Bootstrap, Popper.js, jQuery
Sekarang, kita lanjutkan untuk installasi Bootstrap, Bootstrap akan kita gunakan sebagai CSS framework untuk membangun tampilan agar lebih mudah. Silahkan jalankan perintah di bawah ini di dalam terminal/CMD dan di dalam project Vue.
npm install bootstrap popper.js jquery
Langkah 4 - Konfigurasi Bootstrap di Vue Js
Sekarang, kita lanjutkan untuk mengintegrasikan Bootstrap di dalam aplikasi Vue kita, silahkan buka file src/main/js dan ubah kode-nya menjadi seperti berikut ini :
import { createApp } from 'vue'
import App from './App.vue'
//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'
createApp(App).mount('#app')
Di atas, kita import beberapa file css dan js dari Bootstrap, Popper dan jQuery.
Langkah 5 - Membuat Views
Sekarang, kita lanjutkan membuat view/component yang akan kita gunakan untuk menampilkan template di Vue. Silahkan buat folder baru dengan nama views di dalam folder src. kemudian di dalam folder views silahkan buat folder lagi dengan nama post dan di dalam folder post silahkan buat 3 file baru, yaitu Index.vue, Create.vuue dan Edit.vue.
Sekarang, kita akan menambahkan template sederhana terlebih dahulu. Silahkan buka file src/views/post/Index.vue dan masukkan kode berikut ini :
<template>
<h1>INDEX</h1>
</template>
<script>
export default {
}
</script>
Kemudian buka file src/views/post/Create.vue dan ubah kode-nya menjadi seperti berikut ini :
<template>
<h1>CREATE</h1>
</template>
<script>
export default {
}
</script>
Dan buka file src/views/post/Edit.vue dan ubah kode-nya menjadi seperti berikut ini :
<template>
<h1>EDIT</h1>
</template>
<script>
export default {
}
</script>
Langkah 6 - 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: '/',
name: 'post.index',
component: () => import( /* webpackChunkName: "post.index" */ '@/views/post/Index.vue')
},
{
path: '/create',
name: 'post.create',
component: () => import( /* webpackChunkName: "post.create" */ '@/views/post/Create.vue')
},
{
path: '/edit/:id',
name: 'post.edit',
component: () => import( /* webpackChunkName: "post.edit" */ '@/views/post/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 history dari Vue Router.
Mode history di dalam Vue Router ada 2, yaitu createWebHistory dan createWebHashHistory, perbedaanya kurang lebih seperti berikut ini :
createWebHistory
- http://domain.com/post/artikel-1
- http://domain.com/post/artikel-2
createWebHashHistory
- http://domain.com/#/post/artikel-1
- http://domain.com/#/post/artikel-2
Ya, benar. Jika kita menggunakan jenis createWebHashHistory, maka URL akan di tambahkan # di depannya.
Kemudian, kita define 3 route, contohnya seperti ini :
{
path: '/',
name: 'post.index',
component: () => import( /* webpackChunkName: "post.index" */ '@/views/post/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/post/Index/vue.
INFO :
@ bisa diartikan sebagai folder src
Langkah 7 - Register Vue 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'
//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, pertama kita import router yang sudah kita buat di atas.
//import router
import router from './router'
Kemudian, kita gunakan router di dalam Vue menggunakan plugin use.
//use vue router
app.use(router)
Langkah 8 - Menampilkan Vue Router
Sekarang, kita lanjutkan untuk menampilkan Vue Router di dalam main component. Silahkan buka file src/App.vue dan ubah kode-nya menjadi seperti berikut ini :
<template>
<router-view></router-view>
</template>
<script>
export default {
}
</script>
Di atas, agar Vue Router dapat di render di dalam component, maka kita harus menggunakan kode seperti berikut ini :
<router-view></router-view>
Sekarang, jika kita lihat project Vue Js kita, maka kurang lebih seperti berikut ini :
Di atas, bisa kita lihat, dengan url / atau main page, kita memanggil views/component post index. Di artikel selanjutnya kita semua akan belajar menampilkan dari RESTful API di dalam Vue Js.
Terima Kasih.
EBOOK - Membangun Website Sekolah Degan Laravel dan Vue Js : https://santrikoding.com/ebook/laravel-vue
EBOOK - Membangun Toko Online dengan Laravel dan Livewire : https://santrikoding.com/ebook/toko-online-laravel-livewire