A clean and simple Notification Component by Vue.js

vue-yummy-notie

a clean and simple notification component for vue.js. Deeply inspired by Notie.js. Demo

Upgrade to Vue 2.3+

I changed those files (build folder and config folder) related to the new vue-cli template, and Notification.vue、main.js、index.html files changed related to the Upgrade Guide, see Migration from Vue 1.x.

How to use

Components are one of the most powerful features of Vue.js. Yummy notie is a component which can help you to alert users. Since it is a component instead of a plugin, all you need to do is import the module and pass options with props or vuex.

Installation

The sample was set up by vue-cli’s webpack template. You need to import Notification.vue in the component folder into your project. Then you can regist it and use it in the HTML template.

<template>
  <notification
  :options.sync="options"
  :show.sync="showNotification"></notification>
</template>

<script>
import Notification from './components/Notification'

export default {
  components: { Notification },
  data () {
    return {
      showNotification: false,
      options: {}
    }
  }
}
</script>

Make a notice

We need to pass two data into Notification.vue with props or vuex. Data ‘show’ controls the display of the notice. You need to set show = trueto init a notice, and also pass the content you want to show by setting ‘options’.

options

options: {
  autoClose: true,
  backgroundColor: '#769FCD',
  barColor: '#415f77',
  countdownBar: true,
  content: 'The content of the notification.',
  showTime: 5000,
  textColor: '#fff'
}

Download Details:

Author: Yuyz0112

Live Demo: http://lab.myriptide.com/vue-notie/

GitHub: https://github.com/Yuyz0112/vue-notie

#vuejs #javascript #vue-js #vue