A Vue JS wrapper around Noty. Developped for Vue 2.
Install using npm:
$ npm install vuejs-notyImport and register Vue plugin:
import Vue from 'vue'
import VueNoty from 'vuejs-noty'
Vue.use(VueNoty)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.$noty.show("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.$noty.info("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.$noty.show("Hello world!").setTimeout(4500);Create your own notification with access to the full list of options. Example:
this.$noty.create({
text: 'This is a custom notification!',
type: 'warning',
layout: 'topCenter',
timeout: 4500,
progressBar: false
}).show();You can set a default configuration object when registering the plugin. Example:
Vue.use(VueNoty, {
timeout: 4000,
progressBar: true,
layout: 'topCenter'
})All of the alert methods can accept a config object as second parameter if you need to override the defaults. Example:
this.$noty.info("Hey! Something very important here...", {
killer: true,
timeout: 6000,
layout: 'topRight'
})For more information about available configuration properties, please read Noty's documentation.