Laravel Vue Datatables Component Example With Code Examples

 

In this tutorial, i want to share with you how to implement datatables with vue js laravel. i will share simple example of vue datatable in laravel 5.8 application using vuejs-datatable npm. we will use vuejs-datatable component for vue datatables in laravel 6, laravel 7, laravel 8 and laravel 9 app.

datatable is more popular library in javascript. datatable provide search, sorting, pagination etc with user friendly layout. so you also want to implement datatables with vue js laravel app then this example will help you.

In this example, we will create users table with add some dummy records then we will create one route for getting all users. in vue ja code we will install vuejs-datatable package and using axios get request to get all users. Using vuejs-datatable we will display in table.

We will create step by step implementation of vue datatable using vuejs-datatable npm package with laravel. you can see following screen shot. You can also download code and check demo too.

Preview:

Step 1 : Install Laravel Fresh App

Here, we will get fresh Laravel 5.8 application using bellow command, So open your terminal OR command prompt and run bellow command:

composer create-project --prefer-dist laravel/laravel blog

Step 2: Create Route

In this step, we will create one get route and return all users data. So, let's add new route on that file.

routes/web.php

Route::get('users','UserController@index');

Read Also: Laravel 5.6 - Dynamic Ajax Autocomplete using Vue.js

Step 3: Create New Controller

in this step, now we have create UserController with index method, in this method we will return all users data. So let's create controller:

app/Http/Controllers/UserController.php

<?php
  
namespace App\Http\Controllers;
   
use Illuminate\Http\Request;
use App\User;
  
class UserController extends Controller
{
    /**
     * success response method.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return response()->json(User::get());
    }
}

Step 4: NPM Configuration and Install vuejs-datatable

In this step, we have to first add setup of vue js and then install npm, so let's run bellow command in your project.

Install vue:

php artisan preset vue

Install npm:

npm install

Install vuejs-datatable:

npm install vuejs-datatable

Step 5: Update Components

Here, we will write code on components, So let's update file and put bellow code:

resources/assets/js/components/ExampleComponent.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Laravel Vue Datatables Component Example - ItSolutionStuff.com</div>
  
                    <div class="card-body">
                        <datatable :columns="columns" :data="rows"></datatable>
                        <datatable-pager v-model="page" type="abbreviated" :per-page="per_page"></datatable-pager>
  
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
  
    import DatatableFactory from 'vuejs-datatable';
  
    export default {
        components: { DatatableFactory },
        mounted() {
            console.log('Component mounted.')
        },
        data(){
            return {
                columns: [
                        {label: 'id', field: 'id'}, 
                        {label: 'Name', field: 'name'},
                        {label: 'Email', field: 'email'}
                    ],
                rows: [],
                page: 1,
                per_page: 10,
            }
        },
        methods:{
            getUsers: function() {
                axios.get('/users').then(function(response){
                    this.rows = response.data;
                }.bind(this));
            }
        },
        created: function(){
            this.getUsers()
        }
    }
</script>

Step 6: Update welcome.blade.php

At last step, we will update our welcome.blade.php file. in this file we will use app.js file and use it, so let's update.

resources/views/welcome.blade.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel Vue Datatables Component Example - ItSolutionStuff.com</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="app">
            <example-component></example-component>
        </div>
        <script src="{{asset('js/app.js')}}" ></script>
    </body>
</html>

Now you have to run below command for update app.js file:

Read Also: Laravel Vue Router Example From Scratch

npm run dev

Now you can check our example and also check demo and download free code.