Buefy — Pagination and Progress Bar

Photo by Sam Shin on Unsplash

Buefy is a UI framework that’s based on Bulma.

In this article, we’ll look at how to use Buefy in our Vue app.

Pagination

Buefy comes with a pagination component.

We can add it with the b-pagination component:

<template>
  <section>
    <b-pagination
      :total="total"
      v-model="current"
      :range-before="rangeBefore"
      :range-after="rangeAfter"
      :order="order"
      :size="size"
      :simple="isSimple"
      :rounded="isRounded"
      :per-page="perPage"
      :icon-prev="prevIcon"
      :icon-next="nextIcon"
      :iconPack="iconPack"
    ></b-pagination>
  </section>
</template>
<script>
export default {
  data() {
    return {
      total: 200,
      current: 10,
      perPage: 10,
      rangeBefore: 3,
      rangeAfter: 1,
      order: "",
      size: "",
      isSimple: false,
      isRounded: false,
      iconPack: "fa",
      prevIcon: "arrow-circle-left",
      nextIcon: "arrow-circle-right"
    };
  },
  methods: {}
};
</script>

iconPack has the icon pack to use.

'fa' is for Font Awesome.

prevIcon has the icon for going to the previous page.

nextIcon has the icon for going to the next page.