Vue Toast not showing?-CodePudding

I am trying to add a toast to my code as per below, however no toast message appears and I dont get any errors in the console. The code works however and the invite gets sent. I have used it like this in other files and the toast message appears so im uncertain as to why it wouldn't appear now.

Main.js file where I am importing toast and toast service:

import Toast from 'primevue/toast';
import ToastService from 'primevue/toastservice';

const app = createApp(App);

app.component('Toast', Toast);
app.use(ToastService);

In my file using the toast once an invite is sent if successful I want to display the success message:

<template>
    <div >
        <Button @click="sendInvites"/>
      </div>
    </div>
</template>

<script> 
  export default {
    data() {
      return {
      };
    },
    methods: {
      createToast() {
        get('CreateInvites', { invites: this.invites.filter((invite) => invite.email.length > 0) }).then((data) => {
          if (data.length > 0) {
            this.$toast.add({
              severity: 'error',
              summary: 'Unable to send some invites',
              detail: data
                })
                .join('\n'),
              life: 9000,
            });
          }
          else {
             this.$toast.add({
              severity: 'success',
              summary: 'Success!',
              life: 3000,
            });
          }
        });
      },
    },

CodePudding user response：

The ideal location of a Toast is the main application template so that it can be used by any component within the application.

So, you need to use the <Toast> component in your main file (App.vue) like this-

<template>
  <Toast />
<template>

It means the Toast component is mounted while App is loaded into the DOM and it is ready to be displayed upon any event's trigger like you did-

this.$toast.add({
      severity: 'error',
      summary: 'Unable to send some invites',
      detail: data
          .map((detail) => {
              return `${detail.email}: ${detail.error}`;
           })
           .join('\n'),
           life: 9000,
 });

For more information, read here- https://primefaces.org/primevue/toast