Vue3 Snackbar

Installation

From the root of your project, in NPM

npm install vue3-snackbar

or on Yarn

yarn add vue3-snackbar

Then inside your Vue app’s entry file:

1import { createApp } from "vue";
2import { SnackbarService } from "vue3-snackbar";
3import "vue3-snackbar/styles";
4
5import App from "./App.vue";
6const app = createApp(App);
7
8app.use(SnackbarService);
9
10app.mount("#app");

Finally, you need to import and use the Vue3Snackbar component somewhere in your app. We recommend your main layout file.

1<template>
2 <header>Site Title</header>
3 <router-view></router-view>
4 <footer>Site Footer</footer>
5 <!-- An example of placement -->
6 <vue3-snackbar bottom right :duration="4000"></vue3-snackbar>
7</template>
8
9<script setup>
10import { Vue3Snackbar } from "vue3-snackbar";
11</script>

The component itself is automatically teleported to the end of your <body> element, although you can override this behaviour via props (see below).

Usage (Composition API)

1<script setup>
2import { useSnackbar } from "vue3-snackbar";
3const snackbar = useSnackbar();
4snackbar.add({
5 type: 'success',
6 text: 'This is a snackbar message'
7})
8</script>

You can also clear all messages from the Snackbar by calling snackbar.clear()

Usage (Options API)

1<script>
2export default {
3 methods: {
4 successMessage() {
5 this.$snackbar.add({
6 type: 'success',
7 text: 'This is a snackbar message'
8 })
9 }
10 }
11}
12</script>

Props

PropertyTypeDefaultDescription
topBooleanfalsePosition the snackbar container at the top of the screen
bottomBooleanfalsePosition the snackbar container at the bottom of the screen
leftBooleanfalsePosition the snackbar container towards the left of the screen
rightBooleanfalsePosition the snackbar container towards the right of the screen
successString#4caf50Override the background colour of success-type messages
errorString#ff5252Override the background colour of error-type messages
warningString#fb8c00Override the background colour of warning-type messages
infoString#2196f3Override the background colour of info-type messages
durationNumber4000The default time in ms for messages to be displayed before being removed
attach[String,HTMLElement]bodyA query selector string or HTML element node to attach the snackbar container to
messageClassStringnullAdds a custom class to every message
messageActionClassString“vue3-snackbar-message-action”Class to apply to the message action container
zIndexNumber10000The z-index setting for the snackbar container
limitNumbernullLimit the number of messages/message groups to display
denseBooleanfalseReduce the y-axis padding around each message
shadowBooleanfalseAdd shadows to the displayed messages
groupsBooleanfalseGroup messages with the same group-key
reverseBooleanfalseReverse the stacking order of snackbar messages
borderString<empty string>“left”,”right”,”top”,”bottom”: Choose a setting for border-style messages
backgroundOpacity[String,Number]0.12(with border-style messages) Set the opacity of the background
backgroundColorString“currentColor”(with border-style messages) Set the colour of the background
baseBackgroundColorString“#fff”(with border-style messages) Set the base colour of the background
dismissOnActionClickBooleantrueWhether the message should be dismissed when the action container is clicked
iconPresetsObjectnullObject with “success”, “error”, “info” and “warning” properties having the default vue3-icon props for each type

Methods

snackbar.add({ })

This method takes a single message config object with the following props:

PropertyTypeDefaultDescription
typeStringnullUse a preset icon and colour scheme for common alert types: success, error, warning, info
backgroundStringnullSet the background colour manually for the message. Accepts any CSS colour value
titleString<empty string>The title of the message
text *String<empty string>The body of the message
dismissibleBooleantrueAllow the user to manually dismiss the message via a close button
iconObject{}Manually set the icon for the message (see below)
groupKeyString(see description)Message group key (for when groups are enabled). Defaults to a string hash based on type, title and text
actionComponentnullA Vue component/render function to render inside the actions slot for the message. Receives same props as the “message-action” slot detailed below.

For more information on the icon object, please see the Vue3 Icon documentation’s props.

snackbar.clear()

Removes all messages from the snackbar.

Events

EventParametersDescription
addedMessage {object}Emitted when a snackbar message is added to the stack
removedMessage {object}Emitted when a snackbar message times out and is removed from the stack
dismissedMessage {object}Emitted when a message is manually dismissed from the stack
clearednoneEmitted when all messages are cleared from the stack

Slots

#message-inner

Takes over all rendering inside the snackbar message. Receives message as a slotProp.

1<Vue3Snackbar>
2 <template #message-inner="{ message }">
3 <strong v-text="message.title"></strong>
4 <p v-text="message.text"></p>
5 </template>
6</Vue3Snackbar>

#message-icon

Overrides the icon slot at the start end of the message container. Receives message and icon as slotProps. Useful if you wish to use your own icon component inside your messages.

1<Vue3Snackbar>
2 <template #message-icon="{ message }">
3 <img src="/assets/icons/warning.svg">
4 </template>
5</Vue3Snackbar>

#message-badge

The badge is used when the groups mode is enabled. It shows how many messages are currently in the stack belonging to that group. Receives message and count as slotProps.

1<Vue3Snackbar>
2 <template #message-badge="{ message, count }">
3 <span v-if="count > 1" v-text="count"></span>
4 </template>
5</Vue3Snackbar>

#message-content

The main content slot of each message. This one receives message, title and text as slotProps. Bear in mind that title is an optional field whereas text is not.

1<Vue3Snackbar>
2 <template #message-content="{ message, title, text }">
3 <strong v-text="title"></strong>
4 <p v-text="text"></p>
5 </template>
6</Vue3Snackbar>

#message-close-icon

When a message is marked dismissible, this is the slot tasked with allowing the user to dismiss it. The slots receives the values message and isDismissible (boolean) as well as the action dismiss which… see if you can guess.

1<Vue3Snackbar>
2 <template #message-close-icon="{ message, isDismissible, dismiss }">
3 <button v-if="isDismissible" @click="dismiss">
4 Close
5 </button>
6 </template>
7</Vue3Snackbar>

#message-action (new in 2.3.0)

Positioned below the message content, the message-action slot allows you to add an action to your snackbar messages. If you’d prefer, you can also pass a render function/component to the message’s “action” property

1<Vue3Snackbar>
2 <template #message-action="{ message, isDismissible, dismiss }">
3 <button v-if="message.title === 'Added to cart'">Go To Checkout</button>
4 </template>
5</Vue3Snackbar>

Demo & Nuxt

You can see a demo of Vue3 Snackbar over on our Github Pages demo site.

If you’re looking to use this package with Nuxt, then our friend modbender has created a plugin which makes using the component a breeze. You can see the project at https://github.com/modbender/nuxt-snackbar or on NPM.

Part of evoMark's contribution to Free and Open Source Software (FOSS)

To read more about evoMark and our open-source software, head to our Open-Source Software page

npm i vue3-snackbar
Get in Touch

Get in touch with us today 01202 790300

monday 09:00 - 17:00
tuesday 09:00 - 17:00
wednesday 09:00 - 17:00
thursday 09:00 - 17:00
friday 09:00 - 16:00
saturday Closed
sunday Closed