Notifications

A component and triggering method for showing notifications to users. It supports timeouts and persistent notifications and is designed to work with assistive technology.

Usage

The library exports a default VNotifications component as well as a notify named export function. The VNotifications component must be placed somewhere in your application. Usually a top level <App> component is a good spot. Creating notifications relies on the execution of the notify function.

If you want to make the notify function available within your template, there are a few options:

  1. Import the function into a <script setup>
<script setup>
import { notify } from './components/VNotifications/VNotifications.vue';
</script>
  1. Return it from a setup() function
<script>
import { notify } from './components/VNotifications/VNotifications.vue';
export default {
  setup() {
    return {
      notify
    }
  }
}
</script>
  1. Assign it to a method
<script>
import { notify } from './components/VNotifications/VNotifications.vue';
export default {
  methods: {
    notify
  }
}
</script>
  1. Extend the globalPropertiesopen in new window
import { createApp } from 'vue'
import VNotifications, { notify } from './components/VNotifications/VNotifications.vue';

const app = createApp()
app.component('VNotifications', VNotifications)
app.config.globalProperties.$vnotify = notify;
app.mount('#app')

(Note that if you register the component via plugin, this will be setup for you)

Styled Example

This application extends the globalProperties method described above and placed both the component and the notify function in the same place, but you can separate them.

Notification Arguments

The notify function accepts either a string, or an object. If you pass a string, the notification settings will be inherited from the <VNotifications> component props. Using an object allows you to customize individual notifications.

Notify Object Argument

{
  id?: string, // Unique identifier for the notification
  text: string, // Notification text
  persistent?: boolean, // Determines if the dismiss button should be displayed
  timeout?: number|false, // Time in milliseconds to display the notification
}

Timeouts

By default, notifications will pop in and just kind of hang out until you ask them to leave. But if you want, you can set a deadline for them to make their exit. You can pass a timeout in milliseconds either through the <VNotifications> timeout prop, or as the timeout property of the notify function's object argument.

Persistent vs. Dismissible

Sometimes you want notifications that the user can acknowledge and dismiss, and other times you want notifications that persist. You can control that through the persistent prop on <VNotifications> which accepts a boolean value. You can also overwrite the settings on an individual notification through the notify functions