Building a Reusable Pagination Component in VueJS

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:

TimeStamps

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:
Debounce video:
GitHub Branch:

Course for VSTable:
Course for DataLoader:
Named and Scoped Slots:
VueJS Slots (free):

Be sure to like and subscribe
If you like Twitter, follow me there:

If you want customized training or access to advanced Pro courses, check out

Javascript,vuejs,vue,javascript frameworks,web development,frontend javascript,