jw-vue-pagination

1.0.3 · abandoned · verified Sun Apr 19

jw-vue-pagination is a Vue.js component designed for client-side pagination, allowing developers to easily split large datasets into manageable pages. As of its latest stable version, 1.0.3, published approximately six years ago (October 2019), the package is not actively maintained. It functions by relying on the separate `jw-paginate` library for its core pagination logic, abstracting the item paging calculations. This component is specifically tailored for Vue 2 applications, as indicated by its release timeline and common usage patterns. While simple and functional for its intended environment, its lack of recent updates means it does not support Vue 3 and may not be suitable for modern Vue projects requiring ongoing maintenance or compatibility with newer ecosystem tooling. Key differentiators include its lightweight nature and a clear separation of UI from pagination logic.

Common errors

```
[Vue warn]: Unknown custom element: <jw-pagination> - did you register the component correctly?
```
cause The `jw-vue-pagination` component (named `JwPagination`) was imported but not globally or locally registered with Vue.

fix Import `JwPagination` and register it. For global use: `import JwPagination from 'jw-vue-pagination'; Vue.component('jw-pagination', JwPagination);`.
```
TypeError: Cannot read property 'map' of undefined at Function.paginate (jw-paginate.js:XX)
```
cause The `items` prop passed to `<jw-pagination>` is not an array or is `undefined`.

fix Ensure the `items` prop passed to `<jw-pagination>` is always an array, even if empty. Initialize it in your component's `data()` or ensure it's loaded before the pagination component renders.
```
Property or method "onChangePage" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or as a computed property, or as a method. (Found in <Root>)
```
cause The method specified in the `@changePage` event handler of `<jw-pagination>` is not defined in the parent component's `methods` option.

fix Define the `onChangePage` method in the parent Vue component's `methods` object, ensuring it accepts the `pageOfItems` argument: `methods: { onChangePage(pageOfItems) { this.pageOfItems = pageOfItems; } }`.

Warnings

breaking This package is built for Vue 2 and is not compatible with Vue 3. Significant breaking changes in Vue 3 (e.g., component API, reactivity system) mean direct usage will likely lead to errors. Consider modern Vue 3 pagination libraries for new projects.
Fix: For Vue 3 projects, migrate to a Vue 3 compatible pagination library such as `vue-awesome-paginate` or `vuejs-paginate-next`. For Vue 2, ensure your project uses Vue 2.x.
gotcha The `jw-vue-pagination` package has not been updated since October 2019 (version 1.0.3). This means it is unmaintained and will not receive bug fixes, security updates, or new features. Use with caution in production environments requiring active support.
Fix: Evaluate the risk of using an unmaintained package. For long-term projects, consider forking the repository or switching to a actively maintained alternative. If using, thoroughly test and be prepared to patch issues yourself.
gotcha The component requires global or local registration using `Vue.component()` or a component's `components` option, respectively, before it can be used in templates. Simply importing the component without registration will result in a 'Component is not registered' error.
Fix: Ensure `JwPagination` is properly registered with Vue. The common approach is `Vue.component('jw-pagination', JwPagination);` in your main application entry file.

Install

npm install jw-vue-pagination npm
yarn add jw-vue-pagination yarn
pnpm add jw-vue-pagination pnpm

Imports

JwPagination
wrong:
```
const JwPagination = require('jw-vue-pagination');
```
correct:
```
import JwPagination from 'jw-vue-pagination';
```
The component is typically imported as a default export for global or local registration in Vue 2 applications.
Global Component Registration
```
import JwPagination from 'jw-vue-pagination';
Vue.component('jw-pagination', JwPagination);
```
Commonly used in `main.js` or an entry file to make the component available globally as `<jw-pagination>`.
Local Component Registration
```
import JwPagination from 'jw-vue-pagination';
export default {
  components: { JwPagination }
  // ...
}
```
Alternatively, register locally within a specific Vue component, then use `<jw-pagination>` in its template. This is a more modern Vue pattern.

Quickstart

This quickstart demonstrates how to integrate `jw-vue-pagination` into a basic Vue 2 application, registering it globally and using it to paginate a hardcoded list of items. It highlights passing `items` as a prop and handling `changePage` events.

import Vue from 'vue';
import App from './App.vue';
import JwPagination from 'jw-vue-pagination';

// Globally register the pagination component
Vue.component('jw-pagination', JwPagination);

new Vue({
  el: '#app',
  render: h => h(App)
});

// --- App.vue ---
// <template>
//   <div id="app">
//     <h1>Vue.js Simple Pagination Example</h1>
//     <div class="card m-3">
//       <h5 class="card-header">Example of Paging a List of Items</h5>
//       <div class="card-body">
//         <div v-if="pageOfItems.length">
//           <div v-for="item in pageOfItems" :key="item.id">{{item.name}}</div>
//         </div>
//         <div class="card-footer pb-0 pt-3">
//           <jw-pagination :items="exampleItems" @changePage="onChangePage"></jw-pagination>
//         </div>
//       </div>
//     </div>
//   </div>
// </template>

// <script>
// export default {
//   name: 'App',
//   data() {
//     return {
//       exampleItems: [],
//       pageOfItems: []
//     };
//   },
//   created() {
//     // generate 150 dummy items
//     this.exampleItems = [...Array(150).keys()].map(i => ({ id: (i+1), name: 'Item ' + (i+1) }));
//   },
//   methods: {
//     onChangePage(pageOfItems) {
//       // update current page of items
//       this.pageOfItems = pageOfItems;
//     }
//   }
// };
// </script>

// <style>
// /* Basic styling, not part of jw-vue-pagination package */
// .card {
//   border: 1px solid #eee;
//   border-radius: 4px;
//   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
// }
// .card-header {
//   padding: 10px 15px;
//   border-bottom: 1px solid #eee;
//   font-weight: bold;
//   background-color: #f8f9fa;
// }
// .card-body {
//   padding: 15px;
// }
// .card-footer {
//   padding: 10px 15px;
//   background-color: #f8f9fa;
//   border-top: 1px solid #eee;
// }
// .m-3 {
//   margin: 1rem;
// }
// .pb-0 {
//   padding-bottom: 0 !important;
// }
// .pt-3 {
//   padding-top: 1rem !important;
// }
// </style>

view raw JSON →