Vue.js 2 library for showing notifications

Related tags

vue-notification
Overview

screen shot 2018-03-01 at 10 33 39

npm version npm

Vue.js notifications

Demo

Setup

npm install --save vue-notification

Add dependencies to your main.js:

import Vue           from 'vue'
import Notifications from 'vue-notification'

/*
or for SSR:
import Notifications from 'vue-notification/dist/ssr.js'
*/

Vue.use(Notifications)

Add the global component to your App.vue:

<notifications/>

Trigger notifications from your .vue files:

// simple
this.$notify('Hello user!')

// using options
this.$notify({
  title: 'Important message',
  text: 'Hello user!'
});

Or trigger notifications from other files, for example, your router:

import Vue from 'vue'

Vue.notify({
  title: 'Authorization',
  text: 'You have been logged in!'
})

Usage

Component props

The majority of settings for the Notifications component are configured using props:

<notifications position="bottom right" classes="my-custom-class"/>

Note that all props are optional.

Name Type Default Description
position String/Array 'top right' Part of the screen where notifications will pop out
width Number/String 300 Width of notification holder, can be %, px string or number.
Valid values: '100%', '200px', 200
classes String/Array 'vue-notification' List of classes that will be applied to notification element
group String null Name of the notification holder, if specified
duration Number 3000 Time (in ms) to keep the notification on screen (if negative - notification will stay forever or until clicked)
speed Number 300 Time (in ms) to show / hide notifications
animation-type String 'css' Type of animation, currently supported types are css and velocity
animation-name String null Animation name required for css animation
animation Object Custom Animation configuration for Velocity animation
max Number Infinity Maximum number of notifications that can be shown in notification holder
reverse Boolean false Show notifications in reverse order
ignoreDuplicates Boolean false Ignore repeated instances of the same notification
closeOnClick Boolean true Close notification when clicked

API

Notifications are triggered via the API:

  this.$notify({
    // (optional)
    // Name of the notification holder
    group: 'foo',

    // (optional)
    // Title (will be wrapped in div.notification-title)
    title: 'This is the title',

    // Content (will be wrapped in div.notification-content)
    text: 'This is some content',

    // (optional)
    // Class that will be assigned to the notification
    type: 'warn',

    // (optional, override)
    // Time (in ms) to keep the notification on screen
    duration: 10000,

    // (optional, override)
    // Time (in ms) to show / hide notifications
    speed: 1000

    // (optional)
    // Data object that can be used in your template
    data: {}
  })

To remove notifications, include the clean: true parameter.

this.$notify({
  group: 'foo', // clean only the foo group
  clean: true
})

Plugin Options

Configure the plugin itself using an additional options object:

Vue.use(notifications, { name: 'alert' })

All options are optional:

Name Type Default Description
name String notify Defines the instance name. It's prefixed with the dollar sign. E.g. $notify
componentName String notifications The component's name

Note: setting componentName can cause issues when using SSR.

Features

Position

Position the component on the screen using the position prop:

<notifications position="bottom right"/>

It requires a string with two keywords for vertical and horizontal postion.

Format: " ".

  • Horizontal options: left, center, right
  • Vertical options: top, bottom

Default is "top right".

Width

Width can be set using a number or string with optional % or px extensions:

<notifications :width="100"/>
<notifications width="100"/>
<notifications width="100%"/>
<notifications width="100px"/>

Type

Set the type of a notification (warn, error, success, etc) by adding a type property to the call:

this.$notify({ type: 'success', text: 'The operation completed' })

This will add the type (i.e. "success") as a CSS class name to the .vue-notification element.

See the Styling section for how to hook onto the class and style the popup.

Groups

For different classes of notifications, i.e...

  • authentication errors (top center)
  • app notifications (bottom-right)

...specify the group attribute:

<notifications group="auth" position="top"/>
<notifications group="app"  position="bottom right"/>

Trigger a notification for a specific group by specifying it in the API call:

this.$notify({ group: 'auth', text: 'Wrong password, please try again' })

Customisation

Styling

Vue Notifications comes with default styling, but it's easy to replace with your own.

Specify one or more class hooks via the classes prop on the global component:

<notifications classes="my-notification"/>

This will add the supplied class/classes to individual notification elements:

<div class="vue-notification-wrapper">
  <div class="vue-notification-template my-notification">
    <div class="notification-title">Infodiv>
    <div class="notification-content">You have been logged indiv>
  div>
div>

Then include custom css rules to style the notifications:

// style of the notification itself
.my-notification {
  ...

  // style for title line
  .notification-title {
    ...
  }

  // style for content
  .notification-content {
    ...
  }

  // additional styling hook when using`type` parameter, i.e. this.$notify({ type: 'success', message: 'Yay!' })
  &.success { ... }
  &.info { ... }
  &.error { ... }
}

Note that the default rules are:

.vue-notification {
  // styling
  margin: 0 5px 5px;
  padding: 10px;
  font-size: 12px;
  color: #ffffff;
  
  // default (blue)
  background: #44A4FC;
  border-left: 5px solid #187FE7;

  // types (green, amber, red)
  &.success {
    background: #68CD86;
    border-left-color: #42A85F;
  }

  &.warn {
    background: #ffb648;
    border-left-color: #f48a06;
  }

  &.error {
    background: #E54D42;
    border-left-color: #B82E24;
  }
}

Content

To completely replace notification content, use Vue's slots system:

<notifications>
  <template slot="body" slot-scope="{ item, close }">
    <div class="my-notification">
      <p class="title">
        {{ item.title }}
      p>
      <button class="close" @click="close">
        <i class="fa fa-fw fa-close">i>
      button>
      <div v-html="props.item.text"/>
    div>
  template>
notifications>

The props object has the following members:

Name Type Description
item Object Notification object
close Function A function to close the notification

Animation

Vue Notification can use the Velocity library to power the animations using JavaScript.

To use, manually install velocity-animate & pass the library to the vue-notification plugin (the reason for doing that is to reduce the size of this plugin).

In your main.js:

import Vue           from 'vue'
import Notifications from 'vue-notification'
import velocity      from 'velocity-animate'

Vue.use(Notifications, { velocity })

In the template, set the animation-type prop:

<notifications animation-type="velocity"/>

The default configuration is:

{
  enter: { opacity: [1, 0] },
  leave: { opacity: [0, 1] }
}

To assign a custom animation, use the animation prop:

<notifications animation-type="velocity" :animation="animation"/>

Note that enter and leave can be an object or a function that returns an object:

computed: {
  animation () {
    return {
      /**
       * Animation function
       * 
       * Runs before animating, so you can take the initial height, width, color, etc
       * @param  {HTMLElement}  element  The notification element
       */
      enter (element) {
        let height = element.clientHeight
        return {
          // animates from 0px to "height"
          height: [height, 0],

          // animates from 0 to random opacity (in range between 0.5 and 1)
          opacity: [Math.random() * 0.5 + 0.5, 0]
        }
      },
      leave: {
        height: 0,
        opacity: 0
      }
    }
  }
}

FAQ

Check closed issues with FAQ label to get answers for most asked questions.

Development

To run a local demo:

# run the demo
cd demo
npm install
npm run dev

To contribute to the library:

# build main library
npm install
npm run build

# run tests
npm run test

# watch unit tests
npm run unit:watch
Issues
  • How to use into nuxt js plugins?

    How to use into nuxt js plugins?

    I'm using plugin inside nuxt.js project as plugin. Use this instruction https://nuxtjs.org/guide/plugins#vue-plugins . Then I create custom plugin which injects to app context.

    export default ({ app }, inject) => {
      const displayAlert = (meta) => {
       this.$notify({
              group: 'alerts',
              title: 'Important message',
              text: 'Hello user! This is a notification!'
            });
        // also I'm check app.$notify
      };
      inject('displayAlert', displayAlert);
    }
    

    But I'm getting undefined error

    What could be the problem?

    question 
    opened by GrimJacky 19
  • Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0_vue__.default.$notify is not a function

    Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0_vue__.default.$notify is not a function

    Hi guys..

    I'm trying to use the vue-notification library in my vue (using webpack template) project and i made all what readme says but i'm getting the following error:

    Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0_vue__.default.$notify is not a function
        at eval (main.js?1c90:20)
        at Object../src/main.js (app.js:3263)
        at __webpack_require__ (app.js:679)
        at fn (app.js:89)
        at Object.0 (app.js:3320)
        at __webpack_require__ (app.js:679)
        at app.js:725
        at app.js:728
    

    I've tried with this.$notify(...) and with Vue.$notify(...) but still getting similiar error:

    With this.$notify(...) i'm getting:

    Uncaught TypeError: this.$notify is not a function
        at eval (main.js?1c90:20)
        at Object../src/main.js (app.js:3263)
        at __webpack_require__ (app.js:679)
        at fn (app.js:89)
        at Object.0 (app.js:3320)
        at __webpack_require__ (app.js:679)
        at app.js:725
        at app.js:728
    

    Can anyone help me with this?

    Thank's guys!

    question 
    opened by fjugaldev 13
  • Vuex Integration

    Vuex Integration

    Just looking for some help/advice on how to integrate with Vuex. Currently, my implementation is:

    import Notifications from 'vue-notification' Vue.use(Notifications)

    And this works fine in Vue but when I try to access the $notify from Vuex it doesn't seem to be attached to the Vue instance. I might try to create a Vue component that watches on a store model which just triggers the notification from within in the component. I appreciate this isn't an issue but I'm sure a lot of people will find it helpful. Thanks in advance.

    FAQ 
    opened by esslamben 12
  • 220kb bundle for notifications?

    220kb bundle for notifications?

    Great component first of all. The animations are catchy and I'm pretty curious about some implementation details but 220kb for notifications seems too much.

    Importing Vue only for sending 2 events is not a good reason to add 80kb to the bundle. https://github.com/euvl/vue-notification/blob/master/src/index.js#L19

    You can do this with a simple encapsulated store Example here https://github.com/cristijora/vue-paper-dashboard/blob/master/src/components/UIComponents/NotificationPlugin/index.js#L9 And if you want reactivity for the list of notifications you could

    Vue.mixin({data:{notificationStore: NotificationStore.state}})
     Object.defineProperty(Vue.prototype, '$notifications', {
          get () {
            return this.$root.notificationStore
          }
        })
    

    This way events which uses the empty Vue instance can be removed easily. Also I'm pretty sure animations can be done with pure css or maybe you can partially import velocity-animate

    Keep up the good work !

    opened by cristijora 11
  • Vue3 Support

    Vue3 Support

    Is your feature request related to a problem? Please describe. vue-notification is not compatible to Vue3.

    Describe the solution you'd like I want to use vue-notification in a Vue3 app.

    Describe alternatives you've considered The alternative is to use another notification component.

    no-issue-activity 
    opened by aurium 9
  • Programmatic closing of notifications?

    Programmatic closing of notifications?

    Is there anyway to programmatically close an open notification? Maybe by ID or reference.

    Cheers

    James

    help wanted 
    opened by jamesmorgan 9
  • Add SSR support

    Add SSR support

    Per #11, need to make sure plugin does work with SSR.

    enhancement todo 
    opened by euvl 9
  • this.$notify is not defined

    this.$notify is not defined

    when I use it as your README told,it shows that this.$notify is not defined npm install --save vue-notification

    import Vue from 'vue' import Notifications from 'vue-notification'

    Vue.use(Notifications)

    this.$notify({ group: 'foo', title: 'Important message', text: 'Hello user! This is a notification!' });

    opened by LRY1994 8
  • Question: Shown and Disappear Events

    Question: Shown and Disappear Events

    Does this have Events like when the notification is shown or hide?

    todo 
    opened by jariesdev 7
  • Todo: 100% width notification

    Todo: 100% width notification

    Hi! Great plugin. One question: is there a way to create notification that occupies 100% width of the window? Thanks!

    LGTM enhancement question todo 
    opened by ilgarm 6
  • border-left doesn't painted in messages with type: success, warn and error messages

    border-left doesn't painted in messages with type: success, warn and error messages

    Describe the bug border-left doesn't painted in messages with type: success, warn and error messages. Painted only messages with default type.

    To Reproduce Steps to reproduce the behavior:

    1. Go to 'Setup and use according manual'
    2. See error

    Expected behavior Expect a left bar in message block.

    Screenshots изображение

    Desktop (please complete the following information):

    • OS: Windows 10
    • Browser Firefox
    • Version 89.0.1
    opened by EgoBrainProgrammer 0
  • fix: Readme code demo

    fix: Readme code demo

    Changes in PR:

    opened by shayaulman 0
  • Bump dns-packet from 1.3.1 to 1.3.4

    Bump dns-packet from 1.3.1 to 1.3.4

    Bumps dns-packet from 1.3.1 to 1.3.4.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump dns-packet from 1.3.1 to 1.3.4 in /demo

    Bump dns-packet from 1.3.1 to 1.3.4 in /demo

    Bumps dns-packet from 1.3.1 to 1.3.4.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies no-pr-activity 
    opened by dependabot[bot] 1
  • Custom template not displaying any notification when triggered

    Custom template not displaying any notification when triggered

    Describe the bug

    When using the custom template slot, no notification is triggered even when calling this.$notify()

    To Reproduce

    1. Add the following code to a Nuxt JS project's page
    <template>
      <div>
        <notifications duration="-1">
          <template slot="body" slot-scope="{ item, close }">
            <pre>
              {{ item }}
            </pre>
          </template>
        </notifications>
      </div>
    </template>
    
    <script>
    export default {
      created () {
        this.$notify({
          type: 'error',
          title: `Data Source Discovery Error`,
          text: `We're having some trouble fetching available data sources`,
          duration: 5000
        })
      }
    }
    </script>
    
    

    Expected behavior

    I should see a notification in the top right of my screen as this is the default behaviour

    Screenshots

    N/A

    Desktop (please complete the following information):

    • OS: Mac
    • Browser Chrome
    • Version latest

    Additional context

    I have the plugin installed globally in my Nuxt JS project, and everything works fine if I just use the following:

    <notifications classes="p-3 rounded-lg shadow bg-white text-md font-medium text-gray-800 m-3" duration="-1" />
    

    However, I need to customise the HMTL content of a notification, thus the utilisation of slots and template. Why isn't it triggering?

    opened by sts-ryan-holton 3
Releases(1.3.16)
Owner
Yev Vlasenko
'); drop table users; --
Yev Vlasenko
Vue.js agnostic library for non-blocking notifications

| SITE | DOCS | EXAMPLES | GITHUB | LICENSE | vue-notifications VueNotifications - agnostic library for non-blocking notifications. Introduction and W

Sergei Panfilov 660 Jun 25, 2021
Vue.js 2 library for showing notifications

Vue.js notifications Demo http://vue-notification.yev.io/ Setup npm install --save vue-notification Add dependencies to your main.js: import Vue

Yev Vlasenko 2.1k Jul 25, 2021
🥖A simple and flexible stacking, positioning & dismissal API for authored toast style notifications in Vue.js

?? A simple and flexible implementation of toast style notifications for Vue.js. Breadstick A simple and flexible implementation of toast style notifi

Jonathan Bakebwa 107 Jun 25, 2021
Vue.js version of Awesome Notifications library

Vue Awesome Notifications It's a Vue.js version of Awesome Notifications library. Awesome Notifications is a lightweight, fully customizable JavaScrip

David Yunevich 98 Jun 2, 2021
Minimalist 1kb Notification component

vue-notifyjs Minimalist notification component for Vue 2.x Why use it? Small: 1.5kb (minified & gzipped), 4kb (minified) Simple this.$notify({message:

BinarCode 163 Jul 23, 2021
🔥 Simple, extendable, dependency free notification plugin. 🔥

Vue Toastify I wanted a notification plugin which I can use by passing props from the server and can also be called at run time. With this component i

null 144 Jul 17, 2021
A Vue UI component for showing notifications.

A Vue UI component for showing notifications.

Armin Ayari 64 Jul 14, 2021
Vue.js notification bell component.

vue-notification-bell A Vue UI component for showing notifications. Demo Page How To Install npm install vue-notification-bell --save How to use Insi

Armin Ayari 64 Jul 14, 2021
Simple notify handler component for Vue.js.

Vue Simple Notify Versión en español Simple notify handler component for Vue.js. Demo Quick Start Examples Props Events Methods Tests TODO Contribute

Josantonius 6 Mar 13, 2021
Notification/Toast Component Using Vue3

Easy to use, customisable notification/toast library built using Vue3.

Daf Coe 15 May 24, 2021
Simple toast notifications for Vue.js

vue-toastr-2 Simple toast notifications for Vue.js Installation Direct Download / CDN https://unpkg.com/vue-toastr-2/dist/vue-toastr-2 unpkg.com provi

Varun Kruthiventi 16 Oct 28, 2020
Vue.js non-blocking notifications, based on Noty.js

Vue Notice Vue.js non-blocking notifications, based on Noty.js How to start Install in your project npm i @marcius-studio/vue-notice yarn add @marcius

Marcius Studio 46 Jul 5, 2021
Vue notifications made easy!

Vue Toastification (for Vue 2) Are you using Vue 3? Check out Vue Toastification v2! Light, easy and beautiful toasts! Wanna try it out? Check out the

Gustavo Maronato 972 Jul 27, 2021
Vuejs 2 Notification Center

vue-snotify Example https://artemsky.github.io/vue-snotify/ Features 9 types of toast notifications (async, confirm, prompt, html and more...) Many co

Artem Kuznetsov 764 Jul 19, 2021