1<v-pagination
2    v-model="pagination.current"
3    :length="pagination.total"
4    @input="onPageChange"
5></v-pagination>

1export default {
2    data() {
3        return {
4            users: null,
5            pagination: {
6                current: 1,
7                total: 0
8            }
9        }
10    },
11    methods: {
12        getUsers() {
13            window.axios.get('/api/users?page=' + this.pagination.current)
14                .then(response => {
15                    this.users = response.data.data;
16                    this.pagination.current = response.data.current_page;
17                    this.pagination.total = response.data.last_page;
18                });
19        },
20        onPageChange() {
21            this.getUsers();
22        }
23    },
24    mounted() {
25        this.getUsers();
26    }
27}

1new Vue({
2  el: '#app',
3  data() {
4    return {
5      items: [],
6      fields: [{
7          key: 'postId',
8          label: 'Post ID'
9        },
10        {
11          key: 'id',
12          label: 'ID'
13        },
14        {
15          key: 'name',
16          label: 'Name'
17        },
18        {
19          key: 'email',
20          label: 'Email'
21        },
22        {
23          key: 'body',
24          label: 'Body'
25        }
26      ],
27      currentPage: 0,
28      perPage: 10,
29      totalItems: 0
30    }
31  },
32  mounted() {
33    this.fetchData().catch(error => {
34      console.error(error)
35    })
36  },
37  methods: {
38    async fetchData() {
39      this.items = await fetch(`https://jsonplaceholder.typicode.com/comments?_page=${this.currentPage}&_limit=${this.perPage}`)
40        .then(res => {
41          this.totalItems = parseInt(res.headers.get('x-total-count'), 10)
42
43          return res.json()
44        })
45        .then(items => items)
46    }
47  },
48  watch: {
49    currentPage: {
50      handler: function(value) {
51        this.fetchData().catch(error => {
52          console.error(error)
53        })
54      }
55    }
56  }
57})

1<template>
2	<ul v-if="pager.pages && pager.pages.length" class="pagination" :style="ulStyles">
3		<li :style="liStyles">
4			<a
5				class="rounded-lg bg-red-500 text-white p-3 mx-1 text-md"
6				:style="[aStyles, { cursor: pager.currentPage === 1 ? 'not-allowed' : 'pointer' }]"
7				@click="setPage(1)"
8				>{{ labels.first }}</a
9			>
10		</li>
11		<li :style="liStyles">
12			<a
13				class="rounded-lg bg-red-500 text-white p-3 mx-1 text-md"
14				:style="[aStyles, { cursor: pager.currentPage === 1 ? 'not-allowed' : 'pointer' }]"
15				@click="setPage(pager.currentPage - 1)"
16				>{{ labels.previous }}</a
17			>
18		</li>
19		<li v-for="page in pager.pages" :key="page" :style="liStyles">
20			<a
21				class="page-link rounded-lg text-md p-3 mx-1"
22				:style="[
23					aStyles,
24					{
25						color: pager.currentPage === page ? 'white' : 'black',
26						backgroundColor: pager.currentPage === page ? '#ef4444' : '#f3f4f6'
27					}
28				]"
29				@click="setPage(page)"
30				>{{ page }}</a
31			>
32		</li>
33		<li :style="liStyles">
34			<a
35				class="rounded-lg bg-red-500 text-white p-3 mx-1 text-md"
36				:style="[aStyles, { cursor: pager.currentPage === pager.totalPages ? 'not-allowed' : 'pointer' }]"
37				@click="setPage(pager.currentPage + 1)"
38				>{{ labels.next }}</a
39			>
40		</li>
41		<li :style="liStyles">
42			<a
43				class="rounded-lg bg-red-500 text-white p-3 mx-1 text-md"
44				:style="[aStyles, { cursor: pager.currentPage === pager.totalPages ? 'not-allowed' : 'pointer' }]"
45				@click="setPage(pager.totalPages)"
46				>{{ labels.last }}</a
47			>
48		</li>
49	</ul>
50</template>
51
52<script>
53import paginate from 'jw-paginate'
54const defaultLabels = {
55	first: 'First',
56	last: 'Last',
57	previous: 'Prev',
58	next: 'Next'
59}
60const defaultStyles = {
61	ul: {
62		margin: 0,
63		padding: 0,
64		display: 'inline-block'
65	},
66	li: {
67		listStyle: 'none',
68		display: 'inline',
69		textAlign: 'center'
70	},
71	a: {
72		cursor: 'pointer',
73		padding: '6px 12px',
74		display: 'block',
75		float: 'left'
76	}
77}
78export default {
79	props: {
80		items: {
81			type: Array,
82			required: true
83		},
84		initialPage: {
85			type: Number,
86			default: 1
87		},
88		pageSize: {
89			type: Number,
90			default: 10
91		},
92		maxPages: {
93			type: Number,
94			default: 10
95		},
96		labels: {
97			type: Object,
98			default: () => defaultLabels
99		},
100		styles: { type: Object },
101		disableDefaultStyles: {
102			type: Boolean,
103			default: false
104		}
105	},
106	data() {
107		return {
108			pager: {},
109			ulStyles: {},
110			liStyles: {},
111			aStyles: {},
112			activeColor: 'red-500',
113			notActiveColor: 'white-100'
114		}
115	},
116	watch: {
117		items() {
118			this.setPage(this.initialPage)
119		}
120	},
121	created() {
122		if (!this.$listeners.changePage) {
123			throw new Error('Missing required event listener: "changePage"')
124		}
125		// set default styles unless disabled
126		if (!this.disableDefaultStyles) {
127			this.ulStyles = defaultStyles.ul
128			this.liStyles = defaultStyles.li
129			this.aStyles = defaultStyles.a
130		}
131		// merge custom styles with default styles
132		if (this.styles) {
133			this.ulStyles = { ...this.ulStyles, ...this.styles.ul }
134			this.liStyles = { ...this.liStyles, ...this.styles.li }
135			this.aStyles = { ...this.aStyles, ...this.styles.a }
136		}
137		// set to initial page
138		this.setPage(this.initialPage)
139	},
140	methods: {
141		setPage(page) {
142			const { items, pageSize, maxPages } = this
143			// get new pager object for specified page
144			const pager = paginate(items.length, page, pageSize, maxPages)
145			// get new page of items from items array
146			const pageOfItems = items.slice(pager.startIndex, pager.endIndex + 1)
147			// update pager
148			this.pager = pager
149			// emit change page event to parent component
150			this.$emit('changePage', pageOfItems)
151		}
152	}
153}
154</script>