Progress Bar

Add a progress indicator so users can see how long a toast has left before it dismisses.

Enable progress on a toast

Example.vue

<script setup lang="ts">
const toast = useToast();

const show = () => {
  toast.add({
    type: "info",
    title: "Processing",
    description: "Your request is being processed",
    showProgress: true,
    duration: 5000,
  });
};
</script>

<template>
  <button class="btn" @click="show">Show toast</button>
</template>

Enable progress globally

Turn it on for all toasts in nuxt.config.ts (you can still override per-toast).

nuxt.config.ts

export default defineNuxtConfig({
  notify: {
    showProgress: true,
  },
});

Pause on hover

Progress pauses automatically when users hover over the toast (so they can read or click actions).

Example.vue

<script setup lang="ts">
const toast = useToast();

const show = () => {
  toast.add({
    type: "success",
    title: "Hover to pause",
    description: "The progress bar pauses when you hover",
    showProgress: true,
    duration: 8000,
  });
};
</script>

<template>
  <button class="btn" @click="show">Try hover</button>
</template>

Common use cases

Upload progress

Example.vue

<script setup lang="ts">
const toast = useToast();

const show = () => {
  toast.add({
    type: "info",
    title: "Uploading file",
    description: "document.pdf",
    showProgress: true,
    duration: 10000,
  });
};
</script>

<template>
  <button class="btn" @click="show">Upload example</button>
</template>

Auto-save indicator

Example.vue

<script setup lang="ts">
const toast = useToast();

const show = () => {
  toast.add({
    type: "success",
    title: "Draft saved",
    description: "Your changes are saved automatically",
    showProgress: true,
    duration: 3000,
  });
};
</script>

<template>
  <button class="btn" @click="show">Auto-save example</button>
</template>

Timed warning with action

Example.vue

<script setup lang="ts">
const toast = useToast();

const show = () => {
  toast.add({
    type: "warning",
    title: "Session expiring",
    description: "Your session will expire soon",
    showProgress: true,
    duration: 15000,
    actions: [
      {
        label: "Extend Session",
        onClick: () => {
          // Your extend logic here
          console.log("Extend session");
        },
      },
    ],
  });
};
</script>

<template>
  <button class="btn" @click="show">Timed warning</button>
</template>