Vuejs-Vue notifications v1.0.2: vue-notifications - Vue.js agnostic non-blocking notifications library.

icon
Latest Release: v1.0.2

Codacy Badge Build Status GitHub license Known Vulnerabilities NPM Package Quality

| SITE | DOCS | EXAMPLES | GITHUB | LICENSE |

vue-notifications

VueNotifications - agnostic library for non-blocking notifications.


Introduction and WTF is it?

vue-notifications is "Vue.js agnostic non-blocking notifications library"... and it's a lie )) Seriously.

vue-notificationsit's basically a bridge between your actual app and UI-notfications libs, like mini-toastr.

Why do we need this?

Because we want to have a way to show notifications and a way to easy replace UI library that show them without rewrite the code.

What vue-notifications actually do?

It's allow you to declare your notifications in blocks like this one:

export default {
    name: 'DemoView',
    data () {
      //...
    },
    methods: {
      //...
    },
    notifications: {
      showLoginError: { // You can have any name you want instead of 'showLoginError'
        title: 'Login Failed',
        message: 'Failed to authenticate',
        type: 'error' // You also can use 'VueNotifications.types.error' instead of 'error'
      }
    }
  }

And then call it via this: this.showLoginError(), and also with some override props: this.showLoginError({message: 'whatever'}).

Why do we need third-party UI lib (like mini-toastr)?

Well, because we want to be agnostic. That's mean that if at some step you would be fucked up with your UI library, vue-notifications will allow you to replace it as much easy as possible. Basically you would be required to replace vue-notifications's config. And that's all.

Installation

Check the Docs: Installation

npm i vue-notifications --save

or

yarn add vue-notifications

include in project:

Getting started

Check the Docs: Getting started

import VueNotifications from 'vue-notifications'

Vue.use(VueNotifications, options)

Setup and configuration (necessary)

As I said above - you have to use UI library that would draw actual notifications for you.

For this example I will use mini-toastr

Step-by-step guide

Let's do everything together

If you don't want spend too much time with this shit - you can go ahead and copy-past whole code from the bottom of this page

Anyway

  • Import vue-notifications

Here we're including vue-notifications and mini-toastr in our project

import VueNotifications from 'vue-notifications'
import miniToastr from 'mini-toastr'

P.S. don't forget to install mini-toastr (npm i mini-toastr --save)

  • Setup types of the messages

This one is mostly related to mini-toastr. We basically want mini-toastr to have these 4 types of messages. Basically 'error' should be red and success - 'green'

const toastTypes = {
  success: 'success',
  error: 'error',
  info: 'info',
  warn: 'warn'
}
  • Activate mini-toastr

Here we make mini-toasr initialization with types from above

miniToastr.init({types: toastTypes})
  • Map vue-notification to mini-toastr

We want our messages to be called via vue-notificationbut be shown by mini-toastr, So :

function toast ({title, message, type, timeout, cb}) {
  return miniToastr[type](message, title, timeout, cb)
}

const options = {
  success: toast,
  error: toast,
  info: toast,
  warn: toast
}

This stuff will forward our messages, so in case of 'success', it will call miniToastr.success(message, title, timeout, cb), in case of 'error' it will call miniToastr.error(message, title, timeout, cb) and etc. Keep in mind that the types(like "success", "error" and etc) could be whatever you want. In this example we just use default stuff for both libs.

  • Activate the plugin

Okay, now we have to pass our options into the plugin. Actually vue-notification has auto-install, but we want to pass options from above to it, so that's the case why do we do this manually

Vue.use(VueNotifications, options)
All together

You can just copy-paste code below

import VueNotifications from 'vue-notifications'

// Include mini-toaster (or any other UI-notification library)
import miniToastr from 'mini-toastr'

// We shall setup types of the messages. ('error' type - red and 'success' - green in mini-toastr)
const toastTypes = {
  success: 'success',
  error: 'error',
  info: 'info',
  warn: 'warn'
}

// This step requires only for mini-toastr, just an initialization
miniToastr.init({types: toastTypes})

// Here we are seting up messages output to `mini-toastr`
// This mean that in case of 'success' message we will call miniToastr.success(message, title, timeout, cb)
// In case of 'error' we will call miniToastr.error(message, title, timeout, cb)
// and etc.
function toast ({title, message, type, timeout, cb}) {
  return miniToastr[type](message, title, timeout, cb)
}

// Here we map vue-notifications method to function abowe (to mini-toastr)
// By default vue-notifications can have 4 methods: 'success', 'error', 'info' and 'warn'
// But you can specify whatever methods you want.
// If you won't specify some method here, output would be sent to the browser's console
const options = {
  success: toast,
  error: toast,
  info: toast,
  warn: toast
}

// Activate plugin
// VueNotifications have auto install but if we want to specify options we've got to do it manually.
Vue.use(VueNotifications, options)

Usage

Check the Docs: Usage

export default {
    name: 'DemoView',
    data () {
      //...
    },
    methods: {
      //...
    },
    notifications: {
      showLoginError: { // You can have any name you want instead of 'showLoginError'
        title: 'Login Failed',
        message: 'Failed to authenticate',
        type: 'error' // You also can use 'VueNotifications.types.error' instead of 'error'
      }
    }
  }

Now you can call showLoginError as a common method via this:

this.showLoginError()

PRO tip: Technically there is no difference between methods defined in notifications: {...} section and in methods: {...} section - they are all the same. So that's basically mean that** you shall not define methods with same name in those sections**, because they would overlap each other.

So, now you can do something like that:

methods: {
  login () {
    loginUtil.login(err => if (err) this.showLoginError())
  }
}

But wait. What if I want to show some custom message in example above?

Well, in this case you can override showLoginError() method:

this.showLoginError({message: err.message})

In the same way you can override all the others properties

this.showLoginError({title: 'my title', message: 'just an error', type: 'warn', timeout: 1000})

Options to override

As I said above, you can specify any of following properties

Name Type Default value Description
title String undefined Notification's title (can be empty)
message String undefined Notification's body message. Normally should be set up
timeout Number 3000 time before notifications gone
cb Function undefined Callback function

But actually you can add your own properties as well, if you want. Why and how? You can check it in Advanced Setup section.

Browsers support.

Check the Docs: Browsers support

Version v1.0.0 and after guarantees only a support of evergreen browsers.

Versions below v1.0.0 supports all ES5-compatable browsers (i.g. starting from IE11).

License

MIT License

Copyright (c) 2016 Sergei Panfilov

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Comments

  • Use in typescript project
    Use in typescript project

    Sep 12, 2019

    Hi,

    can you please provide a small example of how to use this in typescript based vue project?

    I just can not get it work!

    Reply
  • Browser warnings when created notifications as global mixin
    Browser warnings when created notifications as global mixin

    Oct 14, 2019

    Hello! I want to create showError and showSuccess notifications one time and use its as a global mixin: Vue.mixin({ notifications: { showError: { title: 'Attention!', message: 'Error message', type: 'error', code: '0' }, showSuccess: { title: '', message: 'Success message', type: 'success', backgroundColor: '#f0f3f5', code: '0' } } })

    but browser show warnings (for every component on page): "VueNotifications: trying to create method which is already exist: showError" "VueNotifications: trying to create method which is already exist: showSuccess"

    How it include in "methods" and which methods I can create (if I can) for global mixin without "notifications"?

    Reply
  • Error inserting notification methods when no methods defined
    Error inserting notification methods when no methods defined

    Nov 15, 2019

    I've updated to 1.0.2 version from 0.9 and experienced following problem:

    old

    if (!options.methods) options.methods = {}
    if (!options.methods[name]) {
       options.methods[name] = makeMethod(vueApp, name, options, pluginOptions)
    }
    

    vs new

    https://github.com/se-panfilov/vue-notifications/blob/ffdd19cacff28a1692eb9ac4886ff5b5c434c9c2/src/vue-notifications.ts#L66-L71

    so in case the methodds property is missing in Vue config object, new object gets created and methods are assigned there, but this new object is never propagated back to the config so those methods are then not processed by Vue

    Reply
  • Version 0.9.3 is not available on npm
    Version 0.9.3 is not available on npm

    Nov 15, 2019

    Only 0.9.0 is available on npm, later 0.x are not published.

    Reply
  • Return reference to created notification
    Return reference to created notification

    Dec 9, 2019

    With the reference you can access to notification after it has been dispatched. For example if you want to close the notification via other method than direct interaction with the notification, having reference is a must.

    Reply
  • Usage with iziToast does not work when deployed
    Usage with iziToast does not work when deployed

    Mar 30, 2020

    Thanks a lot for this package it's been really helpful.

    I was testing the different notifications library it has support for and I liked iziToast, I am using it in a Nuxt application in SPA mode and I have set everything correctly.

    When I am developing locally, everything seems to work fine, the package works with iziToast but after I deploy, the notifications do not appear anymore.

    a look at my plugin file:

    import Vue from 'vue'
    import VueNotifications from 'vue-notifications'
    
    import iziToast from 'izitoast'
    import 'izitoast/dist/css/iziToast.min.css'
    
    function toast({ title, message, type, timeout, cb }) {
      if (type === VueNotifications.types.warn) type = 'warning'
      return iziToast[type]({ title, message, timeout })
    }
    
    const options = {
      success: toast,
      error: toast,
      info: toast,
      warn: toast
    }
    
    Vue.use(VueNotifications, options)
    
    
    Reply
  • TS with decorators
    TS with decorators

    Jun 7, 2020

    Using TS with decorators is not possible to set the notificacions object, as say the doc. This must be a function type, returning the object options. But TS give error Property $error does not exists.

    I made a mixin to use it.

    // main.ts
    import Component from "vue-class-component";
    Component.registerHooks(["notifications"]);
    
    // mixins/notify.ts
    import { Component, Vue } from "vue-property-decorator";
    
    @Component
    export default class Notify extends Vue {
      notifications() {
        return {
          $error: {
            type: "error",
            title: "",
            message: ""
          },
          $warning: {
            type: "warning",
            title: "",
            message: ""
          },
          $info: {
            type: "info",
            title: "",
            message: ""
          },
          $success: {
            type: "success",
            title: "",
            message: ""
          }
        };
      }
    }
    

    I think the fixed was in line 80 https://github.com/se-panfilov/vue-notifications/blob/ffdd19cacff28a1692eb9ac4886ff5b5c434c9c2/src/vue-notifications.ts#L80

    pluginOptions[methodName] must be checked if is a function. something like

    const pluginOptionsData = typeof pluginOptions === 'function' ? pluginOptions.call() : pluginOptions;
    const methodConfig = pluginOptionsData ? pluginOptionsData[methodName] : {};
    
    Reply
  • Can't throw a notification on
    Can't throw a notification on "created" or "mounted" events

    Jun 12, 2020

    <template>
      <div id="home">
        Vue webapp home :)
      </div>
    </template>
    
    <script>
    import {HTTP} from '@/http-common.js'
    
    export default {
      name: 'home',
      data () {
        return {
        }
      },
      notifications: {
        showWelcome: {
          title: 'Welcome :)',
          type: 'success'
        },
        showAPIError: { // You can have any name you want instead of 'showLoginError'
          title: 'API request failed',
          message: '',
          type: 'error' // You also can use 'VueNotifications.types.error' instead of 'error'
        },
      },
      methods: {
      },
      created(){
        this.showWelcome()
        HTTP.get('/api/home')
          .then(response => {
            this.showWelcome(response)
          })
          .catch(error => {
            this.showAPIError({message:error})
          })
      }
    }
    </script>
    
    <style scoped>
    </style>
    
    

    So when I first load the page, I get errors : [Vue warn]: Error in created hook: "TypeError: this.showWelcome is not a function"

    But if I edit one line, save the file, (using webpack dev server), then the page isn't reloaded but the componant is re-created, and then I get the notification.

    So it looks like "notifications" functions are created after the component is created, so you can't really throw a notification until then. Or am I doing something wrong ?

    Reply
  • suggestion: About user experience
    suggestion: About user experience

    Jun 28, 2020

    It is very cumbersome to use, no one wants to rewrite the method in each component, this personalized configuration is not really personalized

    Reply
  • Custom notifications izitoast.
    Custom notifications izitoast.

    Jan 22, 2021

    In izitoast is posible to customize entirely a notification, is it possible with this plugin?

    I'm afraid vue-izitoast is dead now.

    Reply
  • VueNotifications: trying to create method which is already exist
    VueNotifications: trying to create method which is already exist

    Jan 15, 2020

    Hi there,

    I trying use vue-notifications as a mixin in nuxt project, below is example:

    plugins/vue-notifications.js

    import Vue from 'vue'
    import VueNotifications from 'vue-notifications'
    import 'jquery'
    import toastr from 'toastr'
    import 'toastr/build/toastr.min.css'
    
    function toast({ title, message, type, timeout, cb }) {
      if (type === VueNotifications.types.warn) type = 'warning'
      return toastr[type](message, title, { timeOut: timeout })
    }
    
    const options = {
      success: toast,
      error: toast,
      info: toast,
      warn: toast
    }
    
    Vue.use(VueNotifications, options)
    

    plugins/mixins.js

    import Vue from 'vue'
    
    Vue.mixin({
      notifications: {
        notifyError: {
          title: 'Error',
          message: 'Something wrong!',
          type: 'error'
        },
        notifySuccess: {
          title: 'Success',
          message: 'Successfully',
          type: 'success'
        },
        notifyWarring: {
          title: 'Warring',
          message: 'Warring',
          type: 'warn'
        }
      }
    })
    

    With this mixin, in every component I can use vue-notification via this.notifyError({ message: 'Some thing' }), but I got much of warning.

    image

    How fix this warning, or my config is wrong?

    thanks

    Reply
  • Cannot build. TS errors about `notifications` prop in component
    Cannot build. TS errors about `notifications` prop in component

    Sep 28, 2021

    TypeScript is giving a lot of warnings and it seems because it's not recognizing somehow properly use of Vue-notifications in my VueJS 2 with Typescript project.

    I'm trying to use it only in one component for now, but it would be interesting to be used globally.

    It works during development BUT I cannot build & deploy because of these errors. I did follow docs and some tips in forums, but couldn't get these errors fixed. I know just little about TS.

    I appreciate any help!

    Here are some of warnings (avoiding to show similar warnings):

    gnome-shell-screenshot-MHZTA1

    The following repeats to every method declared inside notifications prop: image

    The following repeats to every parameter, but I tried to fix this by importing MessageData type from lib, but I don't know if this is the right approach. image Doing so these warnings had gone however I had also to put empty strings as default values for title and message because there was a new error claiming undefined is not assignable to them. Again, I don't know if it is the right approach.

    Its code in vuenotifications.ts file that it is imported in main.js: toast

    Reply
  • Update babel-loader to the latest version 🚀
    Update babel-loader to the latest version 🚀

    Aug 28, 2018

    Version 8.0.0 of babel-loader was just published.

    Dependency babel-loader
    Current Version 8.0.0-beta.3
    Type devDependency

    The version 8.0.0 is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

    It might be worth looking into these changes and trying to get this project onto the latest version of babel-loader.

    If you have a solid test suite and good coverage, a passing build is a strong indicator that you can take advantage of these changes directly by merging the proposed change into your project. If the build fails or you don’t have such unconditional trust in your tests, this branch is a great starting point for you to work on the update.


    Release Notes v8.0.0

    This is the first stable release of babel-loader for Babel 7.x.

    • README updates
    • Dropped peer dependency on betas and RCs, but left the backward-compat code we had for now to give people time to migrate
    Commits

    The new version differs by 11 commits.

    • a55fc2e 8.0.0
    • 13d90b2 Prepare for 8.0.0 release.
    • 95e71fd 8.0.0-beta.6
    • 5eb1b0a Pass Babel's .caller option and pass supportsStaticESM:true. (#660)
    • 6a70942 Read file before creating directory (#644)
    • 73922e9 Merge pull request #645 from Munter/patch-1
    • d9e2ed6 Update http-links to https
    • 2be502d Use MD4 instead of SHA1 for filename hashes (#639)
    • a23f1c3 8.0.0-beta.4
    • a2d86d9 Return more data from babel.transform. (#629)
    • 1a7a440 Ensure that we don't accidentally publish 'latest'.

    See the full diff

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    Reply
  • Types support
    Types support

    Oct 18, 2017

    It is any plan on typescript support?

    enhancement help wanted 
    Reply
  • Update sinon to the latest version 🚀
    Update sinon to the latest version 🚀

    May 7, 2018

    Version 5.0.5 of sinon was just published.

    Dependency sinon
    Current Version 5.0.2
    Type devDependency

    The version 5.0.5 is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

    It might be worth looking into these changes and trying to get this project onto the latest version of sinon.

    If you have a solid test suite and good coverage, a passing build is a strong indicator that you can take advantage of these changes directly by merging the proposed change into your project. If the build fails or you don’t have such unconditional trust in your tests, this branch is a great starting point for you to work on the update.


    Commits

    The new version differs by 21 commits.

    • 374f593 Update docs/changelog.md and set new release id in docs/_config.yml
    • f298d51 Add release documentation for v5.0.5
    • 90a4212 5.0.5
    • 7055663 Update History.md and AUTHORS for new release
    • e5b43de Refuse to replace already replaced values
    • d4467e7 Update docs/changelog.md and set new release id in docs/_config.yml
    • 7e08393 Add release documentation for v5.0.4
    • 6fcf7b2 5.0.4
    • b8d65ff Update History.md and AUTHORS for new release
    • 3a66331 Fix #1781: Reject non-function values a f argument to fake
    • 5503f73 Remove [email protected], add [email protected]
    • cfccaf3 Update migration-guides.md
    • 5155c01 Update docs/changelog.md and set new release id in docs/_config.yml
    • 75ffac0 Add release documentation for v5.0.3
    • 347eeb5 5.0.3

    There are 21 commits in total.

    See the full diff

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    Reply
  • firefox watch issue
    firefox watch issue

    Apr 7, 2017

    Hello

    I'm using the newest release 0.7.6 of VueNotifications along with MiniToastr 0.6.5 and Vue 2.2.6. In Firefox (52), after defining your notifications in your component, all of them are fired when the main component is mounted. This strange behavior doesn't occur in Chrome (57).

    I started debugging the code and I found that here

    launchWatchableNotifications (vueApp, notifications) {
        if (!notifications) return
        Object.keys(notifications).forEach(name => {
          if (vueApp[name] && notifications[name].watch) {
            vueApp[name]()
          }
    })
    

    in Chrome notifications[name].watch is undefined and the code is not executed (expected behavior IMO). However, in Firefox it is a function, defined here

    In my mind the Chrome behavior is the correct one, you don't want to fire all your notifications simply because your application is mounted. Personally I would kill that whole block of code, but I'm sure there was a reason for putting it there in the first place. Can you please confirm or dismiss my thinking here and update the code if needed.

    Let me know if you can't reproduce the behavior or if you need any code samples. To me it's a very visible issue, but on the other hand it makes me very suspicious about the fact that I couldn't find anything related on google.

    Thanks

    bug 
    Reply
  • Update sinon to the latest version 🚀
    Update sinon to the latest version 🚀

    Feb 18, 2019

    The devDependency sinon was updated from 6.1.4 to 7.2.4.

    This version is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.


    Find out more about this release.

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    Reply
  • Update eslint to the latest version 🚀
    Update eslint to the latest version 🚀

    Feb 15, 2019

    The devDependency eslint was updated from 5.3.0 to 5.14.0.

    This version is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.


    Release Notes for v5.14.0
    • 85a04b3 Fix: adds conditional for separateRequires in one-var (fixes #10179) (#10980) (Scott Stern)
    • 0c02932 Upgrade: [email protected] (#11401) (Ilya Volodin)
    • 104ae88 Docs: Update governance doc with reviewers status (#11399) (Nicholas C. Zakas)
    • ab8ac6a Fix: Support boundary spread elements in sort-keys (#11158) (Jakub Rożek)
    • a23d197 New: add allowSingleLineBlocks opt. to padded-blocks rule (fixes #7145) (#11243) (richie3366)
    • e25e7aa Fix: comma-spacing ignore comma before closing paren (fixes #11295) (#11374) (Pig Fang)
    • a1f7c44 Docs: fix space-before-blocks correct code for "classes": "never" (#11391) (PoziWorld)
    • 14f58a2 Docs: fix grammar in object-curly-spacing docs (#11389) (PoziWorld)
    • d3e9a27 Docs: fix grammar in “those who says” (#11390) (PoziWorld)
    • ea8e804 Docs: Add note about support for object spread (fixes #11136) (#11395) (Steven Thomas)
    • 95aa3fd Docs: Update README team and sponsors (ESLint Jenkins)
    • 51c4972 Update: Behavior of --init (fixes #11105) (#11332) (Nicholas C. Zakas)
    • ad7a380 Docs: Update README team and sponsors (ESLint Jenkins)
    • 550de1e Update: use default keyword in JSON schema (fixes #9929) (#11288) (Pig Fang)
    • 983c520 Update: Use 'readonly' and 'writable' for globals (fixes #11359) (#11384) (Nicholas C. Zakas)
    • f1d3a7e Upgrade: some deps (fixes #11372) (#11373) (薛定谔的猫)
    • 3e0c417 Docs: Fix grammar in “there’s nothing prevent you” (#11385) (PoziWorld)
    • de988bc Docs: Fix grammar: Spacing improve -> Spacing improves (#11386) (PoziWorld)
    • 1309dfd Revert "Build: fix test failure on Node 11 (#11100)" (#11375) (薛定谔的猫)
    • 1e56897 Docs: “the function actually use”: use -> uses (#11380) (PoziWorld)
    • 5a71bc9 Docs: Update README team and sponsors (ESLint Jenkins)
    • 82a58ce Docs: Update README team and sponsors (ESLint Jenkins)
    • 546d355 Docs: Update README with latest sponsors/team data (#11378) (Nicholas C. Zakas)
    • c0df9fe Docs: ... is not an operator (#11232) (Felix Kling)
    • 7ecfdef Docs: update typescript parser (refs #11368) (#11369) (薛定谔的猫)
    • 3c90dd7 Update: remove prefer-spread autofix (fixes #11330) (#11365) (薛定谔的猫)
    • 5eb3121 Update: add fixer for prefer-destructuring (fixes #11151) (#11301) (golopot)
    • 173eb38 Docs: Clarify ecmaVersion doesn't imply globals (refs #9812) (#11364) (Keith Maxwell)
    • 84ce72f Fix: Remove extraneous linefeeds in one-var fixer (fixes #10741) (#10955) (st-sloth)
    • 389362a Docs: clarify motivation for no-prototype-builtins (#11356) (Teddy Katz)
    • 533d240 Update: no-shadow-restricted-names lets unassigned vars shadow undefined (#11341) (Teddy Katz)
    • d0e823a Update: Make --init run js config files through linter (fixes #9947) (#11337) (Brian Kurek)
    • 92fc2f4 Fix: CircularJSON dependency warning (fixes #11052) (#11314) (Terry)
    • 4dd19a3 Docs: mention 'prefer-spread' in docs of 'no-useless-call' (#11348) (Klaus Meinhardt)
    • 4fd83d5 Docs: fix a misleading example in one-var (#11350) (薛定谔的猫)
    • 9441ce7 Chore: update incorrect tests to fix build failing (#11354) (薛定谔的猫)
    Commits

    The new version differs by 203 commits.

    • af9688b 5.14.0
    • 0ce3ac7 Build: changelog update for 5.14.0
    • 85a04b3 Fix: adds conditional for separateRequires in one-var (fixes #10179) (#10980)
    • 0c02932 Upgrade: [email protected] (#11401)
    • 104ae88 Docs: Update governance doc with reviewers status (#11399)
    • ab8ac6a Fix: Support boundary spread elements in sort-keys (#11158)
    • a23d197 New: add allowSingleLineBlocks opt. to padded-blocks rule (fixes #7145) (#11243)
    • e25e7aa Fix: comma-spacing ignore comma before closing paren (fixes #11295) (#11374)
    • a1f7c44 Docs: fix space-before-blocks correct code for "classes": "never" (#11391)
    • 14f58a2 Docs: fix grammar in object-curly-spacing docs (#11389)
    • d3e9a27 Docs: fix grammar in “those who says” (#11390)
    • ea8e804 Docs: Add note about support for object spread (fixes #11136) (#11395)
    • 95aa3fd Docs: Update README team and sponsors
    • 51c4972 Update: Behavior of --init (fixes #11105) (#11332)
    • ad7a380 Docs: Update README team and sponsors

    There are 203 commits in total.

    See the full diff

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    Reply
  • Update mocha to the latest version 🚀
    Update mocha to the latest version 🚀

    Feb 18, 2019

    The devDependency mocha was updated from 5.2.0 to 6.0.0.

    This version is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.


    Release Notes for v6.0.0

    6.0.0 / 2019-02-18

    💥 Breaking Changes

    • #3149: Drop Node.js v4.x support (@outsideris)
    • #3556: Changes to command-line options (@boneskull):
      • --grep and --fgrep are now mutually exclusive; attempting to use both will cause Mocha to fail instead of simply ignoring --grep
      • --compilers is no longer supported; attempting to use will cause Mocha to fail with a link to more information
      • -d is no longer an alias for --debug; -d is currently ignored
      • #3275: --watch-extensions no longer implies js; it must be explicitly added (@TheDancingCode)
    • #2908: tap reporter emits error messages (@chrmod)
    • #2819: When conditionally skipping in a before hook, subsequent before hooks and tests in nested suites are now skipped (@bannmoore)
    • #627: Emit filepath in "timeout exceeded" exceptions where applicable (@boneskull)
    • #3556: lib/template.html has moved to lib/browser/template.html (@boneskull)
    • #2576: An exception is now thrown if Mocha fails to parse or find a mocha.opts at a user-specified path (@plroebuck)
    • #3458: Instantiating a Base-extending reporter without a Runner parameter will throw an exception (@craigtaub)
    • #3125: For consumers of Mocha's programmatic API, all exceptions thrown from Mocha now have a code property (and some will have additional metadata). Some Error messages have changed. Please use the code property to check Error types instead of the message property; these descriptions will be localized in the future. (@craigtaub)

    📠 Deprecations

    These are soft-deprecated, and will emit a warning upon use. Support will be removed in (likely) the next major version of Mocha:

    • -gc users should use --gc-global instead
    • Consumers of the function exported by bin/options should now use the loadMochaOpts or loadOptions (preferred) functions exported by the lib/cli/options module

    Regarding the Mocha class constructor (from lib/mocha):

    • Use property color: false instead of useColors: false
    • Use property timeout: false instead of enableTimeouts: false

    All of the above deprecations were introduced by #3556.

    mocha.opts is now considered "legacy"; please prefer RC file or package.json over mocha.opts.

    🎉 Enhancements

    Enhancements introduced in #3556:

    • Mocha now supports "RC" files in JS, JSON, YAML, or package.json-based (using mocha property) format

      • .mocharc.js, .mocharc.json, .mocharc.yaml or .mocharc.yml are valid "rc" file names and will be automatically loaded
      • Use --config /path/to/rc/file to specify an explicit path
      • Use --package /path/to/package.json to specify an explicit package.json to read the mocha prop from
      • Use --no-config or --no-package to completely disable loading of configuration via RC file and package.json, respectively
      • Configurations are merged as applicable using the priority list:
        1. Command-line arguments
        2. RC file
        3. package.json
        4. mocha.opts
        5. Mocha's own defaults
      • Check out these example config files
    • Node/V8 flag support in mocha executable:

      • Support all allowed node flags as supported by the running version of node (also thanks to @demurgos)
      • Support any V8 flag by prepending --v8- to the flag name
      • All flags are also supported via config files, package.json properties, or mocha.opts
      • Debug-related flags (e.g., --inspect) now imply --no-timeouts
      • Use of e.g., --debug will automatically invoke --inspect if supported by running version of node
    • Support negation of any Mocha-specific command-line flag by prepending --no- to the flag name

    • Interfaces now have descriptions when listed using --interfaces flag

    • Mocha constructor supports all options

    • --extension is now an alias for --watch-extensions and affects non-watch-mode test runs as well. For example, to run only test/*.coffee (not test/*.js), you can do mocha --require coffee-script/register --extensions coffee.

    • #3552: tap reporter is now TAP13-capable (@plroebuck & @mollstam)

    • #3535: Mocha's version can now be queried programmatically via public property Mocha.prototype.version (@plroebuck)

    • #3428: xunit reporter shows diffs (@mlucool)

    • #2529: Runner now emits a retry event when tests are retried (reporters can listen for this) (@catdad)

    • #2962, #3111: In-browser notification support; warn about missing prereqs when --growl supplied (@plroebuck)

    🐛 Fixes

    📖 Documentation

    🔩 Other

    Commits

    The new version differs by 209 commits ahead by 209, behind by 39.

    • 42303e2 Release v6.0.0
    • a553ca7 punctuation updates for changelog v6.0.0
    • c710792 grammar updates for changelog v6.0.0
    • 9f9293a update changelog for v6.0.0
    • a540eb0 remove "projects" section from MAINTAINERS.md [ci skip]
    • 52b5c42 Uppercased JSON reporter name in describe title (#3739)
    • 82307fb Fix .globals to remove falsy values (#3737)
    • 56dc28e Remove unnecessary post-processing code having no effect; closes #3708 (#3733)
    • 16b4281 Documentation updates (#3728)
    • 5d9d3eb Update nyc
    • 118c9ae Refactor out usages of Suite#_onlyTests and Suite#_onlyTests (#3689) (#3707)
    • 0dacd1f Add ability to unload files from require cache (redux) (#3726)
    • 66a52f2 update release steps [ci skip]
    • 45ae014 Refactor lookupFiles and files (#3722)
    • 94c9320 fix --reporter-option to allow comma-separated options; closes #3706

    There are 209 commits in total.

    See the full diff

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    Reply
  • names conflict error
    names conflict error

    Feb 9, 2017

    Hello,

    when i'm using 2 or more instances of one vue component with notifications block, i got error in console:

    VueNotifications: names conflict - showMyCustomerError

    enhancement 
    Reply