← All examples · Home

Vue Composables for BrowserVec

Reactive composables: useVectorStore · useSimilaritySearch · useEmbedding · useRetriever

{{ storeReady ? 'ready' : storeError ? 'error' : 'connecting…' }} store: {{ count }} docs, dim 384
device: {{ stats.device }} · quant: {{ stats.quantBits === 0 ? 'fp32' : 'int' + stats.quantBits }}

useVectorStore(config)

// Creates & manages BrowserVec lifecycle
// Auto-destroys on unmount / config change
const { store, ready, error,
  stats, count } = useVectorStore({
  dimension: 384,
  metric: 'cosine',
  embedder,
});
✓ store ready ✗ {{ storeError }} ⏳ initializing…

useSimilaritySearch(store, vector, opts)

// Runs query when vector changes
const { results, loading } =
  useSimilaritySearch(store,
    queryVec, { k: 3 });
results?.map(h => h.id);
{{ vecResults.map((h,i) => (i+1)+'. '+h.id+'  ('+h.score.toFixed(3)+')').join('\n') }}
no results yet

useEmbedding(embedder)

// Reactive text → vector
const { embed, embedding,
  loading } = useEmbedding(
  hashingEmbedder({ dim: 384 })
);
await embed("your text here");
✓ {{ embedding.length }}-dim vector
embedding…

useRetriever(store, embedder)

// RAG: embed query + search
const { retrieve, context,
  loading } = useRetriever(
  store, embedder
);
await retrieve("your question");
{{ retContext.map((h,i) => (i+1)+'. '+h.id+'  ('+h.score.toFixed(3)+')').join('\n') }}
no retrieval yet

Try it

{{ retContext.map((h,i) => (i+1)+'. ['+h.score.toFixed(3)+'] '+(h.metadata?.text??h.id)).join('\n') }}

This demo uses Vue 3 via esm.sh — no build step, runs directly in the browser. The composables below are reusable patterns you can copy into your own Vue project.