With Description

Enhance your toast notifications with detailed descriptions to provide more context to users.

Basic Description

Add a description as the second parameter:

Example

<script setup>
const toast = useToast();

toast.success(
  "Account Created",
  "Welcome! Your account has been successfully created."
);
</script>

When to Use Descriptions

Descriptions are perfect for:

Providing context: Explain what happened or why
Next steps: Tell users what to do next
Error details: Give specific information about errors
Success confirmations: Reassure users about completed actions

Description Examples by Type

Success with Details

Example

<script setup>
const toast = useToast();

toast.success(
  "File Uploaded",
  "document.pdf has been uploaded successfully. You can now share it with your team."
);
</script>

Error with Explanation

Example

<script setup>
const toast = useToast();

toast.error(
  "Login Failed",
  "Invalid email or password. Please check your credentials and try again."
);
</script>

Info with Instructions

Example

<script setup>
const toast = useToast();

toast.info(
  "New Feature Available",
  "We've added dark mode! Toggle it in Settings > Appearance."
);
</script>

Warning with Action Required

Example

<script setup>
const toast = useToast();

toast.warning(
  "Session Expiring",
  "Your session will expire in 5 minutes. Save your work to avoid losing changes."
);
</script>

Long Descriptions

Nuxt Notify handles longer descriptions gracefully:

Example

<script setup>
const toast = useToast();

toast.info(
  "Terms of Service Updated",
  "We have updated our Terms of Service to provide better clarity on data usage and privacy. Please review the changes at your earliest convenience. The new terms will take effect on January 1, 2025."
);
</script>

Using the add() Method

You can also pass descriptions using the add() method:

Example

<script setup>
const toast = useToast();

toast.add({
  type: "success",
  title: "Payment Successful",
  description:
    "Your payment of $49.99 has been processed. A receipt has been sent to your email.",
});
</script>

Title Only vs With Description

Compare the difference:

Example

<script setup>
const toast = useToast();

// Title only - quick and simple
toast.success("Saved!");

// With description - provides context
toast.success("Saved!", "Your changes have been saved to the cloud.");
</script>

Best Practice: Use title-only toasts for simple confirmations. Add descriptions when users need more information or context.

Formatting Tips

Keep It Concise

Aim for 1-2 short sentences
Get to the point quickly
Use clear, simple language

Be Specific

Bad vs Good

// ❌ Vague toast.error("Error", "Something went wrong"); 
// ✅ Specific toast.error("Upload Failed", "File size exceeds 10MB limit");

Action-Oriented

Bad vs Good

// ❌ Passive toast.warning("Warning", "There is an issue"); 
// ✅ Action-oriented toast.warning("Action Required", "Please verify your email to continue");