Halo teman-teman semuanya, di artikel sebelumnya kita sudah belajar bagaimana cara melakukan installasi dan persiapan untuk memulai membuat sebuah project baru menggunakan Nuxt Js. Dan pada artikel kali ini kita semua akan belajar bagaimana cara menampilkan data dari Rest API yang sudah kita buat di Laravel ke dalam Nuxt Js.
Langkah 1 - Konfigurasi BaseURL API
Pertama, kita akan menambahkan konfigurasi baseURL untuk endpoint API kita di dalam Nuxt Js, ini bertujuan agar kita tidak perlu menuliskannya berulang-ulang disemua component.
Silahkan buka file nuxt.config.js kemudian cari kode berikut ini :
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {},
Dan silahkan ubah menjadi seperti berikut ini :
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {
baseURL: 'http://localhost:8000'
},
Di atas, kita atur baseURL ke domian localhost dengan port 8000, dimana itu merupakan aplikasi Laravel kita yang sedang dijalankan.
Langkah 2 - Ubah Layout Nuxt Js
Sekarang kita lanjutkan untuk mengubah layout default dari Nuxt Js agar lebih bagus. Silahkan buka file layouts/default.vue kemudian ubah semua kode-nya menjadi seperti berikut ini :
<template>
<div>
<div>
<b-navbar toggleable="lg" type="light" variant="light" class="shadow-md" fixed="top">
<b-navbar-brand to="/">NUXT CRUD</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item to="/post">POST</b-nav-item>
<b-nav-item href="https://santrikoding.com/ebook">EBOOK</b-nav-item>
<b-nav-item href="https://santrikoding.com/kelas">COURSE</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
<Nuxt />
</div>
</template>
<style>
body{
background-color: lightgray;
}
.mt-5 {
margin-top: 100px!important;
}
</style>
Sekarang, jika dijalankan maka kurang lebih tampilannya seperti berikut ini :
Di atas, untuk menu POST kita arahkan ke sebuah route yang menuju ke URL /post, kurang lebih seperti berikut ini :
<b-nav-item to="/post">POST</b-nav-item>
Disini kita tidak perlu membuat konfigurasi router secara manual lagi seperti halnya yang kita lakukan di dalam Vue Js. Kita cukup buat sebuah folder dan file baru dengan nama post/index.vue di dalam folder pages, maka akan otomatis dibuatkan route-nya oleh Nuxt Js.
Langkah 3 - Menampilkan Data di Nuxt Js
Seperti yang kita bilang di atas, kita cukup buat folder dan file baru maka route akan otomatis dibuatkan. Sekarang silahkan buat folder baru dengan nama post di dalam folder pages dan di dalam folder post silahkan buat file baru dengan nama index.vue dan masukkan kode berikut ini :
<template>
<b-container fluid="md" class="mt-5 mb-5">
<b-row>
<b-col md="12">
<b-card class="shadow-md border-0 rounded-lg">
<h5>DATA POSTS</h5>
<hr>
<b-button :to="{name: 'post-create'}" variant="primary" class="mb-3">TAMBAH</b-button>
<b-table striped bordered hover :items="items" :fields="fields" show-empty></b-table>
</b-card>
</b-col>
</b-row>
</b-container>
</template>
<script>
export default {
data() {
return {
//header table
fields: ['title', 'content', 'actions'],
//posts data
posts: [],
}
},
mounted() {
//fething ke Rest API
this.$axios.get('/api/posts')
.then(response => {
//assign response ke state "posts"
this.posts = response.data.data
})
.catch(error => {
console.log(error.response.data)
})
}
}
</script>
<style>
</style>
Dari penambahan kode di atas, pertama di dalam data function kita membuat 2 state baru, yaitu fields dan posts, kurang lebih seperti berikut ini :
data() {
return {
//header table
fields: ['title', 'content', 'actions'],
//posts data
posts: [],
}
},
Untuk state fields akan kita gunakan untuk menampilkan header table dan untuk state posts akan kita gunakan untuk menyimpan data posts yang di dapatkan dari response API.
Kemudian saat component mounted, kita melakukan fetching ke dalam endpoint /api/posts dengan Axios dan menggunakan method GET.
//fething ke Rest API
this.$axios.get('/api/posts')
Jika proses fething berhasil, maka kita akan melakukan assign data response yang kita dapatkan dari API ke dalam state posts.
.then(response => {
//assign response ke state "posts"
this.posts = response.data.data
})
Dan jika ada kesalahan saat fething ke API, maka kita akan tampilkan error-nya di dalam console.log, kurang lebih seperti berikut ini :
.catch(error => {
console.log(error.response.data)
})
Kemudian di dalam template kita menampilkan table-nya kurang lebih seperti berikut ini :
<b-table striped bordered hover :items="posts" :fields="fields" show-empty></b-table>
Di atas, untuk items atau isi dari table akan kita berikan value state posts, yang mana isinya adalah data posts yang kita dapatkan dari Rest API.
Sedangkan fields akan kita berikan value dari state fields, yang mana ini akan digunakan untuk menampilkan header dari table.
Sekarang jika kita buka project Nuxt Js di menu POST atau bisa ke link http://localhost:3000/post maka kurang lebih hasilnya seperti berikut ini :
Di atas kita belum menampilkan data apapun, karena memang kita belum memiliki data sama sekali di dalam database, di artikel selanjutnya kita semua akan belajar bagaimana cara memasukkan data ke dalam database menggunakan Nuxt Js dan Rest API.
Terima Kasih