Docs
Purchase now

Notifications

We created a custom notification plugin so you can easily display pretty notifications in your dashboard.

The plugin is globally registered inside blackDashboard.js file and you can use it everywhere in the dashboard.

In order for the plugin to work, we need to declare this piece of code in the top most component of our app. This is done inside App.vue file.

You can trigger notifications both from template and javascript via $notify or this.$notify method.

<notifications></notifications>

Example

<div>
  <base-button @click="$notify('Simple notification')">Simple</base-button>
  <base-button @click="$notify({type: 'primary', message: 'Primary Notification'})">Primary</base-button>
  <base-button @click="$notify({type: 'info', message: 'Info Notification'})">Info</base-button>
  <base-button @click="$notify({type: 'success', message: 'Success Notification'})">Success</base-button>
  <base-button @click="$notify({type: 'warning', message: 'Warning Notification'})">Warning</base-button>
  <base-button @click="$notify({type: 'danger', message: 'Danger Notification'})">Danger</base-button>
</div>
Show Code

Notification position

<div>
  <base-button @click="notifyTopLeft">Top left</base-button>
  <base-button @click="notifyTopCenter">Top center</base-button>
  <base-button @click="notifyTopRight">Top right</base-button>
  
  <base-button @click="notifyBottomLeft">Bottom left</base-button>
  <base-button @click="notifyBottomCenter">Bottom center</base-button>
  <base-button @click="notifyBottomRight">Bottom right</base-button>
</div>

<script>
export default {
  methods: {
    notifyTopRight() {
      this.$notify({verticalAlign: 'top', horizontalAlign: 'right', message: 'Top right'});
    },
    notifyTopLeft() {
      this.$notify({verticalAlign: 'top', horizontalAlign: 'left', message: 'Top left'});
    },
    notifyTopCenter() {
      this.$notify({verticalAlign: 'top', horizontalAlign: 'center', message: 'Top center'});
    },
    notifyBottomLeft() {
      this.$notify({verticalAlign: 'bottom', horizontalAlign: 'left', message: 'Bottom left'});
    },
    notifyBottomCenter() {
      this.$notify({verticalAlign: 'bottom', horizontalAlign: 'center', message: 'Bottom center'});
    },
    notifyBottomRight() {
      this.$notify({verticalAlign: 'bottom', horizontalAlign: 'right', message: 'Bottom center'});
    }
  }
}
</script>
Show Code

Notification props

Prop Name Type Default Description
message String N/A
title String N/A Notification title
icon String N/A Notification icon
verticalAlign String top Vertical alignment of notification (top|bottom)
horizontalAlign String right Horizontal alignment of notification (left|center|right)
type String info Notification type of notification (default|info|primary|danger|warning|success)
timeout Number 5000 Notification timeout (closes after X milliseconds). Default is 5000 (5s)
timestamp Date Sun Apr 06 2025 11:07:33 GMT+0000 (Coordinated Universal Time) Notification timestamp (used internally to handle notification removal correctly)
component Object | Function N/A Custom content component. Cane be a `.vue` component or render function
showClose Boolean true Whether to show close button
closeOnClick Boolean true Whether to close notification when clicking it' body
clickHandler Function N/A Custom notification click handler

← Perfect scrollbar →