Notification Examples

Common notification patterns for real-world applications.

New Follower

Notify users when someone follows them:

vue

<script setup>
const toast = useToast();

function notifyNewFollower(user) {
  toast.add({
    type: "info",
    title: `${user.name} followed you`,
    description: "Check out their profile",
    avatar: {
      type: "image",
      src: user.avatar,
    },
    actions: [
      {
        label: "View Profile",
        onClick: () => navigateTo(`/users/${user.id}`),
      },
      {
        label: "Follow Back",
        onClick: () => followUser(user.id),
      },
    ],
  });
}
</script>

Comment Notification

Alert users about new comments:

vue

<script setup>
const toast = useToast();

function notifyComment(comment) {
  toast.add({
    type: "info",
    title: `${comment.author} commented on your post`,
    description: comment.text.substring(0, 60) + "...",
    avatar: {
      type: "text",
      text: comment.author
        .split(" ")
        .map((n) => n[0])
        .join(""),
    },
    actions: [
      { label: "Reply", onClick: () => openReply(comment.id) },
      { label: "View", onClick: () => navigateTo(`/posts/${comment.postId}`) },
    ],
    duration: 8000,
  });
}
</script>

Like Notification

Simple notification for likes:

vue

<script setup>
const toast = useToast();

function notifyLike(user, post) {
  toast.add({
    type: "success",
    title: `${user.name} liked your ${post.type}`,
    description: post.title,
    avatar: {
      type: "image",
      src: user.avatar,
    },
    duration: 4000,
  });
}
</script>

E-Commerce Notifications

Order Confirmation

Confirm order placement:

vue

<script setup>
const toast = useToast();

function confirmOrder(order) {
  toast.add({
    type: "success",
    title: "Order Placed Successfully",
    description: `Order #${order.id} - Total: $${order.total.toFixed(2)}`,
    showProgress: true,
    duration: 8000,
    actions: [
      {
        label: "Track Order",
        onClick: () => navigateTo(`/orders/${order.id}`),
      },
      {
        label: "View Receipt",
        onClick: () => downloadReceipt(order.id),
      },
    ],
  });
}
</script>

Add to Cart

Quick confirmation when adding items:

vue

<script setup>
const toast = useToast();

function itemAddedToCart(product) {
  toast.add({
    type: "success",
    title: "Added to cart",
    description: `${product.name} - $${product.price}`,
    icon: "i-lucide-shopping-cart",
    duration: 3000,
    actions: [
      { label: "View Cart", onClick: () => navigateTo("/cart") },
      { label: "Checkout", onClick: () => navigateTo("/checkout") },
    ],
  });
}
</script>

Out of Stock Alert

Notify when items are unavailable:

vue

<script setup>
const toast = useToast();

function notifyOutOfStock(product) {
  toast.add({
    type: "warning",
    title: "Out of Stock",
    description: `${product.name} is currently unavailable`,
    actions: [
      {
        label: "Notify Me",
        onClick: () => subscribeToStock(product.id),
      },
      {
        label: "View Alternatives",
        onClick: () => navigateTo(`/products?similar=${product.id}`),
      },
    ],
    duration: 10000,
  });
}
</script>

Team Collaboration

Task Assignment

Notify team members of new assignments:

vue

<script setup>
const toast = useToast();

function notifyTaskAssigned(task, assignedBy) {
  toast.add({
    type: "info",
    title: `${assignedBy.name} assigned you a task`,
    description: task.title,
    avatar: {
      type: "image",
      src: assignedBy.avatar,
    },
    showProgress: true,
    duration: 10000,
    actions: [
      { label: "View Task", onClick: () => navigateTo(`/tasks/${task.id}`) },
      { label: "Accept", onClick: () => acceptTask(task.id) },
    ],
  });
}
</script>

Mention Notification

Alert users when mentioned in discussions:

vue

<script setup>
const toast = useToast();

function notifyMention(user, context) {
  toast.add({
    type: "info",
    title: `${user.name} mentioned you`,
    description: `In ${context.location}: "${context.preview}"`,
    avatar: {
      type: "text",
      text: user.initials,
    },
    actions: [
      { label: "Reply", onClick: () => openReply(context.id) },
      { label: "View", onClick: () => navigateTo(context.url) },
    ],
  });
}
</script>

Notify when files are shared:

vue

<script setup>
const toast = useToast();

function notifyFileShared(file, sharedBy) {
  toast.add({
    type: "success",
    title: `${sharedBy.name} shared a file`,
    description: file.name,
    avatar: {
      type: "icon",
      icon: "i-lucide-file-text",
    },
    actions: [
      { label: "Open", onClick: () => openFile(file.id) },
      { label: "Download", onClick: () => downloadFile(file.id) },
    ],
  });
}
</script>

System Notifications

Success Messages

General success confirmations:

vue

<script setup>
const toast = useToast();

// Profile updated
toast.success("Profile Updated", "Your changes have been saved");

// Password changed
toast.success(
  "Password Changed",
  "Your password has been updated successfully"
);

// Settings saved
toast.success("Settings Saved", "Your preferences have been updated");
</script>

Error Messages

Handle errors gracefully:

vue

<script setup>
const toast = useToast();

// Network error
toast.error("Connection Failed", "Please check your internet connection");

// Validation error
toast.error("Invalid Input", "Please check the form and try again");

// Permission error
toast.error(
  "Access Denied",
  "You don't have permission to perform this action"
);
</script>

Info Messages

Provide helpful information:

vue

<script setup>
const toast = useToast();

// Feature announcement
toast.info("New Feature", "Dark mode is now available in settings");

// Maintenance notice
toast.info(
  "Scheduled Maintenance",
  "System will be down for 30 minutes tonight"
);

// Update available
toast.info("Update Available", "A new version is ready to install");
</script>