Noty.js V3 is a smart javascript library for creating notifications. And also a ready plugin for vuejs

A simple, fast and productive library for creating none-block notifications for your website or application.

A few words about the author

Nedim ARABACI Co-founder, CEO WHODIDTHIS.IO
Github: @needim

About Noty.js V3

Hello World! Much time has passed since the writing of the first and only article on Habré about notyjs. Since 2012, the library has expanded its capabilities.
')
Today it does not depend on jQuery, rewritten on native JS.

import Noty from 'noty'; new Noty({ text: 'Some notification text', }).show(); 

Support from the css box of the animate.css , mojs , bounce.js , velocity, and other libraries.

 new Noty({ text: 'Some notification text', animation: { open : 'animated fadeInRight', close: 'animated fadeOutRight' } }).show(); 

Added notification design .

In version 3.1, BETA has the opportunity to create Web Push notifications and much more .

It still has 11 notification locations and 5 types of notifications themselves.

Own experience

For my project, I was looking for the most simple and interesting implementation of the "box". The first thing that came across is the module vue-notifications + mini-toastr . How much I did not turn him, he did not like me. After I met noty.js. Screwed to the project and I must pay tribute, it was love at first sight.

On the project was ready design, nice animation, but something was missing. Only when the notifications began to work on noty, I realized what kind of zest I was looking for. I could not imagine that “some sort of” notifications would create a warm and responsive perception of the design.



ps This is the first library, the design of which I did not rebuild for myself.

Vue.js plugin for noty.js

Customizing notifications is very simple. And for vuejs users, I offer a ready-made wrapper for this vue-notice library with global access from components:

 //        this.$notice.info("New version of the app is available!") // ,     //      this.$notice.info("Hey! Something very important here...", { timeout: 6000, layout: 'topLeft' }) 

Deployed documentation for the plugin in the description of the repository.

I am sure that for those who are not yet familiar with her, she will be greatly liked.

Thanks for attention.