DEV Community

loading...
Cover image for How to Set Up Pagination in Gridsome

How to Set Up Pagination in Gridsome

lindaojo profile image Linda ・2 min read

What is Gridsome

Gridsome is a modern website development framework for creating fast and secure websites that can be deployed anywhere. Static HTML files are generated to create SEO-friendly markup that hydrates into a Vue.js-powered SPA once loaded in the browser. Gridsome has also made it easier than ever before to set up pagination 😄

Steps to set up Gridsome Pagination

I am assuming that you already have a Gridsome blog that fetches blog posts and you are adding pagination as a new feature. In that case, these are the steps to follow.

- Setup Pagination in GraphQL query

- Import Gridsome's Pager component

- Add necessary styling

Setup Pagination in GraphQL query

Data collection is handled by the GraphQL query in Gridsome. We can use the @paginate directive in the GraphQL query to add automatic pagination for a collection.

The query will receive a $page: Int variable you can use to load sources for a specific page.

query ($page: Int) {
  allBlogPost(perPage: 10, page: $page) @paginate {
    pageInfo {
      totalPages
      currentPage
    }
    edges {
      node {
        id
        title
        path
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

In the example above, each page will contain 10 blog posts.

Import Gridsome's Pager component

Gridsome has a built-in Pager component which can be imported for easy pagination. Import and add the Pager component from Gridsome.

import { Pager } from 'gridsome';

export default {
  components: {
    Pager
  }
 }
Enter fullscreen mode Exit fullscreen mode

Though the Pager component can accept multiple properties, the only required properties are "total number of Pages" and "current Page". These properties can be found in "pageInfo" which we pass into the Pager component.

<Pager :info="$page.allBlogPost.pageInfo" />
Enter fullscreen mode Exit fullscreen mode

Add Custom Styles

We can style the pagination container using normal CSS classes but need to use the :linkClass property to style the links.

Template

<Pager :info="$page.allBlogPost.pageInfo"
       class="pager-container"
       linkClass="pager-container__link"  />
Enter fullscreen mode Exit fullscreen mode

Styles

<style scoped lang="scss">
  .pager-container {
    display: inline-block;
    font-size: 1.5rem;
    text-align: center;
    width: 100%;
    color: black;

    &__link {
      text-align: center;
      padding: 0.6rem 1.2rem;
      color: white;
      text-decoration: none;
    }
  }

  .active {
    background-color:  rgb(44, 201, 180);
  }
</style>
Enter fullscreen mode Exit fullscreen mode

That's all folk. I have been writing consistently for 4 months 🎉😄

You might also enjoy my article on How to add Code snippets to Gridsome

Read more of my articles

Discussion (1)

pic
Editor guide
Collapse
itscasey profile image
Casey 💎

Awesome! Gridsome is such a cool framework