Skip to content

MessageToast

A simple component which displays notifications and can either be dismissed manually or after a given timeout.

Default Component

Dismissing requires a listener for the close event which then sets the active attribute to false.

js
const toast = ref({
    message: '',
    active: false,
    title: 'You need to click!'
})
html
<button @click="toast.active = true">Click Me</button>
<message-toast
    v-bind="toast"
    @close="toast.active = false"
    class="!bg-success-100 !text-success-700"
/>

Result

Component That Reacts Both to Timeout And User Interaction

Both the timeout and close listeners set the active attribute to false.

In addition the timeout progress is visualized by a bar activated with show-timeout-progress to true.

js
const toast = ref({
    message: 'The default timeout is 5 seconds.',
    active: false,
    title: 'You can click or wait!'
})
html
<button @click="toast.active = true">Click Me</button>
<message-toast
    v-bind="toast"
    @close="toast.active = false"
    @timeout="toast.active = false"
    :show-timeout-progress="true"
    class="!bg-success-100 !text-success-700"
/>

Result

Component With Custom Slots

icon, title and message slots are used.

js
const toast = ref({
    message: ['Might be important.', 'Who knows?', 'It\'s gonna be fine'],
    active: false,
    title: 'Scoped Toast'
})
html
<button @click="toast.active = true">Click Me</button>
<message-toast
    v-bind="toast"
    @close="toast.active = false"
    @timeout="toast.active = false"
    class="!bg-success-100 !text-success-700"
>
    <template #title><span class="text-3xl">{{ toast.title }}</span></template>
    <template #icon>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-12">
            <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
        </svg>
    </template>
    <template #default>
        <ol>
            <li v-for="line in toast.message">{{ line }}</li>
        </ol>
    </template>
</message-toast>

Result

Properties

NameTypeDefaultDescription
titleStringTitle of the toast
messageString, String[]Text message of the toast; when an array of strings is submitted every array item is displayed in a separate line
activeBooleanfalseWhen set to true the toast is displayed and the timeout starts to count
timeoutNumber5000Duration in milliseconds after which the timeout event fires
show-timeout-progressBooleanfalsewhen true a progress bar synced with the remaining timeout is displayed

Events

NameArgumentsDescription
closeEmitted when the user clicks the close button
timeoutEmitted when the configured timeout period has elapsed

Slots

NameScopedDescription
defaultThe container holding the message line(s)
titleThe title line
iconAn additional slot which allows the display of an icon along with the title