Vue3 Simple Notification

vue3-simple-notification is very simple and easy library for vue3.

It was based on Vue3, typescript, and composition API with <setup>

Setup

npm i @devsun/vue3-simple-notification

And dependencies to your main.ts:

import Vue3SimpleNotification from '@devsun/vue3-simple-notification';

const app = createApp({...});
app.use(Vue3SimpleNotification);

Usage

use Composition API style:

const $notification = inject('$notification');

$notification.show('Hello! vue3-simple-notification! 🚀');

with Typescript:

import { INotification } from '@devsun/vue3-simple-notification';

const $notification = <INotification>inject('$notification');

Promise

when the notification is closed, resolve promise

$notification.show('Hello! vue3-simple-notification! 🚀').then((clickClose) => {
  // if you click close button, `clickClose` is true.
  console.log('closed notification', clickClose);
});

Options

use Options:

$notification.shoq('Use options!', {
    type: 'error',
    position: 'top-center',
    timeout: 3000,
    showClose: false.
});

See below for more options info.

Properties

Options

| Name | Type | Default | Description | | --------- | ------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------ | | type | String | Default | Message Type when you use show API'default' | 'info' | 'success' | 'warning' | 'error' | | position | String | 'top-right' | Where notification is displayed'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | | timeout | Number | 3000 | Time when notification is shown (ms) | | showClose | Boolean | false | Whether to display the close button |

API

show

$notification.show('This is default type notification');

info

$notification.info('This is info type notification');

success

$notification.info('This is success type notification');

warning

$notification.info('This is warning type notification');

error

$notification.info('This is error type notification');

Plugin Options

Configure the plugin using a global options:

app.use(Vue3SimpleNotification, {
  // provide / inject with this key.
  key: '$noti',

  // Where notification is displayed.
  position: 'top-center',

  // Time when notification is shown.
  timeout: 10000,

  // Whether to display the close button
  showClose: true,
});