Noty plugin for Vue.js 2

Downloads in past


156100.1.42 years ago6 years agoMinified + gzip package size for vuejs-noty in KB


A Vue JS wrapper around Noty. Developped for Vue 2.

Getting Started

Install using npm:
$ npm install vuejs-noty

Import and register Vue plugin:
import Vue from 'vue'
import VueNoty from 'vuejs-noty'


Import noty styles

Import stylesheet in your vue / js components:
import 'vuejs-noty/dist/vuejs-noty.css'

Or, import styles in your less / scss stylesheet:
@import '~vuejs-noty/dist/vuejs-noty.css';


In your Vue.js components, simply call one of these methods:
// Basic alert
this.$"Hello world!")

// Success notification
this.$noty.success("Your profile has been saved!")

// Error message
this.$noty.error("Oops, something went wrong!")

// Warning
this.$noty.warning("Please review your information.")

// Basic alert
this.$"New version of the app is available!")

All of these methods will return a Noty object instance, so you can use available API methods. Example:
this.$"Hello world!").setTimeout(4500);

Create your own notification with access to the full list of options. Example:
    text: 'This is a custom notification!',
    type: 'warning',
    layout: 'topCenter',
    timeout: 4500,
    progressBar: false


Config defaults

You can set a default configuration object when registering the plugin. Example:
Vue.use(VueNoty, {
  timeout: 4000,
  progressBar: true,
  layout: 'topCenter'

Config override

All of the alert methods can accept a config object as second parameter if you need to override the defaults. Example:
this.$"Hey! Something very important here...", {
  killer: true,
  timeout: 6000,
  layout: 'topRight'

For more information about available configuration properties, please read Noty's documentation.