ASSIGNMENT 7: FETCH REAL DATA & DISPLAY IT

```

npm create nuxt@latest assignment7
cd assignment7
npm install
npm run dev

```

pages/posts.vue

```

<script setup>
const { data: posts, pending, error, refresh } = await useFetch(
  'https://jsonplaceholder.typicode.com/posts'
)
</script>

<template>
  <main class="container">
    <h1>Latest Posts</h1>
    <p v-if="pending">Loading...</p>
    <p v-else-if="error" class="error">Failed to load posts</p>

    <div v-else>
      <div v-for="post in posts.slice(0, 5)" :key="post.id" class="card">
        <h3>{{ post.title }}</h3>
        <p>{{ post.body.substring(0, 100) }}...</p>
      </div>
      <button @click="refresh">Refresh Posts</button>
    </div>
  </main>
</template>

<style scoped>
.container {
  max-width: 800px;
  margin: 35px auto;
  padding: 25px;
  font-family: Arial, sans-serif;
}
h1 { color: #2563eb; }
.card {
  padding: 18px;
  margin: 15px 0;
  background: #f1f5f9;
  border-radius: 10px;
  border-left: 5px solid #2563eb;
}
.card h3 { color: #334155; }
.card p { color: #64748b; line-height: 1.5; }
button {
  padding: 12px 20px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 7px;
  cursor: pointer;
}
.error { color: red; }
</style>

```

Browser URL

```

http://localhost:3000/posts

```

Terminal

```

npm run dev

```