Vue3 Message

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';

Getting Started

Message component requires a content to display.

<Message>Welcome to PrimeVue</Message>

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>

data() {
    return {
        messages: [
            {severity: 'info', content: 'Dynamic Info Message'},
            {severity: 'success', content: 'Dynamic Success Message'},
            {severity: 'warn', content: 'Dynamic Warning Message'}
        ]
    }
}

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>

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>

Inline Message Component

import InlineMessage from 'primevue/inlinemessage';

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>

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.