1. Tutorials
  2. Vue.js

Vue.js Pagination Component With Bootstrap

February 7, 2020

Setup Bootstrap 4 or BootstrapVue.

Pagination Component

Vue Pagination Component

Vue.js Component

<template>
  <ul class="pagination">
    <li class="page-item" :class="{'disabled': currentPage == 1}">
      <a class="page-link" :href="pageUrl(1)">First</a>
    </li>
    <li class="page-item" :class="{'disabled': currentPage == 1}" >
      <a class="page-link" :href="pageUrl(currentPage-1)" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    <li class="page-item" :class="{'active': currentPage == index, 'disabled': index == '...'}" v-for="(index, key) in pages" :key="key">
      <a class="page-link" :href="pageUrl(index)">{{ index }}</a>
      <!-- <router-link class="page-link" :to="pageUrl(index)">{{ index }}</router-link>  -->
    </li>
    <li class="page-item" :class="{'disabled': currentPage == totalPage}">
      <a class="page-link" :href="pageUrl(currentPage+1)" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
    <li class="page-item" :class="{'disabled': currentPage == totalPage}">
      <a class="page-link" :href="pageUrl(totalPage)">Last</a>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'pagination',
  props: {
    currentPage: Number,
    totalPage: Number
  },
  /*
  data() {
    return {
      currentPage: 6,
      totalPage: 6
    }
  },
   */
  computed: {
    pages() {
      let nums = []
      nums.push(this.currentPage)

      let count = 1
      let index = this.currentPage - count
      while (index >= 1) {
        nums.unshift(index)
        count++
        index = this.currentPage - count
        if (count > 2) break
      }

      if (index >= 1) nums.unshift('...')

      count = 1
      index = this.currentPage + count
      while (index <= this.totalPage) {
        nums.push(index)
        count++
        index = this.currentPage + count
        if (count > 2) break
      }

      if (index <= this.totalPage) nums.push('...')

      return nums
    }
  },
  methods: {
    pageUrl(index) {
      if (index == 1) {
        return '/'
      }
      else if (index < 1 || index > this.totalPage) {
        return ''
      }
      else {
        return `/page/${index}`
      }
    }
  }
}
</script>

NOTE: If you are using Vue-Router, you might want to use <router-link class="page-link" :to="pageUrl(index)">{{ index }}</router-link> instead of <a class="page-link" :href="pageUrl(index)">{{ index }}</a>

Usage

<template>
  <div>

    <pagination :total-page="totalPage" :current-page="page" />

  </div>
</template>

<script>
import Pagination from '@/components/Pagination.vue'

export default {
  name: 'home',
  data() {
    return {
      totalPage: 6
      page: 1
    }
  },
  components: {
    Pagination
  }
}
</script>
❤️ Is this article helpful?
Buy me a coffee☕ or support my work to keep this space 🖖 and ad-free.
If you can't, do send some 💖 to @d_luaz or help to share this article.
👶 Apps I built
COVID-19 - data, chart, information & news.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings.
Travelopy - travel discovery and journal
LuaPass - offline password manager
WhatIDoNow - a public log of things I am working on now
By Desmond Lua
A dream boy who enjoys programming and travelling, maker of Travelopy. Follow me on @d_luaz.
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.