Tutorial Vue 3 dan Laravel 10 #4 : Menampilkan Data dari Rest API di Vue 3
Di tutorial ini, kita akan belajar bagaimana menampilkan data dari Rest API di Vue 3 menggunakan framework Laravel 10 sebagai backend.
Langkah 1: Mengatur Backend dengan Laravel 10
Pertama-tama, kita perlu mengatur backend dengan framework Laravel 10. Silakan buat proyek Laravel baru dengan menjalankan perintah berikut di terminal:
composer create-project laravel/laravel my-project
Langkah 2: Menyiapkan Rest API
Setelah proyek Laravel dibuat, sekarang kita harus menyiapkan Rest API untuk mengambil data dari database. Kami akan membuat contoh Rest API untuk mengambil daftar produk.
Langkah 3: Membuat Proyek Vue 3 Baru
Selanjutnya, kita akan membuat proyek Vue 3 baru. Jalankan perintah berikut di terminal untuk membuat proyek Vue:
npm create vite@latest my-vue-project --template vue
Langkah 4: Menampilkan Data dari Rest API di Vue 3
Sekarang, kita akan menampilkan data dari Rest API di proyek Vue 3. Buat sebuah komponen di Vue untuk menampilkan daftar produk yang diambil dari Rest API.
Daftar Produk
- {{ product.name }}
export default {
data() {
return {
products: []
}
},
mounted() {
fetch('http://localhost:8000/api/products')
.then(response => response.json())
.then(data => {
this.products = data
})
}
}
Langkah 5: Menjalankan Proyek
Akhirnya, jalankan proyek Laravel dan proyek Vue secara bersamaan untuk melihat hasilnya. Anda sekarang dapat melihat daftar produk yang diambil dari Rest API ditampilkan di proyek Vue 3.
Dengan mengikuti langkah-langkah di atas, Anda telah berhasil menampilkan data dari Rest API di proyek Vue 3 menggunakan framework Laravel 10 sebagai backend. Semoga tutorial ini bermanfaat!
bang, untuk klom image nya kok tidak muncul ya.. di console nya ngarah ke localhostnya vue jadi saat di console not found?yg salah apanya ya