diff --git a/.gitignore b/.gitignore
index d04f16f..8b5b13f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,6 +16,8 @@ dist-ssr
!.vscode/extensions.json
!.vscode/settings.json
.idea
+.temp
+.cache
.DS_Store
*.suo
*.ntvs*
@@ -24,3 +26,4 @@ dist-ssr
*.sw?
/app
+/dist
diff --git a/README.md b/README.md
index d621c4e..389692b 100644
--- a/README.md
+++ b/README.md
@@ -1,133 +1,37 @@
-[![npm](https://img.shields.io/npm/v/laravel-vue-pagination.svg)](https://www.npmjs.com/package/laravel-vue-pagination) [![Downloads](https://img.shields.io/npm/dt/laravel-vue-pagination.svg)](https://www.npmjs.com/package/laravel-vue-pagination)
+[![npm](https://img.shields.io/npm/v/laravel-vue-pagination.svg)](https://www.npmjs.com/package/laravel-vue-pagination) [![Downloads](https://img.shields.io/npm/dt/laravel-vue-pagination.svg)](https://www.npmjs.com/package/laravel-vue-pagination) [![Run tests](https://github.com/gilbitron/laravel-vue-pagination/actions/workflows/tests.yml/badge.svg)](https://github.com/gilbitron/laravel-vue-pagination/actions/workflows/tests.yml)
> Want your logo here? [Sponsor me on GitHub](https://github.com/users/gilbitron/sponsorship)
# Laravel Vue Pagination
-A Vue.js pagination component for Laravel paginators.
+Laravel Vue Pagination is a Vue.js pagination component for Laravel. It provides out-of-the-box components for Bootstrap 4/5 and Tailwind CSS.
-## Requirements
+## Documentation
-* [Vue.js](https://vuejs.org/) 3
-* [Laravel](http://laravel.com/docs/) 5+
-* [Bootstrap](http://getbootstrap.com/) 4
+Complete documentation and demo available at [https://laravel-vue-pagination.org](https://laravel-vue-pagination.org).
-For Vue 2 support use [v2](https://github.com/gilbitron/laravel-vue-pagination/releases/tag/2.3.2).
-
-## Install
-
-```bash
-npm install laravel-vue-pagination
-// or
-yarn add laravel-vue-pagination
-```
-
-## Usage
-
-Register the component:
-
-```javascript
-import LaravelVuePagination from 'laravel-vue-pagination';
-
-export default {
- components: {
- 'Pagination': LaravelVuePagination
- }
-}
-```
-
-Use the component:
-
-```html
-
-
{{ post.title }}
-
-
-
-```
-
-```javascript
-export default {
- data() {
- return {
- // Our data object that holds the Laravel paginator data
- laravelData: {},
- }
- },
-
- mounted() {
- // Fetch initial results
- this.getResults();
- },
-
- methods: {
- // Our method to GET results from a Laravel endpoint
- getResults(page = 1) {
- axios.get('example/results?page=' + page)
- .then(response => {
- this.laravelData = response.data;
- });
- }
- }
-
-}
-```
-
-### Customizing Prev/Next Buttons
-
-Prev/Next buttons can be customized using the `prev-nav` and `next-nav` slots:
-
-```html
-
-
- < Previous
-
-
- Next >
-
-
-```
-
-## API
-
-### Props
-
-| Name | Type | Description |
-| --- | --- | --- |
-| `data` | Object | An object containing the structure of a [Laravel paginator](https://laravel.com/docs/8.x/pagination) response or a [Laravel API Resource](https://laravel.com/docs/8.x/eloquent-resources) response. |
-| `limit` | Number | (optional) Limit of pages to be rendered. `0` shows all pages (default). `-1` will hide numeric pages and leave only arrow navigation. Any positive integer (e.g. `2`) will define how many pages should be shown on either side of the current page when only a range of pages are shown. |
-| `show-disabled` | Boolean | (optional) Show disabled prev/next buttons instead of hiding them. `false` hides disabled buttons (default). `true` shows disables buttons. |
-| `size` | String | (optional) One of `small`, `default` or `large` |
-| `align` | String | (optional) One of `left` (default), `center` or `right` |
+## Show your Support
-### Events
+To show your support for my work on this project:
-| Name | Description |
-| --- | --- |
-| `pagination-change-page` | Triggered when a user changes page. Passes the new `page` index as a parameter. |
+* [Star this repository](https://github.com/gilbitron/laravel-vue-pagination/stargazers)
+* [Tell others about this project](https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Fgilbitron%2Flaravel-vue-pagination)
+* [Sponsor me on GitHub](https://github.com/users/gilbitron/sponsorship)
## Development
To work on the library locally, run the following command:
```bash
-npm run serve
+yarn dev
```
To run the tests:
```bash
-npm run test
+yarn test
```
-## Show your Support
-
-To show your support for my work on this project:
-
-* [Star this repository](https://github.com/gilbitron/laravel-vue-pagination/stargazers)
-* [Tell others about this project](https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Fgilbitron%2Flaravel-vue-pagination)
-* [Sponsor me on GitHub](https://github.com/users/gilbitron/sponsorship)
-
## Credits
-Laravel Vue Pagination was created by [Gilbert Pellegrom](https://gilbitron.me) from [Dev7studios](https://dev7studios.co). Released under the MIT license.
+Laravel Vue Pagination was created by [Gilbert Pellegrom](https://gilbitron.me). Released under the MIT license.
diff --git a/dist/laravel-vue-pagination.es.js b/dist/laravel-vue-pagination.es.js
deleted file mode 100644
index 5da8d4a..0000000
--- a/dist/laravel-vue-pagination.es.js
+++ /dev/null
@@ -1,286 +0,0 @@
-import { resolveComponent, openBlock, createBlock, withCtx, createElementBlock, mergeProps, normalizeClass, createElementVNode, toHandlers, renderSlot, createCommentVNode, Fragment, renderList, createTextVNode, toDisplayString } from "vue";
-const _sfc_main$1 = {
- emits: ["pagination-change-page"],
- props: {
- data: {
- type: Object,
- default: () => {
- }
- },
- limit: {
- type: Number,
- default: 0
- },
- showDisabled: {
- type: Boolean,
- default: false
- },
- size: {
- type: String,
- default: "default",
- validator: (value) => {
- return ["small", "default", "large"].indexOf(value) !== -1;
- }
- },
- align: {
- type: String,
- default: "left",
- validator: (value) => {
- return ["left", "center", "right"].indexOf(value) !== -1;
- }
- }
- },
- computed: {
- isApiResource() {
- return !!this.data.meta;
- },
- currentPage() {
- return this.isApiResource ? this.data.meta.current_page : this.data.current_page;
- },
- firstPageUrl() {
- return this.isApiResource ? this.data.links.first : null;
- },
- from() {
- return this.isApiResource ? this.data.meta.from : this.data.from;
- },
- lastPage() {
- return this.isApiResource ? this.data.meta.last_page : this.data.last_page;
- },
- lastPageUrl() {
- return this.isApiResource ? this.data.links.last : null;
- },
- nextPageUrl() {
- return this.isApiResource ? this.data.links.next : this.data.next_page_url;
- },
- perPage() {
- return this.isApiResource ? this.data.meta.per_page : this.data.per_page;
- },
- prevPageUrl() {
- return this.isApiResource ? this.data.links.prev : this.data.prev_page_url;
- },
- to() {
- return this.isApiResource ? this.data.meta.to : this.data.to;
- },
- total() {
- return this.isApiResource ? this.data.meta.total : this.data.total;
- },
- pageRange() {
- if (this.limit === -1) {
- return 0;
- }
- if (this.limit === 0) {
- return this.lastPage;
- }
- var current = this.currentPage;
- var last = this.lastPage;
- var delta = this.limit;
- var left = current - delta;
- var right = current + delta + 1;
- var range = [];
- var pages = [];
- var l;
- for (var i = 1; i <= last; i++) {
- if (i === 1 || i === last || i >= left && i < right) {
- range.push(i);
- }
- }
- range.forEach(function(i2) {
- if (l) {
- if (i2 - l === 2) {
- pages.push(l + 1);
- } else if (i2 - l !== 1) {
- pages.push("...");
- }
- }
- pages.push(i2);
- l = i2;
- });
- return pages;
- }
- },
- methods: {
- previousPage() {
- this.selectPage(this.currentPage - 1);
- },
- nextPage() {
- this.selectPage(this.currentPage + 1);
- },
- selectPage(page) {
- if (page === "...") {
- return;
- }
- this.$emit("pagination-change-page", page);
- }
- },
- render() {
- return this.$slots.default({
- data: this.data,
- limit: this.limit,
- showDisabled: this.showDisabled,
- size: this.size,
- align: this.align,
- computed: {
- isApiResource: this.isApiResource,
- currentPage: this.currentPage,
- firstPageUrl: this.firstPageUrl,
- from: this.from,
- lastPage: this.lastPage,
- lastPageUrl: this.lastPageUrl,
- nextPageUrl: this.nextPageUrl,
- perPage: this.perPage,
- prevPageUrl: this.prevPageUrl,
- to: this.to,
- total: this.total,
- pageRange: this.pageRange
- },
- prevButtonEvents: {
- click: (e) => {
- e.preventDefault();
- this.previousPage();
- }
- },
- nextButtonEvents: {
- click: (e) => {
- e.preventDefault();
- this.nextPage();
- }
- },
- pageButtonEvents: (page) => ({
- click: (e) => {
- e.preventDefault();
- this.selectPage(page);
- }
- })
- });
- }
-};
-var _export_sfc = (sfc, props) => {
- const target = sfc.__vccOpts || sfc;
- for (const [key, val] of props) {
- target[key] = val;
- }
- return target;
-};
-const _sfc_main = {
- inheritAttrs: false,
- emits: ["pagination-change-page"],
- components: {
- RenderlessLaravelVuePagination: _sfc_main$1
- },
- props: {
- data: {
- type: Object,
- default: () => {
- }
- },
- limit: {
- type: Number,
- default: 0
- },
- showDisabled: {
- type: Boolean,
- default: false
- },
- size: {
- type: String,
- default: "default",
- validator: (value) => {
- return ["small", "default", "large"].indexOf(value) !== -1;
- }
- },
- align: {
- type: String,
- default: "left",
- validator: (value) => {
- return ["left", "center", "right"].indexOf(value) !== -1;
- }
- }
- },
- methods: {
- onPaginationChangePage(page) {
- this.$emit("pagination-change-page", page);
- }
- }
-};
-const _hoisted_1 = ["tabindex"];
-const _hoisted_2 = /* @__PURE__ */ createElementVNode("span", { "aria-hidden": "true" }, "\xAB", -1);
-const _hoisted_3 = /* @__PURE__ */ createElementVNode("span", { class: "sr-only" }, "Previous", -1);
-const _hoisted_4 = {
- key: 0,
- class: "sr-only"
-};
-const _hoisted_5 = ["tabindex"];
-const _hoisted_6 = /* @__PURE__ */ createElementVNode("span", { "aria-hidden": "true" }, "\xBB", -1);
-const _hoisted_7 = /* @__PURE__ */ createElementVNode("span", { class: "sr-only" }, "Next", -1);
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
- const _component_RenderlessLaravelVuePagination = resolveComponent("RenderlessLaravelVuePagination");
- return openBlock(), createBlock(_component_RenderlessLaravelVuePagination, {
- data: $props.data,
- limit: $props.limit,
- "show-disabled": $props.showDisabled,
- size: $props.size,
- align: $props.align,
- onPaginationChangePage: $options.onPaginationChangePage
- }, {
- default: withCtx((slotProps) => [
- slotProps.computed.total > slotProps.computed.perPage ? (openBlock(), createElementBlock("ul", mergeProps({ key: 0 }, _ctx.$attrs, {
- class: ["pagination", {
- "pagination-sm": slotProps.size == "small",
- "pagination-lg": slotProps.size == "large",
- "justify-content-center": slotProps.align == "center",
- "justify-content-end": slotProps.align == "right"
- }]
- }), [
- slotProps.computed.prevPageUrl || slotProps.showDisabled ? (openBlock(), createElementBlock("li", {
- key: 0,
- class: normalizeClass(["page-item pagination-prev-nav", { "disabled": !slotProps.computed.prevPageUrl }])
- }, [
- createElementVNode("a", mergeProps({
- class: "page-link",
- href: "#",
- "aria-label": "Previous",
- tabindex: !slotProps.computed.prevPageUrl && -1
- }, toHandlers(slotProps.prevButtonEvents)), [
- renderSlot(_ctx.$slots, "prev-nav", {}, () => [
- _hoisted_2,
- _hoisted_3
- ])
- ], 16, _hoisted_1)
- ], 2)) : createCommentVNode("", true),
- (openBlock(true), createElementBlock(Fragment, null, renderList(slotProps.computed.pageRange, (page, key) => {
- return openBlock(), createElementBlock("li", {
- class: normalizeClass(["page-item pagination-page-nav", { "active": page == slotProps.computed.currentPage }]),
- key
- }, [
- createElementVNode("a", mergeProps({
- class: "page-link",
- href: "#"
- }, toHandlers(slotProps.pageButtonEvents(page))), [
- createTextVNode(toDisplayString(page) + " ", 1),
- page == slotProps.computed.currentPage ? (openBlock(), createElementBlock("span", _hoisted_4, "(current)")) : createCommentVNode("", true)
- ], 16)
- ], 2);
- }), 128)),
- slotProps.computed.nextPageUrl || slotProps.showDisabled ? (openBlock(), createElementBlock("li", {
- key: 1,
- class: normalizeClass(["page-item pagination-next-nav", { "disabled": !slotProps.computed.nextPageUrl }])
- }, [
- createElementVNode("a", mergeProps({
- class: "page-link",
- href: "#",
- "aria-label": "Next",
- tabindex: !slotProps.computed.nextPageUrl && -1
- }, toHandlers(slotProps.nextButtonEvents)), [
- renderSlot(_ctx.$slots, "next-nav", {}, () => [
- _hoisted_6,
- _hoisted_7
- ])
- ], 16, _hoisted_5)
- ], 2)) : createCommentVNode("", true)
- ], 16)) : createCommentVNode("", true)
- ]),
- _: 3
- }, 8, ["data", "limit", "show-disabled", "size", "align", "onPaginationChangePage"]);
-}
-var LaravelVuePagination = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-export { LaravelVuePagination as default };
diff --git a/dist/laravel-vue-pagination.umd.js b/dist/laravel-vue-pagination.umd.js
deleted file mode 100644
index e311ff5..0000000
--- a/dist/laravel-vue-pagination.umd.js
+++ /dev/null
@@ -1 +0,0 @@
-(function(e,o){typeof exports=="object"&&typeof module!="undefined"?module.exports=o(require("vue")):typeof define=="function"&&define.amd?define(["vue"],o):(e=typeof globalThis!="undefined"?globalThis:e||self,e.LaravelVuePagination=o(e.Vue))})(this,function(e){"use strict";const o={emits:["pagination-change-page"],props:{data:{type:Object,default:()=>{}},limit:{type:Number,default:0},showDisabled:{type:Boolean,default:!1},size:{type:String,default:"default",validator:t=>["small","default","large"].indexOf(t)!==-1},align:{type:String,default:"left",validator:t=>["left","center","right"].indexOf(t)!==-1}},computed:{isApiResource(){return!!this.data.meta},currentPage(){return this.isApiResource?this.data.meta.current_page:this.data.current_page},firstPageUrl(){return this.isApiResource?this.data.links.first:null},from(){return this.isApiResource?this.data.meta.from:this.data.from},lastPage(){return this.isApiResource?this.data.meta.last_page:this.data.last_page},lastPageUrl(){return this.isApiResource?this.data.links.last:null},nextPageUrl(){return this.isApiResource?this.data.links.next:this.data.next_page_url},perPage(){return this.isApiResource?this.data.meta.per_page:this.data.per_page},prevPageUrl(){return this.isApiResource?this.data.links.prev:this.data.prev_page_url},to(){return this.isApiResource?this.data.meta.to:this.data.to},total(){return this.isApiResource?this.data.meta.total:this.data.total},pageRange(){if(this.limit===-1)return 0;if(this.limit===0)return this.lastPage;for(var t=this.currentPage,r=this.lastPage,n=this.limit,d=t-n,c=t+n+1,g=[],s=[],a,i=1;i<=r;i++)(i===1||i===r||i>=d&&i{t.preventDefault(),this.previousPage()}},nextButtonEvents:{click:t=>{t.preventDefault(),this.nextPage()}},pageButtonEvents:t=>({click:r=>{r.preventDefault(),this.selectPage(t)}})})}};var h=(t,r)=>{const n=t.__vccOpts||t;for(const[d,c]of r)n[d]=c;return n};const p={inheritAttrs:!1,emits:["pagination-change-page"],components:{RenderlessLaravelVuePagination:o},props:{data:{type:Object,default:()=>{}},limit:{type:Number,default:0},showDisabled:{type:Boolean,default:!1},size:{type:String,default:"default",validator:t=>["small","default","large"].indexOf(t)!==-1},align:{type:String,default:"left",validator:t=>["left","center","right"].indexOf(t)!==-1}},methods:{onPaginationChangePage(t){this.$emit("pagination-change-page",t)}}},u=["tabindex"],m=e.createElementVNode("span",{"aria-hidden":"true"},"\xAB",-1),f=e.createElementVNode("span",{class:"sr-only"},"Previous",-1),P={key:0,class:"sr-only"},_=["tabindex"],k=e.createElementVNode("span",{"aria-hidden":"true"},"\xBB",-1),x=e.createElementVNode("span",{class:"sr-only"},"Next",-1);function y(t,r,n,d,c,g){const s=e.resolveComponent("RenderlessLaravelVuePagination");return e.openBlock(),e.createBlock(s,{data:n.data,limit:n.limit,"show-disabled":n.showDisabled,size:n.size,align:n.align,onPaginationChangePage:g.onPaginationChangePage},{default:e.withCtx(a=>[a.computed.total>a.computed.perPage?(e.openBlock(),e.createElementBlock("ul",e.mergeProps({key:0},t.$attrs,{class:["pagination",{"pagination-sm":a.size=="small","pagination-lg":a.size=="large","justify-content-center":a.align=="center","justify-content-end":a.align=="right"}]}),[a.computed.prevPageUrl||a.showDisabled?(e.openBlock(),e.createElementBlock("li",{key:0,class:e.normalizeClass(["page-item pagination-prev-nav",{disabled:!a.computed.prevPageUrl}])},[e.createElementVNode("a",e.mergeProps({class:"page-link",href:"#","aria-label":"Previous",tabindex:!a.computed.prevPageUrl&&-1},e.toHandlers(a.prevButtonEvents)),[e.renderSlot(t.$slots,"prev-nav",{},()=>[m,f])],16,u)],2)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.computed.pageRange,(i,l)=>(e.openBlock(),e.createElementBlock("li",{class:e.normalizeClass(["page-item pagination-page-nav",{active:i==a.computed.currentPage}]),key:l},[e.createElementVNode("a",e.mergeProps({class:"page-link",href:"#"},e.toHandlers(a.pageButtonEvents(i))),[e.createTextVNode(e.toDisplayString(i)+" ",1),i==a.computed.currentPage?(e.openBlock(),e.createElementBlock("span",P,"(current)")):e.createCommentVNode("",!0)],16)],2))),128)),a.computed.nextPageUrl||a.showDisabled?(e.openBlock(),e.createElementBlock("li",{key:1,class:e.normalizeClass(["page-item pagination-next-nav",{disabled:!a.computed.nextPageUrl}])},[e.createElementVNode("a",e.mergeProps({class:"page-link",href:"#","aria-label":"Next",tabindex:!a.computed.nextPageUrl&&-1},e.toHandlers(a.nextButtonEvents)),[e.renderSlot(t.$slots,"next-nav",{},()=>[k,x])],16,_)],2)):e.createCommentVNode("",!0)],16)):e.createCommentVNode("",!0)]),_:3},8,["data","limit","show-disabled","size","align","onPaginationChangePage"])}var B=h(p,[["render",y]]);return B});
diff --git a/docs/.gitignore b/docs/.gitignore
new file mode 100644
index 0000000..1015df4
--- /dev/null
+++ b/docs/.gitignore
@@ -0,0 +1 @@
+.vuepress/dist
\ No newline at end of file
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
new file mode 100644
index 0000000..b506da4
--- /dev/null
+++ b/docs/.vuepress/config.js
@@ -0,0 +1,76 @@
+import { defineUserConfig } from 'vuepress'
+import { defaultTheme } from '@vuepress/theme-default'
+import { viteBundler } from '@vuepress/bundler-vite'
+import { fileURLToPath } from 'url';
+
+let head = [];
+if (process.env.NODE_ENV === 'production') {
+ head.push(['script', { src: 'https://cdn.usefathom.com/script.js', 'data-spa': 'auto', 'data-site': 'DIOQPXCP', 'defer': true }]);
+}
+
+export default defineUserConfig({
+ bundler: viteBundler({
+ viteOptions: {
+ resolve: {
+ alias: {
+ '@': fileURLToPath(new URL('../../src', import.meta.url)),
+ },
+ },
+ },
+ }),
+ lang: 'en-US',
+ title: 'Laravel Vue Pagination',
+ description: 'A Vue.js pagination component for Laravel',
+ head: head,
+ theme: defaultTheme({
+ repo: 'https://github.com/gilbitron/laravel-vue-pagination',
+ navbar: [
+ {
+ text: 'Guide',
+ link: '/',
+ },
+ {
+ text: 'Demo',
+ link: '/demo',
+ },
+ ],
+ sidebar: {
+ '/': [
+ {
+ text: 'Getting Started',
+ collapsable: false,
+ children: [
+ '/guide/install.md',
+ '/guide/quick-start.md',
+ '/guide/laravel-paginators.md',
+ ],
+ },
+ {
+ text: 'Components',
+ collapsable: false,
+ children: [
+ '/guide/components/bootstrap-5.md',
+ '/guide/components/bootstrap-4.md',
+ '/guide/components/tailwind.md',
+ ],
+ },
+ {
+ text: 'API',
+ collapsable: false,
+ children: [
+ '/guide/api/props.md',
+ '/guide/api/events.md',
+ '/guide/api/slots.md',
+ ],
+ },
+ {
+ text: 'Advanced',
+ collapsable: false,
+ children: [
+ '/guide/advanced/renderless-pagination.md',
+ ],
+ },
+ ],
+ },
+ }),
+})
\ No newline at end of file
diff --git a/docs/demo.md b/docs/demo.md
new file mode 100644
index 0000000..d15f662
--- /dev/null
+++ b/docs/demo.md
@@ -0,0 +1,158 @@
+# Demo
+
+## Bootstrap 4
+
+
+
+
+
+
+## Bootstrap 5
+
+
+
+
+
+
+## Tailwind CSS
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/guide/advanced/renderless-pagination.md b/docs/guide/advanced/renderless-pagination.md
new file mode 100644
index 0000000..394e960
--- /dev/null
+++ b/docs/guide/advanced/renderless-pagination.md
@@ -0,0 +1,128 @@
+# Renderless Pagination
+
+All of the pre-built pagination components in this library use a `RenderlessPagination` component under the hood. If you want to build your own pagination component, you can use the `RenderlessPagination` component to handle all of the pagination logic while leaving the UI up to you.
+
+## Example
+
+Below is an example of how you might use the `RenderlessPagination` component to build a custom pagination component:
+
+```vue
+
+
+
+
+
+
+
+```
+
+## Scoped Slot Props
+The `RenderlessPagination` component has the same [pros](/guide/api/props.html) and [events](/guide/api/events.html) as the pre-built pagination components. However, it also exposes the following scoped slot props:
+
+### data
+
+The `data` prop that was passed to the `RenderlessPagination` component.
+
+### limit
+
+The `limit` prop that was passed to the `RenderlessPagination` component.
+
+### computed
+
+Some computed properties that are used by the `RenderlessPagination` component:
+
+* `isApiResource` - Boolean indicating whether the `data` prop is an API resource
+* `currentPage` - Integer indicating the current page
+* `firstPageUrl` - The URL for the first page
+* `from` - Integer indicating the first item on the current page
+* `lastPage` - Integer indicating the last page
+* `lastPageUrl` - The URL for the last page
+* `nextPageUrl` - The URL for the next page
+* `perPage` - Integer indicating the number of items per page
+* `prevPageUrl` - The URL for the previous page
+* `to` - Integer indicating the last item on the current page
+* `total` - Integer indicating the total number of items
+* `pageRange` - An array of integers indicating the page range
+
+### prevButtonEvents
+
+An object containing the event listeners for the previous button:
+
+* `click` - Event listener for the `click` event
+
+### nextButtonEvents
+
+An object containing the event listeners for the next button:
+
+* `click` - Event listener for the `click` event
+
+### pageButtonEvents
+
+An function containing the event listeners for a page button. Takes the `page` number as an argument:
+
+* `click` - Event listener for the `click` event
\ No newline at end of file
diff --git a/docs/guide/api/events.md b/docs/guide/api/events.md
new file mode 100644
index 0000000..b428155
--- /dev/null
+++ b/docs/guide/api/events.md
@@ -0,0 +1,5 @@
+# Events
+
+## pagination-change-page
+
+Triggered when a user changes page. Passes the new page number as a parameter.
\ No newline at end of file
diff --git a/docs/guide/api/props.md b/docs/guide/api/props.md
new file mode 100644
index 0000000..cb515da
--- /dev/null
+++ b/docs/guide/api/props.md
@@ -0,0 +1,16 @@
+# Props
+
+These props are available on all components.
+
+## data
+
+* `Object`
+
+An object containing the structure of a [Laravel paginator](https://laravel.com/docs/9.x/pagination) response or a [Laravel API Resource](https://laravel.com/docs/9.x/eloquent-resources) response.
+
+## limit
+
+* `Number` (optional)
+
+Limit of pages to be rendered. `0` shows all pages (default). `-1` will hide numeric pages and leave only arrow navigation. Any positive integer (e.g. `2`) will define how many pages should be shown on either side of the current page when only a range of pages are shown.
+
diff --git a/docs/guide/api/slots.md b/docs/guide/api/slots.md
new file mode 100644
index 0000000..60206c5
--- /dev/null
+++ b/docs/guide/api/slots.md
@@ -0,0 +1,9 @@
+# Slots
+
+## prev-nav
+
+The slot for the previous navigation button.
+
+## next-nav
+
+The slot for the next navigation button.
\ No newline at end of file
diff --git a/docs/guide/components/bootstrap-4.md b/docs/guide/components/bootstrap-4.md
new file mode 100644
index 0000000..07c1d80
--- /dev/null
+++ b/docs/guide/components/bootstrap-4.md
@@ -0,0 +1,40 @@
+# Bootstrap 4
+
+## Usage
+
+Use the `Bootstrap4Pagination` component to add [Bootstrap 4](https://getbootstrap.com/docs/4.6/) compatible pagination to your application.
+
+```vue
+
+
+
+
+
+```
+
+## Props
+
+As well as the [global props](/guide/api/props.html), the following props are available for this component:
+
+### show-disabled
+
+* `Boolean` (optional)
+
+Show disabled prev/next buttons instead of hiding them. `false` hides disabled buttons (default). `true` shows disables buttons.
+
+### size
+
+* `String` (optional)
+
+One of `small`, `default` or `large`.
+
+### align
+
+* `String` (optional)
+
+One of `left` (default), `center` or `right`.
\ No newline at end of file
diff --git a/docs/guide/components/bootstrap-5.md b/docs/guide/components/bootstrap-5.md
new file mode 100644
index 0000000..e3035f8
--- /dev/null
+++ b/docs/guide/components/bootstrap-5.md
@@ -0,0 +1,40 @@
+# Bootstrap 5
+
+## Usage
+
+Use the `Bootstrap5Pagination` component to add [Bootstrap 5](https://getbootstrap.com/docs/5.2/) compatible pagination to your application.
+
+```vue
+
+
+
+
+
+```
+
+## Props
+
+As well as the [global props](/guide/api/props.html), the following props are available for this component:
+
+### show-disabled
+
+* `Boolean` (optional)
+
+Show disabled prev/next buttons instead of hiding them. `false` hides disabled buttons (default). `true` shows disables buttons.
+
+### size
+
+* `String` (optional)
+
+One of `small`, `default` or `large`.
+
+### align
+
+* `String` (optional)
+
+One of `left` (default), `center` or `right`.
\ No newline at end of file
diff --git a/docs/guide/components/tailwind.md b/docs/guide/components/tailwind.md
new file mode 100644
index 0000000..8bb4c46
--- /dev/null
+++ b/docs/guide/components/tailwind.md
@@ -0,0 +1,43 @@
+# Tailwind
+
+## Usage
+
+Use the `TailwindPagination` component to add [Tailwind CSS](https://tailwindcss.com/) compatible pagination to your application.
+
+```vue
+
+
+
+
+
+```
+
+## Props
+
+As well as the [global props](/guide/api/props.html), the following props are available for this component:
+
+### item-classes
+
+* `Array` (optional)
+
+An array of Tailwind color classes to be applied to each pagination item. Default:
+
+* `bg-white`
+* `text-gray-500`
+* `border-gray-300`
+* `hover:bg-gray-50`
+
+### active-classes
+
+* `Array` (optional)
+
+An array of Tailwind color classes to be applied to the active pagination item. Default:
+
+* `bg-blue-50`
+* `border-blue-500`
+* `text-blue-600`
\ No newline at end of file
diff --git a/docs/guide/install.md b/docs/guide/install.md
new file mode 100644
index 0000000..631701f
--- /dev/null
+++ b/docs/guide/install.md
@@ -0,0 +1,33 @@
+# Installation
+
+## Requirements
+
+* [Vue.js](https://vuejs.org/) 3
+* [Laravel](http://laravel.com/docs/) 5+
+* [Bootstrap](http://getbootstrap.com/) 4/5
+* [Tailwind CSS](https://tailwindcss.com/) 3
+
+## Install
+
+Install with yarn or npm:
+
+:::: code-group
+::: code-group-item YARN
+```bash:no-line-numbers
+yarn add laravel-vue-pagination
+```
+:::
+::: code-group-item NPM
+```bash:no-line-numbers
+npm install laravel-vue-pagination
+```
+:::
+::::
+
+Then, import and register the pagination component required for your project:
+
+```js
+import { Bootstrap4Pagination } from 'laravel-vue-pagination';
+import { Bootstrap5Pagination } from 'laravel-vue-pagination';
+import { TailwindPagination } from 'laravel-vue-pagination';
+```
diff --git a/docs/guide/laravel-paginators.md b/docs/guide/laravel-paginators.md
new file mode 100644
index 0000000..ada7808
--- /dev/null
+++ b/docs/guide/laravel-paginators.md
@@ -0,0 +1,73 @@
+# Laravel Paginators
+
+This library supports the [JSON data structures](https://laravel.com/docs/9.x/pagination#converting-results-to-json) returned by Laravel's [`paginate()`](https://laravel.com/docs/9.x/pagination#paginating-query-builder-results) and [`simplePaginate()`](https://laravel.com/docs/9.x/pagination#simple-pagination) methods as well as Eloquent's [API Resource pagination](https://laravel.com/docs/9.x/eloquent-resources#pagination).
+
+## paginate() example
+
+```json
+{
+ "current_page": 1,
+ "data": [
+ ...
+ ],
+ "first_page_url": "https://example.com/pagination?page=1",
+ "from": 1,
+ "last_page": 10,
+ "last_page_url": "https://example.com/pagination?page=10",
+ "links": [
+ ...
+ ],
+ "next_page_url": "https://example.com/pagination?page=2",
+ "path": "https://example.com/pagination",
+ "per_page": 15,
+ "prev_page_url": null,
+ "to": 15,
+ "total": 150
+}
+```
+
+## simplePaginate() example
+
+```json
+{
+ "current_page": 1,
+ "data": [
+ ...
+ ],
+ "first_page_url": "https://example.com/pagination?page=1",
+ "from": 1,
+ "next_page_url": "https://example.com/pagination?page=2",
+ "path": "https://example.com/pagination",
+ "per_page": 15,
+ "prev_page_url": null,
+ "to": 15
+}
+```
+
+## API Resource example
+
+```json
+{
+ "data": [
+ ...
+ ],
+ "links": {
+ "first": "https://example.com/pagination?page=1",
+ "last": "https://example.com/pagination?page=10",
+ "prev": null,
+ "next": "https://example.com/pagination?page=2"
+ },
+ "meta": {
+ "current_page": 1,
+ "from": 1,
+ "last_page": 10,
+ "links": [
+ ...
+ ],
+ "path": "https://example.com/pagination",
+ "per_page": 15,
+ "to": 15,
+ "total": 150
+ }
+}
+```
\ No newline at end of file
diff --git a/docs/guide/quick-start.md b/docs/guide/quick-start.md
new file mode 100644
index 0000000..7e8a7e1
--- /dev/null
+++ b/docs/guide/quick-start.md
@@ -0,0 +1,39 @@
+# Quick Start
+
+Here is a simple copy-paste example to get you started.
+
+```vue
+
+
+
+
{{ post.title }}
+
+
+
+
+
+
+
+```
+
+A short explanation of the above example:
+
+1. We use the `getResults()` method to fetch some data from a Laravel application. This method is called when the component is created. The initial data could also be passed as a prop to the component.
+1. We use the `v-for` directive to loop through the data and display it on the page.
+1. We use the `` component to display the pagination links. We use the `:data` [prop](/guide/api/props.html) to pass the paginator data from Laravel to the pagination component.
+1. We use the `@pagination-change-page` [event](/guide/api/events.html) to call the `getResults()` method when the user changes page. This event passes the new page number as a parameter.
diff --git a/docs/index.md b/docs/index.md
new file mode 100644
index 0000000..99148a2
--- /dev/null
+++ b/docs/index.md
@@ -0,0 +1,6 @@
+# Guide
+
+Laravel Vue Pagination is a Vue.js pagination component for Laravel. It provides out-of-the-box components for Bootstrap 4/5 and Tailwind CSS.
+
+* [Installation](/guide/install.html)
+* [Quick Start](/guide/quick-start.html)
\ No newline at end of file
diff --git a/index.html b/index.html
index a08fe86..e453fb8 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,6 @@
-
+