Wednesday, July 24, 2024
LaravelLaravl 5.7VueJs

Vue Laravel Tutorial Part 8 – VueModal

Vue Laravel Tutorial Part 8 – VueModal - The Rich Post

Hello to all, welcome to therichpost. In this post Vue Laravel Tutorial Part 8 – Vue Laravel Tutorial Part 8 – VueModal.

I am very happy to share this post because this Vue Modal Tuts, I did very fastly.

Here is the working Image:

Vue laravel Tutorial Part 8 - VueModal



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:


I can say this tutorial is the second part of Vue Laravel  tutorial Part  Datatables. In this, I am opening Modal Popup when user click on Datatable row.

I have used vue-js-modal package in my Vue Laravel application. Vuejs Modal is very easy to implement and use.

 Here is the working and tested code, need to follow:


1. Very first, you need to run below command to add vuejs modal package into your Vue Laravel application:
npm install vue-js-modal --save


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

I will import vue-js-modal in app.js file:

 * 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 vmodal from 'vue-js-modal';

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 update users.vue in in resources\js\component folder:

I will add modal popup html and script in it and modal popup will open after click datatable row and to intigetate datatable, that I have told in my last post “vue laravel tutorial part 7”:

  <modal name="hello-world">
  <center><p>The Rich Post</p></center>
      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},
  methods: {
    onRowClick(params) {
    // params.row - row object 
    // params.pageIndex - index of this row on the current page.
    // params.selected - if selection is enabled this argument 
    // indicates selected or not
    // params.event - click event

That’s it. Please check Vue Laravel Tutorial Part 7.

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

In my  next post, I will tell, how to open vue js modal with dynamic content while click on datatable row.



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.