Instant Search for Vue 3 & Nuxt — Composables & SSR Ready

// server/api/search.get.ts — runs on the server, so the key stays private
// nuxt.config.ts: runtimeConfig: { searchjetSearchKey: '' }  (env: NUXT_SEARCHJET_SEARCH_KEY)
export default defineEventHandler(async (event) => {
  const { q } = getQuery(event);
  if (!q) return { results: [], total: 0 };
  const { searchjetSearchKey } = useRuntimeConfig(event);
  return $fetch('https://app.searchjetengine.com/api/v1/search', {
    query: { q, limit: 10 },
    headers: { Authorization: `Bearer ${searchjetSearchKey}` },
  });
});

<!-- pages/search.vue -->
<script setup>
const route = useRoute();
const query = ref(String(route.query.q ?? ''));

// Rendered on the server on first load, re-fetched when query changes
const { data, status } = await useAsyncData(
  'search',
  () => $fetch('/api/search', { query: { q: query.value } }),
  { watch: [query] }
);
</script>

<template>
  <div class="max-w-4xl mx-auto py-12 px-6">
    <!-- .lazy = search on Enter/blur; use a debounced ref for search-as-you-type -->
    <input
      v-model.lazy="query"
      type="search"
      placeholder="Search docs..."
      class="w-full p-4 border-2 border-gray-200 rounded-xl text-lg focus:border-blue-500 focus:outline-none"
    />

    <div v-if="status === 'pending'" class="mt-8 text-center text-gray-500">
      Searching...
    </div>

    <div v-else class="mt-8 space-y-4">
      <p v-if="query">{{ data?.total ?? 0 }} results</p>
      <article
        v-for="hit in data?.results ?? []"
        :key="hit.id"
        class="p-6 border border-gray-200 rounded-xl hover:border-blue-300"
      >
        <h3 class="text-xl font-semibold"><a :href="hit.url">{{ hit.title }}</a></h3>
        <p class="mt-2 text-gray-600">{{ hit.excerpt }}</p>
      </article>
    </div>
  </div>
</template>

// composables/useSearchJet.js — ~30 lines you write yourself (not a package)
import { ref, watch, toValue } from 'vue';

const API = 'https://app.searchjetengine.com/api/v1/search';
const SEARCH_KEY = 'your_search_api_key'; // search-only key; never the private key

export function useSearchJet(query, filters) {
  const hits = ref([]);
  const total = ref(0);
  const isSearching = ref(false);
  let controller, timer;

  watch(() => [toValue(query), toValue(filters)], ([q, f]) => {
    clearTimeout(timer);
    controller?.abort();
    if (!q) { hits.value = []; total.value = 0; return; }
    timer = setTimeout(async () => {
      controller = new AbortController();
      isSearching.value = true;
      const params = new URLSearchParams({ q, limit: '20' });
      if (f) params.set('filters', f);
      try {
        const res = await fetch(`${API}?${params}`, {
          headers: { Authorization: `Bearer ${SEARCH_KEY}` },
          signal: controller.signal,
        });
        const data = await res.json();
        hits.value = data.results ?? []; // results is the array of hits
        total.value = data.total ?? 0;
      } catch {} // aborted or network error
      isSearching.value = false;
    }, 200); // debounce
  }, { immediate: true });

  return { hits, total, isSearching };
}

// composables/useProductSearch.js
import { ref, computed } from 'vue';
import { useSearchJet } from './useSearchJet';

export function useProductSearch() {
  const query = ref('');
  const category = ref('');

  // "filters" only works on attributes marked filterable in your index
  // settings; otherwise the API returns error code INVALID_FILTER.
  const filters = computed(() =>
    category.value ? `category = "${category.value}"` : ''
  );

  const { hits, total, isSearching } = useSearchJet(query, filters);

  // price and category are custom fields you indexed
  const products = computed(() =>
    hits.value.map((hit) => ({
      ...hit,
      formattedPrice: new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
      }).format(hit.price),
    }))
  );

  return { query, category, products, total, isSearching };
}