Vue Common - Utils - ui

An object that serves as a namespace for DevExtreme UI components as well as for methods implementing UI logic in DevExtreme sites/applications.

dialog

An object that serves as a namespace for methods displaying a message in an application/site.

dxOverlay

An object that serves as a namespace for static methods that affect overlay UI components.

notify(message, type, displayTime)

Creates a toast message.

import notify from "devextreme-vue/notify"
Parameters:
message:

String

The message's text.

type:

String

| undefined

The message's type: "info", "warning", "error" or "success".

displayTime:

Number

| undefined

The time interval in milliseconds for which the message is displayed.

App.vue
  • <template>
  • </template>
  • <script>
  • import notify from 'devextreme/ui/notify';
  •  
  • export default {
  • mounted: function() {
  • this.$nextTick(() => {
  • notify("Warning message", "warning", 500);
  • })
  • }
  • }
  • </script>

View Demo

notify(options, type, displayTime)

Creates a toast message.

import notify from "devextreme-vue/notify"
Parameters:
options:

Object

The Toast configuration.

type:

String

| undefined

The message's type: "info", "warning", "error" or "success".

displayTime:

Number

| undefined

The time interval in milliseconds for which the message is displayed.

App.vue
  • <template>
  • </template>
  • <script>
  • import notify from 'devextreme/ui/notify';
  •  
  • export default {
  • mounted: function() {
  • this.$nextTick(() => {
  • notify({ message: "Error message", width: 300, shading: true }, "error", 500);
  • })
  • }
  • }
  • </script>
See Also

repaintFloatingActionButton()

Repaints the Floating Action Button.

import speedDialAction from "devextreme-vue/repaint-floating-action-button"

Call this method to repaint the Floating Action Button after you change the globalConfig.floatingActionButtonConfig at runtime:

App.vue
  • <template>
  • <!-- ... -->
  • </template>
  • <script>
  • import config from 'devextreme/core/config';
  • import repaintFloatingActionButton from 'devextreme/ui/speed_dial_action/repaint_floating_action_button';
  •  
  • export default {
  • methods: {
  • changeFabConfig() {
  • config({
  • floatingActionButtonConfig: {
  • // ...
  • }
  • });
  • repaintFloatingActionButton();
  • }
  • }
  • }
  • </script>
See Also

themes

An object that serves as a namespace for the methods that work with DevExtreme CSS Themes.

import ui.themes from "devextreme-vue/themes"