Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
JwPagination
✓ import JwPagination from 'jw-vue-pagination';
✗ const JwPagination = require('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.
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>
Debug
Known issues
breakingThis 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.fixFor 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.
affects: All versions of jw-vue-pagination when used with Vue 3.
gotchaThe `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.fixEvaluate 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.
affects: >=1.0.0
gotchaThe 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.fixEnsure `JwPagination` is properly registered with Vue. The common approach is `Vue.component('jw-pagination', JwPagination);` in your main application entry file. affects: >=1.0.0
Errors
Common errors & fixes
[Vue warn]: Unknown custom element: <jw-pagination> - did you register the component correctly?
The `jw-vue-pagination` component (named `JwPagination`) was imported but not globally or locally registered with Vue.
fixImport `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)
The `items` prop passed to `<jw-pagination>` is not an array or is `undefined`.
fixEnsure 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>)
The method specified in the `@changePage` event handler of `<jw-pagination>` is not defined in the parent component's `methods` option.
fixDefine the `onChangePage` method in the parent Vue component's `methods` object, ensuring it accepts the `pageOfItems` argument: `methods: { onChangePage(pageOfItems) { this.pageOfItems = pageOfItems; } }`. Audit
Dependencies
jw-paginaterequiredProvides the core pagination logic used by the Vue component.
vuerequiredThe fundamental framework this component is built for. Requires Vue 2.x.