Skip to main content
Signature
<ais-stats
  // Optional parameters
  :class-names="object"
/>

​
Import

  • Component
  • Plugin
To ensure optimal bundle sizes, see Optimize build size.
Vue
import { AisStats } from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3

export default {
  components: {
    AisStats
  },
  // ...
};
View demo

​
About this widget

The ais-stats widget displays the total number of matching hits and the time it took to get them (time spent in the Algolia server).

​
Examples

Vue
<ais-stats />

​
Props

​
class-names
object
default:"{}"
The CSS classes you can override:
  • ais-Stats. The root element of the widget.
  • ais-Stats-text. The text element.
Vue
<ais-stats
  :class-names="{
    'ais-Stats': 'MyCustomStats',
    'ais-Stats-text': 'MyCustomStatsText',
  }"
/>

​
Customize the UI

​
default
The slot to override the complete DOM output of the widget.Note that when you implement this slot, none of the other slots will change the output, as the default slot surrounds them.Scope
  • hitsPerPage: number. The maximum number of hits returned per page.
  • nbPages: number. The number of pages returned. Calculation is based on the total number of hits (nbHits) divided by the number of hits per page (hitsPerPage), rounded up to the nearest integer.
  • nbHits: number. The number of hits matched by the query.
  • areHitsSorted: boolean. True if the index is currently using Relevant sort and displaying only sorted hits.
  • nbSortedHits: number. The number of sorted hits matched by the query (when using Relevant sort).
  • page: number. The index of the current page (zero-based).
  • processingTimeMS: number. The time the server took to process the request, in milliseconds. This does not include network time.
  • query: string. The query text.
Vue
<ais-stats>
  <template v-slot="{ hitsPerPage, nbPages, nbHits, page, processingTimeMS, query }">
    Page {{ page + 1 }} of {{ nbPages }} with {{ hitsPerPage }} hits per page  -
    {{ nbHits }} hits retrieved in {{ processingTimeMS }}ms for <q>{{ query }}</q>
  </template>
</ais-stats>

​
HTML output

HTML
<div class="ais-Stats">
  <span class="ais-Stats-text">20,337 results found in 1ms.</span>
</div>
⌘I