Laravel Vue Datatables Component Example
In this post we will give you information about Laravel Vue Datatables Component Example. Hear we will give you detail about Laravel Vue Datatables Component ExampleAnd how to use it also give you demo for it if it is necessary.
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 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');
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 AppHttpControllers;
use IlluminateHttpRequest;
use AppUser;
class UserController extends Controller
{
/**
* success response method.
*
* @return IlluminateHttpResponse
*/
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 >
<div >
<div >
<div >
<div >Laravel Vue Datatables Component Example - ItSolutionStuff.com</div>
<div >
<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: Download Code from Github
I hope it can help you…
Hope this code and post will helped you for implement Laravel Vue Datatables Component Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs