Laravel 8 Vue JS Datatables Example Tutorial
Today, We will discuss about how to create datatables in laravel with Vue js(Laravel 8 Vue JS Datatables Example Tutorial). We can easily create the datatable using the vue npm package. so in this example, we will install the npm vuejs-datatable package.
If you do not create datatables using laravel with vue js then you can see or use our yajra datatables with laravel.
Now, let’s follow the below steps for how to create data table vue js with laravel.
Overview
Step 1: Install laravel
Step 2: Setting Database Configuration
Step 3: The Database Migration
Step 4: Create Dummy Record Data
Step 5: Create Controller
Step 6: Install Vue
Step 7: Create Route
Step 8: Create Component and update app.js
Step 9: Update Blade Files
Step 10: Run Our Laravel Application
Step 1: Install laravel
Install the laravel using the below command.
1 | composer create-project --prefer-dist laravel/laravel laravel8_vuejs_datatable |
Step 2: Setting Database Configuration
After the complete installation of laravel. we have to database configuration. now we will open the .env file and change the database name, username, password in the .env file. See below changes in a .env file.
1 2 3 4 5 6 | DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=Enter_Your_Database_Name(laravel8_vuejs_datatable) DB_USERNAME=Enter_Your_Database_Username(root) DB_PASSWORD=Enter_Your_Database_Password(root) |
Step 3: The Database Migration
Create The table using the below command.
1 | php artisan migrate |
Step 4: Create Dummy Record Data
Now we will add a dummy record in the ‘users’ table using the laravel tinker command.
1 2 3 | php artisan tinker factory(App\User::class, 100)->create(); |
Step 5: Create Controller
Now, We will create the controller using the below command and paste the below code into this controller.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | php artisan make:controller DataTableController <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Models\User; class DataTableController extends Controller { /** * Display a listing of the resource. * * @return \Illuminate\Http\Response */ public function index() { $users = User::get(); return response()->json($users); } } |
Step 6: Install Vue
In this step, go to the project directory using the command prompt. after then we will install vue js in laravel 8 and run vuejs-datatable package.
1 2 3 | php artisan preset vue npm install npm install vuejs-datatable |
Step 7: Create Route
Add the following route code in the “routes/web.php” file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <?php use App\Http\Controllers\DataTableController; /* |-------------------------------------------------------------------------- | Web Routes |-------------------------------------------------------------------------- | | Here is where you can register web routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | contains the "web" middleware group. Now create something great! | */ Route::get('/', function () { return view('welcome'); }); Route::get('users', [DataTableController::class, 'index']); ?> |
Step 8: Create Component and update app.js
resources/js/components/DataTableComponent.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <template> <div class="container"> <div class="row justify-content-center"> <div class="col-md-8"> <div class="card"> <div class="card-header">Laravel 8 Vue JS Datatables Example Tutorial - XpertPhp</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> |
resources/js/app.js
1 2 3 4 5 6 | require('./bootstrap'); window.Vue = require('vue'); Vue.component('datatable-component', require('./components/DataTableComponent.vue').default); const app = new Vue({ el: '#app', }); |
Step 9: Update Blade Files
So finally, first we need to create the app.blade.php file in the “resources/views/layouts/” and Update the welcome.blade.php file in the “resources/views/” directory. so you can see the below code.
resources/views/layouts/app.blade.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>{{ config('app.name', 'Laravel') }}</title> <link href="{{ mix('css/app.css') }}" rel="stylesheet"> <title>User DataTable</title> </head> <body> <div id="app"> <div class="py-4"> @yield('content') </div> </div> <script src="{{ mix('js/app.js') }}" defer></script> </body> </html> |
welcome.blade.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | @extends('layouts.app') @section('content') <div class="container"> <div class="row justify-content-center"> <div class="col-md-8"> <div class="card"> <div class="card-header">Laravel 8 Vue Js DataTable Example Tutorial</div> <div class="card-body"> <datatable-component></datatable-component> </div> </div> </div> </div> </div> @endsection |
Step 10: Run Our Laravel Application
We can start the server and run this example using the below command.
1 2 3 | npm run dev //or npm run watch |
Now we will run our example using the below Url in the browser.
1 | http://127.0.0.1:8000/users |
Read Also
Laravel 8 Implement Custom Flash Message With Example
Laravel 8 Livewire File Upload From Scratch
Laravel 8 Livewire DataTable Example Tutorial
