{"id":14962275,"url":"https://github.com/freinet12/vue3-paginate","last_synced_at":"2025-10-24T22:32:26.553Z","repository":{"id":40406232,"uuid":"490020225","full_name":"freinet12/vue3-paginate","owner":"freinet12","description":"A pagination component for Vue3 + TailwindCSS. This component is published as an npm package","archived":false,"fork":false,"pushed_at":"2022-05-16T02:14:57.000Z","size":286,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-25T16:03:22.583Z","etag":null,"topics":["pagination","pagination-components","tailwindcss","vue"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/freinet12.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-05-08T18:10:25.000Z","updated_at":"2023-10-18T15:49:22.000Z","dependencies_parsed_at":"2022-08-09T19:31:06.676Z","dependency_job_id":null,"html_url":"https://github.com/freinet12/vue3-paginate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freinet12%2Fvue3-paginate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freinet12%2Fvue3-paginate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freinet12%2Fvue3-paginate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freinet12%2Fvue3-paginate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/freinet12","download_url":"https://codeload.github.com/freinet12/vue3-paginate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219867520,"owners_count":16555889,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["pagination","pagination-components","tailwindcss","vue"],"created_at":"2024-09-24T13:29:49.058Z","updated_at":"2025-10-24T22:32:21.243Z","avatar_url":"https://github.com/freinet12.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp\u003e\n  \u003cb\u003eVue3 Paginate\u003c/b\u003e is a very simple Pagination component for Vue 3 and TailwindCSS.\n\u003c/p\u003e\n\n![alt text](https://fb-test-images.s3.amazonaws.com/v3-paginate-img.PNG)\n\n\n## ⚙️ Installation\n\nMake sure you have Vue 3 and TailwindCSS v2 or v3 installed in your project.\n\n\u003cp\u003eInstall the component by running the command below:\u003c/p\u003e\n\n```bash\nnpm i -S @brutforce/vue3-paginate\n```\n\n\u003cp\u003eRegister the components locally\u003c/p\u003e\n\n```ts\n  import { Paginate, NavButton } from '@brutforce/vue3-paginate'\n```\n\n\n### Example\n```vue\n\u003ctemplate\u003e\n    \u003cPaginate\n      class=\"bg-white rounded-lg\"\n      :perPage=\"1\"\n      :totalPages=\"25\"\n      :currentPage=\"1\"\n      :maxPages=\"3\"\n      @input=\"paginate\"\n    \u003e\n      \u003ctemplate #first\u003e\n        \u003cNavButton \n          :text=\"'First'\"\n          :page=\"'first'\"\n          :class=\"'rounded-l-md px-2 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 hover:bg-gray-100'\"\n        /\u003e\n      \u003c/template\u003e\n      \u003ctemplate #prev\u003e\n        \u003cNavButton \n          :text=\"'Prev'\"\n          :page=\"'prev'\"\n          :class=\"'px-1 sm:px-2 py-2 flex focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 hover:bg-gray-100'\"\n        \u003e\n          \u003cspan class=\"text-indigo-600 my-auto relative top-0.2\"\u003e\n                \u003csvg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"\u003e\n                    \u003cpath fill-rule=\"evenodd\" d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\" clip-rule=\"evenodd\" /\u003e\n                \u003c/svg\u003e\n            \u003c/span\u003e\n            \u003cspan class=\"my-auto\"\u003e\n              Prev\n            \u003c/span\u003e\n        \u003c/NavButton\u003e\n      \u003c/template\u003e\n      \n      \u003ctemplate #next\u003e\n        \u003cNavButton \n          :text=\"'Next'\"\n          :page=\"'next'\"\n          :class=\"'px-2 py-2 inline-flex focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 hover:bg-gray-100'\"\n        \u003e\n          \u003cspan class=\"my-auto\"\u003e\n            Next\n          \u003c/span\u003e\n          \u003cspan class=\"text-indigo-600 my-auto relative top-0.2\"\u003e\n              \u003csvg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"\u003e\n                  \u003cpath fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\" /\u003e\n              \u003c/svg\u003e\n          \u003c/span\u003e\n        \u003c/NavButton\u003e\n      \u003c/template\u003e\n      \u003ctemplate #last\u003e\n        \u003cNavButton \n          :text=\"'Last'\"\n          :page=\"'last'\"\n          :class=\"'rounded-r-md px-2 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 hover:bg-gray-100 dark-hover:bg-gray-900'\"\n        /\u003e\n      \u003c/template\u003e\n    \u003c/Paginate\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\n  import { defineComponent } from 'vue'\n  import { Paginate, NavButton } from '@brutforce/vue3-paginate'\n\n  export default defineComponent({\n    name: 'App',\n    components: {\n      Paginate,\n      NavButton\n    },\n\n    methods: {\n      paginate(page: number): void{\n        console.log(page)\n      }\n    }\n  });\n\u003c/script\u003e\n\n\u003cstyle scoped\u003e\n\u003c/style\u003e\n\n```\n\n## Components\n\n  ### Paginate\n  \u003cp\u003e The Paginate component is the main component whic handles all of the pagination logic \u003c/p\u003e\n\n  #### Props\n\n  Here is a list of all the props for the Paginate component.\n\n  |Name |    Type | Required | Description\n  ------ | ----- | ----- | ----- |\n  |  maxPages   |   Number   |   false   |   The maximum number of pages to display at once. \u003cbr\u003e\u003cstrong\u003e Default: 3\u003c/strong\u003e  |\n  |  perPage    |   Number | false | The number of items displayed per page. \u003cbr\u003e\u003cstrong\u003e Default: 5\u003c/strong\u003e |\n  |  totalPages   |   Number   | false | The total number of pages to paginate. \u003cbr\u003e\u003cstrong\u003e Default: 10\u003c/strong\u003e |\n  |  currentPage   |   Number   | false | The current page. \u003cbr\u003e\u003cstrong\u003e Default: 1\u003c/strong\u003e |\n  |  showFirstLast  |   Boolean   | false | Specifies is the 'First' and 'Last' buttons should be displayed. \u003cbr\u003e\u003cstrong\u003e Default: true\u003c/strong\u003e |\n  |  wrapperClasses |   String   | false | A string of Tailwind classes for styling the component's main wrapper element. \u003cbr\u003e\u003cstrong\u003e Default: \u003c/strong\u003e `'shadow-md border-1 rounded-lg'` |\n  | dotClasses | String | false | A string of Tailwind classes for styling the dots (\"...\") before and after the allowed maxPages range. \u003cbr\u003e\u003cstrong\u003eDefault: \u003c/strong\u003e `px-3 py-auto cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400'`|\n  | activePageClasses | String | false | A string of Tailwind classes for styling the active page button. \u003cbr\u003e\u003cstrong\u003e Default: \u003c/strong\u003e `'bg-indigo-500 hover:bg-indigo-600 text-white'` |\n  | pageClasses | String | false | A string of Tailwind classes for styling the page number buttons. \u003cbr\u003e\u003cstrong\u003eDefault: \u003c/strong\u003e `'px-2 sm:px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 hover:bg-gray-100'` |\n\n  #### Named Slots\n  The following slots are used for the navigation buttons (First, Previous, Next, Last).\n  The slots allow you to add a fully customized NavButton component. See the example above.\n  `first, prev, next, last`\n\n  #### Events\n  The Paginate component emits the following event(s).\n  | Name | Description\n  ----- | ----- |\n  |input | This `input` event is fired every time a button on the paginator is clicked. The current page is sent with the event. Simply provide a method to catch the input event. See the example above.\n\n\u003chr\u003e\n\n### NavButton\n\u003cp\u003eThe NavButton component is used to navigate through the pages by clicking 'First', 'Prev', 'Next', and 'Last'\u003c/p\u003e\n\n  #### Props\n  Here is a list of props for the NavButton component.\n\n  |Name |  Type  | Required  | Description\n  ----- | -----  | -----  | -----  |\n  |text | String | false | The text that should be displayed on the button. Alternatively, you can supply your own html instead using slots. See the 'Prev' and 'Next' NavButtons in the exmple above. |\n  | page | String or Number | true | The page name/number to be displayed. ie `first`, `prev`, `next`, `last` |\n  | isFirst | Boolean | false | Used to determine if the 'First' button should be disabled. \u003cbr\u003e \u003cstrong\u003eDefault: false \u003c/strong\u003e . This is calculated internally by default |\n  | isPrev | Boolean | false | Used to determine if the 'Prev' button should be disabled. \u003cbr\u003e \u003cstrong\u003eDefault: false \u003c/strong\u003e . This is calculated internally by default |\n  | isNext | Boolean | false | Used to determin if the 'Next' button should be disabled. \u003cbr\u003e \u003cstrong\u003eDefault: false \u003c/strong\u003e . This is calculated internally by default |\n  | isLast | Boolean | false | Used to determin if the 'Last' button should be disabled. \u003cbr\u003e \u003cstrong\u003eDefault: false \u003c/strong\u003e . This is calculated internally by default |\n\n    \n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffreinet12%2Fvue3-paginate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffreinet12%2Fvue3-paginate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffreinet12%2Fvue3-paginate/lists"}