NUXT PRACTICAL 3: NUXT API ROUTES
=================================================================

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

AIM:
Create a simple API inside Nuxt using server/api routes.
The example returns a list of products.

PROJECT STRUCTURE:
nuxt-api/
|
|-- app.vue
|-- pages/
|   |-- index.vue
|-- server/
    |-- api/
        |-- products.get.js

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

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

STEP 3: server/api/products.get.js
----------------------------------
export default defineEventHandler(() => {
  return [
    { id: 1, name: 'Laptop', price: 50000 },
    { id: 2, name: 'Mobile', price: 20000 },
    { id: 3, name: 'Headphones', price: 2000 }
  ]
})

STEP 4: pages/index.vue
-----------------------
<script setup>
const { data: products, pending, error } = await useFetch('/api/products')
</script>

<template>
  <div>
    <h1>Products</h1>

    <p v-if="pending">Loading...</p>
    <p v-else-if="error">Could not load products.</p>

    <div v-else>
      <div v-for="product in products" :key="product.id">
        <h3>{{ product.name }}</h3>
        <p>Price: Rs. {{ product.price }}</p>
      </div>
    </div>
  </div>
</template>

RUN:
npm run dev

Open:
http://localhost:3000

API endpoint:
http://localhost:3000/api/products

CONCEPT:
- Files inside server/api create API endpoints.
- products.get.js handles GET requests.
- /api/products is the endpoint URL.
- useFetch('/api/products') calls the Nuxt API route.
- This example uses a simple array, not a database.


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