Vue
Multiple Containers
Mount several ToastContainer components in one Vue app and route toast notifications to a specific container with containerId.
By default you mount a single <ToastContainer /> and every toast renders in it. Optionally, you can mount several containers — each with its own id — and route individual toasts to them.
Setup
Mount the containers
Give each extra container an id; the one without an id stays the default:
App.vue
<template>
<!-- default container: receives toasts without a containerId -->
<ToastContainer />
<!-- named container -->
<ToastContainer id="panel" />
</template>
Route toasts to a container
Target a container with the containerId option (any show helper, update, and global config accept it):
routing.ts
toast.success("Saved"); // → default container
toast.success("Saved", { containerId: "panel" }); // → <ToastContainer id="panel" />
The component prop is
id, the toast option is containerId — the toast option can't be called id because that's the toast's own identifier.Behavior
- Matching is strict: toasts without a
containerIdrender only in the container without anid, and vice versa. maxVisible,queue, ordering, andpreventDuplicatesare all scoped per container + position — a full stack in one container never evicts or queues toasts in another.dismiss(id),update(id, ...),pause(id), andresume(id)work by toast id regardless of container.dismissAll()clears everything; pass a filter to scope it:
dismiss-scoped.ts
toast.dismissAll({ containerId: "panel" }); // only container "panel"
toast.dismissAll({ containerId: undefined }); // only the default container
toast.dismissAll(); // everything
Live Example
Multiple containers
Route toasts between the default container and a named container, then dismiss each scope separately.
Loading Vue REPL…