Vue.js V3 support

[bverheec]

Hello, I recently migrated my app to Vue.js v3 and the component wasn't working anymore. So I pulled the code source and here is what I changed to get it working:

In Paginate.vue:

• line 11

<li v-for="page in pages" :class="[pageClass, page.selected ? activeClass : '', page.disabled ? disabledClass : '', page.breakView ? breakViewClass: '']"> Added v-bind:key="page.index" <li v-for="page in pages" v-bind:key="page.index" :class="[pageClass, page.selected ? activeClass : '', page.disabled ? disabledClass : '', page.breakView ? breakViewClass: '']">

• line 29 - 33

<template v-for="page in pages"> <a v-if="page.breakView" :class="[pageLinkClass, breakViewLinkClass, page.disabled ? disabledClass : '']" tabindex="0"><slot name="breakViewContent">{{ breakViewText }}</slot></a> <a v-else-if="page.disabled" :class="[pageLinkClass, page.selected ? activeClass : '', disabledClass]" tabindex="0">{{ page.content }}</a> <a v-else @click="handlePageSelected(page.index + 1)" @keyup.enter="handlePageSelected(page.index + 1)" :class="[pageLinkClass, page.selected ? activeClass : '']" tabindex="0">{{ page.content }}</a> </template> Added v-bind:key="page.index" <template v-for="page in pages"> <a v-if="page.breakView" :key="page.index" :class="[pageLinkClass, breakViewLinkClass, page.disabled ? disabledClass : '']" tabindex="0"><slot name="breakViewContent">{{ breakViewText }}</slot></a> <a v-else-if="page.disabled" :key="page.index" :class="[pageLinkClass, page.selected ? activeClass : '', disabledClass]" tabindex="0">{{ page.content }}</a> <a v-else :key="page.index" @click="handlePageSelected(page.index + 1)" @keyup.enter="handlePageSelected(page.index + 1)" :class="[pageLinkClass, page.selected ? activeClass : '']" tabindex="0">{{ page.content }}</a> </template>

Then I updated the binding following this page [https://v3.vuejs.org/guide/migration/v-model.html#migration-strategy]()

• line 42

value: { became modelValue: {

• And line 229

this.$emit('input', selected) became this.$emit('update:modelValue', selected)

In case someone else wants to migrate its application and wants to keep the same component.

[ZtheLeader]

@bverheec Create a PR for your fix :)

[axel-verse]

Still no V3 support?

[secit-pl]

Any update on this?

[stevendprinsloo]

This is by far one of the best Vue js paginate plugins, please can you look at getting Vue 3 support!

[svifty7]

Hi there, I made a fork of the repository and updated it under Vue 3. I hope it helps in your applications. @svifty7/vue-paginate