Búsqueda semántica en Nuxt con XEYE

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    // Private: only available on the server. Set it with NUXT_XEYE_API_KEY.
    xeyeApiKey: '',
  },
})

// server/api/search.post.ts
export default defineEventHandler(async (event) => {
  const { xeyeApiKey } = useRuntimeConfig(event)

  const body = await readBody<{ q?: unknown; limit?: unknown }>(event)
  const q = typeof body?.q === 'string' ? body.q.trim() : ''
  if (q.length < 2 || q.length > 200) {
    throw createError({ status: 400, statusText: 'Invalid query' })
  }
  const limit = Math.min(Math.max(Number(body?.limit) || 5, 1), 20)

  try {
    const response = await $fetch<{ results: unknown[] }>(
      'https://search.xeye.es/api/v1/search',
      {
        method: 'POST',
        headers: { 'X-API-Key': xeyeApiKey },
        // The list name is fixed here: the browser cannot query other lists.
        body: { list_name: 'products', search_term: q, limit },
      },
    )
    return { results: response.results }
  } catch {
    throw createError({ status: 502, statusText: 'Search unavailable' })
  }
})

<!-- app/pages/search.vue (Nuxt 4) · pages/search.vue (Nuxt 3) -->
<script setup lang="ts">
interface Result {
  item: string
  score: number
  params?: { url?: string; sku?: string }
}

const q = ref('')
const results = ref<Result[]>([])
let timer: ReturnType<typeof setTimeout> | undefined
let latest = 0

watch(q, (value) => {
  clearTimeout(timer)
  const term = value.trim()
  if (term.length < 2) {
    results.value = []
    return
  }
  // Wait until the user stops typing: one search, not one per keystroke.
  timer = setTimeout(async () => {
    const id = ++latest
    const response = await $fetch<{ results: Result[] }>('/api/search', {
      method: 'POST',
      body: { q: term, limit: 5 },
    })
    if (id === latest) results.value = response.results // drop stale answers
  }, 300)
})
</script>

<template>
  <input v-model="q" type="search" placeholder="Search…" />
  <ul>
    <li v-for="result in results" :key="result.params?.sku ?? result.item">
      <a :href="result.params?.url">{{ result.item }}</a>
    </li>
  </ul>
</template>