• About Us
  • Contact Us
  • Privacy Policy
NSR-TECH
No Result
View All Result
  • Login
No Result
View All Result
NSR-TECH
No Result
View All Result
Home Web Development Vue

Vue pagination with Laravel

nsr by nsr
October 10, 2020
in Vue
1
Vue pagination with Laravel

Vue pagination with Laravel

0
SHARES
59
VIEWS
Share on FacebookShare on Twitter

Create pagination for Vue project using Laravel backend

Hello friends, in this article I am going to teach you how to create pagination for you Vue app using Laravel backend. You may think this process might be easy, ya it is easy if you are developing both Vue and Laravel project together. But if we using Laravel backend as API and if Vue and Laravel are separate projects, this may be little bit hard. However I am going to show the easiest way to integrate pagination for your Vue project. So before we start we have to add a dependency to the Vue project. Now locate to your Vue project directory and open via CMD and add following dependency.

If you are using NPM

READ ALSO

how to SEO vue.js site

npm install laravel-vue-pagination

If you are using Yarn

yarn add laravel-vue-pagination

Ok. Now lets go to the Laravel backend first. Follow the below steps.

First of all create the route for your endpoint in web.php

If you are using Laravel pure framework

Route::get('/fetchusers', 'UserController@fetchAllUsers');

Or if you are using Laravel Lumen framework

$router->get('/fetchusers', 'UserController@fetchAllUsers');

If you have any issue on routing go Laravel official document link given below

https://laravel.com/docs/7.x/controllers

Ok. Now we have to write the code in our controller to send the users data as a Json API object with pagination. Go to UserController

  public function fetchAllUsers()
  {
     $users = User::paginate(3);
     return response()->json($users, 200);
  }

So the above function will return the user data as a json object with limiting 3 user data per page.

Now lets move to Vue frontend

In the frontend we are using axios to retrieve the API from Laravel backend. So now create a page or component.

In the template section use below code

<template>
  <div>
    <ul v-for="(user,index) in userData.data" :key="index">
      <li>{{user.first_name}}</li>
    </ul>

    <pagination :data="userData" @pagination-change-page="getPaginatedData"></pagination>
  </div>

  
</template>

In the script section

<script>

import Vue from 'vue'
Vue.component('pagination', require('laravel-vue-pagination'));

export default {
  name: 'PaginationTest',

  data () {
    return {
      userData: [],
     
    }
  },

  created(){

    /* NOTE- If this.$axios not worked try just axios. */
     let response =  this.$axios.get("fetchusers").then(response => {
      console.log(response.data)

       this.userData = response.data;
     
       
      })
      .catch(error => {
        console.log('error messsage: ', error.message)
      
      })
  
  },

  methods:{

    getPaginatedData(page = 0){
      /* NOTE- If this.$axios not worked try just axios. */
      let response =  this.$axios.get("fetchusers?page="+page).then(response => {

       this.userData = response.data;
       
      })
      .catch(error => {
        console.log('error messsage: ', error.message)
      
      })

    }
   
  }
}
</script>

NOTE – You might be wondered how and why we are using “fetchusers?page=” endpoint without defining the route in backend web.php. Its because laravel will automatically create it route for the pagination. I have used the console.log at first time when we fetching the data. If you see at the response, it is different from other response we getting from backend. In that case only when we using for loop we have to use userData.data without using just userData. you can see the example response given below

vue laravel pagination

And finally, if your pagination look like a horizontal list use following style to make it vertical and remove the dots

<style>

.pagination{
    list-style: none;
    display: flex;
}

.pagination > li {
  padding-right : 10px;
}

</style>

Thats it! if you have any questions please comment below. Or if you want more articles, go to below link.

Check the latest posts

Tags: laravelvue

Related Posts

how to seo vue.js site
Quasar

how to SEO vue.js site

January 10, 2021
Next Post
How to save media on iPhone storage

How to save media on iPhone storage

Comments 1

  1. aamir says:
    3 months ago

    Thanks..

    Reply

Leave a Reply Cancel reply

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

POPULAR POSTS

quasar-file-upload-img

Quasar file upload process with laravel API

September 6, 2020
lumen framework tutorial

Lumen framework tutorial for beginners

October 24, 2020

Run cordova without android studio

September 12, 2020
install firmware on samsung device manually

Install official firmware on samsung device manually

September 7, 2020
quasar google maps

Quasar Google maps with places

October 7, 2020

EDITOR'S PICK

laravel tutorial for absolute beginners

Laravel tutorial for absolute beginners

November 2, 2020
How to sign quasar cordova app

How to sign quasar cordova app

September 24, 2020
Website creation methods

Website creation methods

November 24, 2020
increase intel hd graphcs

Increase intel hd graphics

September 27, 2020

About

Nsrtech is a blog which brings you high quality and valuable articles to your life. All articles will be on different categories which all peoples can solve their issues in a single blog site.

Follow us

Categories

  • Laravel
  • Mobile Development
  • Networking Lessons
  • Others
  • Quasar
  • Quasar
  • Software Guides
  • Theories
  • Tricks
  • Vue
  • Web Development
  • Web Development Lessons

Recent Posts

  • Git branch not showing in Visual Studio Code fix
  • Laravel Specified Key Was Too Long Fix
  • MySQL you do not have the super privilege issue fix
  • how to SEO vue.js site
  • Home
  • About Us
  • Contact Us
  • Privacy Policy

© 2020 NSR-TECH Blog .

No Result
View All Result
  • Homepages
    • Home Page 1
    • Home Page 2

© 2020 NSR-TECH Blog .

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In