Getting Started

16 Mar 202312 minutes to read

This section explains how to create a simple predefined dialogs and how to configure the predefined dialogs.

Prerequisites

System requirements for Syncfusion Vue UI components

Dependencies

The list of dependencies required to use the predefined dialogs in your application is given below:

|-- @syncfusion/ej2-vue-popups
    |-- @syncfusion/ej2-vue-base
    |-- @syncfusion/ej2-vue-buttons
    |-- @syncfusion/ej2-popups
        |-- @syncfusion/ej2-base
        |-- @syncfusion/ej2-buttons

Get Started with Vue CLI

You can use Vue CLI to setup your vue applications.
To install Vue CLI use the following command.

npm install -g @vue/cli

Start a new project using below Vue CLI command.

vue init webpack-simple quickstart

cd quickstart
npm install

Adding Syncfusion packages

All the available Essential JS 2 packages are published in npmjs.com registry. You can choose the component that you want to install. For this application, we are going to use predefined dialogs.

To install predefined dialogs, use the following command

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

Registering Vue Component

Using Vue.use()

Refer the code snippet given below.

import { DialogUtility } from '@syncfusion/ej2-vue-popups';
Vue.use(DialogUtility);

By Registering Component Plugin in Vue, all child directives are also globally registered.

Creating Vue sample

Add the following code to the App.vue file in src directory.

<template>
  <div>
    <div class="predefinedDialogs">
      <ejs-button id="alertDlgBtn" v-on:click.native="alertBtnClick" cssClass="e-danger">Alert</ejs-button>
      <span id="statusText"></span>
    </div>
  </div>
</template>

<style>
    @import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
#statusText {
  font-size: 16px;
  margin-top: 20px;
}
.predefinedDialogs {
  height: 100%;
  min-height: 350px;
}
</style>

<script>
import Vue from "vue";
import { DialogUtility } from "@syncfusion/ej2-vue-popups";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
Vue.use(ButtonPlugin);
Vue.use(DialogUtility);
export default {
  data: function () {
    return {};
  },
  methods: {
    alertBtnClick: function () {
      document.getElementById("statusText").style.display = "none";
      DialogUtility.alert({
        title: "Low battery",
        content: "10% of battery remaining",
      });
    },
  },
}
</script>

Adding CSS reference

Add Predefined Dialogs’s styles as given below in <style> section of the App.vue file.

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

The Custom Resource Generator (CRG) is an online web tool, which can be used to generate the custom script and styles for a set of specific components.
This web tool is useful to combine the required component scripts and styles in a single file.

Show alert dialog

An alert dialog box used to display an errors, warnings, and information alerts that needs user awareness. This can be achieved by using the DialogUtility.alert method. The alert dialog is displayed along with the OK button. When user clicks on OK button, alert dialog will get closed.

In the below code example, alert dialog displayed on button click action.

Now run the npm run dev command in the console, it will build your application and open in the browser.

app.vue

<template>
  <div class="predefinedDialogs">
    <ejs-button id="alertDlgBtn" v-on:click.native="alertBtnClick" cssClass="e-danger">Alert</ejs-button>
    <span id="statusText"></span>
  </div>
</template>

<style>
    @import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
#statusText {
  font-size: 16px;
  margin-top: 20px;
}
.predefinedDialogs {
  height: 100%;
  min-height: 350px;
}
</style>

<script>
import Vue from "vue";
import { DialogUtility } from "@syncfusion/ej2-vue-popups";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
Vue.use(ButtonPlugin);
Vue.use(DialogUtility);
let dialogObj = undefined;
export default {
  data: function () {
    return {};
  },
  methods: {
    alertBtnClick: function () {
      document.getElementById("statusText").style.display = "none";
      dialogObj = DialogUtility.alert({
        title: "Low battery",
        content: "10% of battery remaining",
        okButton: { click: this.alertOkAction },
        position: { X: "center", Y: "center" },
      });
    },
    alertOkAction: function () {
      dialogObj.hide();
      document.getElementById("statusText").innerHTML =
        "The user closed the Alert dialog.";
      document.getElementById("statusText").style.display = "block";
    },
  },
}
</script>

Show confirm dialog

A confirm dialog box used to displays a specified message along with the OK and Cancel buttons. This can be achieved by using the DialogUtility.confirm method. It is used to get approval from the user, and it appears before any critical action. After get approval from the user the dialog will disappear automatically.

In the below code example, the confirm dialog displayed on OK and Cancel button click action.

app.vue

<template>
  <div class="predefinedDialogs">
    <ejs-button id="confirmDlgBtn"  v-on:click.native="confirmBtnClick" cssClass = "e-success">Confirm</ejs-button>
    <span id="statusText"></span>
  </div>
</template>

<style>
    @import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
#statusText {
  font-size: 16px;
  margin-top: 20px;
}
.predefinedDialogs {
  height: 100%;
  min-height: 350px;
}
</style>

<script>
import Vue from "vue";
import { DialogUtility } from "@syncfusion/ej2-vue-popups";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
Vue.use(ButtonPlugin);
Vue.use(DialogUtility);
let dialogObj = undefined;
export default {
  data: function () {
    return {};
  },
  methods: {
    confirmBtnClick: function () {
        document.getElementById("statusText").style.display="none";
        dialogObj = DialogUtility.confirm({
            title: " Delete multiple items",
            content: "Are you sure you want to permanently delete these items?",
            okButton: { click:this.confirmOkAction},
            cancelButton: { click:this.confirmCancelAction},
        });
      },
      confirmOkAction:function () {
          dialogObj.hide();
          document.getElementById("statusText").innerHTML="The user confirmed the dialog box";
          document.getElementById("statusText").style.display="block";
      },
      confirmCancelAction:function(){
          dialogObj.hide();
          document.getElementById("statusText").innerHTML="The user canceled the dialog box.";
          document.getElementById("statusText").style.display="block";
      }
  },
}
</script>

Show Prompt dialog

A prompt dialog is used to get the input from the user. When the user clicks the OK button the input value from the dialog is returned. If the user clicks the Cancel button the null value is returned. After getting the input from the user the dialog will disappear automatically.

In the below code example, the confirm dialog displayed on OK and Cancel button click action.

app.vue

<template>
  <div class="predefinedDialogs">
    <ejs-button id="promptDlgBtn"  v-on:click.native="promptBtnClick" :isPrimary="true">Prompt</ejs-button>
    <span id="statusText"></span>
  </div>
</template>

<style>
    @import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
#statusText {
  font-size: 16px;
  margin-top: 20px;
}
.predefinedDialogs {
  height: 100%;
  min-height: 350px;
}
</style>

<script>
import Vue from "vue";
import { DialogUtility } from "@syncfusion/ej2-vue-popups";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
Vue.use(ButtonPlugin);
Vue.use(DialogUtility);
let dialogObj = undefined;
let value ;
export default {
  data: function () {
    return {};
  },
  methods: {
     promptBtnClick: function () {
            document.getElementById("statusText").style.display="none";
            dialogObj = DialogUtility.confirm({
                title: "Join chat group",
                content:'<P>Enter your name:</p><input id= "inputEle" type="text" name="Required" class="e-input" placeholder="Type here.." />',
                okButton: { click:this.promptOkAction },
                cancelButton: { click:this.promptCancelAction},
                position: { X: 'center', Y: 'center' }
            });
        },
    promptOkAction:function () {
        value = document.getElementById("inputEle").value;
        if(value ==""){
            dialogObj.hide();
            document.getElementById("statusText").innerHTML="The user's input is returned as\" \"";
            document.getElementById("statusText").style.display="block";
        }
        else{
            dialogObj.hide();
            document.getElementById("statusText").innerHTML="The user's input is returned as" +" "+ value;
            document.getElementById("statusText").style.display="block";
        }
        },
        promptCancelAction:function () {
            dialogObj.hide ();
            document.getElementById("statusText").innerHTML ="The user canceled the prompt dialog";
            document.getElementById("statusText").style.display="block";
        }
  },
}
</script>