Laravel + Vue.js + Axios posts pagination as SPA

I am using Laravel 5.7 as framework, a Vue.js component named “posts” and Axios with get request to “api/posts” to retrieve the data and paginate it using next and previous links without refreshing the page, just like a Single Page Application.

Here is the code from the PostsComponent.vue component that is stored inside resources/js/components:

In your app.js file you’ll have to add this like

And in your blade file you use these tags to display the posts and the pagination links

And in your controller you must use something like this but you have to adapt it to your needs. I have created the PostsController in Api folder and added this code in the index method:

And in routes/api.php I’ve inserted this line:

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.