How To Use PrimeVue Toast Notification In Vue JS

Hello Friends, In this article We will learn how to add the toast notification in a Vue application using PrimeVue.

–First of all, create a new Vue app. Now open your terminal and execute the following command on it to install the Vue app.

vue create toast

–Then install the following package in your app

npm install primevue@^3 --save
npm install primeicons --save

The CSS dependencies are as follows the structural CSS of components.

–Now we need to add the CSS files of primeVue into the application at the main.js file.

-We have to add the modules which we want to use in our application.

• Step-1

-Add the below code in main.js file.

import {createApp} from 'vue';
import App from './App.vue';
import PrimeVue from 'primevue/config';
import Toast from 'primevue/toast';
import Button from 'primevue/button';
import ToastService from 'primevue/toastservice';
import "primevue/resources/themes/saga-blue/theme.css";
import "primevue/resources/primevue.min.css";
import "primeicons/primeicons.css";

const app = createApp(App);
app.use(ToastService);
app.use(PrimeVue)
app.component('Toast', Toast);
app.component('Button', Button);

app.mount('#app')

• Step-2

– In App.vue file we have to put the code for the toast notification

<template>
  <div>
      <Toast />
      <Toast position="top-left" group="tl" />
      <Toast position="bottom-left" group="bl" />
      <Toast position="bottom-right" group="br" />
      <Toast position="bottom-center" group="bc">
          <template #message="slotProps">
              <div class="flex flex-column">
                  <div class="text-center">
                      <i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
                      <h4>{{slotProps.message.summary}}</h4>
                      <p>{{slotProps.message.detail}}</p>
                  </div>
                  <div class="grid p-fluid">
                      <div class="col-6">
                          <Button class="p-button-success" label="Yes" @click="onConfirm"></Button>
                      </div>
                      <div class="col-6">
                          <Button class="p-button-secondary" label="No" @click="onReject"></Button>
                      </div>
                  </div>
              </div>
          </template>
      </Toast>
      <div class="card">
          <Button label="Success" class="p-button-success" @click="showSuccess" />
          <Button label="Info" class="p-button-info" @click="showInfo" />
          <Button label="Warn" class="p-button-warning" @click="showWarn" />
          <Button label="Error" class="p-button-danger" @click="showError" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
      return {
          messages: [],
      }
  },
  methods: {
      showSuccess() {
          this.$toast.add({severity:'success', summary: 'Success Message', detail:'Message Content', life: 3000});
      },
      showInfo() {
          this.$toast.add({severity:'info', summary: 'Info Message', detail:'Message Content', life: 3000});
      },
      showWarn() {
          this.$toast.add({severity:'warn', summary: 'Warn Message', detail:'Message Content', life: 3000});
      },
      showError() {
          this.$toast.add({severity:'error', summary: 'Error Message', detail:'Message Content', life: 3000});
      },
  }
}
</script>
<style scoped>
button {
  min-width: 10rem;
  margin-right: .5rem;
}
</style>

Output:-