vuejs-noty-fa

Noty for VueJs (incl. FontAwesome Support)

A VueJS 2 wrapper around Noty.

Forked to add FontAwesome support.

Getting Started

Install using npm:

$ npm install vuejs-noty-fa

Import and register Vue plugin:

import Vue from 'vue'
import VueNoty from 'vuejs-noty-fa'
 
Vue.use(VueNoty)

For use with Nuxt, create a new plugin:

 
// /plugins/noty.js
import Vue from 'vue'
import VueNoty from 'vuejs-noty-fa'
 
export default () => {
  Vue.use(VueNoty)
}

.. and add it to nuxt.config.js

plugins: [
  {src: '@/plugins/noty', ssr: false}
]

Import noty styles

Import stylesheet in your vue / js components:

import 'vuejs-noty-fa/dist/vuejs-noty-fa.css'

Or, import styles in your less / scss stylesheet:

@import '~vuejs-noty-fa/dist/vuejs-noty-fa.css';

Or, import styles for Nuxt inside nuxt.config.js:

css: [
  'vuejs-noty-fa/dist/vuejs-noty-fa.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!")
 
// Close all alerts
this.$noty.closeAll()

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',
  icon: {
    success: [], // no icon
    error: ['fal', 'times-circle'] // using different icon weight
  }
})

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'
}, ['fal', 'times-circle']) // fal is a FontAwesome Pro icon

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