ais-stats

Signature

<ais-stats
  // Optional parameters
  :class-names="object"
/>

Import

Copy

1
2
3
4
5
6
7
8
9
import { AisStats } from 'vue-instantsearch';
// Use 'vue-instantsearch/vue3/es' for Vue 3

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

1. Follow additional steps in Optimize build size to ensure your code is correctly bundled.
2. This imports all the widgets, even the ones you don’t use. Read the Getting started guide for more information.

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

Parameter Description


            class-names

type: object

default: {}

Optional

The CSS classes you can override:

ais-Stats: the root element of the widget.
ais-Stats-text: the text element.

Copy
<ais-stats
  :class-names="{
    'ais-Stats': 'MyCustomStats',
    'ais-Stats-text': 'MyCustomStatsText',
  }"
/>

Customize the UI

Parameter Description


            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.

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

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

Did you find this page helpful?