Laravel and Vue.js: with Vue 3 and Inertia

Vue.js framework has become a go-to choice for many developers. Datatables are one of the most common components to have in your application. Let's quickly implement one using the package.

We have installed Laravel with the Laravel Breeze Vue starter-kit preset.

Datatables Vue Component Installation

Install library.

npm install

Install the library's CSS styles.

npm install

Install Vue.js component.

npm install


Add library styles to the app.css file.


@import '';
@tailwind base;
@tailwind components;
@tailwind utilities;

Add the library and the component in the app.js file.


import './bootstrap';
import '../css/app.css';
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
import DataTablesLib from '';
import DataTable from '';
const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({ el, App, props, plugin }) {
return createApp({ render: () => h(App, props) })
.use(ZiggyVue, Ziggy)
.component('DataTable', DataTable)
progress: {
color: '#4B5563',

The DataTable component doesn't have core included, so we need to tell it to use the DataTablesLib library:


We register components globally so we can use them anywhere on our application.

component('DataTable', DataTable)

We seeded more users for demo data and passed the $users collection to the Dashboard view.


use App\Models\User;
Route::get('/dashboard', function () {
return Inertia::render('Dashboard');
$users = User::all();
return Inertia::render('Dashboard', ['users' => $users]);
})->middleware(['auth', 'verified'])->name('dashboard');

Now let's display datatables on the Dashboard page.


<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import { Head } from '@inertiajs/vue3';
users: {
type: Array
const columns = [
{ data: 'id' },
{ data: 'name' },
{ data: 'email' }
<Head title="Dashboard" />
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">Dashboard</h2>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 text-gray-900">

First, we define the columns we want to display and pass them to the DataTable component.

const columns = [
{ data: 'id' },
{ data: 'name' },
{ data: 'email' }

The DataTable component has a single slot; there, we can define table headers with custom names.


Compile everything and visit the /dashboard URL to see the result.

npm run build


It supports pagination, column sorting, and filtering right out of the box. Try it out.

See the official documentation for further customization.


how to add edit and delete action button in the table


i used the following code but vue methd doesnot work { data: 'id', render: function (data) { return ' <button class="btn btn-success" @click="EditStudent('+ data +')">Edit'; } },

Like our articles?

Become a Premium Member for $129/year or $29/month
What else you will get:
  • 52 courses (943 lessons, total 46 h 42 min)
  • 75 long-form tutorials (one new every week)
  • access to project repositories
  • access to private Discord

Recent Premium Tutorials