Laravel 9 and Vue js 3 Pagination Example
This tutorial will show you how to implement Laravel and Vue js pagination, as you know pagination is dividing content into several pages with links based on the current page.
Create the controller
I assume that you have already created a new Laravel application with Vue js already installed, and you have a database with a posts table, so the first thing we will do is to create the PostController with the method index which returns all the posts paginated.
<?php
namespace App\Http\Controllers;
use App\Models\Post;
use Illuminate\Http\Request;
class PostController extends Controller
{
//
public function index(){
$posts = Post::latest()->paginate(4);
return response()->json($posts);
}
}
Create the route
Next, we will add the route in the file api.php.
Route::get('posts',[PostController::class, 'index']);
Create the home component
In resources/js, we add new folder components inside the created folder we add a new file Home.vue in which we implement the pagination with data retrieved from the API.
The structure of the folders:
- resources
- js
- components
- Home.vue
- components
- js
<template>
<div class="row my-5">
<div class="col-md-6 mx-auto">
<div class="card my-4">
<div class="card-body">
<h4 class="mb-2 border p-2 rounded">
All Posts
</h4>
<div class="list-group" v-for="post in data.posts.data" :key="post.id">
<li class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h6>
{{post.title}}
</h6>
</div>
<div class="mb-1">
<div>
<p>
{{post.body}}
</p>
</div>
</div>
</li>
</div>
</div>
<div class="card-footer bg-white">
<div class="d-flex justify-content-between">
<button
:disabled="!data.posts.prev_page_url"
@click="previous()"
class="btn btn-sm btn-link">
<i class="fas fa-chevron-left"></i>
<i class="fas fa-chevron-left"></i>
</button>
<button
:disabled="!data.posts.next_page_url"
@click="next()"
class="btn btn-sm btn-link">
<i class="fas fa-chevron-right"></i>
<i class="fas fa-chevron-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { onMounted, reactive } from 'vue';
const data = reactive({
posts: []
});
const fetchPosts = async () => {
try {
const response = await axios.get('/api/posts');
data.posts = response.data;
} catch (error) {
console.log(error);
}
}
const next = async () => {
try {
const response = await axios.get(`/api/posts?page=${data.posts.current_page += 1}`);
data.posts = response.data;
} catch (error) {
console.log(error);
}
}
const previous = async () => {
try {
const response = await axios.get(`/api/posts?page=${data.posts.current_page -= 1}`);
data.posts = response.data;
} catch (error) {
console.log(error);
}
}
onMounted(() => fetchPosts());
</script>
<style>
</style>