BootstrapVue — Customizing Pagination

To make good looking Vue apps, we need to style our components. To make our lives easier, we can use components with styles built-in.

In this article, we’ll look at how to add pagination buttons to our page.

First and Last Button Type

We can change which buttons are shown in our pagination component.

The first-number prop indicates whether we want to always show the button for the first page.

Likewise, the last-number prop indicates whether we want to always show the button for the last page.

For example, we can write:

<template>
  <div id="app">
    <b-pagination first-number v-model="page" :total-rows="rows" :per-page="perPage"></b-pagination>

    <p>Current Page: {{ page }}</p>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      rows: 100,
      perPage: 10,
      page: 1
    };
  }
};
</script>

Now we always see the button for going to the first page.

Likewise, if we have:

<template>
  <div id="app">
    <b-pagination last-number v-model="page" :total-rows="rows" :per-page="perPage"></b-pagination>

<p>Current Page: {{ page }}</p>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      rows: 100,
      perPage: 10,
      page: 1
    };
  }
};
</script>

Then we always see the button for going to the last page.

Button Size

The button size can be changed with the size prop.

The value sm makes them smaller than the default.

lg makes them larger than the default.

For example, we can write:

<template>
  <div id="app">
    <b-pagination size="sm" v-model="page" :total-rows="rows" :per-page="perPage"></b-pagination>

<p>Current Page: {{ page }}</p>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      rows: 100,
      perPage: 10,
      page: 1
    };
  }
};
</script>

Now they look smaller.

Pill Style

We can add the pills prop to make the buttons look like pills:

<template>
  <div id="app">
    <b-pagination pills v-model="page" :total-rows="rows" :per-page="perPage"></b-pagination>

    <p>Current Page: {{ page }}</p>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      rows: 100,
      perPage: 10,
      page: 1
    };
  }
};
</script>

Alignment

The pagination buttons can be aligned in the position we want.

We can use the align prop to set the alignment.

The default alignment is left.

Other possible values are right to right-align, center for center align, and fill to fill the screen’s width.

For example, we can write:

<template>
  <div id="app">
    <b-pagination align="center" v-model="page" :total-rows="rows" :per-page="perPage"></b-pagination>

<p>Current Page: {{ page }}</p>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      rows: 100,
      perPage: 10,
      page: 1
    };
  }
};
</script>

Since we set align to 'center' , we have the pagination bar at the center of the screen.

Pagination Navigation

BootstrapVue also provides the b-pagination-nav component that lets us set the navigation position.

For instance, we can write:

<template>
  <div id="app">
    <b-pagination-nav :link-gen="linkGen" :number-of-pages="10" use-router></b-pagination-nav>
  </div>
</template>
<script>
export default {
  name: "App",
  methods: {
    linkGen(pageNum) {
      return pageNum === 1 ? "?" : `?page=${pageNum}`;
    }
  }
};
</script>

The difference between b-pagination and b-pagination-nav is that the pagination links can go to the URL that we want.

We have the link-gen prop which returns something that we can append to the current URL.

number-of-page lets us display the number of page buttons that we want.

use-router lets us navigate to URL generated by the Vue or Nuxt router.

The linkGen method can also return an object.

For instance, we can write:

<template>
  <div id="app">
    <b-pagination-nav :link-gen="linkGen" :number-of-pages="10" use-router></b-pagination-nav>
  </div>
</template>
<script>
export default {
  name: "App",
  methods: {
    linkGen(pageNum) {
      return { path: `/foo/page/${pageNum}` };
    }
  }
};
</script>

The object has the have the path property which is appended to the current URL.

It can also have the name and query properties for the route name and the query string respectively:

<template>
  <div id="app">
    <b-pagination-nav :link-gen="linkGen" :number-of-pages="10" use-router></b-pagination-nav>
  </div>
</template>
<script>
export default {
  name: "App",
  methods: {
    linkGen(pageNum) {
      return {
        name: "page",
        params: { page: pageNum }
      };
    }
  }
};
</script>

or:

linkGen(pageNum) {
  return {
    path: '/foo/',
    query: { page: pageNum }
  }
}

Conclusion

We can customize the pagination buttons on the b-pagination component.

Also, we can add a b-pagination-nav to generate links that we can click to go to a URL.