Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vuejs noty

Related:
Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

A Vue JS wrapper around Noty. Noty is a Dependency-free notification library.

This lets you add notifications to your vue app, created for Vue 2. Various themes can be used with this notification module.

To create a notification simply call

new Noty({
theme: 'themeName',
text: 'Some notification text'
}).show();

notification

Getting Started

Install using npm:

$ npm install vuejs-noty

Import and register Vue plugin:

import Vue from 'vue'
import VueNoty from 'vuejs-noty'

Vue.use(VueNoty)

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';

Usage

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.

Configuration

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.$noty.info("Hey! Something very important here...", {
killer: true,
timeout: 6000,
layout: 'topRight'
})

Github: http://github.com/renoguyon/vuejs-noty#readme


← vue simple progress v circle →

© vuejsexamples.net - Privacy Policy - Cookie Policy