@2alheure/vue-pagination

Vue.js Pagination

A simple Vue.js component that helps to print and handle a pagination.
This component is compatible with Vue 3.

• Vue.js Pagination
  • Installation
  • Usage
  • Example
  • Props
  • Events

Installation

First, you must run npm install @2alheure/vue-pagination.
Then, you can import it with import Pagination from "@2alheure/vue-pagination";.

Usage

Call the component with two things:

• a v-model directive, using a variable representing the active page (integer)
• a maxPage prop (integer) representing the max page number

Example

<Pagination v-model="page" :maxPage="10" />

<script>
  import Pagination from "@2alheure/vue-pagination";
  
  export default {
    components: {
      Pagination
    },
    data() {
      return {
        page: 3
      }
    }
  };
</script>

Props

Name	Type	Default value	Description
modelValue	Number	none	The prop linked to the v-model directive (mandatory).
maxPage	Number	none	The maximum number of pages (mandatory).
textColor	String	#4a5568	The color of the buttons' text.
backgroundColor	String	#fff	The color of the buttons' background.
borderColor	String	#e2e8f0	The color of the buttons' borders.
selectedTextColor	String	#f7fafc	The color of the text for the selected button.
selectedBackgroundColor	String	#4a5568	The color of the background for the selected button.
selectedBorderColor	String	#e2e8f0	The color of the borders for the selected button.
hoverTextColor	String	#f7fafc	The color of the text for the hovered button.
hoverBackgroundColor	String	#a0aec0	The color of the background for the hovered button.
hoverBorderColor	String	#e2e8f0	The color of the borders for the hovered button.
controlsHoverBorderColor	String	#cbd5e0	The color of the borders for the hovered "Previous" or "Next" buttons.

Events

Name	Value type	Value	Description
update:modelValue	Number	The page clicked	Emitted each time the page changes
prev	Number	The previous page number	Emitted when the "Previous" button is clicked
next	Number	The next page number	Emitted when the "Next" button is clicked