Laravel Vue Pagination Without Webpack
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.