Skip to content

Progress Bar

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

Setup

ts
import 'notivue/notification.css'
import 'notivue/notification-progress.css'
ts
export default defineNuxtConfig({
  modules: ['notivue/nuxt'],
  css: [
    'notivue/notification.css',
    'notivue/notification-progress.css'
  ]
})
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>
vue
<template>
  <Notivue v-slot="item">
    <Notification :item="item">
      <NotificationProgress :item="item" />
    </Notification>
  </Notivue>

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