p6 : Nuxt api route

```

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

```

server/api/hello.ts

```

export default defineEventHandler((event) => {
  const query = getQuery(event)
  const name = query.name || 'Nuxt API'

  return {
    message: `Hello, ${name}!`,
    timestamp: new Date().toISOString()
  }
})

```

app.vue

```

<script setup>
const data = ref(null)
const loading = ref(true)

onMounted(async () => {
  data.value = await $fetch('/api/hello')
  console.log(data.value)
  loading.value = false
})
</script>

<template>
  <main>
    <h1>Nuxt API Demo</h1>
    <p v-if="loading">Loading...</p>
    <div v-else class="card">
      <h2>{{ data.message }}</h2>
      <p>Time: {{ data.timestamp }}</p>
    </div>
  </main>
</template>

<style scoped>
main {
  text-align: center;
  padding: 80px 20px;
  font-family: Arial;
}
h1 { color: #16a34a; }
.card {
  max-width: 450px;
  margin: 25px auto;
  padding: 25px;
  background: #f0fdf4;
  border-radius: 12px;
  box-shadow: 0 4px 15px #0002;
}
</style>

```

BONUS: Test API with query parameter

```

http://localhost:3000/api/hello?name=John

```

Expected JSON Output

```

{
  "message": "Hello, John!",
  "timestamp": "2026-10-31T00:00:00.000Z"
}

```

Terminal

```

npm run dev

```

Browser URLs

```

http://localhost:3000
http://localhost:3000/api/hello
http://localhost:3000/api/hello?name=John

```