v-snackbars

Display the v-snackbar (from Vuetify) with a stack display

Requirements

Vuetify > v2.3 (it may work with an earlier version of Vuetify but I haven't tested)

Install

npm install v-snackbars

Demo

See it in action: https://codesandbox.io/s/v-snackbars-demo-8xrbr?file=/src/App.vue

How to use

import VSnackbars from "v-snackbars"
export default {
  components:{
    "v-snackbars": VSnackbars
  },
  […]
}

<v-snackbars :messages.sync="messages"></v-snackbars>

You need to provide a messages array. Using a push on the array will cause the text to be shown in a snackbar.

For example, to display "This is a message", just do the below:

this.messages.push("This is a message");

You can use the same options as the v-snackbar. For example:

<v-snackbars :messages.sync="messages" :timeout="10000" bottom left color="red"></v-snackbars>

Options

Snackbar Options

The same v-snackbar options should be applicable, like bottom, right, left, top, color, timeout, ….

Personalized content

You can use v-slot:default to customize the content of the snackbar.

For example:

<v-snackbars :messages.sync="messages" :timeout="-1" color="black" top right>
  <template v-slot:default="{ message }">
    <h3 class="mb-2">Header</h3>
    {{ message }}
  </template>
</v-snackbars>

The parameter:

message: the current message that is displayed in the notification

Personalized button

A close button is used by default. If you prefer to define your own action button, you can use a v-slot:action.

For example:

<v-snackbars :messages.sync="messages" :timeout="-1" color="black" top right>
  <template v-slot:action="{ close, index, message, id }">
    <v-btn text @click="close()">Dismiss</v-btn>
  </template>
</v-snackbars>

By clicking on Dismiss, it will remove the related snackbar.

The parameters:

close: the function to remove a notification
index: the index in the array of notifications/messages
message: the current message that is displayed in the notification
id: the unique key/id of the message

Objects

If you want to customize each snackbar, you can also pass a objects instead of messages, which will contain the various props (like message, color, timeout, transition or the position).

In the JavaScript code:

this.objects.push({
  message:"Success",
  color:"green",
  timeout:5000
})
this.objects.push({
  message:"Error",
  color:"red",
  timeout:-1
})

In your Vue template:

<v-snackbars :objects.sync="objects"></v-snackbars>

Check the "Random Toast" button on the demo.

Interactivity

You can add some layers of interactivity with the messages.

For example, you can change the text by doing:

this.$set(this.messages, i, "New message to display");

To remove a notification, you'll have to use splice:

this.messages.splice(i, 1);

Check the "Show Interactivity" button on the demo.

yusufsahinhamza/v-snackbars