3.3 Koneksi Laravel dan Vue3

tugas kita adalah mengkoneksikan antara API laravel dan Vue. sekarang kita butuh satu halaman HTML untuk menampung hasil dari Laravel. 

dikarenakan kita nanti menggunakan router bawaan vue, maka perlu satu komponen lagi yang diinstal. ketikan perintah 

setelah membuat install vue-route kita buat halaman User terlebih dahulu. buat folder dan file pada folder scr 

dengan nama: pages/User.vue

<script setup lang="ts">

 import { ref, onMounted } from 'vue'

 const users = ref([])

 const status = ref(null)

 const ok = ref(false)

 const headers = ref({})

 const error = ref(null)

 onMounted(async()=>{

   try{

     const response = await fetch('http://localhost:8000/api/users')

     status.value = response.status

     ok.value = response.ok

     response.headers.forEach((value,key)=>{

       headers.value[key] = value

     })

     const data = await response.json()

     users.value = data

   }

   catch(error){

     console.log(error)

   }

 })

</script>

<template>

 <div class="p-6">

   <h1 class="text-2xl font-bold mb-4">User Management</h1>

   <div class="mb-6 p-4 border rounded bg-gray-50">

     <h2 class="font-semibold mb-2">Debug Response</h2>

     <p><strong>STATUS : </strong>{{status}}</p>

     <p><strong>OK : </strong>{{ok}}</p>

     <p><strong>Headers : </strong>{{headers}}</p>

     <ul class="list-disc pl-6">

       <li v-for="(value, key) in headers" :key="key">{{ key }}: {{ value }}</li>

     </ul>

     <div class="mt-2 text-red-600" v-if="error">

       <strong>Error:</strong> {{ error }}

     </div>

   </div>

   <div class="mt-4">

     <h2 class="text-xl font-semibold mb-2">Users</h2>

     <ul class="space-y-1">

       <li v-for="user in users" :key="user.id">

         {{ user.name }} – {{ user.email }}

       </li>

     </ul>

   </div>

 </div>

</template>

<style scoped>

</style>

buat folder dan file pada folder scr 'router/index.js', dan tuliskan kodenya seperti ini

gunakan router Vue yang berada pada scr/main.js

rubah main halaman vue yang berada pada scr/App.vue dengan kode ini. 

run dengan perintah: npm run dev
maka hasilnya akan seperti ini