Vue Toastification (for Vue 3.x)

Here is a beautiful and light toastification for Vue 3.x .

Installation

npm install j-toastify

Usage

1. Base Usage: base usage will auto close and display on the top-right corner of the screen

import { JToastify } from 'j-toastify'

JToastify.alert({
    message: "Here is a notification.",
}, () => {
    // Here is the callback function that will be called if needed
})

2. Full Config Usage

import { JToastify } from 'j-toastify'

JToastify.alert({
    position: "center",      // ["top-right", "top-left", "top", "center", "bottom-left", "bottom-right", "bottom"]
    icon: true,              // Booleans: Show the icon before message or not.
    message: "Hello! I love coding.", //  The message you wanna show and only String type allowed.
    type: "primary",         // ['primary', 'success', 'warning', 'danger'] 
    autoClose: true,         // The notification will be automatically closed
    timeout: 5000,           // The auto close timeout, default is 5000
    confirmText: "Confirm",  // The confirm Button Text
    cancelText: "Cancel",    // The cancel Button Text
    confirmEvent: () => { }, // The confirm button Event
    cancelEvent: () => { },  // The cancel button Event
    closeEvent: () => { }    // The close icon event
}, () => {
    // Here is the callback function that will be called if needed
})

APIs

| Key | Type | Required | Default | Selections | Description | | ---- | ---- | ---- | ---- | ---- | ---- | | message | String | true | ---- | ---- | The message will show | | position | String | false | "top-right" | ["top-right", "top-left", "top", "center", "bottom-left", "bottom-right", "bottom"] | The place where the component will show | | icon | Boolean | false | true | ---- | The icon before message | | type | String | false | "primary" | ["primary", "success", "warning", "danger"] | Different type means different color | | autoClose | Boolean | false | true | ---- | When true, the component will be auto closed after timeout value | | timeout | Number | false | 5000 | ---- | When autoClose is true, it is the display time | | confirmText | String | false | ---- | ---- | The autoClose key need be false, and if confirmText has value, the confirm button will be shown | | cancelText | String | false | ---- | ---- | The autoClose key need be false, and if cancelText has value, the cancel button will be shown | | confirmEvent | Function | false | ---- | ---- | When the confirm button is clicked, the confirmEvent function will be called | | cancelEvent | Function | false | ---- | ---- | When the cancel button is clicked, the cancelEvent function will be called | | closeEvent | Function | false | ---- | ---- | When the close icon is clicked, the closeEvent function will be called |

Features

Demo

Check Demo Go to Demo