Switching Components

1. Use a custom prop to differentiate the notification

function pushPostCreate() {
  push.success({
    message: 'Your post has been successfully created'
    props: {
      isPostCreate: true
    }
  })
}

function pushPostDeletion() {
  push.success({
    message: 'Your post has been successfully deleted'
    props: {
      isPostDelete: true
    }
  })
}

2. Conditionally swich components

<script setup>
import GlobalNotification from './GlobalNotification.vue'
import PostCreateNotification from './PostCreateNotification.vue'
import PostDeleteNotification from './PostDeleteNotification.vue'
</script>

<template>
  <Notivue v-slot="item">
    <PostCreateNotification v-if="item.props.isPostCreate" :item="item" />
    <PostDeleteNotification v-else-if="item.props.isPostDelete" :item="item" />
    <GlobalNotification v-else :item="item" />
  </Notivue>

  <!-- RouterView, etc. -->
</template>