ais-stats

Shows data about the performed search.

Signature

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

Import

Component

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
  },
  // ...
};

Plugin

This imports all widgets, even the ones you don’t use. For more information, see Get started with Vue InstantSearch.

JavaScript

import Vue from "vue";
import InstantSearch from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3

Vue.use(InstantSearch);

See this widget in action

Preview this widget and its behavior.

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 .
• 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 , in milliseconds. This doesn’t 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>