{"id":14265,"library":"vue-awesome-paginate","title":"Vue Awesome Paginate","description":"Vue Awesome Paginate is a modern, lightweight, and highly customizable Vue.js 3 pagination library. It provides various pagination component types, supports full CSS customization, RTL, SEO-friendliness, and different localizations. Built with TypeScript and Vite, it offers full support for Vue.js 3.x and Nuxt.js 3.x applications. The current stable version is 1.2.0. The library aims for flexibility and ease of use, with all pagination functionalities built-in and zero external dependencies, making it a self-contained solution for adding pagination to web applications. It's suitable for projects requiring fine-grained control over pagination appearance and behavior without heavy external packages.","status":"active","version":"1.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/peshanghiwa/vue-awesome-paginate","tags":["javascript","vue-awesome-paginate","vue","paginate","nuxt","pagination","vue-pagination","vue awesome paginate","nuxt.js 3","typescript"],"install":[{"cmd":"npm install vue-awesome-paginate","lang":"bash","label":"npm"},{"cmd":"yarn add vue-awesome-paginate","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-awesome-paginate","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Used for global registration in Vue/Nuxt applications. Direct component import is not typically shown in documentation, rather global plugin usage.","wrong":"const VueAwesomePaginate = require('vue-awesome-paginate')","symbol":"VueAwesomePaginate","correct":"import VueAwesomePaginate from 'vue-awesome-paginate'"},{"note":"The necessary CSS styles must be explicitly imported for the component to render correctly. Ensure the '/dist' path is included.","wrong":"import 'vue-awesome-paginate/style.css'","symbol":"CSS Styles","correct":"import 'vue-awesome-paginate/dist/style.css'"},{"note":"After global registration via `app.use(VueAwesomePaginate)`, the component is available globally as `<vue-awesome-paginate>`.","symbol":"VueAwesomePaginate Component","correct":"<vue-awesome-paginate ... />"}],"quickstart":{"code":"import { createApp, ref } from 'vue';\nimport App from './App.vue';\nimport VueAwesomePaginate from 'vue-awesome-paginate';\nimport 'vue-awesome-paginate/dist/style.css';\n\nconst app = createApp(App);\napp.use(VueAwesomePaginate).mount('#app');\n\n// In App.vue or another component:\n// <script setup lang=\"ts\">\n//   import { ref } from 'vue';\n\n//   const onClickHandler = (page: number) => {\n//     console.log('Page clicked:', page);\n//   };\n\n//   const currentPage = ref(1);\n// </script>\n\n// <template>\n//   <vue-awesome-paginate\n//     :total-items=\"100\"\n//     :items-per-page=\"10\"\n//     :max-pages-shown=\"7\"\n//     v-model=\"currentPage\"\n//     @click=\"onClickHandler\"\n//     class-name=\"my-custom-pagination\"\n//   />\n//   <p>Current Page: {{ currentPage }}</p>\n// </template>\n\n// <style>\n//   .my-custom-pagination {\n//     display: flex;\n//     column-gap: 8px;\n//     margin-top: 20px;\n//   }\n//   .my-custom-pagination .paginate-buttons {\n//     height: 36px;\n//     width: 36px;\n//     border-radius: 18px;\n//     cursor: pointer;\n//     background-color: #f0f0f0;\n//     border: 1px solid #ccc;\n//     color: #333;\n//     display: flex;\n//     align-items: center;\n//     justify-content: center;\n//     font-weight: 500;\n//   }\n//   .my-custom-pagination .paginate-buttons:hover {\n//     background-color: #e0e0e0;\n//   }\n//   .my-custom-pagination .active-page {\n//     background-color: #007bff;\n//     border-color: #007bff;\n//     color: white;\n//   }\n// </style>","lang":"typescript","description":"This quickstart demonstrates how to globally register Vue Awesome Paginate and integrate its component into a Vue 3 application, including basic usage with total items, items per page, current page binding, and a click handler. It also includes an example of custom CSS styling."},"warnings":[{"fix":"Ensure `import 'vue-awesome-paginate/dist/style.css';` is included in your main application entry point (e.g., `main.js` for Vue, `plugins/vue-awesome-paginate.js` for Nuxt).","message":"The package requires explicit import of its CSS file for proper styling. Forgetting this step will result in an unstyled pagination component.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure your project is running Vue.js 3.x or Nuxt.js 3.x. For Vue 2 projects, you will need to find an alternative pagination library.","message":"Vue Awesome Paginate is designed exclusively for Vue.js 3.x and Nuxt.js 3.x. It is not compatible with earlier versions of Vue (e.g., Vue 2).","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Declare `currentPage` using `const currentPage = ref(1);` in your `<script setup>` or `data` option. The `@click` handler should also be defined correctly as a function that accepts the page number.","message":"When using `v-model` for `currentPage`, ensure it's a `ref` or `reactive` property for reactivity in Vue 3. The `@click` event provides the new page number, which can be used to update other data or trigger an API call.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'1.2.0':58 '3':15,46,50,127 'ad':87 'aim':61 'appear':104 'applic':52,91 'awesom':2,5,114,124 'behavior':106 'built':35,73 'built-in':72 'compon':22 'contain':84 'control':101 'css':26 'current':54 'custom':27 'customiz':13 'depend':78 'differ':33 'eas':65 'extern':77,109 'fine':99 'fine-grain':98 'flexibl':63 'friendli':31 'full':25,42 'function':71 'grain':100 'heavi':108 'high':12 'javascript':111 'librari':17,60 'lightweight':10 'local':34 'make':79 'modern':9 'nuxt':118 'nuxt.js':49,126 'offer':41 'packag':110 'pagin':3,6,16,21,70,88,103,115,117,119,122,125 'project':96 'provid':19 'requir':97 'rtl':28 'self':83 'self-contain':82 'seo':30 'seo-friendli':29 'solut':85 'stabl':55 'suitabl':94 'support':24,43 'type':23 'typescript':37,128 'use':67 'various':20 'version':56 'vite':39 'vue':1,4,113,116,121,123 'vue-awesome-pagin':112 'vue-pagin':120 'vue.js':14,45 'web':90 'without':107 'x':47,51 'zero':76","created_at":"2026-04-20T01:58:48.429699+00:00","updated_at":"2026-04-20T01:58:48.429699+00:00","problems":[{"fix":"In your `main.js` (Vue) or Nuxt plugin file, ensure you have `createApp(App).use(VueAwesomePaginate).mount('#app');` (for Vue) or `nuxtApp.vueApp.use(VueAwesomePaginate);` (for Nuxt).","cause":"The `vue-awesome-paginate` plugin was not correctly registered with the Vue application.","error":"Failed to resolve component: vue-awesome-paginate"},{"fix":"Verify correct global registration. For TypeScript, ensure your `shims-vue.d.ts` or similar declaration file includes types for globally registered components, or import the component directly if using a module-level import pattern (though global registration is standard for this library).","cause":"This IDE or TypeScript error indicates that the component is not recognized. This often happens if the component is used before it's globally registered, or if TypeScript can't infer its global availability.","error":"Element 'vue-awesome-paginate' is not known."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":"https://vue-awesome-paginate.vercel.app","github":"https://github.com/peshanghiwa/vue-awesome-paginate","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vue-awesome-paginate","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}