# VuePress Tutorial 19 - Pagination Links

By: J the Code Monkey

•Posted: Nov 19, 2022 •Updated: Apr 19, 2023

# What We're Doing

Every time we navigate to the entry page or the second page in the list of pagination pages we have to manually input the URL into the search bar of the browser which isn't a great user experience. To resolve this issue we're going to be adding pagination links to each of the pagination pages.

To accomplish this we'll be using the following properties provided by the blog plugin Client API (opens new window):

$pagination.hasPrev
$pagintaion.prevLink
$pagination.hasNext
$pagintaion.nextLink

Before, we use the properties to add the pagination links, we're going to add two more example posts to the blog. This will allow us to view the pagination links in every scenario, i.e., when there isn't a previous page, when there isn't a next page, and when there is a previous page and a next page.

You can view all of the code in this tutorial by going to the tutorial-19 branch of the code-monkeys-blog-tutorials (opens new window) repository.

# Adding More Example Pages

We'll be adding the following example pages to the _posts directory:

2022-07-14-example-page-4.md
2022-11-10-example-page-5.md

The _posts directory for your site should now look like this:

.
├── _posts
│   ├── 2020-07-03-example-page-1.md
│   ├── 2021-11-16-example-page-2.md
│   ├── 2022-05-08-example-page-3.md
│   ├── 2022-07-14-example-page-4.md
│   └── 2022-11-10-example-page-5.md

# Adding Titles and Frontmatter

We're now going to add post titles and frontmatter to the example pages we just added like we did for the other example pages.

Here's what the 2022-07-14-example-page-4.md file and the 2022-11-10-example-page-5.md file look like after adding the titles and frontmatter:

# Adding Images

We also need to add the post images for the example pages we just added. We'll do this just like we did in the previous tutorial by creating a directory for each example post inside of the examples directory. Then we'll add the post images to the directories for each example post.

You can download all of the images below from your browser, and they're also available in the tutorial-19 branch of the code-monkeys-blog-tutorials (opens new window) repository.

# Example Post 4

For the fourth example post we'll be adding an example-post-4 directory inside of the examples directory. Then we'll add the image for the fourth example post which is named example-post-4.png inside of the example-post-4 directory.

The directory structure for your site should now look something like this:

.
├── examples
│   ├── example-post-1
│   ├── example-post-2
│   ├── example-post-3
│   ├── example-post-4
│   │   └── example-post-4.png

Here's the example post 4 image:

# Example Post 5

For the fifth example post we'll be adding an example-post-5 directory inside of the examples directory. Then we'll add the image for the fifth example post which is named example-post-5.png inside of the example-post-5 directory.

The directory structure for your site should now look something like this:

.
├── examples
│   ├── example-post-1
│   ├── example-post-2
│   ├── example-post-3
│   ├── example-post-4
│   ├── example-post-5
│   │   └── example-post-5.png

Here's the example post 5 image:

# Viewing the Pagination Pages

After adding the titles and frontmatter to the example pages and adding the post images, you should now have the following pagination pages:

Having these three pagination pages will allow us to view the pagination links in every scenario that we mentioned in the beginning of the post.

Order of Posts

The order of the posts may not be what you're expecting and may change each time you start the local development server. This is because the blog plugin uses a date property to sort the posts which it looks for on the frontmatter of each post page. Since we haven't added a date custom variable to the frontmatter blocks for the post pages, the blog plugin will not sort the posts in a predictable way. We'll fix this issue in a future tutorial by adding the date custom variable to the frontmatter blocks of the post pages.

If you have any questions about adding the example pages to the _posts directory, adding titles to the post pages, adding the frontmatter to the post pages, and/or adding the post images, then check out the relevant sections from the previous tutorials:

# Displaying Pagination Links

We're now ready to use the properties provided by the blog plugin Client API (opens new window) to add the pagination links to the pagination pages.

We're going to display the pagination links using two router-link components one for the previous page and one for the next page. We'll be wrapping each router-link component in a div tag.

We'll then wrap the div tags inside another div tag which we'll place underneath the div tag that is being used to loop over the pagination pages.

The router-link component is provided by Vue Router (opens new window) which gets installed when installing VuePress (opens new window). The router-link component is used for enabling user navigation for the site. The target location for the link is specified by using the to prop, and it renders as an a tag with the specified href by default.

If you want to learn more about the router-link component, then check out the <router-link> (opens new window) documentation.

To display the pagination link for the previous page we'll be using the $pagination.hasPrev property to check if the current pagination page has a previous page. We'll use the $pagination.prevLink property to provide the path of the previous pagination page to the router-link component to prop.

Similarly, to display the pagination link for the next page we'll be using the $pagination.hasNext property to check if the current pagination page has a next page. We'll use the $pagination.nextLink property to provide the path of the next pagination page to the router-link component to prop.

We discussed the properties above in detail in the VuePress Tutorial 16 - Pagination post, so if you need a refresher or if you have any questions read through the relevant sections in that post.

The IndexPost.vue file should now look like this:

Here we're using the v-if directive to conditionally render the pagination links by using the values of the $pagination.hasPrev and $pagination.hasNext properties. The block of code using the v-if directive will only be rendered if the expression provided to it returns a truthy (opens new window) value.

We're also binding the to prop by placing a : before it which is shorthand for v-bind. Using v-bind allows us to bind JavaScript expressions to the HTML attributes.

If you have any questions or want to learn more about conditional rendering or v-bind, then check these resources:

# Entry Page HTML

After updating the IndexPost.vue file with the code above, if you navigate to the entry page http://localhost:8080/posts/ (opens new window) you should now see the Next pagination link being displayed with some styling provided by the default theme (opens new window).

You should now be able to click on the Next pagination link, and it should take you to the next page in the list of pagination pages.

The HTML for the body tag for the entry page should now look something like this:

# Page 2 HTML

If you navigate to the second page http://localhost:8080/posts/page/2/ (opens new window) you should now see the Prev and Next pagination links being displayed with some styling provided by the default theme (opens new window).

You should be able to click on the Prev pagination link, and it should take you to the previous page. You should also be able to click on the Next pagination link, and it should take you to the next page.

The HTML for the body tag for the second page should now look something like this:

# Page 3 HTML

If you navigate to the third page http://localhost:8080/posts/page/3/ (opens new window) you should now see the Prev pagination link being displayed with some styling provided by the default theme (opens new window).

You should be able to click on the Prev pagination link, and it should take you to the previous page.

The HTML for the body tag for the third page should now look something like this:

# Next Steps

You may have noticed the styling of the Prev and Next pagination links doesn't look too good, so in the next tutorial we'll begin styling these links. We'll also be adding left and right arrow icons to the Prev and Next pagination links, respectively.