Add rudimentary pagination

app/Http/Controllers/BlogArticleController.php

@@ -47,7 +47,7 @@ class BlogArticleController extends Controller
             $query = $query->where('published', true);
         }
 
-        $data = $query->limit(5)->get();
+        $data = $query->paginate(request()->get('limit', 5));
 
         return response()->json($data);
     }

resources/js/components/BlogRecent.vue

@@ -23,32 +23,52 @@
                     </div>
                 </li>
             </ul>
+
+            <pagination
+                v-if="paginate"
+                v-model:page="page"
+                v-model:itemsPerPage="itemsPerPage"
+                :max-pages="lastPage"
+            ></pagination>
         </div>
     </section>
 </template>
 
 <script>
+import Pagination from "./Pagination";
+
 export default {
+    components: {
+        Pagination
+    },
     data() {
         return {
             loading: false,
             articles: [],
             error: null,
+            page: 0,
+            lastPage: 0,
+            itemsPerPage: 0,
         };
     },
+    props: {
+        paginate: {
+            type: Boolean,
+            default: false,
+        },
+        max: {
+            type: Number,
+            default: 5,
+        },
+        summary: {
+            type: Boolean,
+            default: false,
+        },
+    },
     mounted() {
-        axios.get("/api/blog/recent").then((res) => {
+        this.itemsPerPage = this.max;
-            if (res.status > 399) {
-                this.error = res.statusText;
-            } else {
-                this.articles = res.data;
-            }
 
-            this.loading = false;
+        this.updateList(this.itemsPerPage, this.page);
-        }).catch(ex => {
-            this.loading = false;
-            this.error = ex.message;
-        });
     },
     methods: {
         relDate(date) {
@@ -67,6 +87,34 @@ export default {
 
             this.$router.push({ name: 'blog-article', params: { year, month, day, id, slug }});
         },
+        updateList(limit, page) {
+            axios.get("/api/blog/recent", {
+                params: {
+                    limit: limit,
+                    page: page,
+                }
+            }).then((res) => {
+                if (res.status > 399) {
+                    this.error = res.statusText;
+                } else {
+                    this.articles = res.data.data;
+                    this.lastPage = res.data.last_page;
+                }
+
+                this.loading = false;
+            }).catch(ex => {
+                this.loading = false;
+                this.error = ex.message;
+            });
         },
+    },
+    watch: {
+        itemsPerPage() {
+            this.page = 0;
+        },
+        page(value) {
+            this.updateList(this.itemsPerPage, value);
+        },
+    }
 }
 </script>

resources/js/components/Pagination.vue

@@ -0,0 +1,32 @@
+<template>
+    <button @click="gotoPage(0)">First</button>
+    <button @click="gotoPage(page - 1)">Previous</button>
+    <span>{{ page + 1 }} / {{ maxPages }}</span>
+    <button @click="gotoPage(page + 1)">Next</button>
+    <button @click="gotoPage(maxPages)">Last</button>
+</template>
+
+<script>
+export default {
+    props: {
+        page: Number,
+        itemsPerPage: Number,
+        maxPages: Number,
+    },
+    methods: {
+        gotoPage(page) {
+            if (page < 0) {
+                page = 0;
+            }
+
+            if (page >= this.maxPages) {
+                page = this.maxPages - 1;
+            }
+
+            if (page !== this.page) {
+                this.$emit('update:page', page);
+            }
+        },
+    }
+}
+</script>

resources/js/views/Blog.vue

@@ -4,7 +4,7 @@
     <container>
         <split-content>
             <template v-slot:main>
-                <blog-recent></blog-recent>
+                <blog-recent :paginate="true" :max="10" :summary="true"></blog-recent>
             </template>
 
             <template v-slot:aside>