DEV Community

loading...
Cover image for Vue3 Message

Vue3 Message

primetek profile image PrimeTek ・2 min read

Vue3 Message is used to display inline messages with various severities.
It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.

Setup

Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.

Import

import Message from 'primevue/message';
Enter fullscreen mode Exit fullscreen mode

Getting Started

Message component requires a content to display.

<Message>Welcome to PrimeVue</Message>
Enter fullscreen mode Exit fullscreen mode

Multiple messages can be displayed using the standard v-for directive.

<Message v-for="msg of messages" :severity="msg.severity" :key="msg.content">{{msg.content}}</Message>
Enter fullscreen mode Exit fullscreen mode
data() {
    return {
        messages: [
            {severity: 'info', content: 'Dynamic Info Message'},
            {severity: 'success', content: 'Dynamic Success Message'},
            {severity: 'warn', content: 'Dynamic Warning Message'}
        ]
    }
}
Enter fullscreen mode Exit fullscreen mode

Severities

There are four possible values for the severity of a message. Default one is "info".

  • success
  • info
  • warn
  • error

Closable

Messages are closable by default resulting in a close icon being displayed on top right corner. In order to disable closable messages, set closable to false.

<Message severity="success" :closable="false">Order Submitted</Message>
Enter fullscreen mode Exit fullscreen mode

Sticky

Messages are sticky by default, if you require them to be cleared automatically, disable sticky property and optionally configure the life property to specify how long the message should be displayed which is 3000 ms by default.

<Message severity="warn" :life="5000" :sticky="false">This message will hide in 5 seconds.</Message>
Enter fullscreen mode Exit fullscreen mode

Inline Message Component

import InlineMessage from 'primevue/inlinemessage';
Enter fullscreen mode Exit fullscreen mode

InlineMessage component is useful in cases where a single message needs to be displayed related to an element such as forms. It has one property, severity of the message.

<InputText placeholder="Username" class="p-invalid" />
<InlineMessage>Field is required</InlineMessage>
Enter fullscreen mode Exit fullscreen mode

Theming

Message supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeVue Message showcase for demos and documentation.

Discussion (0)

pic
Editor guide