DEV Community

loading...
Cover image for Vue3 Toast

Vue3 Toast

primetek profile image PrimeTek ・2 min read

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
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

Import

import Toast from 'primevue/toast';
Enter fullscreen mode Exit fullscreen mode

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});
    }
}
Enter fullscreen mode Exit fullscreen mode

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});
    }
})
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode
this.$toast.add({severity:'success', summary: 'Default Message'});
this.$toast.add({severity:'success', summary: 'Specific Message', group: 'mykey'});
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

pic
Editor guide