Snackbar

Easily notify users of application processes with Vue 3 Snackbar. A fully customisable, snackbar/toast messaging hub.

Automatically stacks new messages.
Choose from nine different locations for your hub.
Set messages to disappear automatically, or manually.
Fully compatible with the Composition API and Options API.
Customise the appearance and behaviour of your messages.
> npm install vue3-snackbar
> yarn add vue3-snackbar

// main.js
import { createApp } from "vue";
import { SnackbarService, Vue3Snackbar } from "vue3-snackbar";
import "vue3-snackbar/styles";
import App from "./App.vue";
const app = createApp(App);
app.use(SnackbarService);
app.component("vue3-snackbar", Vue3Snackbar);
app.mount("#app");
<!-- App.vue -->
<template>
    <vue3-snackbar bottom right :duration="4000"></vue3-snackbar>
</template>
// App.vue - Options API
<script>
export default {
    methods: {
        successMessage() {
            this.$snackbar.add({
                type: 'success',
                text: 'This is a snackbar message'
            })
        }
    }
}
</script>
OR
// App.vue - Composition API
<script setup>
import { useSnackbar } from "vue3-snackbar";
const snackbar = useSnackbar();
snackbar.add({
    type: 'success',
    text: 'This is a snackbar message'
})
</script>

Sandbox

Component Properties

Messages
ms
Border-Style Messages
Background Opacity
Position
Actions
Component Code
<vue3-snackbar bottom right >
</vue3-snackbar>
Previous Message Code