Wednesday, July 24, 2024
LaravelLaravl 5.7VueJs

Vue Laravel Tutorial Part 7 – Datatables

Vue Laravel Tutorial Part 7 – Datatables - The Rich Post

Hello to all, welcome to  In this post, I will continue with Vue laravel Tutorial Part 7 – Vue Laravel Tutorial Part 7 – Datatables.

Datatables make records or data look good and easy to understandable. Here is the working picture:

Vue Laravel Tutorial Part 7 – Datatables


I have used ‘VueGoodTable’ package in my Vue Laravel application and it is very easy to use.

I am very happy to share this post. 

Here is the working and tested code for Vue Laravel Datatables:

First before start this tutorial, you need to check old Vue laravel Tutorial Series must.

One thing must say, 

To understand this post, you need to see past Vue Laravel

Tutorials Posts and here are the links:



1. Very first, for datatables, we need to run below command into our terminal:

with this command, datatable package will install into our application.

npm install --save vue-good-table

After it, run php artisan serve command.


2. After it, we need to update our resources\js \app.js file with below code:

you need to update your app.js to import datatables package.


 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.

import BootstrapVue from 'bootstrap-vue'

import Vue from 'vue';
import VueRouter from 'vue-router';

import VueGoodTable from 'vue-good-table';
import 'vue-good-table/dist/vue-good-table.css';

import examplecomponent from './components/ExampleComponent.vue';
import adduser from './components/adduser.vue';
import users from './components/users.vue';

// Route
const routes = [
  { name: 'adduser', path: '/AddUser', component: adduser },
  { name: 'examplecomponent', path: '/', component: examplecomponent },
  { name: 'users', path: '/users', component: users }

// Setup Vue Router
const router = new VueRouter({ 
  mode: 'history', 
  routes: routes,
  linkActiveClass: "", // active class for non-exact links.
  linkExactActiveClass: "active" // active class for *exact* links.
new Vue(Vue.util.extend({ router }, examplecomponent)).$mount('#app');


3. After it, we need to make new vue filename users.vue in resources\js\component folder:

In this file, we will add datatables code with dummy content.

      title="Demo Table"

export default {
  name: 'test',
    return {
      columns: [
          label: 'Name',
          field: 'name',
          filterable: true,
          label: 'Age',
          field: 'age',
          type: 'number',
          html: false,
          filterable: true,
          label: 'Created On',
          field: 'createdAt',
          label: 'Percent',
          field: 'score',
          type: 'percentage',
          html: false,
      rows: [
        {id:1, name:"Vue",age:20,createdAt: '2011-10-31',score: 0.03343},
        {id:2, name:"Laravel",age:24,createdAt: '2011-10-31',score: 0.03343},


4. After, it we need to update resources\js\components\ExampleComponent.vue:

in this file, we will add users page link in menu bar, just need to update only below code.

<nav class="navbar navbar-expand-sm bg-light">
         <!-- Links -->
         <ul class="navbar-nav">
        <li class="nav-item">
               <router-link tag="li" class="nav-item" to="/laraveVue">
                  <a class="nav-link">Home</a>
            <li class="nav-item">
               <router-link tag="li" class="nav-item" to="/AddUser">
                  <a class="nav-link">Add user</a>
      <li class="nav-item">
               <router-link tag="li" class="nav-item" to="/users">
                  <a class="nav-link">Users</a>

 Now, you are done with datatables and you just need run again php artisan serve command and other terminal,  you need to run npm run watch command(Two terminals for same application).

If you have any query related to this post, then please do comment or you can ask question.

the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.