Install Axios Third-Party Fetch Data Di NUXT

Hallo pengunjung, tulisan kali ini mau share cara install Third-Party Fetch Data API di Nuxt. Kita akan menggunakan Axios sebagai Http client untuk merquest data dari backEnd agar frontEnd bisa memiliki content dinamis.

Project Nuxt.js

Karena judul tulisan ini "Install Axios Third-Party Fetch Data Di NUXT" kita membutuhkan sebuah project yang sudah terinstall nuxtjs. jika masih butuh documentasi bagaimana cara menginstall nuxt.js teman teman bisa GET STARTED .

Instalasi Axios di Nuxt.js

untuk melakukan pemasangan libray axios di project nuxt.js bisa dengan menjalankan perintah sebagai berikut ini.

npm install axios

Tunggu proses instalasi hingga selesai. setalah proses instalasi selesai buka dan edit file "nuxt.config.js" dan tambahkan bari code sehingga terlihat seperti ini.

  modules: [
    // https://go.nuxtjs.dev/pwa
    '@nuxtjs/pwa',
    '@nuxtjs/axios', // melakukan inisiasi agar axios bisa di gunakan di page atau component
    '@nuxtjs/auth'
  ],
  axios: {
    baseURL: 'http://url.end.point.kamu/api'
  },

Setelah tahap ini selesai kita sudah bisa menggunakan axios dari file *.vue yang kita buat di "page" atau "components" . contoh simplenya bisa menggunakan code seperti di bawah ini.

async getKeranjang() {
const config = {
     headers: { Authorization: `Bearer ${this.token}` } // menggunakan Authorization untuk menggunakan Baerar token .
      };
      return new Promise((resolve, reject) => {
        try{
          this.$axios.get(`keranjang/list`,config).then((response) => {
// 'keranjang/list' adalah url yang akan di hit untuk mendapatkan respone
          console.log(respone)          
          resolve()
        })
        }catch(e){
          console.log(e)
        }
      })
    },

Penutup

tulisan ini masih belum lengkap karena belum menggunakan stady kasus. tapi saya harap dengan tulisan ini dapat membantu teman teman yang sedang mencari referensi untuk menggunakan axios.