Vue Bulma Pagination Component

Vue Bulma Pagination Component

A Vue.js pagination component created for the Bulma CSS framework.

Vue Bulma Pagination

npm version

A Vue.js pagination component for the Bulma CSS framework

View the demo.


Install via NPM:

npm install vue-2-bulma-pagination --save



Name Type Required Default Description
current Number True N/A Current page
total Number False 0 Total number of items
itemsPerPage Number True N/A Items per page
step Number False 3 Number of pages to display (besides first and last)
onChange Function True N/A Page changed event callback. Parameters: page


Use like below. See the example code in the demo.


  <table class="table">
        <th v-for="(key, value) in countries[0]">{{ key }}</th>
      <tr v-for="country in countries">
        <td v-for="key in keys">{{ country[key] }}</td>



import Pagination from 'vue-2-bulma-pagination'
import axios from 'axios';

let pagination = {
  current: 1,       // Current page
  total: 0,         // Items total count
  itemsPerPage: 5   // Items per page

export default {
  name: 'demo',
  components: { Pagination },
  data () {
    return {
      countries: [],
      pagination: pagination
  methods: {
    onChange (page) {
      console.log(`Getting page ${page}`)
      .then(response => {
        this.countries =
        this.pagination.current  = page
  created () {
    .then(response => {
      this.keys = Object.keys([0])
      this.countries =

      // Set pagination config based on response =


# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

For detailed explanation on how things work, consult the docs for vue-loader.

Github Repository

Tags: #VueJs