• Langkah 1 - Install Vue Router
• Langkah 2 - Konfigurasi Vue Router
• Langkah 3 - Install Axios
• Source Code

Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar menambahkan Vue Router dan Axios di dalam project Vue Js kita.

Vue Router akan kita gunakan untuk membuat navigasi di project Vue Js kita menjadi SPA atau biasanya disebut Single Page Application, jadi kita berpindah-pindah halaman tanpa harus melakukan reload page / refresh halaman.

Dan untuk Axios fungsinya di dalam project Vue Js adalah untuk mengolah Restful API dari CodeIgniter yang sebelumnya sudah kita buat. Seperti halnya mendapatkan data, mengirim data, dan intinya adalah Mengkonsumsi API.

Langkah 1 - Install Vue Router

Silahkan jalankan perintah di bawah ini untuk menginstall Vue Router di dalam project Vue Js kita.

npm i vue-router

Silahkan tunggu proses installasi sampai dengan selesai, proses installasi ini membutuhkan koneksi internet. Setelah proses installasi selesai, sekarang kita akan menggunakan Vue Router di project Vue JS.

Langkah 2 - Konfigurasi Vue Router

Sekarang, silahkan teman-teman buka file main.js di dalam folder src, silahkan ubah kodenya menjadi seperti berikut ini :

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

//import vue router
import VueRouter from 'vue-router'

Vue.use(VueRouter);

//import component
import PostIndex from './components/posts/Index'
import PostCreate from './components/posts/Create'
import PostEdit from './components/posts/Edit'

const router = new VueRouter({
  routes: [{
      path: '/',
      name: 'posts',
      component: PostIndex
    },
    {
      path: '/create',
      name: '/create',
      component: PostCreate
    },
    {
      path: '/edit/:id',
      name: 'edit',
      component: PostEdit
    }
  ],
  mode: 'history'
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Di atas kita mengimport Vue Router kita di dalam main.js, kurang lebih seperti berikut ini :

//import vue router
import VueRouter from 'vue-router'

Kemudian kita akan use Vue Router di dalam Vue Js menggunakan kode berikut ini :

Vue.use(VueRouter);

Dan kita juga mengimport component-component yang akan kita gunakan nanti untuk menampilkan data, input data, edit & update data. Yang mana component ini akan kita jadikan SPA atau Single Page Application.

//import component
import PostIndex from './components/posts/Index'
import PostCreate from './components/posts/Create'
import PostEdit from './components/posts/Edit'

Kemudian kode di bawah ini mendeklarasikan Vue Router dengan component-component yang sudah kita import di atas dengan memberikan beberapa configurasi seperti path, name, component.

• path - adalah URL yang akan kita buat untuk component
• name - adalah nama dari Vue Router, ini akan di gunakan untuk lebih mudah berpindah-pindah halaman dengan hanya memanggil nama Vue Routernya.
• component - adalah component yang akan digunakan untuk Vue Router ini.

const router = new VueRouter({
  routes: [{
      path: '/',
      name: 'posts',
      component: PostIndex
    },
    {
      path: '/create',
      name: '/create',
      component: PostCreate
    },
    {
      path: '/edit/:id',
      name: 'edit',
      component: PostEdit
    }
  ],
  mode: 'history'
})

Langkah 3 - Install Axios

Setelah kita berhasil menginstall Vue Router dan sekaligus menkonfigurasi sekarang kita lanjutkan untuk menginstall Axios di dalam project Vue Js kita ini. SIlahkan jalankan perintah di bawah ini :

npm i axios

Silahkan tunggu proses installasinya sampai selesai, pastikan teman-teman harus terhubung dengan internet, karena dependensi ini diunduh secara online.

Untuk implementasi Axios akan kita praktekan untuk menampilkan data, input data, edit dan hapus data di tutorial yang selanjutnya.

Source Code

CodeIgniter Restful API : https://github.com/SantriKoding-com/CodeIgniter4-Restful-API

Vue Js : https://github.com/SantriKoding-com/Vue-Js-CodeIgniter

Terima Kasih