API Reference / Vue InstantSearch Widgets / ais-stats

ais-stats

Widget signature 
<ais-stats
  // Optional parameters
  :class-names="object"
/>
See code examples
See Live example

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

Copy 
1

<ais-stats />

Props

class-names
type: object
default: {}
Optional

The CSS classes to override.

  • ais-Stats: the root element of the widget.
  • ais-Stats-text: the text element.
Copy 
1
2
3
4
5
6

<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.

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.
Copy 
1
2
3
4
5
6

<ais-stats>
  <p slot-scope="{ 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>
  </p>
</ais-stats>

HTML output

Copy 
1
2
3

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

Did you find this page helpful?

Vue InstantSearch v3