Vue-notification-bell NPM

A Vue UI component for showing notifications. Demo Page

How To Install

npm install vue-notification-bell --save

How to use

Inside your vue files:

<template>
  <div id="your-component">
    <notification-bell />
    <!-- Using Component -->
  </div>
</template>
<script>
// Importing Component
import NotificationBell from 'vue-notification-bell'

export default {
  name: 'YourComponentName',
  // ...
  components: {
    NotificationBell // Registering Component
  }
  // ...
}
</script>

List of component props

:warning: Warning: You have to v-bind custom icon path with require function:

v-bind:icon="require(@/assets/path/to/icon.svg)" :heavy_check_mark:

:icon="require(@/assets/path/to/icon.svg)" :heavy_check_mark:

icon="@/assets/path/to/icon.svg" :x:

icon="require(@/assets/path/to/icon.svg)" :x:

propName	description	Type	default value
`size`	size of component in px	`number`	30
`count`	number of notifications. (zero or below not shown)	`number`	0
`upperLimit`	if `count` is bigger than this number notification shown as `+upperLimit`	`number`	99
`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`
`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`)
`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`)
`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`)
`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`)
`icon`	custom notification icon. you have to pass your SVG icon location by `require` function	`null` or `string`	`null` (showing the default bell icon)
`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`
`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)
`counterStyle`	shape of counter box. can be one of: `roundRectangle`, `rectangle`, `round`	`string`	`roundRectangle`
`counterBackgroundColor`	background color of counter box	`string`	`red`
`counterTextColor`	counter text color	`string`	`white`
`animated`	if true, counter increase/decrease by animation	`boolean`	`false`
`ding`	if true, a ding sound is played on new notifications	`boolean`	`false`
`prefixPlus`	if true, upper limit plus sign is shown as a prefix, otherwise it is shown as a postfix	`boolean`	`false`