Pagination - Bootstrap-Vue

https://bootstrap-vue.github.io/docs/components/pagination

HTML

<link rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap@next/dist/css/bootstrap.min.css">
<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="https://unpkg.com/tether@latest/dist/js/tether.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
  <div>
    <h6>Default</h6>
    <b-pagination size="md" :total-rows="totalPage" v-model="currentPage" :per-page="10">
    </b-pagination>

    <br>
    <br>

    <b-pagination size="md" :total-rows="100" variant="primary" secondary-variant="info" v-model="currentPage" :per-page="10">
    </b-pagination>

    <br>
    <div>currentPage: {{currentPage}}</div>
  </div>
</div>

CSS

#app {
  padding: 20px;
  height: 300px;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    currentPage: 1,
    totalCount: 30
  },

})