Basic Usage

Learn how to create and customize toast notifications using Nuxt Notify.

Using the `useToast()` Composable

The useToast() composable is your main interface for creating toasts:

useToast

<script setup>
const toast = useToast();
</script>

Toast Type Methods

Nuxt Notify provides convenient shorthand methods for common toast types.

Success Toast

success

<script setup>
const toast = useToast();

toast.success("Success!", "Operation completed successfully");
</script>

Error Toast

error

<script setup>
const toast = useToast();

toast.error("Error", "Failed to save changes");
</script>

Info Toast

info

<script setup>
const toast = useToast();

toast.info("New Update", "Version 2.0 is now available");
</script>

Warning Toast

warning

<script setup>
const toast = useToast();

toast.warning("Warning", "Your session will expire soon");
</script>

Title Only

You can show toasts with just a title (no description):

title-only

<script setup>
const toast = useToast();

toast.success("Saved!");
toast.error("Failed");
toast.info("Loading...");
toast.warning("Warning");
</script>

Using the `add()` Method

For more control, use the add() method with a full options object:

add

<script setup>
const toast = useToast();

toast.add({
  type: "success",
  title: "Custom Toast",
  description: "This toast has custom options",
  duration: 7000,
});
</script>

Remove All Toasts

Clear all visible toasts programmatically:

clear

<script setup>
const toast = useToast();

function clearAll() {
  toast.clear();
}
</script>

The clear() method is useful for cleaning up toasts when navigating between pages or during logout.

Multiple Toasts

Show multiple toasts in sequence:

multiple

<script setup>
const toast = useToast();

function showMultiple() {
  toast.info("Step 1", "Processing your request...");

  setTimeout(() => {
    toast.success("Step 2", "Data retrieved successfully");
  }, 1000);

  setTimeout(() => {
    toast.success("Complete!", "All steps finished");
  }, 2000);
}
</script>

Custom Duration

Control how long each toast stays visible:

duration

<script setup>
const toast = useToast();

// Short duration (2 seconds)
toast.success("Quick message", "This will disappear quickly", {
  duration: 2000,
});

// Long duration (10 seconds)
toast.info("Important", "Read this carefully", { duration: 10000 });

// Persistent (won't auto-dismiss)
toast.warning("Critical", "Requires your attention", { duration: Infinity });
</script>