# Pagination

Pagination component is used to display list of navigable pages for paged content.

# Simple usage

Pagination component requires you to provide pages prop as a number of total pages. Use v-model with variable to control and retrieve the current page from pagination component.

Current page: 1
<Pagination v-model="currentPage" :pages="100" />
<script>
    export default {
        data(){
            return {
                currentPage:1,
            };  
        },
    }
</script>

# Custom previous and next buttons

You can customize the buttons for next and previous by utilizing previous and next slots and provide your own icons or html content. By default next slot will have string next and previous slot will have string prev.

<Pagination v-model="currentPage" :pages="100">
<template v-slot:previous>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="#607D8B" fill="none" stroke-linecap="round" stroke-linejoin="round">
      <path stroke="none" d="M0 0h24v24H0z"/>
      <polyline points="15 6 9 12 15 18" />
    </svg>
</template> 
<template v-slot:next>
    <svg xmlns="http://www.w3.org/2000/svg"  width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="#607D8B" fill="none" stroke-linecap="round" stroke-linejoin="round">
      <path stroke="none" d="M0 0h24v24H0z"/>
      <polyline points="9 6 15 12 9 18" />
    </svg>
</template>
</Pagination>
<script>
    export default {
        data(){
            return {
                currentPage:1,
            };  
        },
    }
</script>

# Sized pagination

You can provide sm or lg values for size prop in order to make different size paginations.

sm pagination:

lg pagination:


<Pagination v-model="currentPage" :pages="100" size="sm">
<template v-slot:previous>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="#607D8B" fill="none" stroke-linecap="round" stroke-linejoin="round">
      <path stroke="none" d="M0 0h24v24H0z"/>
      <polyline points="15 6 9 12 15 18" />
    </svg>
</template> 
<template v-slot:next>
    <svg xmlns="http://www.w3.org/2000/svg"  width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="#607D8B" fill="none" stroke-linecap="round" stroke-linejoin="round">
      <path stroke="none" d="M0 0h24v24H0z"/>
      <polyline points="9 6 15 12 9 18" />
    </svg>
</template>
</Pagination>

<Pagination class="mt-4" v-model="currentPage" :pages="100" size="lg">
<template v-slot:previous>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="#607D8B" fill="none" stroke-linecap="round" stroke-linejoin="round">
      <path stroke="none" d="M0 0h24v24H0z"/>
      <polyline points="15 6 9 12 15 18" />
    </svg>
</template> 
<template v-slot:next>
    <svg xmlns="http://www.w3.org/2000/svg"  width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="#607D8B" fill="none" stroke-linecap="round" stroke-linejoin="round">
      <path stroke="none" d="M0 0h24v24H0z"/>
      <polyline points="9 6 15 12 9 18" />
    </svg>
</template>
</Pagination>

# Events

Pagination component emits input event, so you can listen to it to get page value when it changes, or simply use v-model with a variable. The effect of both options is the same.

# Props

name default description required type
pages 1 Total number of pages. true Number
value 1 Currently selected page number. false Number
size Sized bootstrap pagination: lg or sm for large and small respectively. false String
threshold 1 Threshold defines how many page buttons should be shown around the current page button when it is in the middle. false Number
dontShowFirstPage false If set to true first page button will be hidden. false Boolean
dontShowLastPage false If set to true last page button will be hidden. false Boolean
disabledPages _default() {return [];} Array of page numbers which should be disabled. false Array