vector search vue

Vector Search in Vue.js — Reactive Search Component

Vue.js developers usually hit the same search problem: keyword search is easy to ship, but it fails when the user phrase and the document phrase do not overlap. altor-vec solves the retrieval side by running HNSW vector search locally in WebAssembly. That means you can keep query latency close to the browser, eliminate per-query billing, and still expose a familiar framework component API. This guide focuses on implementation details rather than marketing claims.

The example below uses tiny four-dimensional vectors so the code is runnable as-is and easy to understand. In production you would usually replace those manual vectors with embeddings from a model such as Xenova/all-MiniLM-L6-v2 or a build-time embedding job. The retrieval flow stays the same: install, import the WASM package, create an index, optionally add vectors, then query the engine and map result IDs back to metadata.

Step 1: install and understand the runtime boundary

Start with npm install altor-vec. The package exposes a default init() function that loads the WASM module and a WasmSearchEngine class that loads or builds an HNSW index. The important design question in Vue.js is not whether vector retrieval is possible. It is where initialization should live so the index is created once, memory is released intentionally, and queries do not trigger unnecessary work on each re-render or navigation.

Step 2: import the library and create the index

The sample builds an index from a flat Float32Array. That matches the real API from the package README: WasmSearchEngine.from_vectors(flat, dims, m, ef_construction, ef_search). The four HNSW parameters here are conservative defaults for a small browser index. If you precompute a production index offline, you can instead serialize it with to_bytes() and load it using new WasmSearchEngine(bytes).

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import init, { WasmSearchEngine } from 'altor-vec';

const docs = [
  { title: 'Composition API guide', vector: [1, 0, 0, 0] },
  { title: 'Static caching', vector: [0, 1, 0, 0] },
  { title: 'Semantic retrieval', vector: [0, 0, 1, 0] },
];

const engine = ref<WasmSearchEngine | null>(null);
const results = ref<Array<{ title: string; distance: number }>>([]);

onMounted(async () => {
  await init();
  const dim = 4;
  const flat = new Float32Array(docs.flatMap((doc) => doc.vector));
  engine.value = WasmSearchEngine.from_vectors(flat, dim, 16, 200, 50);

  docs.push({ title: 'Vue hydration notes', vector: [0.96, 0.04, 0, 0] });
  engine.value.add_vectors(new Float32Array([0.96, 0.04, 0, 0]), dim);
});

function runSearch() {
  if (!engine.value) return;
  const hits: [number, number][] = JSON.parse(engine.value.search(new Float32Array([0.94, 0.06, 0, 0]), 3));
  results.value = hits.map(([id, distance]) => ({ title: docs[id].title, distance }));
}
</script>

<template>
  <section>
    <button @click="runSearch">Search vectors</button>
    <ul>
      <li v-for="hit in results" :key="hit.title">
        {{ hit.title }} — {{ hit.distance.toFixed(3) }}
      </li>
    </ul>
  </section>
</template>

Step 3: what the code is actually doing

1. Install: the project adds altor-vec from npm.
2. Import: the code imports init and WasmSearchEngine.
3. Create index: manual vectors are flattened into a single Float32Array and passed into from_vectors().
4. Add vectors: the example appends one more vector via add_vectors() so you can see incremental updates.
5. Query: it converts a query vector into a Float32Array, calls search(), parses the JSON response, and maps IDs back to the in-memory document array.

That pattern is stable across browser frameworks because altor-vec is model-agnostic. The framework concerns are mostly lifecycle-related: where to hold the engine instance, how to debounce query creation, and whether embeddings run on the main thread or in a worker. If you keep those concerns separate, semantic retrieval feels surprisingly ordinary.

Performance notes specific to this framework

• Store the engine in a shallow ref or module singleton so Vue reactivity does not proxy a WASM object unnecessarily.
• Trigger expensive embedding work outside watchers tied to every keystroke; debounce input before calling the model.
• Use computed properties for presentation only. Retrieval state should stay thin: query, hits, loading, error.

When to use client-side vs server-side in Vue.js

Client-side: Client-side Vue is ideal for SPAs, docs, or dashboards where semantic search is a self-contained browser feature.

Server-side: Add a backend when the same search endpoint must serve crawlers, authenticated users, or other systems outside the Vue application.

A good rule is simple. If the data is already safe to send to every browser and you mostly care about fast semantic ranking, keep it local. If the search layer also needs to enforce business rules, security boundaries, or complex shared state, put retrieval on the server and let Vue.js call it as a normal endpoint.

Production checklist

• Cache the WASM and serialized index aggressively with versioned asset names.
• Validate vector dimensions before every search to prevent subtle runtime errors.
• Keep metadata outside the HNSW graph so result rendering stays flexible.
• Measure cold start, repeated search latency, and memory on at least one mid-range mobile device.
• Free the engine explicitly if you unload large indexes on navigation.

Conclusion

Vue.js does not require a special semantic-search abstraction. It only needs a clean place to initialize the engine and a disciplined boundary between embedding, retrieval, and UI state. altor-vec gives you a small browser-native ANN core, while the framework handles rendering and ergonomics. If you want a developer-friendly starting point with no backend dependency, this is the shortest path: npm install altor-vec, build or load an index, and search locally.

Related hubs: Framework guides · Use cases · Comparison pages