Intro + Preview for the Pagination Component
2:59
Pagination Bar Mockup
5:38
Pagination within GitHub's API
5:55
Calculating and Displaying the Correct Number of Pages
5:06
Active and Disabled States - Styling and Guardrails to Help the User
3:43
Query Params - Saving Page Number
5:21
Multiple Query Params
6:24
Changing # of Results Per Page
8:43
Using Pagination with Preloaded Data
5:47
Conclusion
1:36
0% done with Advanced Components: Building a Reusable Pagination Component

Chapter 4 of 5 in Advanced Components: Slots
Active and Disabled States - Styling and Guardrails to Help the User

Our users need a way to know which page they're on, so we're going to add an active class to help them keep track.

It's also useful to not let them click to a page that doesn't exist, so we're going to disable the next and previous buttons when appropriate.

These are small changes that give a massive increase in usability.

What do others think of VueScreencasts?
"Great series!"
—Milan Zigmond
"Great video as always, I really like the idea of basing the video in terms of features, as someone only looking to learn particular feature can get benefits from the video. Also, I really like you going through what we have done in the video at the end, it really helps in better understanding."
—Paurakh Sharma Humagain
"⭐️⭐️⭐️⭐️⭐️"
—Majd Yafi
"👍👍👍👍Great"
—Muhammed Owais
Take your career to the next level