traxxx/assets/components/pagination/pagination.vue

<template>
	<div class="pagination">
		<template v-if="pageNumber > 1">
			<router-link
				class="pagination-page"
				:to="{ params: { pageNumber: 1 } }"
			>&lt;&lt;</router-link>

			<router-link
				class="pagination-page"
				:to="{ params: { pageNumber: pageNumber - 1 } }"
			>&lt;</router-link>
		</template>

		<template v-else>
			<span class="pagination-page disabled">&lt;&lt;</span>
			<span class="pagination-page disabled">&lt;</span>
		</template>

		<router-link
			v-for="pageX in pageCount"
			:key="`page-${pageX}`"
			:to="{ params: { pageNumber: pageX } }"
			:class="{ active: pageX === pageNumber }"
			class="pagination-page"
		> {{ pageX }} </router-link>

		<template v-if="pageNumber < pageCount">
			<router-link
				class="pagination-page"
				:to="{ params: { pageNumber: pageNumber + 1 } }"
			>&gt;</router-link>

			<router-link
				class="pagination-page"
				:to="{ params: { pageNumber: pageCount } }"
			>&gt;&gt;</router-link>
		</template>

		<template v-else>
			<span class="pagination-page disabled">&gt;</span>
			<span class="pagination-page disabled">&gt;&gt;</span>
		</template>
	</div>
</template>

<script>
function pageNumber() {
	return Number(this.$route.params.pageNumber) || 1;
}

function pageCount() {
	return Math.ceil(this.itemsTotal / this.itemsPerPage);
}

export default {
	props: {
		itemsTotal: {
			type: Number,
			default: 0,
		},
		itemsPerPage: {
			type: Number,
			default: 10,
		},
	},
	computed: {
		pageNumber,
		pageCount,
	},
};
</script>

<style lang="scss" scoped>
.pagination {
	width: 100%;
	display: flex;
	justify-content: center;
}

.pagination-page {
	width: 2rem;
	height: 2rem;
	display: inline-flex;
	align-items: center;
	margin: 0 .5rem 0 0;
	justify-content: center;
	color: var(--shadow);
	font-weight: bold;
	text-decoration: none;

	&:hover:not(.active, .disabled) {
		color: var(--text);
	}

	&.active {
		color: var(--primary);
	}

	&.disabled {
		color: var(--shadow-weak);
	}
}

.pagination-top {
	margin: 0 0 1rem 0;
}

.pagination-bottom{
	margin: 1rem 0 0 0;
}
</style>