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?
"Your tutorial is quite easy to understand."
—Koga2 Kuzengenki
"Wonderful! Super helpful. Thank you."
—Abdur Rahman
"Great channel."
—The Nerdy Dev
"great explanation! thank you!!!"
—Elizaveta Voloskova
Take your career to the next level