vue-pagination-simple

Simple pagination vue component

Installation

npm

npm install --save vue-pagination-simple

Usage

<template>
	<div>
		<app-pagination class="center"
    		:current="currentPage" 
    		:total="totalPages" 
    		:page-range="pageRange"
    		:active-font-color="'black'"
    		:active-color="'#007DFF'"
    		@page-changed="changePage"
    	></app-pagination>
	</div>
</template>

<script>
export default {
	name: 'app',
	data () {
		return {
			currentPage: 6,
			totalPages: 10,
			pageRange: 2
		}
	},
	methods: {
		changePage(page) {
			console.log(`page changed on ${page}`);
			this.currentPage = page;
		}
	}
}
</script>

<style scoped>

// you can add style of pagination hover and border by class .pagination

.pagination a:hover:not(.active) {
	background-color: #ddd;
}

.pagination a {
	border: 1px solid #ddd;
}

.center {
  display: flex;
  justify-content: center;
}

</style>

Example