Hopfield
Get started

Integrations

Vue

@hopfield/vue provides Vue 3 composables over the same search index as every other SDK: a reactive typeahead you can bind straight to an input, an imperative search call, and the raw client for everything else.

Install

npm install @hopfield/vue

Reactive typeahead

Bind query to an input with v-model and render the grouped suggestions from results. Requests are debounced and stale responses are cancelled automatically.

SiteSearch.vue
<script setup lang="ts">
import { useHopfieldTypeahead } from "@hopfield/vue";

const { query, results, loading } = useHopfieldTypeahead({
  publicApiKey: "hp_public_...",
});
</script>

<template>
  <input v-model="query" placeholder="Search…" />
  <div v-if="results">
    <section v-for="group in results.groups" :key="group.collectionId">
      <h3>{{ group.collectionName }}</h3>
      <a
        v-for="hit in group.hits"
        :key="hit.chunkId"
        :href="hit.url"
      >
        {{ hit.title ?? hit.url }}
      </a>
    </section>
  </div>
</template>

Full semantic search

SearchResults.vue
<script setup lang="ts">
import { useHopfieldSearch } from "@hopfield/vue";

const { hits, loading, error, search } = useHopfieldSearch({
  publicApiKey: "hp_public_...",
});

async function onSubmit(q: string) {
  await search(q);
}
</script>

Nuxt

The composables are client-side; in Nuxt, use them inside <ClientOnly> or components that only render in the browser. For server routes, use HopfieldClientdirectly. It’s re-exported from @hopfield/vue and works in any Node runtime.

server/api/search.get.ts
import { HopfieldClient } from "@hopfield/vue";

const hopfield = new HopfieldClient({
  publicApiKey: process.env.HOPFIELD_PUBLIC_KEY!,
});

export default defineEventHandler(async (event) => {
  const { q } = getQuery(event);
  return hopfield.search({ q: String(q ?? "") });
});

Related

Indexing from a Vue/Nuxt backend works exactly like Node. See the indexing API. For the raw endpoints, see the REST API.