Vuejs-Vue notification bell: vue-notification-bell - A Vue UI component for showing notifications.

vue-notification-bell

vue-notification-bell

npm version

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: You have to v-bind custom icon path with require function:

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

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

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

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

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

Contributing

Visit CONTRIBUTING Page

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build-bundle

Lints and fixes files

npm run lint

License

MIT

Comments

  • Wondering change icon as fontawesome
    Wondering change icon as fontawesome

    Nov 21, 2019

    Wondering change icon as fontawesome because i need same as many icon like messenger requests

    Reply
  • Planning to move from Vue 2 to Vue 3
    Planning to move from Vue 2 to Vue 3

    Jun 19, 2021

                                                                                                                                                                                                           
    Reply
  • Bump follow-redirects from 1.14.1 to 1.14.7
    Bump follow-redirects from 1.14.1 to 1.14.7

    Jan 13, 2022

    Bumps follow-redirects from 1.14.1 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 2ad9e82 Carry over Host header on relative redirects (#172)
    • 77e2a58 Release version 1.14.4 of the npm package.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Update README.md
    Update README.md

    Oct 16, 2018

    Update README.md

                                                                                                                                                                                                           
    Reply
  • 'notificationBell' ID appears many times
    'notificationBell' ID appears many times

    Jun 9, 2021

    In the same page, I have several notifications bells, which all of them with the same id "notificationBell". It's confusing and can create some javascript issues. Instead of that, why don't replace this id by a class, or allow to define the notification bell's ID with a param, like this ? <notification-bell :id=[my chosen unique ID] ... />

    Reply
  • Demo page
    Demo page

    Oct 21, 2018

    Add demo page.

                                                                                                                                                                                                            enhancement 
    Reply
  • Notification animation
    Notification animation

    Oct 20, 2018

    Add animation to the notification counter.

    enhancement 
    Reply
  • +5 or 5+
    +5 or 5+

    Oct 25, 2018

    Will that be better to put the plus after the number. I personally fill the +5 as some number plus five, whereas 5+ as there are some numbers after the 5

    feature 
    Reply
  • Hidden title when hover on compoment??
    Hidden title when hover on compoment??

    Apr 1, 2021

                                                                                                                                                                                                           
    Reply