Vue3 Toast

Vue3 Toast is used to display messages in an overlay. 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.

Mitt EventBus

Toast requires Mitt, a tiny 200b EventBus implementation.

npm install mitt --save

ToastService

Toast messages are dynamically created using a ToastService that needs to be installed globally before the application instance is created.

import {createApp} from 'vue';
import ToastService from 'primevue/toastservice';

const app = createApp(App);
app.use(ToastService);

Import

import Toast from 'primevue/toast';

Getting Started

Ideal location of a Toast is the main application template so that it can be used by any component within the application. A single message is represented by the Message interface in PrimeVue that defines various properties such as severity, summary and detail.

Options API

$toast is available as a property in the application instance.

export default {
    mounted() {
        this.$toast.add({severity:'success', summary: 'Success Message', detail:'Order submitted', life: 3000});
    }
}

Composition API

The toast instance can be injected with the useToast function.

import { defineComponent } from "vue";
import { useToast } from "primevue/usetoast";

export default defineComponent({
    setup() {
        const toast = useToast();
        toast.add({severity:'info', summary: 'Info Message', detail:'Message Content', life: 3000});
    }
})

Severities

There are four possible values for the severity of a message. Info is the default.

• success
• info
• warn
• error

Position

There are four positions available for the toast container defined by the position property that defaults to "top-right". Other valid values are "top-left", "top-center", "bottom-left", "botton-center", "bottom-right" and "center".

<Toast />
<Toast position="top-left" />
<Toast position="top-center" />
<Toast position="top-right" />
<Toast position="center" />
<Toast position="bottom-left" />
<Toast position="bottom-center" />
<Toast position="bottom-right" />

Groups

A message can be targeted to a specific Toast component if their group properties match. Messages without a group are forwarded to the default Toast component that does not have a group defined.

<Toast />
<Toast position="mykey" />

this.$toast.add({severity:'success', summary: 'Default Message'});
this.$toast.add({severity:'success', summary: 'Specific Message', group: 'mykey'});

Clearing Messages

removeGroup(group) clears the messages for a specific Toast whereas removeAllGroups() method clears all messages.

Theming

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

Resources

Visit the PrimeVue Toast showcase for demos and documentation.