Create Pagination Component using Laravel and Vue js
Components are one of the most powerful features of Vue. They help you extend basic HTML elements to encapsulate reusable code. At a high level, components are custom elements that Vue’s compiler attaches behavior to.
In this article I am going to describe how we can make pagination component using Laravel5.3 and Vue js 2. Let’s get started.
At first, download the Fresh Laravel app, Create database in mysql and edit the database credentials in .env file and go up to your project directory using command line, run the migration files using command php artisan migrate.
Now, database is created and users table is also created, Let’s run command php artisan tinker and factory(‘App\User’, 100)->create(); this will generate 100 random records for users table, Now we are going to paginate these 100 records of users table.
Ok, create two routes inside routes/web.php
In Above routes first one is useful to return the users records in json format, second one will send to the users index view file.
Let’s create one UserApiController inside Controllers/API directory and add index method to return users paginated records.
To see the paginated records just hit the url http://yourbaseurl/user/api?page=1 then you can see somthing like this json formatted data.
Let’s create UserController, make index function then return to the users/index.blade.php view.
Inside views directory create one layouts directory and create app.blade.php file for master template. Which contains css and javascript links.
Master file is ready so it’s time to create index.blade.php file inside views/users and file is should be like this.
In this index.blade.php file you can see one table with name, email and created_at columns, users records are come from database. We first fetch these data using ajax and assign these records to the users variable in vue main instance.
Laravel5.3 already set up vue js environment you just need to npm install and run gulp. Let’s create pagination.vue file inside resources/assets/js/components and file contains following code. After page change it changes the current_page value and emits the paginate event to the parent component.
Now create assets/js/app.js in which Vue main instance is situated, Import VuePagination component from ./components/Pagination.vue and define in components section of Vue instance. To fetch the records from database we can use the axios, it is Promise based HTTP client for the browser and node.js . The app.js file is looks like this,
In gulpfile.js just use webpack to compile javascript file
Run gulp, It may works and pagination component is created which is reusable for your entire application. Here is paginate listener, when pagination component emit the paginate event then getUsers() method will be called. For this you can use like this
Here getUsers method is situated in vue main instance if we are creating another pagination for another table we should make seperate vue instance but we can use the same component, getUsers method may differ also.
Now run your laravel project and see in the browser, Result is like this,
If you want to make the reusable functions to fetch data too you can use mixins in vue js, Which is almost same as trait in php.
Here is the github link for paginate users records. Thank you !
References
