Componente Paginador para Vuejs 3

Después de una gran búsqueda e instalación de 3 paginadores para usar en una nueva página basada en Astro + Vuejs decidí construir uno propio utilizarlo en este y otros proyectos.

Este es el código comentado de todo el paginador y luego mostraré como utilizarlo asociado a una API.
El sitio está basado en astro 2.0 vuejs3 y bootstrap 5.

Contenido del archivo Paginate.vue

<script lang="ts" allow="js" setup>
import { computed, watch } from 'vue'
import { number } from 'zod';

const props = defineProps({
    page: Number,
    pagetotal: Number,
    pageCount: Number,

})
const emit = defineEmits(['changepageparent'])
watch(() => props.pageCount, (newValue, oldValue) => {
    if (oldValue != 0) {

        calcpages(props.page)
    }

});

const calcpages = (jpage) => {
    if (jpage == props.pageCount)
        pages = range(3, props.pageCount - 2)
    else if (jpage >= pages[2]) {
        pages = range(3, jpage + 1)
    } else if (jpage <= pages[0] && jpage > 1)
        pages = range(3, jpage - 1)
    else if (jpage == 1)
        pages = range(3, jpage)

}
const jumppage = (jpage) => {
    if (jpage > 0 && jpage <= props.pageCount)
        emit('changepageparent', jpage)
    calcpages(jpage)
}
let pages = [1, 2, 3]
const range = (size, startAt = 0) => {
    return [...Array(size).keys()].map(i => i + startAt);
}
</script>

<template>

    <nav aria-label="Paginacion">
        <ul class="pagination">
            <li class="page-item" v-show="page != 1">
                <a class="page-link" href="" @click.stop.prevent="jumppage(1)" aria-label="Inicio">
                    <span aria-hidden="true">&laquo;&laquo;</span>
                </a>
            </li>
            <li class="page-item" v-show="page == 1">
                <a class="page-link" href="">
                    <span aria-hidden="true">&laquo;&laquo;</span>
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#" @click.stop.prevent="jumppage(page - 1)" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li class="page-item" v-show="pages[0]>1">
                <a class="page-link"   aria-label="">
                    <span aria-hidden="true">...</span>
                </a>
            </li>
            <li v-for="(npage, index) in pages" class="page-item"><a
                    :class="'page-link' + ((page == npage) ? ' selecto' : '')" @click.stop.prevent="jumppage(npage)"
                    href="#">{{ npage }} </a> </li>
                    <li class="page-item" v-show="pages[2]<pageCount">
                <a class="page-link"   aria-label="">
                    <span aria-hidden="true">...</span>
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#" @click.stop.prevent="jumppage(page + 1)" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
            <li class="page-item" v-if="pageCount != page">
                <a class="page-link" href="#" @click.stop.prevent="jumppage(pageCount)" aria-label="Inicio">
                    <span aria-hidden="true">&raquo;&raquo;</span>
                </a>
            </li>
            <li class="page-item" v-if="pageCount == page">
                <a class="page-link">
                    <span aria-hidden="true">&raquo;&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</template>

<style >
.selecto {
    color: rgb(191, 60, 60)
}
</style>

Para utilizarlo primero se importa y luego podemos incorporarlo en el componente padre de vuejs.

 <Paginador ref="paginadortop" :page="page" :page-count="pagecount" @changepageparent="(page) => changepage(page)" />

Ahora solo tenemos que asegurarnos que existan las variables "page" (pagina actual) , pagecount (el total de páginas a mostrar) y el método que se llama desde el componente padre (changepage)