{"id":11194,"library":"jw-vue-pagination","title":"jw-vue-pagination","description":"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.","status":"abandoned","version":"1.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/cornflourblue/jw-vue-pagination","tags":["javascript"],"install":[{"cmd":"npm install jw-vue-pagination","lang":"bash","label":"npm"},{"cmd":"yarn add jw-vue-pagination","lang":"bash","label":"yarn"},{"cmd":"pnpm add jw-vue-pagination","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Provides the core pagination logic used by the Vue component.","package":"jw-paginate","optional":false},{"reason":"The fundamental framework this component is built for. Requires Vue 2.x.","package":"vue","optional":false}],"imports":[{"note":"The component is typically imported as a default export for global or local registration in Vue 2 applications.","wrong":"const JwPagination = require('jw-vue-pagination');","symbol":"JwPagination","correct":"import JwPagination from 'jw-vue-pagination';"},{"note":"Commonly used in `main.js` or an entry file to make the component available globally as ``.","symbol":"Global Component Registration","correct":"import JwPagination from 'jw-vue-pagination';\nVue.component('jw-pagination', JwPagination);"},{"note":"Alternatively, register locally within a specific Vue component, then use `` in its template. This is a more modern Vue pattern.","symbol":"Local Component Registration","correct":"import JwPagination from 'jw-vue-pagination';\nexport default {\n components: { JwPagination }\n // ...\n}"}],"quickstart":{"code":"import Vue from 'vue';\nimport App from './App.vue';\nimport JwPagination from 'jw-vue-pagination';\n\n// Globally register the pagination component\nVue.component('jw-pagination', JwPagination);\n\nnew Vue({\n el: '#app',\n render: h => h(App)\n});\n\n// --- App.vue ---\n// \n\n// \n\n// ","lang":"javascript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":"All versions of jw-vue-pagination when used with Vue 3."},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure `JwPagination` is properly registered with Vue. The common approach is `Vue.component('jw-pagination', JwPagination);` in your main application entry file.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Import `JwPagination` and register it. For global use: `import JwPagination from 'jw-vue-pagination'; Vue.component('jw-pagination', JwPagination);`.","cause":"The `jw-vue-pagination` component (named `JwPagination`) was imported but not globally or locally registered with Vue.","error":"[Vue warn]: Unknown custom element: - did you register the component correctly?"},{"fix":"Ensure the `items` prop passed to `` is always an array, even if empty. Initialize it in your component's `data()` or ensure it's loaded before the pagination component renders.","cause":"The `items` prop passed to `` is not an array or is `undefined`.","error":"TypeError: Cannot read property 'map' of undefined at Function.paginate (jw-paginate.js:XX)"},{"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; } }`.","cause":"The method specified in the `@changePage` event handler of `` is not defined in the parent component's `methods` option.","error":"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 )"}],"ecosystem":"npm"}