Guide to Vue 3 and Laravel 10 Tutorial #4: Displaying Data from Rest API in Vue 3

Posted by

Tutorial Vue 3 dan Laravel 10 #4 : Menampilkan Data dari Rest API di Vue 3

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!

0 0 votes
Article Rating
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
@rendramaulana9358
11 months ago

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