Recently i applied Vue.js only my Laravel application. During that time, i faced a problem to show pagination using vue. Then i make an solution and sharing on here. Please not that i didn’t use webpack on this application. Think we will show all user list in a page with pagination. So, first take a look on routes

Route::get('/user', function () {
    return view('user/index');
});

Route::get('/user/json', function () {
    return App\User::paginate(5);
});

On those 2 routes, first one will used to show a view page & second one will use to response data is json

Let go to the view page. First their will be a table to show user information. At the end of table there have the pagination number. I am planning to use vue components to show pagination, which component i can re-use on all of my application. Also we need to send request to server to get user info on json. I use axios to send request to server. So we have to include 4 files. One is for vue another is for axios, one is for component and another is app js. Like below

<script src="axios.min.js"></script>
<script src="vue.min.js"></script>
<script type="module" src="VuePagination-component.js"></script>
<script type="module" src="app.js"></script>

I prepare my vue pagination components like as below

and my app js is like below

Great! It’s almost done

Now use the component like below

<vue -pagination :pagination="parcels"
 @paginate="allUser()"></vue>

It’s done. Now we can use this pagination component where ever we need.