libj-vue-plugin-izitoast

Part of libj tools

A toast plugin for vue. Adds a $toast variable to every Vue instance and component

Needs Vue to be present globally

Usage

npm install libj-vue-plugin-izitoast

With default theme

import 'libj-vue-plugin-izitoast/dist/libj-vue-plugin-izitoast.default.min.css'
import 'libj-vue-plugin-izitoast'

now in a Vue instance or Vue component you can do this:
/**
* 
* @param {Object} options
* @param {String} options.title
* @param {String} options.message
* @param {String} options.color : success, info, error, warning. default: info
* @param {Number} options.timeout : duration. default 5000 milliseconds
* @param {String} options.position : bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center. default: topCenter
* @param {Array} options.buttons
* @param {Boolean} options.close: true
* @param {Boolean} options.closeOnClick: false
* @param {Boolean} options.closeOnEscape: false
* @param {Boolean} options.overlay: false
* @param {Boolean} options.overlayClose: false
* @param {Boolean} options.rtl: false
*/
this.$toast.show(options)

/**
* @param {String} options.title
* @param {String} options.message
* @param {String} options.color
* @param {Function} options.onYes
* @param {Function} options.onNo
* @param {String} options.okButtonText
* @param {String} options.cancelButtonText
*/
this.$toast.ask(options)

Customize theme

You'll need a separate .scss file like (showcase/showcase.scss):

@import 'libj-vue-plugin-izitoast/index.scss';
// Now override izitoast css
.iziToast.iziToast-color-orange {
    background: rgba(255, 116, 92,.9) !important;
    border-color: rgba(255, 59, 46,.9) !important;
}

Test

• Run this in a separate command line to start node server

node server.js

• Run one of the following to re-create bundles

npm run dev
npm run dev:watch

• Navigate to http://localhost:3000

Build

npm run build
npm run build:watch