Laravel 8.x Vue Component with Datatable Example

Hello Artisan

In this tutorial i will discuss about Laravel datatable with vue js. In this Laravel datatable tutorial i will show you step by step that how we can show our data inside datatable. To show data in datatable in vue js, i will use vue npm package.

If you need to show vuejs datatable then this vuejs datatable example tutorial is for you. In this Laravel 8 Vue js datatables tutorial example you will learn how to show datatable using npm package in laravel and vue js.

DataTables has a wealth of options which can be used to configure how it will obtain the data to display in the table, and how it processes that data. Let's see how we can create laravel vue datatable example tutorial.

Step 1 : Install Laravel

In this step, we need to install laravel latest laravel app, So open your terminal and execute the following command:

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

Step 2 : Create Model

In this second step we need model to save some data and then we will show those data in our laravel vue datatable. So create model by the following command.

php artisan make:model Post -m

Now paste this in your post table

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
       Schema::create('posts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title');
            $table->string('slug');
            $table->timestamps();
      });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

Step 3 : Install Vue 

You need to setup Vue and install Vue dependencies using NPM to create our laravel vue js datatable. So execute the following command on command prompt to create datatable:

php artisan preset vue

then

npm install

then install npm package for vue datatable

npm install vuejs-datatable

Step 4 : Create Route

Next, you have to go routes folder and open web.php file and add the following routes into your file:

routes/web.php

use App\Http\Controllers\PostController;
 
Route::get('posts', [PostController::class, 'index']);

Step 5 : Create Controller

After that, go to app\Http\Controllers and open PostController.php file. Then update the following code into your PostController.php file:

app\Http\Controllers\PostController.php

namespace App\Http\Controllers;
use App\Models\Post;
use Illuminate\Http\Request;
class PostController extends Controller
{
    public function index(Request $request)
    {
        $posts = Post::get();
        return response()->json($posts);
         
    }
}

Step 6 : Create Datatable Component

Next step, go to resources/assets/js/components folder and create a file called DataTableComponent.vue.

resources/js/components/DataTableComponent.vue

Now open resources/assets/js/app.js and include

resources/js/app.js

require('./bootstrap');
window.Vue = require('vue');
Vue.component('datatable-component', require('./components/DataTableComponent.vue').default);
const app = new Vue({
    el: '#app',
});

Step 7 : Create Blade File

All are set to go. Now we have to create blade file to show our component data. so create it like below

resources/views/layouts/app.blade.php

Next, go to resources/views/ and open welocome.blade.php. Then update the following line into your welcome.blade.php file as follow:

esources/views/welocome.blade.php

Now run npm run watch and visit the followig path to see laravel vue js datatable.

Recommended  : How to Create EventBus to Communicate Between Vue Components

Hope this laravel vue datatable example tutorial will help you.