Installation
From the root of your project, in NPM
npm install vue3-snackbaror on Yarn
yarn add vue3-snackbarThen 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 |
| messageActionClass | String | “vue3-snackbar-message-action” | Class to apply to the message action container |
| zIndex | Number | 10000 | The z-index setting for the snackbar container |
| limit | Number | null | Limit the number of messages/message groups to display |
| 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 |
| dismissOnActionClick | Boolean | true | Whether the message should be dismissed when the action container is clicked |
| iconPresets | Object | null | Object 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:
| 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 |
| action | Component | null | A 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
| 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 Close5 </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.
