Snackbar Queue
The v-snackbar-queue component is used to display a sequence of messages to the user.
Usage
Messages are passed as an array of strings to v-model, when a message is displayed it will be removed from the start of the array.
<div class="d-flex ga-2">
<v-btn color="success" @click="addMessage('success')">Success</v-btn>
<v-btn color="info" @click="addMessage('info')">Info</v-btn>
<v-btn color="error" @click="addMessage('error')">Error</v-btn>
<v-btn color="surface-variant" @click="addMessage()">Default</v-btn>
<v-btn prepend-icon="mdi-refresh" variant="outlined" @click="snackbarQueue?.clear()">Clear</v-btn>
</div>
<pre>{{ logs.join('\n') }}</pre>
<v-snackbar-queue
ref="snackbarQueue"
v-model="messages"
:total-visible="5"
closable
></v-snackbar-queue><script setup>
import { ref } from 'vue'
const snackbarQueue = ref()
const messages = ref([])
const logs = ref([])
let messageCount = 0
function addMessage (color) {
const id = ++messageCount
messages.value.push({
text: `Message #${id}`,
color,
onDismiss (reason) {
logs.value.unshift(`Message #${id}: Closed (${reason})`)
},
})
}
</script>API
| Component | Description |
|---|---|
| v-snackbar-queue | Primary Component |
| v-snackbar | The actual Snackbar Component |
Examples
Some examples below use the contained prop and direct z-index values to keep snackbars scoped within the example preview. In a real application you typically don’t need either — snackbars render in the application overlay by default.
Props
Total visible
The total-visible prop controls how many snackbars are shown simultaneously, stacked vertically with automatic offset. The display-strategy prop determines what happens when the queue exceeds this limit: "hold" (default) pauses the queue until a visible slot opens, while "overflow" immediately shows new messages and dismisses the oldest ones. Enable the collapsed prop to visually compress the stack into a single snackbar with a counter badge.
Transition
Use the transition prop to change the enter/leave animation. If you pass CSS-based animation with suffix *-auto (e.g. "slide-auto", "scroll-auto") the effective transition will be location-aware. To present it more clearly, the example below uses custom “bouncy-slide” transition.
Misc
Promise
Messages can include a promise property along with success and error callbacks. The snackbar shows a loading state until the promise resolves or rejects, then updates accordingly.
Additional props
Snackbar props can be set either on the queue to apply to all messages:
<v-snackbar-queue timeout="2000" color="error" />
Or individual messages as objects:
queue.push({
text: text.value,
timeout: 2000,
color: 'error',
})
Global state
You can use pinia or vuex to display messages from any component:
export const useMessagesStore = defineStore('messages', () => {
const queue = ref([])
function add (message) {
queue.push(message)
}
return { queue, add }
})
<template>
<v-app>
<router-view></router-view>
<v-snackbar-queue v-model="messages.queue"></v-snackbar-queue>
</v-app>
</template>
<script setup>
const messages = useMessagesStore()
</script>
<script setup>
const messages = useMessagesStore()
function onError (err) {
messages.add({ text: err.message, color: 'error' })
}
</script>