composer create-project --prefer-dist laravel/laravel:^8.0 backend-api

npm install -g @vue/cli vue --version vue create crud-vue-3 npm install vue-router@next <<< untuk install router vue npm install axios npm install bootstrap popper.js jquery

main.js <<folder

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')

src/router/main.js

//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

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)