Components
<AisInfiniteHits>
Infinite scrolling hit list with optional previous-page control.
AisInfiniteHits uses the Insights-enabled connector (connectInfiniteHitsWithInsights) and exposes sendEvent in slots.
Usage
<AisInstantSearch :configuration="configuration">
<AisInfiniteHits :show-previous="true" />
</AisInstantSearch>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
showPrevious | boolean | false | Enables a "show previous" control above results. |
showBanner | boolean | connector default | Pass-through option for connector banner behavior. |
escapeHTML | boolean | connector default | Escapes highlighted HTML in results. |
transformItems | function | undefined | Transforms hit items before rendering. |
cache | unknown | connector default | Custom cache implementation for infinite hits. |
Slots
| Slot | Slot props | Description |
|---|---|---|
default | { items, results, isLastPage, refinePrevious, refineNext, refine, sendEvent } | Replaces the full infinite hits layout. |
item | { item, index, sendEvent } | Customizes each hit row while keeping built-in controls. |
loadPrevious | { refinePrevious, page, isFirstPage } | Custom previous-page control. |
loadMore | { refineNext, refine, page, isLastPage } | Custom next-page control. |
sendEvent signature in this widget: sendEvent(eventType, hitOrHits, eventName?, additionalData?).
Typed transformItems
Use Vue's @vue-generic syntax to type transformed infinite hits in slot props.
<script setup lang="ts">
import type { BaseHit, Hit } from "instantsearch.js/es/types";
type ProductHit = {
objectID: string;
name: string;
badge: string;
};
const transformHits = (items: Array<Hit<BaseHit>>) => {
return items.map((item) => ({
...item,
badge: item.free_shipping ? "Free shipping" : "Standard shipping",
})) as Array<Hit<ProductHit>>;
};
</script>
<template>
<!-- @vue-generic {ProductHit} -->
<AisInfiniteHits :transform-items="transformHits">
<template #item="{ item }">
<article>
<h3>{{ item.name }}</h3>
<small>{{ item.badge }}</small>
</article>
</template>
</AisInfiniteHits>
</template>
End-to-end example
<AisInfiniteHits :show-previous="true">
<template #item="{ item, index, sendEvent }">
<article class="hit-card">
<h3>{{ index + 1 }}. {{ item.name }}</h3>
<button
type="button"
@click="sendEvent('click', item, 'Infinite Hit Clicked')"
>
Open details
</button>
<button
type="button"
@click="sendEvent('conversion', item, 'Infinite Hit Converted')"
>
Save
</button>
</article>
</template>
<template #loadMore="{ refine, isLastPage }">
<button
type="button"
:disabled="isLastPage"
@click="refine()"
>
{{ isLastPage ? "No more results" : "Load more products" }}
</button>
</template>
</AisInfiniteHits>