Halo teman-teman semuanya, pada kesempatan kali ini kita akan belajar menginstall beberapa library untuk kebutuhan project Vue Js kita, diantaranya adalah :
- Axios
- Vue Router
- Bootstrap
- jQuery
- Popper.js
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
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 - Konfigurasi Vue Router
Setelah di atas kita berhasil menginstall Vue Router sekarang kita lanjutkan untuk menkonfigurasi dan membuat beberapa route di dalam project Vue Js kita.
Silahkan buat folder baru dengan nama router di dalam folder src dan kemudian silahkan buat file baru dengan nama index.js di dalam folder router tersebut dan masukkan kode berikut ini :
//import vue
import Vue from 'vue'
//import vue router
import VueRouter from 'vue-router'
//use vue router on vue
Vue.use(VueRouter)
//create object instance vue router
const router = new VueRouter({
routes: [
{
path: '/',
name: 'home',
component: () =>
import( /* webpackChunkName: "Auth" */ "@/views/home/Index"),
},
{
path: '/login',
name: 'login',
component: () =>
import( /* webpackChunkName: "Auth" */ "@/views/auth/Index"),
},
{
path: '/dashboard',
name: 'dashboard',
component: () =>
import( /* webpackChunkName: "Auth" */ "@/views/dashboard/Index"),
}
],
mode: 'history'
})
export default router
Dari penambahan kode di atas mari kita bahas satu-satu dari awal.
Pertama kita import Vue terlebih dahulu.
//import vue
import Vue from 'vue'
Kemudian kita import Vue Router
//import vue router
import VueRouter from 'vue-router'
Dan kita gunakan Vue Router di dalam Vue Js dengan kode seperti berikut ini :
//use vue router on vue
Vue.use(VueRouter)
Kemudian kita buat object dari class Vue Router untuk mendeklarasikan beberapa route, yaitu : home, login dan dashboard. Kurang lebih seperti berikut ini :
//create object instance vue router
const router = new VueRouter({
routes: [
{
path: '/',
name: 'home',
component: () =>
import( /* webpackChunkName: "Auth" */ "@/views/home/Index"),
},
{
path: '/login',
name: 'login',
component: () =>
import( /* webpackChunkName: "Auth" */ "@/views/auth/Index"),
},
{
path: '/dashboard',
name: 'dashboard',
component: () =>
import( /* webpackChunkName: "Auth" */ "@/views/dashboard/Index"),
}
],
mode: 'history'
})
Dari kode di atas kita ambil contoh untuk route home, dimana di dalamnya mempunyai beberapa config yaitu :
path merupakan URL yang akan digunakan saat component tersebut di panggil atau digunakan, karena home maka kita gunakan path-nya adalah /.
name merupakan nama dari route, ini bisa kita manfaatkan saat memanggil route tersebut di dalam component berdasarkan nama.
component merupakan component yang akan digunakan saat route ini di panggil atau dijalankan, disini kita menggunakan teknik lazy load untuk memanggil component tersebut. Dimana component tersebut hanya akan di load saat dijalankan saja.
Kemudian ada mode: 'history' ini digunakan untuk membuat URL yang dihasilkan dari route menjadi lebih user-friendly atau SEO-friendly. Jika kita menggunakan mode: 'hash'. maka setiap url dari route akan di tambahkan # di depannya.
Langkah 5 - Import Bootstrap, jQuery dan Popper.js
Kemudian kita akan import Bootstrap, jQuery dan Popper.js di dalam project Vue Js, silahkan buka file src/main.js kemudian tambahkan kode berikut ini :
//import bootstrap css & js
import 'bootstrap/dist/css/bootstrap.css'
import 'jquery/dist/jquery.min'
import 'popper.js/dist/popper.min'
import 'bootstrap/dist/js/bootstrap.min'
Kita juga akan import router kita di dalam file main.js ini, silahkan buka lagi file src/main.js kemudian tambahkan kode berikut ini :
//import router
import router from './router/index'
Di atas kita import file router yang sudah kita buat sebelumnya di atas, kemudian kita import Axios dan buat Axios Credentials menjadi true, silahkan buka file src/main.js kemudian tambahkan kode berikut ini :
//import axios
import axios from 'axios'
//set credential axios with true
axios.defaults.withCredentials = true
Kemudian kita masukkan router di dalam object dari Vue, jadi cari kode berikut ini. di dalam file src/main.js :
new Vue({
render: h => h(App),
}).$mount('#app')
Dan ubahlah menjadi seperti berikut ini :
new Vue({
router, // <— register router di dalam object dari Class Vue
render: h => h(App),
}).$mount('#app')
Dan jika file src/main.js di tulis secara lengkap kurang lebih seperti berikut ini :
import Vue from 'vue'
import App from './App.vue'
//import router
import router from './router/index'
//import bootstrap css & js
import 'bootstrap/dist/css/bootstrap.css'
import 'jquery/dist/jquery.min'
import 'popper.js/dist/popper.min'
import 'bootstrap/dist/js/bootstrap.min'
//import axios
import axios from 'axios'
//set credential axios with true
axios.defaults.withCredentials = true
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
Di artikel selanjutnya kita akan belajar untuk proses authentication di Vue Js dan menampilkan halaman dashboard setelah berhasil melakukan authentication.
EBOOK MEMBANGUN WEBSITE SEKOLAH DENGAN LARAVEL, VUE JS DAN BOOTSTRAP 5 : https://bit.ly/ebook-laravel-vue-js