How to create a modal confirmation Dialog component in Vue framework?

1 min read

This article explains how to easily create a modal confirmation dialog sample in the Vue platform.

Setup Vue environment

You can use the Vue CLI to set up your Vue applications. To install the Vue CLI, use the following commands.

npm install -g @vue/cli

npm install -g @vue/cli-init

Creating a Vue application

Create a new Vue application using the following Vue CLI command.

vue init webpack-simple quickstart
cd quickstart
npm install

Adding Syncfusion Popups packages

All the available Essential JavaScript 2 packages are published in the npmjs.com public registry.

To install Dialog component packages, use the following command.

npm install @syncfusion/ej2-vue-popups --save

Registering Dialog component

You can register a Dialog Component in your application by using Vue.use().

Refer the following code example.

import Vue from “vue”;

import { DialogPlugin } from '@syncfusion/ej2-vue-popups';

Vue.use(DialogPlugin);

Adding CSS reference

Import the component CSS styles as shown below in the App.vue file. In the following example, we have used the material theme styles.

<style>
  @import '../node_modules/@syncfusion/ej2-base/styles/material.css';  
  @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-vue-popups/styles/material.css';
</style>

Adding Dialog component

Now, you can add the Modal Dialog component in the App.vue file. Check the following code blocks for reference.

<template>
  <div id="app">
    <!-- Render Button to open the Dialog -->
    <button id="modalBtn" v-on:click="btnClick">Open Dialog</button>
    <!-- Render Dialog -->
    <ejs-dialog  id="dialog"  ref="confirmDialog"  :header="header" :content="content"
      :width="400"  :showCloseIcon="true"  :isModal="true"  :buttons="confirmDlgButtons" >
   </ejs-dialog>
  </div>
</template>
 
<style>
  html, body {
    height: 100%;
  }
</style>
 
<script>
import Vue from "vue";
import { DialogPlugin } from '@syncfusion/ej2-vue-popups';
 
Vue.use(DialogPlugin);
export default {
  data: function () {
    return {
      header: "Delete Multiple Items",
      content: "Are you sure you want to delete these items?",
      confirmDlgButtons: [
        {
          click: this.confirmDlgBtnClick,
          buttonModel: { content: "Yes", isPrimary: true },
        },
        { click: this.confirmDlgBtnClick, buttonModel: { content: "No" } },
      ],
    };
  },
  methods: {
    btnClick: function () {
      this.$refs.confirmDialog.show();
    },
    confirmDlgBtnClick: function () {
      this.$refs.confirmDialog.hide();
    },
  },
};
</script>
 
<style>
  @import '../node_modules/@syncfusion/ej2-base/styles/material.css';  
  @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-vue-popups/styles/material.css';
</style>

Running the application

The Vue Dialog component is ready to compile. Now, you can run and launch the application in the browser by using the following command.

npm run dev

The output will be as follows:

Vue Confirmation Modal Dialog

Demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Vue_modal_dialog-1058280263

Did you find this information helpful?

Yes

Comments (0)