Vue 3 Vuetify snackbars

This repo base on very good plugin https://github.com/kyvg/vue3-notification. I adapted it to vuetify 3 with my own requirements

Setup

npm install --save @websitevirtuoso/vue3-v-snackbars

yarn add @websitevirtuoso/vue3-v-snackbars

Add dependencies to your main.js:

import { createApp } from 'vue'
import notifications from '@websitevirtuoso/vue3-v-snackbars'

const app = createApp({...})
app.use(notifications)
// Or with optional params- here default values
app.use(notifications, { componentName: 'vNotifications', name: 'notify'})
// parameter "name" using for optional API ot call plugin like this.$notify()
// I didn't test it, but think it should work

Add the global component to your App.vue:

<v-notifications location="bottom center" :timeout="5000" />

Usage

Trigger notifications from your .vue files:

// simple

Usage 
// way 1:
  import { useNotification } from '@websitevirtuoso/vue3-v-snackbars'
const notification = useNotification()
useNotification({
  title: 'text',
  color: 'error',
})

// way 2:
import { useNotification } from '@websitevirtuoso/vue3-v-snackbars'
notification.success('message')

// way 3:
import { useNotification } from '@websitevirtuoso/vue3-v-snackbars'
useNotification('message')

Or trigger notifications from other files, for example, your router:

import { useNotification } from '@websitevirtuoso/vue3-v-snackbars'

Component props

The majority of settings for the Notifications component are configured using props:

<v-notifications location="bottom center" :timeout="5000" />

Note that all props are optional.

| Name | Type | Default | Description | |------------------|---------|----------|-----------------------------------------------------------------------------| | max | Number | Infinity | Maximum number of notifications that can be shown in notification holder | | color | String | success | You can use any color from vuetify lib, like on original snackbar component | | timeout | Number | 5000 | Time (in ms) to keep the notification on screen | | reverseDirection | Boolean | false | Show notifications in reverse order | | ignoreDuplicates | Boolean | false | Ignore repeated instances of the same notification | | showCloseButton | Boolean | true | Display button to close notification |

Plugin Options

Configure the plugin itself using an additional options object:

app.use(Notifications({ name: 'alert' }))

All options are optional:

| Name | Type | Default | Description | |---------------|---------|----------------|-------------------------------------------------------------------------------| | name | String | notify | Defines the instance name. It's prefixed with the dollar sign. E.g. $notify | | componentName | String | vNotifications | The component's name |

Note: setting componentName can cause issues when using SSR.