# @duncte123/vue-notify-me

> Stackable notification Alert for Vue

Latest version **1.1.0** (published 2023-07-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install @duncte123/vue-notify-me
pnpm add @duncte123/vue-notify-me
yarn add @duncte123/vue-notify-me
bun add @duncte123/vue-notify-me
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2023-07-17 |
| First published | 2023-07-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 86.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 139 |
| Author | PygmySlowLoris Team |
| Maintainers | duncte123 |
| Keywords | vue, notify, notification, notify me, alert |

## Links

- npm: https://www.npmjs.com/package/@duncte123/vue-notify-me
- Repository: https://github.com/PygmySlowLoris/vue-notify-me
- Homepage: https://github.com/PygmySlowLoris/vue-notify-me#readme
- Issues: https://github.com/PygmySlowLoris/vue-notify-me/issues
- npm.io page: https://npm.io/package/@duncte123/vue-notify-me

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^3.2.36

## Alternatives

- [update-check](https://npm.io/package/update-check.md) — 4.0M weekly downloads
- [react-native-onesignal](https://npm.io/package/react-native-onesignal.md) — 134.5K weekly downloads
- [react-redux-toastr](https://npm.io/package/react-redux-toastr.md) — 33.7K weekly downloads
- [@nocobase/plugin-notification-manager](https://npm.io/package/@nocobase/plugin-notification-manager.md) — 2.0K weekly downloads
- [react-simple-toasts](https://npm.io/package/react-simple-toasts.md) — 1.9K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2023-07-17

## README

#   vue-notify-me

<p align="center">
<img src="https://media.giphy.com/media/GoTlxRAapcEVy/giphy.gif" />
</p>

Notification Alert for Vue.

## Features

* Customizable template
* Stackable notifications

<a href="https://pygmyslowloris.github.io/vue-notify-me/"> Live Demo</a>

##  Installation

```bash
npm install vue-notify-me --save
```

##  Properties

| Properties                    | Type      | Values     |
| :---------------              | :-------  | :--------- |
|  `event-bus`                  | Object    | <b>Central event Bus </b>|
|  `event-show` (not required)  | String    | <b>Default </b> `notify-me`|
|  `event-hide` (not required)  | String    | <b>Default </b> `hide-notify-me`|
|  `close` (not required)       | String    | <b>Default </b>`bulma`, options: bootstrap or any other class for the closing icon|
|  `permanent` (not required)   | Bool      | <b>Default </b>false|
|  `container` (not required)   | String    | <b>Default </b>`notification`, (Class for the notification container)|
|  `status` (not required)      | String    | <b>Default </b>`is-success`, (Class for the notification status)|
|  `width` (not required)       | String    | <b>Default </b>`350px`. It's **mandatory** to set the **unit** for the width. For example: `rem`, `em`, `px`    |
|  `timeout` (not required)       | Number    | <b>Default `4000`</b>. Value is in miliseconds. If notification is not `permanent` you can set the timeout for it    |

##  Examples

Include the component in your .vue file.

```html
<template>
  <notify-me
        :event-bus="bus">
      <template slot="content" scope="{data}">
          <div style="width: 100%; word-break: break-all; text-align: left">
              <h4><b>{{data.title}}</b></h4>
              <p style="margin: 0">{{data.text}}</p>
          </div>
      </template>
  </notify-me>
</template>
```

If you'd like to use the component in a SPA set a single template on your layout application
and fire your notification through your central event bus.
Set any available prop for the component like this:

```html
<notify-me
    container="notification"
    status="alert-success"
    :width="300"
    close="bulma"
    :event-bus="bus"
>
      <template slot="content" scope="{data}">
          <div style="width: 100%; word-break: break-all; text-align: left">
              <h4><b>{{data.title}}</b></h4>
              <p style="margin: 0">{{data.text}}</p>
          </div>
      </template>
  </notify-me>
```

To show a notification just fire an event like this:
 
```js
<script>
import Notify from 'vue-notify-me'

const bus = new Vue();

export default {
  components: {
    'notify-me': Notify
  },
  data(){
      return {
          bus
      }
  },
  mounted(){
      this.bus.$emit('notify-me', {
        data: {
            title: 'The pygmy team :)',
            text: 'this is my notification'
        }
  
      });
  }
  
}
</script>
```

You may also add any available prop through the event emitter:

```js
this.bus.$emit('notify-me', {
    permanent: true,
    status: this.status,
    data: {
        title: 'The pygmy team :)',
        text: this.text
    }

});
```

Enjoy :)

---
_Source: https://npm.io/package/@duncte123/vue-notify-me · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._