Toast

CToast is used to display messages in an overlay.

Toast Service

CToast component is controlled via the ToastService that needs to be installed as an application plugin.

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

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

Recommended location of a CToast is the main application template so that the component can be accessed in a shared manner.

<template>
  <CToast />
</template>

The useToast composable can be accessed anywhere within your application to interact with the component.

<script setup lang="ts">
import { useToast } from 'primevue/usetoast';

const toast = useToast();   // instance to create messages
</script>

Basic

A single message is represented by the Message interface that defines properties such as severity, summary and detail.

<template>
  <CToast />
  <CButton label="Show" @click="show()" />
</template>

<script setup lang="ts">
  import { useToast } from 'primevue/usetoast';

  const toast = useToast();

  const show = () => {
    toast.add({ 
      severity: 'info', 
      summary: 'Info', 
      detail: 'Message Content', 
      life: 3000 
    });
  };
</script>

Severity

The severity option specifies the type of the message.

<template>
    <CToast />
    <CButton severity="neutral" label="Success" @click="showSuccess" />
    <CButton severity="neutral" label="Info" @click="showInfo" />
    <CButton severity="neutral" label="Warn" @click="showWarn" />
    <CButton severity="neutral" label="Error" @click="showError" />
    <CButton severity="neutral" label="Secondary" @click="showSecondary" />
    <CButton severity="neutral" label="Contrast" @click="showContrast" />
</template>

<script setup lang="ts">
import { useToast } from "primevue/usetoast";

const toast = useToast();

const showSuccess = () => {
    toast.add({ 
      severity: 'success', 
      summary: 'Success Message', 
      detail: 'Message Content', 
      life: 3000 
    });
};

const showInfo = () => {
    toast.add({ 
      severity: 'info', 
      summary: 'Info Message', 
      detail: 'Message Content', 
      life: 3000 
    });
};

const showWarn = () => {
    toast.add({ 
      severity: 'warn', 
      summary: 'Warn Message', 
      detail: 'Message Content', 
      life: 3000 
    });
};

const showError = () => {
    toast.add({ 
      severity: 'error', 
      summary: 'Error Message', 
      detail: 'Message Content', 
      life: 3000 
    });
};

const showSecondary = () => {
    toast.add({ 
      severity: 'secondary', 
      summary: 'Secondary Message', 
      detail: 'Message Content', 
      life: 3000 
    });
};

const showContrast = () => {
    toast.add({ 
      severity: 'contrast', 
      summary: 'Contrast Message', 
      detail: 'Message Content', 
      life: 3000 
    });
};
</script>

Position

A message can be targeted to a certain Toast component by matching the group keys whereas location is customized with the position.

<template>
    <CToast position="top-left" group="tl" />
    <CToast position="bottom-left" group="bl" />
    <CToast position="bottom-right" group="br" />
    
    <CButton label="Top Left" @click="showTopLeft" />
    <CButton label="Bottom Left" @click="showBottomLeft" />
    <CButton label="Bottom Right" @click="showBottomRight" />
</template>

<script setup lang="ts">
import { useToast } from 'primevue/usetoast';

const toast = useToast();

const showTopLeft = () => {
    toast.add({ 
      severity: 'info', 
      summary: 'Info Message', 
      detail: 'Message Content', 
      group: 'tl', 
      life: 3000 
    });
};

const showBottomLeft = () => {
    toast.add({ 
      severity: 'warn', 
      summary: 'Warn Message', 
      detail: 'Message Content', 
      group: 'bl', 
      life: 3000 
    });
};

const showBottomRight = () => {
  toast.add({ 
    severity: 'success', 
    summary: 'Success Message', 
    detail: 'Message Content', 
    group: 'br', 
    life: 3000 
  });
};
</script>

Multiple

Multiple messages are displayed by passing an array to the show method.

<template>
    <CToast />
    <CButton label="Multiple" @click="showMultiple()" />
</template>

<script setup lang="ts">
import { useToast } from 'primevue/usetoast';

const toast = useToast();

const showMultiple = () => {
    toast.add({ severity: 'success', summary: 'Success', detail: 'Message Content', life: 3000 });
    toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3500 });
    toast.add({ severity: 'warn', summary: 'Warn', detail: 'Message Content', life: 4000 });
    toast.add({ severity: 'error', summary: 'Error', detail: 'Message Content', life: 4500 });
};
</script>

Sticky

A message disappears after the number of milliseconds defined in the life option. Omit the life option to make the message sticky.

<template>
    <CToast />
    <CButton @click="showSticky" label="Sticky" />
    <CButton severity="neutral" label="Clear" @click="clear()" />
</template>

<script setup lang="ts">
import { useToast } from 'primevue/usetoast';

const toast = useToast();

const showSticky = () => {
    toast.add({ severity: 'info', summary: 'Sticky Message', detail: 'Message Content'});
}

const clear = () => {
    toast.removeAllGroups();
}
</script>