# Install !!

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)