How to create a modal confirmation Dialog component in Vue framework?
This section 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 like 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:
Demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Vue_modal_dialog-1058280263
