> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ais-stats

> Shows data about the performed search.

export const SearchRequest = () => <Tooltip tip="A search request is a single HTTP call to the Algolia Search API that can run one or more search operations. It can include multiple queries, for example, when querying several indices at once.">
    search request
  </Tooltip>;

export const SearchQuery = () => <Tooltip tip="The text users enter into a search box. In the Search API, this corresponds to the query parameter. A search query is often used with filters, facets, and other parameters, but these aren't part of the query text itself.">
    search query
  </Tooltip>;

```vue Signature theme={"system"}
<ais-stats
  // Optional parameters
  :class-names="object"
/>
```

## Import

<Tabs>
  <Tab title="Component">
    To ensure optimal bundle sizes,
    see [Optimize build size](/doc/guides/building-search-ui/going-further/improve-performance/vue#optimize-build-size).

    ```js Vue icon=code theme={"system"}
    import { AisStats } from "vue-instantsearch";
    // Use "vue-instantsearch/vue3/es" for Vue 3

    export default {
      components: {
        AisStats
      },
      // ...
    };
    ```
  </Tab>

  <Tab title="Plugin">
    This imports all widgets, even the ones you don't use.
    For more information, see [Get started with Vue InstantSearch](/doc/guides/building-search-ui/getting-started/vue).

    ```js JavaScript icon="code" theme={"system"}
    import Vue from "vue";
    import InstantSearch from "vue-instantsearch";
    // Use "vue-instantsearch/vue3/es" for Vue 3

    Vue.use(InstantSearch);
    ```
  </Tab>
</Tabs>

<Card title="See this widget in action" icon="monitor-play" href="https://instantsearchjs.netlify.app/stories/vue/?selectedKind=ais-stats" horizontal>
  Preview this widget and its behavior.
</Card>

## 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 Vue icon=code theme={"system"}
<ais-stats />
```

## Props

<ParamField body="class-names" type="object" default="{}">
  The [CSS classes you can override](/doc/guides/building-search-ui/widgets/customize-an-existing-widget/vue#style-your-widgets):

  * `ais-Stats`. The root element of the widget.
  * `ais-Stats-text`. The text element.

  ```vue Vue icon=code theme={"system"}
  <ais-stats
    :class-names="{
      'ais-Stats': 'MyCustomStats',
      'ais-Stats-text': 'MyCustomStatsText',
    }"
  />
  ```
</ParamField>

## Customize the UI

<ParamField body="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 <SearchQuery />.
  * `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 <SearchRequest />, in milliseconds. This doesn't include network time.
  * `query: string`. The query text.

  ```vue Vue icon=code theme={"system"}
  <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>
  ```
</ParamField>

## HTML output

```html HTML icon=code-xml theme={"system"}
<div class="ais-Stats">
  <span class="ais-Stats-text">20,337 results found in 1ms.</span>
</div>
```