DevExtreme v26.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Vue Chat - Customization

Use the following properties to customize the DevExtreme Chat component:

Backend API
<template> <div class="chat-container"> <DxChat :height="710" v-model:items="messages" v-model:user="currentUser" v-model:disabled="isDisabled" v-model:showAvatar="showAvatar" v-model:showUserName="showUsername" v-model:showDayHeaders="showDayHeaders" v-model:showMessageTimestamp="showMessageTime" v-model:dayHeaderFormat="dayHeaderFormat" v-model:messageTimestampFormat="messageTimestampFormat" @message-entered="onMessageEntered($event)" /> </div> <div class="options"> <div class="caption">Options</div> <div class="option"> <DxCheckBox v-model:value="showAvatar" text="Avatar" /> </div> <div class="option"> <DxCheckBox v-model:value="showUsername" text="User Name" /> </div> <div class="option-separator"/> <div class="option"> <DxCheckBox v-model:value="showDayHeaders" :input-attr="dayHeaderLabel" text="Day Headers" /> </div> <div class="option"> <span>Day Header Format:</span> <DxSelectBox :items="headerFormats" :input-attr="dayHeaderLabel" v-model:value="dayHeaderFormat" /> </div> <div class="option-separator"/> <div class="option"> <DxCheckBox v-model:value="showMessageTime" text="Message Timestamp" /> </div> <div class="option"> <span>Message Timestamp Format:</span> <DxSelectBox :items="messageFormats" :input-attr="messageTimestampLabel" v-model:value="messageTimestampFormat" /> </div> <div class="option-separator"/> <div class="option"> <DxCheckBox v-model:value="isDisabled" text="Disable Chat" /> </div> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import DxChat, { type DxChatTypes } from 'devextreme-vue/chat'; import DxCheckBox from 'devextreme-vue/check-box'; import DxSelectBox from 'devextreme-vue/select-box'; import { messages as initialMessages, currentUser, dayHeaderFormats as headerFormats, messageTimestampFormats as messageFormats, messageTimestampLabel, dayHeaderLabel, } from './data.ts'; const messages = ref(initialMessages); const showAvatar = ref(true); const showUsername = ref(true); const showDayHeaders = ref(true); const showMessageTime = ref(true); const dayHeaderFormat = ref(headerFormats[0]); const messageTimestampFormat = ref(messageFormats[0]); const isDisabled = ref(false); function onMessageEntered(event: DxChatTypes.MessageEnteredEvent): void { messages.value = [...messages.value, event.message]; } </script> <style> #app { min-width: 720px; display: flex; gap: 20px; } .chat-container { display: flex; flex-grow: 1; align-items: center; justify-content: center; } .options { padding: 20px; display: flex; flex-direction: column; min-width: 280px; background-color: rgba(191, 191, 191, 0.15); gap: 16px; } .dx-chat { max-width: 480px; } .caption { font-size: var(--dx-font-size-sm); font-weight: 500; } .option-separator { border-bottom: 1px solid var(--dx-color-border); } .dx-avatar { border: 1px solid var(--dx-color-border); } </style>
import type { DxChatTypes } from "devextreme-vue/chat"; const date = new Date(); date.setHours(0, 0, 0, 0); function getTimestamp(date: Date, offsetMinutes: number = 0) { return date.getTime() + offsetMinutes * 60000; } export const currentUser = { id: 'c94c0e76-fb49-4b9b-8f07-9f93ed93b4f3', name: 'John Doe', }; export const supportAgent = { id: 'd16d1a4c-5c67-4e20-b7v0e-2991c22747c3', name: 'Support Agent', avatarUrl: '../../../../images/petersmith.png', }; export const messages: DxChatTypes.Message[] = [ { timestamp: getTimestamp(date, -9), author: supportAgent, text: 'Hello, John!\nHow can I assist you today?', }, { timestamp: getTimestamp(date, -7), author: currentUser, text: 'Hi, I\'m having trouble accessing my account.', }, { timestamp: getTimestamp(date, -7), author: currentUser, text: 'It says my password is incorrect.', }, { timestamp: getTimestamp(date, -7), author: supportAgent, text: 'I can help you with that. Can you please confirm your UserID for security purposes?', }, { timestamp: getTimestamp(date, 1), author: currentUser, text: 'john.doe1357', }, { timestamp: getTimestamp(date, 1), author: supportAgent, text: '✅ Instructions to restore access have been sent to the email address associated with your account.', }, ]; export const dayHeaderFormats = ['dd/MM/yyyy', 'dd.MM.yyyy', 'MMMM dd, yyyy', 'EEEE, MMMM dd']; export const messageTimestampFormats = ['hh:mm a', 'hh:mm:ss a', 'HH:mm', 'HH:mm:ss']; export const messageTimestampLabel = { 'aria-label': 'Message Timestamp Format' }; export const dayHeaderLabel = { 'aria-label': 'Day Header Format' };
import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');
<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> <script src="bundles/vendor/vue.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>