Vue JS: Notifications with mini-toastr and vue events
Tags: vue, toastr, notifications, events
Published: 2020-03-22 17:01:11

---
title: Vue JS: Notifications with mini-toastr and vue events
published: true
description: Implementation of different kind of notifications. Using vue events and mini-toastr
tags: vue, toastr, notifications, events
series: vue examples
cover_image: https://i.blogs.es/99f0c0/vue/450_1000.png
---

On the next develop of my personal website i decided create a toastr notifier. Notifications for javascript have a lot of choices. A cool library is [vue-notifications](https://se-panfilov.github.io/vue-notifications/#/) that provides an abstraction from the rest of notifications libraries. But i will not use that library. I decidiced to build a notifications´s library wrapper  and make this 'how to'. The notification library i will wrap is [mini-toastr](https://www.npmjs.com/package/mini-toastr)


### setup

First, we nee install mini toastr library

```bash
npm i mini-toastr --save
```

with library already installed, we need a small edit of our Vue JS main.js
```javascript
import miniToastr from 'mini-toastr'

miniToastr.init()
``` 

### Wrapper

No we will code our wrapper. i called the file notificationService.js

```javascript
import miniToastr from 'mini-toastr'

const notificationService = {
  defaultMessage: {
    type: 'info',
    title: 'default title',
    message: 'default message',
    timeout: 3000, // timeout autohide
    cb: undefined // callback funciton
  },
  types: miniToastr.config.types,
  notify: (apayload) => {
    var payload = { ...notificationService.defaultMessage, ...apayload }
    miniToastr[payload.type](payload.message, payload.title, payload.timeout, payload.cb)
  }
}

export default notificationService

```
On previous code, i only wrap the library types and i fill payload object with default values ​​if they are not present in it using [spread] (https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores / Syntax_Spread) operator.

### App.vue

Now we switch to the vue library. We will register our notification event callbacks. Iterate all the types library creating one callback for each type.
```vue
<template>
...
</template>

<script>
import notificationService from './notificationService'
export default {
  name: 'App',
  components: {
    ...
  },
  created: function () {
    Object.keys(notificationService.types).forEach(
      (key) => this.$root.$on(
        notificationService.types[key],
        (payload) => notificationService.notify({ ...{ type: notificationService.types[key] }, ...payload })))
  }
}
</script>
```

# Use

Now we create a payload message and emit it with vue events. Our abstractions make possible use the notifications without any library import, and if we change our notification library we only need to reimplement our wrapper.

```javascript
var payload = {
  type: 'error',
  title: 'funny notifications ! ',
  message: 'default message'
}
this.$root.$emit(payload.type, payload)
```

### Demo

I implemented notifications on my personal website console. Console sends notification with emit and app.vue has registered the operation, so if one is received a notification will be launched.

![demo toastr](https://media.giphy.com/media/RGYn52N7vcipWDobaU/giphy.gif)

Thank you for reading me. Feel free for comment any thought below.

# References

[Vue notifications](https://se-panfilov.github.io/vue-notifications/#/)
[Mini toastr](https://github.com/se-panfilov/mini-toastr#readme)
[Vue custom events emit](https://vuejs.org/v2/api/#vm-emit)
[Vue custom events on](https://vuejs.org/v2/api/#vm-on)
[Spread operator (...)] (https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores / Syntax_Spread)