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

// pages/search.vue
<script setup>
import { useSearch, useHits } from '@searchjet/vue';

const { query, isSearching } = useSearch({
  indexName: 'your_index',
  searchApiKey: 'your_search_api_key',
});

const { hits } = useHits();
</script>

<template>
  <div class="max-w-4xl mx-auto py-12 px-6">
    <input
      v-model="query"
      type="text"
      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="isSearching" class="mt-8 text-center text-gray-500">
      Searching...
    </div>

    <div v-else class="mt-8 space-y-4">
      <article
        v-for="hit in hits"
        :key="hit.objectID"
        class="p-6 border border-gray-200 rounded-xl hover:border-blue-300"
      >
        <h3 class="text-xl font-semibold" v-html="hit._highlightResult?.title?.value || hit.title" />
        <p class="mt-2 text-gray-600" v-html="hit._highlightResult?.content?.value || hit.content" />
      </article>
    </div>
  </div>
</template>

// composables/useProductSearch.ts
import { ref, computed } from 'vue';
import { useSearch, useHits, useFacets } from '@searchjet/vue';

export function useProductSearch() {
  const filters = ref({ category: '', priceRange: '' });

  const { query, setQuery, isSearching } = useSearch({
    indexName: 'products',
    searchApiKey: 'your_search_api_key',
    filters: computed(() => buildFilterString(filters.value)),
  });

  const { hits, totalHits } = useHits();
  const { facets } = useFacets();

  const filteredProducts = computed(() =>
    hits.value.map(hit => ({
      ...hit,
      formattedPrice: new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
      }).format(hit.price),
    }))
  );

  function applyFilter(facet, value) {
    filters.value = { ...filters.value, [facet]: value };
  }

  return {
    query, setQuery, isSearching,
    filteredProducts, totalHits,
    facets, filters, applyFilter,
  };
}