When ever I set up a blog, there are a few features which are must haves, linkable taxonomy (i.e. tags or categories) and pagination. No one wants an eternal page. These tasks can be challenging but it is super easy in Gridsome.
What is Gridsome?
Gridsome is the Gatsby alternative for Vue.js that aims to provide the tech stack to build blazing fast statically generated websites. Itβs data-driven, using a GraphQL layer to get data from different sources in order to dynamically generate pages from it. 1 Adding pagination to this blog was the easiest implementation I have experienced. It requires basically three separate parts.
- GraphQL
- New Component
- Add CSS Styling
GraphQL
In Gridsome, the GraphQL query handles the data collection. Where is a standard Vue.js application you might handle pagination in the Script section, via data and methods, in Gridsome all of the heavy lifting is done in the data later, which in this case in GraphQL. Notice below in my page-query
there are three differences from the standard query:
- Declare a
$page
query variable - Define the number of items
perPage
- Add
@pagination
directive - Include
totalCount
and thepageInfo
section as shown below
query ($page: Int) {
posts: allPost(perPage: 5, page: $page, filter: { published:
{ eq: true }}) @paginate {
totalCount
pageInfo {
totalPages
currentPage
isFirst
isLast
}
edges {
node {
id
title
date (format: "MMM DD, YYYY")
timeToRead
description
cover_image (width: 770, height: 380, blur: 10)
path tags {
id
title
path
}
}
}
}
}
Add Component
Next task is to add the Pager component from Gridsome. In the script section:
import { Pager } from 'gridsome'
export default {
components: {
Pager
}
}
Then at the bottom of the template section add the Pager
component:
<Pager :info="$page.posts.pageInfo" />
Add Styling
Now, the output has no styling so we need to handle that with properties available on the Pager Component.
First to style the links, you can add a :linkClass
to style the pagination links. But you will need to also include a second class to style the pagination container. So, my Pager element looks so:
<Pager :info="$page.posts.pageInfo"
linkClass="pager__link"
class="pager" />
My styling to match my theme looks so:
<style lang="scss">
.pager {
display: inline-block;
width: 100%;
text-align: center;
&__link {
color: var(--link-color);
text-align: center;
text-decoration: none;
padding: .5rem 1rem;
&:hover:not(.active) {
background-color: var(--bg-content-color);
border-radius: 5px;
color: var(--link-color);
}
}
}
.active {
background-color: var(--bg-content-color);
border-radius: 5px;
}
</style>
All Done!
Notice the styling? What I like about the Gridsome Blog Starter is that all the styles use SCSS and Block Element Modifier (BEM) naming convention, so my styling follows this convention.
Enjoy and I hope this helps.
1. Credit to Building a blog with Gridsome by Alex Morales.β©
Top comments (10)
#ask
if I'll to filter data in taxonomy pages, example :
I'll get a list of post where tag is A, then I'll filter it with
published: true
.when I filter it use this
I get Error in terminal
Field "published" is not defined by type BelongsToFilterInput
how can I filter and solve it?
So, I added the
published
feature to my blog site. You will need to add the following to thegridsome.server.js
file. It will add the filter, but will ignore thepublished
field in your development server:oke solved, thank's.
Great I am glad this helped.
Any way of paginating by year?
This was really helpful, thank you!
Glad I was able to help
love this, thank you!
Hii,
How to paginate based on search result count. I couldn't able to get total count based on the search results.
Is it possible to add three dots in pagination