NUXT PRACTICAL 2: DATA FETCHING USING USEFETCH COMPOSABLE
=================================================================

================================================

AIM:
Fetch and display data from a public API using Nuxt's useFetch composable.

PROJECT STRUCTURE:
nuxt-usefetch/
|
|-- app.vue
|-- pages/
    |-- index.vue

STEP 1: Create the project
--------------------------
npx nuxi@latest init nuxt-usefetch
cd nuxt-usefetch
npm install

STEP 2: app.vue
---------------
<template>
  <NuxtPage />
</template>

STEP 3: pages/index.vue
-----------------------
<script setup>
const { data: users, pending, error, refresh } = await useFetch(
  'https://jsonplaceholder.typicode.com/users'
)
</script>

<template>
  <div>
    <h1>Users List</h1>

    <p v-if="pending">Loading users...</p>

    <p v-else-if="error">
      Failed to load users.
    </p>

    <div v-else>
      <div v-for="user in users" :key="user.id">
        <h3>{{ user.name }}</h3>
        <p>Email: {{ user.email }}</p>
        <p>City: {{ user.address.city }}</p>
        <hr />
      </div>

      <button @click="refresh()">Reload Users</button>
    </div>
  </div>
</template>

RUN:
npm run dev

Open:
http://localhost:3000

CONCEPT:
- useFetch() requests data from an API.
- data contains the returned response.
- pending indicates that the request is loading.
- error contains an error if the request fails.
- refresh() runs the request again.
- v-for displays each user.


================================================
