Progress Bar

Since v2.3.0 Notivue exports a new, drop-in component named NotificationProgress that can be plugged into the built-in Notifications component to display a progress bar at the bottom.

Setup

Vite - main.js/ts

import 'notivue/notification.css'
import 'notivue/notification-progress.css'

Nuxt - nuxt.config.ts

export default defineNuxtConfig({
  modules: ['notivue/nuxt'],
  css: [
    'notivue/notification.css',
    'notivue/notification-progress.css'
  ]
})

Vite - App.vue

<script setup>
import {
  Notivue,
  Notification,
  NotificationProgress
} from 'notivue'
</script>

<template>
  <Notivue v-slot="item">
    <Notification :item="item">
      <NotificationProgress :item="item" />
    </Notification>
  </Notivue>

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

Nuxt - app.vue

<template>
  <Notivue v-slot="item">
    <Notification :item="item">
      <NotificationProgress :item="item" />
    </Notification>
  </Notivue>

  <!-- NuxtLayout, NuxtPage, etc. -->
</template>