Components
<AisHits>
Standard hits widget for displaying current page results.
AisHits uses the Insights-enabled connector (connectHitsWithInsights) and exposes sendEvent for click, conversion, and view tracking.
Usage
<AisInstantSearch :configuration="configuration">
<AisHits />
</AisInstantSearch>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
showBanner | boolean | connector default | Pass-through option for connector banner behavior. |
escapeHTML | boolean | connector default | Escapes highlighted HTML in rendered hits. |
transformItems | function | undefined | Transforms hit items before rendering. |
Slots
| Slot | Slot props | Description |
|---|---|---|
default | { items, sendEvent } | Replaces the full hit list rendering and exposes Insights dispatch. |
item | { item, index } | Customizes each hit row when using the built-in list wrapper. |
sendEvent signature in this widget: sendEvent(eventType, hitOrHits, eventName?, additionalData?).
Typed transformItems
Use Vue's @vue-generic syntax to type transformed hits in slot props.
<script setup lang="ts">
import type { BaseHit, Hit } from "instantsearch.js/es/types";
type ProductHit = {
objectID: string;
name: string;
brandLabel: string;
};
const transformHits = (items: Array<Hit<BaseHit>>) => {
return items.map((item) => ({
...item,
brandLabel: String(item.brand ?? "Unknown"),
})) as Array<Hit<ProductHit>>;
};
</script>
<template>
<!-- @vue-generic {ProductHit} -->
<AisHits :transform-items="transformHits">
<template #item="{ item }"> {{ item.name }} - {{ item.brandLabel }} </template>
</AisHits>
</template>
End-to-end example
pages/search.vue
<template>
<AisInstantSearch :configuration="configuration">
<AisSearchBox />
<AisHits>
<template #default="{ items, sendEvent }">
<ol class="hits-grid">
<li v-for="item in items" :key="item.objectID">
<NuxtLink
:to="`/products/${item.objectID}`"
@click="sendEvent('click', item, 'Product Clicked')"
>
{{ item.name }}
</NuxtLink>
<button type="button" @click="sendEvent('conversion', item, 'Added To Cart')">
Add to cart
</button>
</li>
</ol>
</template>
</AisHits>
</AisInstantSearch>
</template>
<script setup lang="ts">
import { algoliasearch } from "algoliasearch";
const configuration = {
indexName: "instant_search",
searchClient: algoliasearch("latency", "6be0576ff61c053d5f9a3225e2a90f76"),
insights: true,
};
</script>
For a full Nuxt setup (client plugin + event tracking patterns), see
/examples/analytics-insights-events.