Vue Component Library

Appearance

Pagination Component Demos ​

Basic Pagination ​

Simple pagination with default settings.

Code Example ​

vue
<template>
  <OPagination
    v-model="currentPage1"
    :total-pages="totalPages1"
    @update:model-value="(page) => handlePageChange(page, 1)"
  />
</template>

<script setup>
import { ref } from 'vue';

const currentPage1 = ref(1);
const totalPages1 = ref(10);

const handlePageChange = (page) => {
  console.log('Page changed to:', page);
};
</script>

Demo ​

Current page: 1 of 10

Large Page Count ​

Pagination with many pages showing ellipsis.

Code Example ​

vue
<template>
  <OPagination
    v-model="currentPage2"
    :total-pages="totalPages2"
    :total-visible="7"
    @update:model-value="(page) => handlePageChange(page, 2)"
  />
</template>

Demo ​

Current page: 5 of 20

Size Variants ​

Different sizes: small, default, and large.

Code Example ​

vue
<template>
  <div class="size-demos">
    <OPagination
      v-model="currentPage3"
      :total-pages="totalPages3"
      size="small"
    />
    
    <OPagination
      v-model="currentPage4"
      :total-pages="totalPages4"
      size="default"
    />
    
    <OPagination
      v-model="currentPage5"
      :total-pages="totalPages5"
      size="large"
    />
  </div>
</template>

Demo ​

Small

Default

Large

Color Themes ​

Different color variants for the active page.

Code Example ​

vue
<template>
  <div class="color-demos">
    <OPagination
      v-model="currentPage6"
      :total-pages="totalPages6"
      color="primary"
    />
    
    <OPagination
      v-model="currentPage7"
      :total-pages="totalPages7"
      color="success"
    />
    
    <OPagination
      v-model="currentPage8"
      :total-pages="totalPages8"
      color="error"
    />
  </div>
</template>

Demo ​

Primary

Success

Error

Rounded Buttons ​

Pagination with rounded button styling.

Code Example ​

vue
<template>
  <OPagination
    v-model="currentPage9"
    :total-pages="totalPages9"
    :rounded="true"
    color="info"
  />
</template>

Demo ​

Current page: 6 of 30

Without First/Last Buttons ​

Pagination without first and last navigation buttons.

Code Example ​

vue
<template>
  <OPagination
    v-model="currentPage10"
    :total-pages="totalPages10"
    :show-first-last="false"
    color="warning"
  />
</template>

Demo ​

Current page: 1 of 3

Custom Navigation ​

Pagination with custom navigation button styling.

Code Example ​

vue
<template>
  <OPagination
    v-model="currentPage1"
    :total-pages="totalPages1"
    @first="(page) => handleFirst(page, 1)"
    @prev="(page) => handlePrev(page, 1)"
    @next="(page) => handleNext(page, 1)"
    @last="(page) => handleLast(page, 1)"
  >
    <template #prev="{ onClick, disabled }">
      <button 
        @click="onClick" 
        :disabled="disabled"
        class="custom-nav-btn"
      >
        ← Prev
      </button>
    </template>
    
    <template #next="{ onClick, disabled }">
      <button 
        @click="onClick" 
        :disabled="disabled"
        class="custom-nav-btn"
      >
        Next →
      </button>
    </template>
  </OPagination>
</template>

Demo ​

Current page: 1 of 10

Disabled State ​

Pagination in disabled state.

Code Example ​

vue
<template>
  <OPagination
    v-model="currentPage3"
    :total-pages="totalPages3"
    :disabled="true"
  />
</template>

Demo ​

Pagination is disabled - no interactions allowed

Custom Page Items ​

Pagination with custom page number styling.

Code Example ​

vue
<template>
  <OPagination
    v-model="currentPage4"
    :total-pages="totalPages4"
  >
    <template #item="{ isActive, page, props }">
      <button
        v-bind="props"
        :class="{ 'custom-page-active': isActive }"
        class="custom-page-btn"
      >
        {{ page }}
      </button>
    </template>
  </OPagination>
</template>

Demo ​

Current page: 7 of 15

Event Handling ​

Pagination with comprehensive event handling.

Code Example ​

vue
<template>
  <OPagination
    v-model="currentPage5"
    :total-pages="totalPages5"
    @first="(page) => handleFirst(page, 5)"
    @prev="(page) => handlePrev(page, 5)"
    @next="(page) => handleNext(page, 5)"
    @last="(page) => handleLast(page, 5)"
  />
</template>

Demo ​

Current page: 1 of 8

Check console for event logs when clicking navigation buttons