Courses

Vue.js 3 + Laravel 11 + Vite: SPA CRUD

Pagination with External Vue Package

Loading the whole list of data into a table isn't logical, especially if you can hundreds or thousands of records. This is where the pagination comes in. In this lesson, we will add pagination to the posts table using the laravel-vue-pagination package.

finished vue pagination


First, of course, we need to install the package.

npm install laravel-vue-pagination

Next, instead of just calling all posts in the Controller, we need to paginate them.

app/Http/Controllers/Api/PostController.php:

class PostController extends Controller
{
public function index()
{
return PostResource::collection(Post::all());
return PostResource::collection(Post::paginate(10));
}
}

Next, in the PostsIndex Vue component...

The full lesson is only for Premium Members.
Want to access all 27 lessons of this course? (115 min read)

You also get:

  • 69 courses (majority in latest Laravel 11)
  • Premium tutorials
  • Access to repositories
  • Private Discord