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

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.

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...