@websitevirtuoso/vue3-v-snackbars v1.0.5

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.

Plugin Options

Configure the plugin itself using an additional options object:

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

All options are optional:

Note: setting componentName can cause issues when using SSR.