How to implement Datatables with Vuejs And Laravel

How to implement Datatables with Vuejs And Laravel

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 app.

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 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 vuejs 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 vuejs 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','[email protected]');

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:

npm run dev

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

We used vuejs-datatable npm package, you can get more information from here: vuejs-datatable.

You can download code from git here

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Top Vue.js Developers in USA

Vue.js is an extensively popular JavaScript framework with which you can create powerful as well as interactive interfaces. Vue.js is the best framework when it comes to building a single web and mobile apps.

Learn GraphQL with Laravel and Vue.js - Full Tutorial

Learn how to use GraphQL with Laravel and Vue.js in this tutorial course. We'll be using the Lighthouse package on the backend with Laravel and Vue Apollo on the frontend. We'll build a book recommendation app from scratch as a project. Laravel is a PHP framework and Vue.js is a JavaScript frontend framework.

Inertia.js for Laravel & Vue - Server Driven Single Page Apps

We take a look at the basics of Inertia.js and build out a simple CRUD application in Laravel and Vue. What is Inertia.js? Inertia is a library that combines the best of both server-side rendering (SSR) and client-side rendering (CSR) by allowing developers to build SPAs using server-side routing and controllers.