Vue Toast - Overview

The Toast is a UI component that displays pop-up notifications.

When you need to display a notification, call the notify(message, type, displayTime) method with values for the message, type, and displayTime properties passed as arguments.

DevExtreme Accessibility Compliance

DevExtreme component libraries meet a variety of WCAG and Section 508 compliance standards. To assess this demo’s accessibility level, click the Run AXE^® Validation button to launch the AXE^® web accessibility evaluation tool.

All trademarks or registered trademarks are property of their respective owners. AXE^® Terms of Use

The overall accessibility level of your application depends on the Toast features used.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

​x
 
<template>
  <div id="product-list">    <div class="header">Product List</div>​    <ul>      <ProductItem        v-for="product in products"        :key="product.ID"        :product="product"        @checked="checkAvailability"      />    </ul>​    <DxToast      v-model:visible="isVisible"      v-model:message="message"      v-model:type="type"    />  </div></template><script setup lang="ts">import { ref } from 'vue';import { DxToast } from 'devextreme-vue/toast';import { products } from './data.ts';import ProductItem from './ProductItem.vue';​const isVisible = ref(false);const message = ref('');const type = ref('info');​function checkAvailability(e, product) {  type.value = e.value ? 'success' : 'error';  message.value = product.Name + (e.value ? ' is available' : ' is not available');  isVisible.value = true;}</script><style>.header {  font-size: 34px;  text-align: center;}​#product-list {  padding: 10px;}​#product-list ul {  text-align: center;  list-style-type: none;  margin: 20px 0;}​#product-list ul li {  display: inline-block;  width: 160px;  margin: 10px;}​#product-list ul li img {  width: 100px;}​.dx-toast-content {  min-width: 300px;  max-width: 400px;}</style>​

xxxxxxxxxx
 
<template>
  <li>    <img      :alt="product.Name"      :src="product.ImageSrc"    >    <br>    <div>{{ product.Name }}</div>    <DxCheckBox      @value-changed="onValueChanged"      text="Available"    />  </li></template><script setup lang="ts">import { DxCheckBox } from 'devextreme-vue/check-box';import { products } from './data.ts';​type Product = typeof products[0];​const props = withDefaults(defineProps<{  product: Product,}>(), {  product: () => ({}),});​const emit = defineEmits(['checked']);​function onValueChanged(e) {  emit('checked', e, props.product);}</script>​

xxxxxxxxxx
 
window.exports = window.exports || {};
window.config = {  transpiler: 'plugin-babel',  meta: {    '*.vue': {      loader: 'vue-loader',    },    '*.ts': {      loader: 'demo-ts-loader',    },    '*.svg': {      loader: 'svg-loader',    },    'devextreme/time_zone_utils.js': {      'esModule': true,    },    'devextreme/localization.js': {      'esModule': true,    },    'devextreme/viz/palette.js': {      'esModule': true,    },    'openai': {      'esModule': true,    },  },  paths: {    'project:': '',    'npm:': 'https://unpkg.com/',    'bundles:': 'bundles/',    'externals:': 'bundles/externals/',  },  map: {    'vue': 'npm:vue@3.4.27/dist/vue.esm-browser.js',    '@vue/shared': 'npm:@vue/shared@3.4.27/dist/shared.cjs.prod.js',    'vue-loader': 'npm:dx-systemjs-vue-browser@1.1.1/index.js',    'demo-ts-loader': 'project:utils/demo-ts-loader.js',    'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',    'svg-loader': 'project:utils/svg-loader.js',    'mitt': 'npm:mitt/dist/mitt.umd.js',    'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',    'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',    'es6-object-assign': 'npm:es6-object-assign',    'devextreme': 'npm:devextreme@24.2.5/cjs',    'devextreme-vue': 'npm:devextreme-vue@24.2.5/cjs',    'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',    'devexpress-diagram': 'npm:devexpress-diagram@2.2.15/dist/dx-diagram.js',    'devexpress-gantt': 'npm:devexpress-gantt@4.1.59/dist/dx-gantt.js',    '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',    'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',    'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',    'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',    'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',    'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',    'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',    'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',    'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',    'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',    'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',    // Prettier    'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',    'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',  },  packages: {    'devextreme-vue': {      main: 'index.js',    },    'devextreme': {      defaultExtension: 'js',    },    'devextreme/events/utils': {      main: 'index',    },    'devextreme/events': {      main: 'index',    },    'es6-object-assign': {      main: './index.js',      defaultExtension: 'js',    },  },  packageConfigPaths: [    'npm:@devextreme/*/package.json',    'npm:@devextreme/runtime@3.0.12/inferno/package.json',  ],  babelOptions: {    sourceMaps: false,    stage0: true,  },};System.config(window.config);​

xxxxxxxxxx
 
export const products = [{
  ID: 4,  Name: 'SuperLED 50',  Price: 1600,  Current_Inventory: 77,  Backorder: 0,  Manufacturing: 55,  Category: 'Televisions',  ImageSrc: 'images/products/4.png',}, {  ID: 5,  Name: 'SuperLED 42',  Price: 1450,  Current_Inventory: 445,  Backorder: 0,  Manufacturing: 0,  Category: 'Televisions',  ImageSrc: 'images/products/5.png',}, {  ID: 6,  Name: 'SuperLCD 55',  Price: 1350,  Current_Inventory: 345,  Backorder: 0,  Manufacturing: 5,  Category: 'Televisions',  ImageSrc: 'images/products/6.png',}, {  ID: 7,  Name: 'SuperLCD 42',  Price: 1200,  Current_Inventory: 210,  Backorder: 0,  Manufacturing: 20,  Category: 'Televisions',  ImageSrc: 'images/products/7.png',}];​

xxxxxxxxxx
 
import { createApp } from 'vue';
import App from './App.vue';​createApp(App).mount('#app');​

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">  <head>↔</head>​  <body class="dx-viewport">    <div class="demo-container">      <div id="app"> </div>    </div>  </body></html>​

You can specify one of the four predefined types of notifications, depending on the mood of the message:

'info'
A blue toast with a message bubble icon.
'warning'
A yellow toast with an exclamation mark icon.
'error'
A red toast with an X icon.
'success'
A green toast with a check mark icon.

In this demo, toggle check boxes to see the 'success' and 'error' notification types.

You can also customize the Toast appearance. Set the type property to 'custom' and use a contentTemplate. Refer to the following topic for more information: Customize the Content.

If you need to specify other Toast properties in addition to type and displayTime, call the notify(options, type, displayTime) method and pass an object as the argument. In this object, you can set any Toast property, such as shading, position, width, height, and others.