vue-notification
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.20 • Public • Published

    screen shot 2018-03-01 at 10 33 39

    npm version npm

    Vue.js notifications

    Demo: http://vue-notification.yev.io/

    Install

    npm install --save vue-notification

    How to

    In 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)

    In App.vue:

    <notifications group="foo" />

    In any of your vue files:

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

    Anywhere else:

    import Vue from 'vue'
     
    Vue.notify({
      group: 'foo',
      title: 'Important message',
      text: 'Hello user! This is a notification!'
    })

    Custom instance configuration

    All configurations 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

    Props

    All props are optional.

    Name Type Default Description
    group String null Name of the notification holder, if specified
    type String null Class that will be assigned to the notification
    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
    position String/Array 'top right' Part of the screen where notifications will pop out
    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 $* Animation configuration for Velocity animation
    duration Number 3000 Time (ms) animation stays visible (if negative - notification will stay forever or until clicked)
    speed Number 300 Speed of animation showing/hiding
    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

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

    API

      this.$notify({
        // (optional)
        // Name of the notification holder
        group: 'foo',
     
        // (optional)
        // Class that will be assigned to the notification
        type: 'warn',
     
        // (optional)
        // Title (will be wrapped in div.notification-title)
        title: 'This is title',
     
        // Content (will be wrapped in div.notification-content)
        text: 'This is <b> content </b>',
     
        // (optional)
        // Overrides default/provided duration
        duration: 10000,
     
        // (optional)
        // Overrides default/provided animation speed
        speed: 1000
     
        // (optional)
        // Data object that can be used in your template
        data: {}
      })

    Title and Text can be HTML strings.

    Also you can use simplified version:

    this.$notify('text')

    Groups

    If you are planning to use notification component for 2 or more completely different types of notifications (for example, authentication error messages in top center and generic app notifications in bottom-right corner) - you can specify group property which is essentially a name of notification holder.

    Example:

    <notifications group="auth"/>
    <notifications group="app"/>
    this.$notify({ group: 'auth', text: 'Wrong password, please try again later' })

    Position

    Position property requires a string with 2 keywords for vertical and horizontal postion.

    Format: "<vertical> <horizontal>".

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

    Default is "top right".

    Example:

    <notifications position="top left"/>

    Style

    You can write your own css styles for notifications:

    Structure:

    // SCSS: 
     
    .my-style {
      // Style of the notification itself 
     
      .notification-title {
        // Style for title line 
      }
     
      .notification-content {
        // Style for content 
      }
     
      &.my-type {
        /*
        Style for specific type of notification, will be applied when you
        call notification with "type" parameter:
        this.$notify({ type: 'my-type', message: 'Foo' })
        */
      }
    }

    To apply this style you will have to specify "classes" property:

      <notifications classes="my-style"/>

    Default:

    .vue-notification {
      padding: 10px;
      margin: 0 5px 5px;
     
      font-size: 12px;
     
      color: #ffffff;
      background: #44A4FC;
      border-left: 5px solid #187FE7;
     
      &.warn {
        background: #ffb648;
        border-left-color: #f48a06;
      }
     
      &.error {
        background: #E54D42;
        border-left-color: #B82E24;
      }
     
      &.success {
        background: #68CD86;
        border-left-color: #42A85F;
      }
    }

    Custom template (slot)

    Optional scope slot named "body" is supported.

    Scope props:

    Name Type Description
    item Object notification object
    close Function when called closes the notification

    Example:

    <notifications group="custom-template"  
                   position="bottom right">
       <template slot="body" slot-scope="props">
        <div>
            <a class="title">
              {{props.item.title}}
            </a>
            <a class="close" @click="props.close">
              <i class="fa fa-fw fa-close"></i>
            </a>
            <div v-html="props.item.text">
            </div>
        </div>
      </template>
    </notifications>

    Width

    Width can be set using a string with a percent or pixel extension (if simple number is not enough).

    Examples: '100%', '50px', '50', 50

    Velocity Animation

    Plugin can use use Velocity library to make js-powered animations. To start using it you will have to manually install velocity-animate & supply the librarty to vue-notification plugin (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 you will have to set animation-type="velocity".

    <notifications animation-type="velocity"/>

    The animation configuration consists of 2 objects/functions: enter and leave.

    Example:

    /*
     * Both 'enter' and 'leave' can be either an object or a function
     */
    animation = {
      enter (element) {
         /*
          *  "element" - is a notification element
          *    (before animation, meaning that you can take it's initial height, width, color, etc)
          */
         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
      }
    }
    <notifications
      animation-type="velocity"
      animation="animation"/>

    Cleaning

    To remove all notifications, use clean: true parameter.

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

    FAQ

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

    Development

    To run an example:
     
    # Build main library 
     
    cd vue-notification
    npm install
    npm run build
     
    # Build and run demo 
     
    cd demo
    npm install
    npm run dev
     
    # Run tests 
    npm run test
     
    # Watch unit tests 
    npm run unit:watch

    Install

    npm i vue-notification

    DownloadsWeekly Downloads

    54,742

    Version

    1.3.20

    License

    MIT

    Unpacked Size

    487 kB

    Total Files

    31

    Last publish

    Collaborators

    • euvl