My Vue Pagination wrapper using https://www.npmjs.com/package/vue-awesome-paginate

Pagination.vue

<template>
    <div :class="fullWidth ? 'container-fluid' : 'container'">
        <div v-if="totalPages > 1" class="row pagination-upper">
            <div class="col-lg-12">
                <p class="pagination-note">{{ $t('pagination.navigation_hint') }}</p>
                <p class="pagination-summary">
                    {{ $t('photo', total, { count: total }) }} in
                    {{ $t('page', totalPages, { count: totalPages }) }}
                </p>
                <nav aria-label="Top Pagination" class="d-flex justify-content-center">
                    <vue-awesome-paginate
                        :total-items="total"
                        v-model="initialPage"
                        :items-per-page="limit"
                        :hide-prev-next-when-ends="true"
                        @update:modelValue="triggerCallback"
                    />
                </nav>
            </div>
        </div>

        <div class="row">
            <slot></slot>
        </div>

        <div v-if="totalPages > 1" class="row pagination-lower">
            <div class="col-lg-12">
                <nav aria-label="Bottom Pagination" class="d-flex justify-content-center">
                    <vue-awesome-paginate
                        :total-items="total"
                        v-model="initialPage"
                        :items-per-page="limit"
                        :hide-prev-next-when-ends="true"
                        @update:modelValue="triggerCallback"
                    />
                </nav>
            </div>
        </div>
    </div>
</template>

<script>
import { VueAwesomePaginate } from "vue-awesome-paginate";

export default {
    components: { VueAwesomePaginate },
    props: {
        total: { type: Number, required: true },
        page: { type: Number, default: 1 },
        limit: { type: Number, required: true },
        callback: { type: Function, required: true },
        fullWidth: { type: Boolean, default: false },
    },
    computed: {
        totalPages() {
            return Math.ceil(this.total / this.limit);
        },
    },
    data() {
        return { initialPage: this.page };
    },
    methods: {
        async triggerCallback(page) {
            if (page > 0 && page <= this.totalPages) {
                await this.callback(page);
                this.initialPage = page;
                this.updateURLParams(page);
            }
        },
        updateURLParams(page) {
            const url = new URL(window.location);
            url.searchParams.set("page", page);
            url.searchParams.set("limit", this.limit);
            window.history.pushState({}, "", url);
        },
        changePage(offset) {
            this.triggerCallback(this.initialPage + offset);
        },
        handleKeyDown(e) {
            if (!document.querySelector(".lightbox")) {
                if (e.key === "ArrowRight") this.changePage(1);
                if (e.key === "ArrowLeft") this.changePage(-1);
            }
        },
    },
    mounted() {
        document.addEventListener("keydown", this.handleKeyDown);
    },
    beforeUnmount() {
        document.removeEventListener("keydown", this.handleKeyDown);
    },
};
</script>