<template>
  <div>
    <h1>Real Estate Listings</h1>
    <ul>
      <li v-for="listing in listings" :key="listing._id">
        <h2>{{ listing.title }}</h2>
        <p>Price: {{ listing.price }}</p>
        <p>Location: {{ listing.location }}</p>
        <p>Description: {{ listing.description }}</p>
        <a :href="listing.url">View Listing</a>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const listings = ref([]);

onMounted(async () => {
  // const response = await $fetch('/api/listings');
  // listings.value = response;
});
</script>
