\n\nA Vue UI component for showing notifications. [Demo Page](https://mrastiak.github.io/vue-notification-bell/)\n\n## How To Install\n\n```\nnpm install vue-notification-bell --save\n```\n\n## How to use\n\nInside your vue files:\n\n```vue\n\n
\n \n \n
\n\n\n```\n\n## List of component props\n\n:warning: Warning: You have to v-bind custom icon path with `require` function:\n\n`v-bind:icon=\"require(@/assets/path/to/icon.svg)\"` :heavy_check_mark:\n\n`:icon=\"require(@/assets/path/to/icon.svg)\"` :heavy_check_mark:\n\n`icon=\"@/assets/path/to/icon.svg\"` :x:\n\n`icon=\"require(@/assets/path/to/icon.svg)\"` :x:\n\n| propName | description | Type | default value |\n| --------- | ------------ | ---- | -------------- |\n| `size` | size of component in px | `number` | 30 |\n| `count` | number of notifications. (zero or below not shown) | `number` | 0 |\n| `upperLimit` | if `count` is bigger than this number notification shown as `+upperLimit` | `number` | 99 |\n| `counterLocation` | position of counter box in component. can be one of: `upperRight`, `lowerRight`, `upperLeft`, `lowerLeft`, `top`, `left`, `bottom`, `right` and `center`. **If you set `top` or `left` prop, this prop will be disabled** | `string` | `upperRight` |\n| `top` | If you want to set a custom location for counterBox, you can set top distance by this prop. You have to pass value with dimension (e.g. `10px` or `20%`). If you set this prop the `counterLocation` prop will be disabled | `null` or `string` | `null` (Location is calculated by `counterLocation`) |\n| `left` | If you want to set a custom location for counterBox, you can set left distance by this prop. You have to pass value with dimension (e.g. `10px` or `20%`). If you set this prop the `counterLocation` prop will be disabled | `null` or `string` | `null` (Location is calculated by `counterLocation`) |\n| `fontSize` | Custom font size for counter. You have to pass value with dimension. e.g. 20px or 1.5em | `null` or `string` | `null` (Font size is calculated by `size`) |\n| `counterPadding` | Custom padding for counter. You have to pass value with dimension. e.g. 20px or 1.5em | `null` or `string` | `null` (Padding is calculated by `size`) |\n| `icon` | custom notification icon. you have to pass your SVG icon location by `require` function | `null` or `string` | `null` (showing the default bell icon) |\n| `iconColor` | color of the bell icon. **This property only works with default icon. if you are using custom `icon`, you have to handle color of the icon in your SVG file** | `string` | `black` |\n| `disabledIcon` | If you want to show a different Icon when you have zero notification. you can use this prop. pass SVG icon location by `require` function. **this prop only works if you are using custom `icon` too** | `null` or `string` | `null` (showing the default bell icon) |\n| `counterStyle` | shape of counter box. can be one of: `roundRectangle`, `rectangle`, `round` | `string` | `roundRectangle` |\n| `counterBackgroundColor` | background color of counter box | `string` | `red` |\n| `counterTextColor` | counter text color | `string` | `white` |\n| `animated` | if true, counter increase/decrease by animation | `boolean` | `false` |\n| `ding` | if true, a ding sound is played on new notifications | `boolean` | `false` |\n| `prefixPlus` | if true, upper limit plus sign is shown as a **prefix**, otherwise it is shown as a postfix | `boolean` | `false` |\n\n## Contributing\n\nVisit [CONTRIBUTING Page](https://github.com/Carrene/vue-notification-bell/blob/master/CONTRIBUTING.md)\n\n### Compiles and hot-reloads for development\n\n```\nnpm run serve\n```\n\n### Compiles and minifies for production\n\n```\nnpm run build-bundle\n```\n\n### Lints and fixes files\n\n```\nnpm run lint\n```\n\n### License\n\nMIT\n","readmeFilename":"README.md","homepage":"https://github.com/mrastiak/vue-notification-bell","keywords":["vue","vue.js","vuejs","component","notification"],"author":{"name":"Mahdi Aryayi","email":"mahdiaryayi@gmail.com"},"bugs":{"url":"https://github.com/mrastiak/vue-notification-bell/issues"},"license":"MIT","contributors":[{"name":"Mahdi Aryayi","email":"mahdiaryayi@gmail.com"},{"name":"Armin Ayari","email":"armin.ayari@gmail.com"},{"name":"Shirin Eghrari","email":"eghrarish@gmail.com"}]}
![\"vue-notification-bell\"](\"https://github.com/maryayi/vue-notification-bell/blob/master/public/images/bell-demo.png?raw=true\")
\n \n![\"npm](\"https://badge.fury.io/js/vue-notification-bell.svg\"){kind=icon}
\n