Vex Notification
this is a small unstyled notification service library for Vue 3.
installation
pnpm i @vex/notificationusage
- register the plugin in your app.
import { createApp } from 'vue'
import VexPlugin from '@vex/notification'
const app = createApp()
app.use(VexPlugin, {})
app.mount()- use the
useNotificationcomposable to access thenotifyandnotificationsdata, then use theNotificationcomponent to display the notifications, anddismissto dismiss them.
import { useNotification } from '@vex/notification'
const { notify, notifications, dismiss } = useNotification()
<template>
<NotificationProvider>
<Notification
@timer-end="dismiss(item.uuid)"
v-for="item in notifications"
v-bind="item"
:key="item.uuid"
/>
</NotificationProvider>
</template>- use the
notifyfunction to display a notification.
import { useNotification } from '@vex/notification'
const { notify, notifications } = useNotification()
// anything you pass on the first argument will be available inside item.meta in the template.
notify({ message: 'Hello!' }, { duration: 3000 })
<template>
<NotificationProvider>
<Notification
@timer-end="dismiss(item.uuid)"
v-for="item in notifications"
v-bind="item"
:key="item.uuid"
>
<h2>{{ item.meta.message }}</h2>
</Notification>
</NotificationProvider>
</template>