Vue Material Dashboard Pro

Notifications

We crafted a custom plugin inspired by vue-notifyjs which is simple yet effective.

Usage

To use the notification plugin, import it from the components folder. Note that this is already done in src/main.js

import Notifications from './components/NotificationPlugin'
Vue.use(Notifications)

Trigger Notifications

Notifications

Notifications Places

Click to view notifications

<template>

  <div class="md-layout">
    <div class="md-layout-item">
      <notifications></notifications>
      <md-card>
        <md-card-header class="md-card-header-text md-card-header-green">
          <div class="card-text">
            <h4 class="title">Notifications</h4>
          </div>
        </md-card-header>
        <md-card-content>
          <div class="md-layout">
            <div class="md-layout-item md-size-100">
              <div class="places-buttons text-center">
                <h5 class="text-center">Notifications Places
                  <p class="category">Click to view notifications</p>
                </h5>
                <md-button class="md-primary" @click="notifyVue('top','left')">Top Left</md-button>
                <md-button class="md-primary" @click="notifyVue('top','center')">Top Center</md-button>
                <md-button class="md-primary" @click="notifyVue('top','right')">Top Right</md-button>
                <md-button class="md-primary" @click="notifyVue('bottom','left')">Bottom Left</md-button>
                <md-button class="md-primary" @click="notifyVue('bottom','center')">Bottom Center</md-button>
                <md-button class="md-primary" @click="notifyVue('bottom','right')">Bottom Right</md-button>
              </div>
            </div>
          </div>
        </md-card-content>
      </md-card>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      type: ['', 'info', 'success', 'warning', 'danger'],
      notifications: {
        topCenter: false
      }
    }
  },
  methods: {
    notifyVue (verticalAlign, horizontalAlign) {
      var color = Math.floor((Math.random() * 4) + 1)
      this.$notify(
        {
          message: 'Welcome to <b>Material Dashboard</b> - a beautiful freebie for every web developer.',
          icon: 'add_alert',
          horizontalAlign: horizontalAlign,
          verticalAlign: verticalAlign,
          type: this.type[color]
        })
    }
  }
}

</script>

Note: <notifications></notifications> can be declared only once anywhere in your app, preferably in your root component so the notification component is alive inside any other components.

Notification options

this.$notify(
  {
    message: 'Welcome to <b>Material Dashboard</b> - a beautiful freebie for every web developer.',
    icon: 'add_alert',
    horizontalAlign: horizontalAlign,
    verticalAlign: verticalAlign,
    type: this.type[color]
  })

Props

Notification (passed through the object sent to $notify method)

props: {
  message: String,
  icon: String,
  verticalAlign: {
    type: String,
    default: 'top'
  },
  horizontalAlign: {
    type: String,
    default: 'center'
  },
  type: {
    type: String,
    default: 'info'
  },
  timeout: {
    type: Number,
    default: 1200
  },
  timestamp: {
    type: Date,
    default: () => new Date()
  }
}

← Tables →