> ## 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-pagination

> Adds controls for navigating search result pages.

```vue Signature theme={"system"}
<ais-pagination
  // Optional parameters
  :show-first="boolean"
  :show-previous="boolean"
  :show-next="boolean"
  :show-last="boolean"
  :padding="number"
  :total-pages="number"
  :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 { AisPagination } from "vue-instantsearch";
    // Use "vue-instantsearch/vue3/es" for Vue 3

    export default {
      components: {
        AisPagination
      },
      // ...
    };
    ```
  </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-pagination" horizontal>
  Preview this widget and its behavior.
</Card>

## About this widget

The `ais-pagination` widget displays a pagination system which lets users change the current page of search results.

<Info>
  Pagination is limited to 1,000 hits per page.
  For more information,
  see \[Pagination limitations]\(/doc/guides/building-search-ui/ui-and-ux-patterns/pagination/jvue
</Info>

## Examples

```vue Vue icon=code theme={"system"}
<ais-pagination />
```

## Props

<ParamField body="show-first" type="boolean" default={true}>
  Whether to display the first page link.

  ```vue Vue icon=code theme={"system"}
  <ais-pagination :show-first="false" />
  ```
</ParamField>

<ParamField body="show-previous" type="boolean" default={true}>
  Whether to display the previous page link.

  ```vue Vue icon=code theme={"system"}
  <ais-pagination :show-previous="false" />
  ```
</ParamField>

<ParamField body="show-next" type="boolean" default={true}>
  Whether to display the next page link.

  ```vue Vue icon=code theme={"system"}
  <ais-pagination :show-next="false" />
  ```
</ParamField>

<ParamField body="show-last" type="boolean" default={true}>
  Whether to display the last page link.

  ```vue Vue icon=code theme={"system"}
  <ais-pagination :show-last="false" />
  ```
</ParamField>

<ParamField body="padding" type="number" default={3}>
  How many page links to display around the current page.

  ```vue Vue icon=code theme={"system"}
  <ais-pagination :padding="2" />
  ```
</ParamField>

<ParamField body="total-pages" type="number" default="Infinity">
  The maximum number of pages to display (and to allow navigating to).

  ```vue Vue icon=code theme={"system"}
  <ais-pagination :total-pages="5" />
  ```
</ParamField>

<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-Pagination`. The root of the widget.
  * `ais-Pagination--noRefinement`. The root of the widget without refinement.
  * `ais-Pagination-list`. The list of the page items.
  * `ais-Pagination-item`. The page item of the list.
  * `ais-Pagination-item--firstPage`. The "first" item of the list.
  * `ais-Pagination-item--lastPage`. The "last" item of the list.
  * `ais-Pagination-item--previousPage`. The "previous" item of the list.
  * `ais-Pagination-item--nextPage`. The "next" item of the list.
  * `ais-Pagination-item--page`. The "page" item of the list.
  * `ais-Pagination-item--selected`. The selected item of the list.
  * `ais-Pagination-item--disabled`. The disabled item of the list.
  * `ais-Pagination-link`. The clickable element of an item.

  ```vue Vue icon=code theme={"system"}
  <ais-pagination
    :class-names="{
      'ais-Pagination': 'MyCustomPagination',
      'ais-Pagination-list': 'MyCustomPaginationList',
      // ...
    }"
  />
  ```
</ParamField>

## Customize the UI

<ParamField body="default">
  The slot to override the complete DOM output of the widget.

  When you implement this slot,
  none of the other slots will change the output,
  as the default slot surrounds them.

  **Scope**

  * `currentRefinement: number`. The number of the selected page.
  * `nbHits: number`. The total number of hits.
  * `nbPages: number`. The total number of pages.
  * `pages: number[]`. The pages to render in the widget.
  * `isFirstPage: boolean`. Whether the current page is the first page.
  * `isLastPage: boolean`. Whether the current page is the last page.
  * `refine: (value: number) => void`. A function to select the next page.
  * `createURL: (value: number) => void`. A function to generate an URL from a refinement.

  ```vue Vue icon=code theme={"system"}
  <ais-pagination>
    <template
      v-slot="{
        currentRefinement,
        nbPages,
        pages,
        isFirstPage,
        isLastPage,
        refine,
        createURL
      }"
    >
      <ul>
        <li v-if="!isFirstPage">
          <a :href="createURL(0)" @click.prevent="refine(0)">
            ‹‹
          </a>
        </li>
        <li v-if="!isFirstPage">
          <a
            :href="createURL(currentRefinement - 1)"
            @click.prevent="refine(currentRefinement - 1)"
          >
            ‹
          </a>
        </li>
        <li v-for="page in pages" :key="page">
          <a
            :href="createURL(page)"
            :style="{ fontWeight: page === currentRefinement ? 'bold' : '' }"
            @click.prevent="refine(page)"
          >
            {{ page + 1 }}
          </a>
        </li>
        <li v-if="!isLastPage">
          <a
            :href="createURL(currentRefinement + 1)"
            @click.prevent="refine(currentRefinement + 1)"
          >
            ›
          </a>
        </li>
        <li v-if="!isLastPage">
          <a :href="createURL(nbPages)" @click.prevent="refine(nbPages)">
            ››
          </a>
        </li>
      </ul>
    </template>
  </ais-pagination>
  ```
</ParamField>

## HTML output

```html HTML icon=code-xml theme={"system"}
<div class="ais-Pagination">
  <ul class="ais-Pagination-list">
    <li class="ais-Pagination-item ais-Pagination-item--firstPage ais-Pagination-item--disabled">
      <span class="ais-Pagination-link" aria-label="First">
        ‹‹
      </span>
    </li>
    <li class="ais-Pagination-item ais-Pagination-item--previousPage ais-Pagination-item--disabled">
      <span class="ais-Pagination-link" aria-label="Previous">
        ‹
      </span>
    </li>
    <li class="ais-Pagination-item ais-Pagination-item--selected">
      <a class="ais-Pagination-link" href="#">
        1
      </a>
    </li>
    <li class="ais-Pagination-item ais-Pagination-item--page">
      <a class="ais-Pagination-link" href="#">
        2
      </a>
    </li>
    <li class="ais-Pagination-item ais-Pagination-item--page">
      <a class="ais-Pagination-link" href="#">
        3
      </a>
    </li>
    <li class="ais-Pagination-item">
      <a class="ais-Pagination-link" href="#">
        4
      </a>
    </li>
    <li class="ais-Pagination-item ais-Pagination-item--nextPage">
      <a class="ais-Pagination-link" aria-label="Next" href="#">
        ›
      </a>
    </li>
    <li class="ais-Pagination-item ais-Pagination-item--lastPage">
      <a class="ais-Pagination-link" aria-label="Last" href="#">
        ››
      </a>
    </li>
  </ul>
</div>
```

<Note>
  If SEO is important for your search page, ensure that your custom HTML is optimized for search engines:

  * Use `<a>` tags with `href` attributes to allow search engine bots to follow links.
  * Use semantic HTML and include [structured data](https://developers.google.com/search/docs/appearance/structured-data) when relevant.

  For more guidance, see the [SEO checklist](/doc/guides/building-search-ui/resources/seo/js).
</Note>