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

Property	Type	Default	Description
top	Boolean	false	Position the snackbar container at the top of the screen
bottom	Boolean	false	Position the snackbar container at the bottom of the screen
left	Boolean	false	Position the snackbar container towards the left of the screen
right	Boolean	false	Position the snackbar container towards the right of the screen
success	String	#4caf50	Override the background colour of success-type messages
error	String	#ff5252	Override the background colour of error-type messages
warning	String	#fb8c00	Override the background colour of warning-type messages
info	String	#2196f3	Override the background colour of info-type messages
duration	Number	4000	The default time in ms for messages to be displayed before being removed
attach	[String,HTMLElement]	body	A query selector string or HTML element node to attach the snackbar container to
messageClass	String	null	Adds a custom class to every message
zIndex	Number	10000	The z-index setting for the snackbar container
dense	Boolean	false	Reduce the y-axis padding around each message
shadow	Boolean	false	Add shadows to the displayed messages
groups	Boolean	false	Group messages with the same group-key
reverse	Boolean	false	Reverse the stacking order of snackbar messages
border	String	<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
backgroundColor	String	“currentColor”	(with border-style messages) Set the colour of the background
baseBackgroundColor	String	“#fff”	(with border-style messages) Set the base colour of the background

Methods

snackbar.add({ })

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

Property	Type	Default	Description
type	String	null	Use a preset icon and colour scheme for common alert types: success, error, warning, info
background	String	null	Set the background colour manually for the message. Accepts any CSS colour value
title	String	<empty string>	The title of the message
text *	String	<empty string>	The body of the message
dismissible	Boolean	true	Allow the user to manually dismiss the message via a close button
icon	Object	{}	Manually set the icon for the message (see below)
groupKey	String	(see description)	Message group key (for when groups are enabled). Defaults to a string hash based on type, title and text

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

snackbar.clear()

Removes all messages from the snackbar.

Events

Event	Parameters	Description
added	Message {object}	Emitted when a snackbar message is added to the stack
removed	Message {object}	Emitted when a snackbar message times out and is removed from the stack
dismissed	Message {object}	Emitted when a message is manually dismissed from the stack
cleared	none	Emitted 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>

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.