Toast services in Vue Toast component

11 Jun 202412 minutes to read

The Vue Toast component provides a built-in utility function to render the toast with minimal code. The utility function will render the toast without the need of rendering the container element in the DOM where the toast is appended. So that, the toast can now be rendered on the go. The following are the option to render the toast using the utility function.

Show Toast with predefined types

The Toast component support 4 types of predefined toast with essential colors for various situations which can be shown using the ToastUtility.show by just defining the type of the toast without defining any class names. The following options are used as an argument on calling the utility function for predefined types:

Options	Description
content	Specifies the content that can be displayed on the Toast.
type	Specifies the type of the predefined Toasts. The 4 types of predefined toasts are `Information`, `Success`, `Error`, `Warning`
timeOut	Specifies the Toast display time duration on the page in milliseconds. Once the time expires, Toast message will be removed. Setting 0 as a time out value displays the Toast on the page until the user closes it manually.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
   <div id='app'>
        <div>
            <ejs-button ref='infoButtonRef' class="e-btn e-control e-info" id="info_toast" v-on:click="infoToast">Info Message</ejs-button>
            <ejs-button ref='successButtonRef' class="e-btn e-control e-success" id="success_toast" v-on:click="successToast">Success Message</ejs-button>
            <ejs-button ref='warningButtonRef' class="e-btn e-control e-warning" id="warning_toast" v-on:click="warningToast">Warning Message</ejs-button>
            <ejs-button ref='dangerButtonRef' class="e-btn e-control e-danger" id="danger_toast" v-on:click="dangerToast">Danger Message</ejs-button>
        </div>
        <br/>
        <div>
            <center><ejs-button ref='hideButtonRef' class="e-btn" id="hide_toast" v-on:click="hideToast">Hide All</ejs-button></center>
        </div>
   </div>
</template>

<script setup>

import { ToastUtility } from "@syncfusion/ej2-vue-notifications";
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';

let ToastObj = undefined;

const infoToast = function(){
    ToastObj = ToastUtility.show('Please read the comments carefully', 'Information', 20000);
};

const successToast = function(){
    ToastObj = ToastUtility.show('Your message has been sent successfully', 'Success', 20000);
};

const warningToast = function(){
    ToastObj = ToastUtility.show('There was a problem with your network connection', 'Warning', 20000);
};

const dangerToast = function(){
    ToastObj = ToastUtility.show('A problem has been occurred while submitting the data', 'Error', 20000);
};

const hideToast = function(){
    ToastObj.hide('All');
};

</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-notifications/styles/material.css";
</style>

<style lang="scss">
#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}
</style>
<template>
   <div id='app'>
        <div>
            <ejs-button ref='infoButtonRef' class="e-btn e-control e-info" id="info_toast" v-on:click="infoToast">Info Message</ejs-button>
            <ejs-button ref='successButtonRef' class="e-btn e-control e-success" id="success_toast" v-on:click="successToast">Success Message</ejs-button>
            <ejs-button ref='warningButtonRef' class="e-btn e-control e-warning" id="warning_toast" v-on:click="warningToast">Warning Message</ejs-button>
            <ejs-button ref='dangerButtonRef' class="e-btn e-control e-danger" id="danger_toast" v-on:click="dangerToast">Danger Message</ejs-button>
        </div>
        <br/>
        <div>
            <center><ejs-button ref='hideButtonRef' class="e-btn" id="hide_toast" v-on:click="hideToast">Hide All</ejs-button></center>
        </div>
   </div>
</template>

<script>

import { ToastUtility } from "@syncfusion/ej2-vue-notifications";
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';

let ToastObj = undefined;

export default {
name: "App",
components: {
"ejs-button":ButtonComponent
},
  data: function(){
    return { }
  },
  methods: {
        infoToast: function(){
            ToastObj = ToastUtility.show('Please read the comments carefully', 'Information', 20000);
        },
        successToast: function(){
            ToastObj = ToastUtility.show('Your message has been sent successfully', 'Success', 20000);
        },
        warningToast: function(){
            ToastObj = ToastUtility.show('There was a problem with your network connection', 'Warning', 20000);
        },
        dangerToast: function(){
            ToastObj = ToastUtility.show('A problem has been occurred while submitting the data', 'Error', 20000);
        },
        hideToast: function(){
            ToastObj.hide('All');
        }
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-notifications/styles/material.css";
</style>

<style lang="scss">
#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}
</style>

Show Toast with ToastModel

The utility function can be called using the ToastModel as argument to show the toast where all the properties in the ToastModel like any events, position, close icon, action buttons, etc. can be used in the ToastUtility.show.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
   <div id='app'>
       <center><ejs-button ref='showButtonRef' class="e-btn" id="show_toast" v-on:click="showToast">Show Toast</ejs-button></center>
   </div>
</template>

<script setup>

import { ToastUtility } from "@syncfusion/ej2-vue-notifications";
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';

let ToastObj = undefined;

const showToast = function(){
    ToastObj = ToastUtility.show({
      title: 'Toast Title',
      content: 'Toast shown using utility function with ToastModel',
      timeOut: 20000,
      position: { X: 'Right', Y: 'Bottom' },
      showCloseButton: true,
      click: toastClick,
      buttons:  [{
          model: { content: 'Close' }, click: toastClose
      }]
  });
};

const toastClose = function(){
  ToastObj.hide();
};

const toastClick = function(){
  console.log('Toast click event triggered');
};

</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-notifications/styles/material.css";
</style>

<style lang="scss">
#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}
</style>
<template>
   <div id='app'>
       <center><ejs-button ref='showButtonRef' class="e-btn" id="show_toast" v-on:click="showToast">Show Toast</ejs-button></center>
   </div>
</template>

<script>

import { ToastUtility } from "@syncfusion/ej2-vue-notifications";
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';

let ToastObj = undefined;

export default {
name: "App",
components: {
"ejs-button":ButtonComponent
},

  data: function(){
    return { }
  },
  methods: {
      showToast: function(){
          ToastObj = ToastUtility.show({
            title: 'Toast Title',
            content: 'Toast shown using utility function with ToastModel',
            timeOut: 20000,
            position: { X: 'Right', Y: 'Bottom' },
            showCloseButton: true,
            click: this.toastClick,
            buttons:  [{
                model: { content: 'Close' }, click: this.toastClose
            }]
        });
      },
      toastClose: function(){
        ToastObj.hide();
      },
      toastClick: function(){
        console.log('Toast click event triggered');
      }
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-notifications/styles/material.css";
</style>

<style lang="scss">
#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}
</style>