v-snackbars

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

!Capture

Requirements

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

Install

``bash
npm install v-snackbars
`

Demo

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

How to use

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

`vue

`

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:
`javascript
this.messages.push("This is a message");
`

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

`

$3

#### Snackbar Options

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

$3

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

For example:
`vue



`

The parameter:
- message: the current message that is displayed in the notification
- id: the unique key/id of the message
- index: the index in the array of notifications/messages

#### 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:
`vue



`

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, contentClass or the position).

In the JavaScript code:
`javascript
this.objects.push({
message:"Success",
color:"green",
timeout:5000
})
this.objects.push({
message:"Error",
color:"red",
timeout:-1
})
`

In your Vue template:
`vue

`

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:
`javascript
this.$set(this.messages, i, "New message to display");
`

To remove a notification, you'll have to use splice:
`javascript
this.messages.splice(i, 1);
``

Check the "Show Interactivity" button on the demo.