Building a Reusable Pagination Component in VueJS





The interactive transcript could not be loaded.


Rating is available when the video has been rented.
This feature is not available right now. Please try again later.
Published on Feb 27, 2020

In this course, we'll be building a reusable Pagination Component.

It will let the user
* select the number of results per page,
* navigate to pages both directly and with 'next' and 'previous' buttons, and
* track their queries between page reloads via query params.

It's reusable, and can work with data-sets that are paginated at the API level (like GitHub's API) or need to be split at the app level (like the Courses API).
In the next course, we'll be making it customizable via slots.

This is available as a course on VueScreencasts.com: https://www.vuescreencasts.com/course...


0:00 Start
3:00 Pagination Bar Mockup
8:44 Pagination within GitHub’s API
14:41 Displaying the Correct Number of Pages
19:52 Active and Disabled States
23:40 Query Params - Saving Page Numbers
29:07 Multiple Query Params
35:37 Changing # of Results per Page
44:25 Using Pagination with Preloaded Data
50:18 Conclusion and Preview

Referenced Links

Github API auth video: https://www.vuescreencasts.com/watch/264
Debounce video: https://www.vuescreencasts.com/watch/279
GitHub Branch: https://www.github.com/jeffreybiles/a...

Course for VSTable: https://www.vuescreencasts.com/course...
Course for DataLoader: https://www.vuescreencasts.com/course...
Named and Scoped Slots: https://www.vuescreencasts.com/course...
VueJS Slots (free): https://www.vuescreencasts.com/course...

Be sure to like and subscribe
If you like Twitter, follow me there: https://twitter.com/VueScreencasts

If you want customized training or access to advanced Pro courses, check out https://www.vuescreencasts.com/


When autoplay is enabled, a suggested video will automatically play next.

Up next

to add this to Watch Later

Add to

Loading playlists...