Low-level Vue pagination component

This is a low-level, ui-agnostic pagination component.

You pass it an array of data, the current page index and the desired amount of results per page.

It then exposes a scoped slot through which you can access the following:

• subset: the subset of data corresponding to the current page.
• totalPages: the total amount of pages.
• isFirstPage: whether the current page is the first one.
• isLastPage: whether the current page is the last one.

Recommended usage: wrap this in a high-level styled component.

npm install --save vue-lpage

npm package link

<scriptsrc="https://unpkg.com/vue-lpage@latest"></script>

<!-- This will render [ "a", "b" ] --> <template> <vue-lpage:data="['a', 'b', 'c']":page="1":results-per-page="2"> <divslot-scope="{subset }">{{subset }} </div> </vue-lpage> </template> <script>importVueLpagefrom"vue-lpage";exportdefault{ components:{ VueLpage }};</script>

<template> <vue-lpage:data="data":page="page":results-per-page="resultsPerPage"> <divslot-scope="{subset, totalPages, isFirstPage, isLastPage }"> <div> Page <inputtype="number"v-model="page":min="1":max="totalPages" /> out of{{totalPages }} </div> <div> Show <inputtype="number"v-model="resultsPerPage":min="1":max="data.length" /> results per page </div> <button:disabled="isFirstPage"@click="page--"> Previous </button> <button:disabled="isLastPage"@click="page++"> Next </button> <ul> <liv-for="quote in subset":key="quote">{{quote }}</li> </ul> </div> </vue-lpage> </template>

Pagination is one-based (page 1 is the first page).

• data: the array of data to paginate.
• page: the page to display.
• results-per-page: the maximum amount of results to display per page.

• subset: the subset of data corresponding to the current page.
• totalPages: the total amount of pages.
• isFirstPage: whether the current page is the first one.
• isLastPage: whether the current page is the last one.