This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

CloudwaysCDN — a powerful solution that offers superior performance and satisfied global audience for your business. Read More

Set up Easy Vue Pagination for Laravel Projects

Updated on  11th September

7 Min Read
Reading Time: 7 minutes

Pagination is a method for dividing content into several pages and creating appropriate layouts for better and more organized presentation. Pagination is an essential requirements for blogs, websites  who wish their front-pages to be sufficiently little to stack but then sufficiently showcase the most important posts. In this case Laravel’s pagination or Vue pagination is perfect choice for developers.

vue pagination

Vue.js has been a popular option for adding functionality to Laravel projects. The good part is that it is very easy to integrate Vue.js into Laravel code. The process is very similar to using jQuery in the code. Just include it in the body tag and you are good to go.

In this article, I will demonstrate how to create Laravel simple pagination and also how to perform it Vue pagination in Laravel 5.5.

Prerequisites

For the purpose of this tutorial, I assume that you have a Laravel application installed on a web server. My setup is:

  • Laravel 5.5
  • PHP 7.1
  • MySQL
  • Node.js with NPM

Server level issues could mar your learning experience. In my case, I avoid these issues by managed Laravel web hosting on Cloudways. Cloudways offers a great development stack and takes care of all server level problems. You can try out Cloudways for free by signing for an account.

You might also like: Enhanced Cloudways Staging Environment Is Now Available for All Users

Laravel Simple Pagination

Developing a website, pagination is the process many web developers experience on different stages. There are many ways in PHP to create simple pagination. But while creating pagination, you must keep a track of few things to complete the process. These few things include Fetching and parsing data, items per page, current page, number of pages, which pages to show and different other aspects. While instead of implementing your own coding, using tried and tested package for pagination is often said as a perfect practice.

Laravel has an inbuilt package called illuminate/pagination for the purpose of pagination. Further, this package has not any particular dependence on any framework.

Install Pagination

First, start the process by installing illuminate/pagination with Composer.

Generate Fake Data

You can use Laravel’s inbuilt package called Faker to generate dummy data for the application. Take a look below at the default composer.json of Laravel.

Now, we just need to write the 6-7 lines of code to generate the fake users’ data. Go to the database/seeds/DatabaseSeeder and add the following lines of code in it.

We have first created the faker object and afterwards implemented loop through different columns of the users table, while have assigned one property at a time. So every time a loop is executed, new dummy data is generated and is integrated with the particular columns. This is how fake data for each individual user is generated. Just paste the following command to create the fake data.

Now as you can see, there are different user tables and rows are added into the database after pasting the above command. The db:seed command runs this file called DatabaseSeeder.php.

You might also like: Connect Laravel with Firebase Real-time Database

Controller

Now, go to the HomeController.php file and inside it create a function called getEmployees().

Routes

Next, open your web.php file and set your routes setting.

View

Converting Pagination Results To JSON

To convert the pagination results to JSON, the Laravel paginator result classes uses the Illuminate\Contracts\Support\JsonableInterface contract and outputs with the Json method. So it’s pretty easy to convert your pagination results to the JSON using the above method. Just paste the below code inside the web.php file.

Vue Pagination in Laravel

Steps to Create Vue Pagination in Laravel
Install Node.js with NPM
Database Configuration
Create the Migrations
Run the Migration
Create model-factory
Database Seeder
Create Model
Create the Controller
Create the View
Build the Route

Install Node.js with NPM

The first step is the installation of Node.js with NPM.

For this, first install Node.js. Next navigate to the project’s folder. Launch the terminal and then type the following command:

This command will install all the dependencies for VueJS. In addition, the command will also install laravel-mix, an API for defining webpack.

Database Configuration

The next step is the setup of MySQL database. I will also show you how to configure it for Laravel.

In the project root, you will find the .env .Add the database credentials (username, DB name, and password) to setup the database and allow the Laravel Single page app to access it.

Create the Migrations

In the third step, open the terminal and go to the root of the newly created Laravel project and generate a new migration to create task table:

Next , open the migration file located in the database/migration folder and replace the up() function with the following code:

Run the Migration

Next, I will create the required tables in the database through the following command:

Create model-factory

Next, I will create a model-factory by typing the following commands in the SSH terminal:

Next, simply edit the Post factory:

Next, edit User Factory:

Database Seeder

Database Seeder is a very helpful tool that Laravel provides for database management. The tool adds sample data to the databases automatically in a process known as database seeding. Create a file named Databaseseeder.php and add the following code to the file:

Create Model

Create Post.php and paste the following code in it:

Create the Controller

It is time to create the controller. For this, create PostController inside the Controllers folder and add an index method to return the paginated records:

Create the View

I will now modify welcome.blade.php for creating the view of Vue pagination in Laravel. Open the file and paste the following code in the file:.

Build the Route

For displaying the data, I will modify the routes/web.php file like this:

Conclusion

Vue pagination in Laravel 5.x is incredibly easy to implement. Here is an example of how pagination with Vue and Laravel works. You should see the application in action to understand how Vue.js combines with Laravel code in order to simplify the life of the developers. For questions, do leave a comment below.

Share your opinion in the comment section. COMMENT NOW

Pardeep Kumar

Pardeep is a PHP Community Manager at Cloudways - A Managed PHP Hosting Platform. He love to work on Open source platform , Frameworks and working on new ideas. You can email him at pardeep.kumar@cloudways.com

Create Laravel apps without the worry of server management.

Deploy your app on optimized PHP hosting servers for Laravel.

Get Our Newsletter
Be the first to get the latest updates and tutorials.

THERE’S MORE TO READ.