vt-pagination

Installation

yarn add vt-paginate

Usage

<template>
  <div>
    <VTPagination
      v-slot="{
        start,
        end,
        totalItems,
        nextPage,
        prevPage,
        pages,
        isActivePage,
        isEllipsis,
      }"
      :totalItems="121"
      :maxVisiblePages="4"
      :itemsPerPage="5"
      v-model="myPage"
      @change-page="fetchPage"
    >
      <div
        class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"
      >
        <div class="flex-1 flex items-center justify-between">
          <div>
            <p class="text-sm leading-5 text-gray-700">
              Showing
              <span class="font-medium">{{ start }}</span>
              to
              <span class="font-medium">{{ end }}</span>
              of
              <span class="font-medium">{{ totalItems }}</span>
              results
            </p>
          </div>
          <div>
            <nav class="relative z-0 inline-flex shadow-sm">
              <a
                href="#"
                @click="prevPage"
                class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-500 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150"
                aria-label="Previous"
              >
                <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                    clip-rule="evenodd"
                  />
                </svg>
              </a>
              <span
                v-show="isEllipsis.start"
                class="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-700"
                >...</span
              >
              <VTPage
                v-for="page in pages"
                :key="page"
                :page="page"
                :class="
                  isActivePage(page)
                    ? 'bg-gray-100 text-gray-700 transition ease-in-out duration-150'
                    : ''
                "
                class="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
                >{{ page }}</VTPage
              >
              <span
                v-show="isEllipsis.end"
                class="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-700"
                >...</span
              >
              <a
                href="#"
                @click="nextPage"
                class="-ml-px relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-500 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150"
                aria-label="Next"
              >
                <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                    clip-rule="evenodd"
                  />
                </svg>
              </a>
            </nav>
          </div>
        </div>
      </div>
    </VTPagination>
  </div>
</template>

<script>
import { VTPage, VTPagination } from "vt-pagination";
export default {
  components: {
    VTPagination,
    VTPage,
  },
  data() {
    return {
      myPage: 1,
    };
  },
  methods: {
    async fetchPage(p) {
      // fetch page from api
    },
  },
};
</script>