All Projects → BinarCode → Vue Notifyjs

BinarCode / Vue Notifyjs

Licence: mit
Minimalist 1kb Notification component

Projects that are alternatives of or similar to Vue Notifyjs

Vuesax
New Framework Components for Vue.js 2
Stars: ✭ 5,293 (+3208.13%)
Mutual labels:  component, vuejs2
Vue Flip
A Vue.js component to flip elements.
Stars: ✭ 37 (-76.87%)
Mutual labels:  component, vuejs2
Vue.d3.tree
Vue component to display tree based on D3.js layout.
Stars: ✭ 726 (+353.75%)
Mutual labels:  component, vuejs2
Vue Tagsinput
A simple tags input with typeahead (autocomplete) built with Vue.js 2.
Stars: ✭ 375 (+134.38%)
Mutual labels:  component, vuejs2
Xmui
基于vue2,为公司产品打(zao)造(lun)的(zi)可复用UI组件,文档:
Stars: ✭ 94 (-41.25%)
Mutual labels:  component, vuejs2
Vue Swatches
🎨 Help the user picking beautiful colors!
Stars: ✭ 456 (+185%)
Mutual labels:  component, vuejs2
Vue Share Buttons
🔗A set of social buttons for Vue.js
Stars: ✭ 34 (-78.75%)
Mutual labels:  component, vuejs2
Vue Marquee Text Component
[CSS GPU Animation] Marquee Text for vuejs
Stars: ✭ 226 (+41.25%)
Mutual labels:  component, vuejs2
Vue Standalone Component
Vuejs template to build components with livecoding, tests, documentation and demos
Stars: ✭ 75 (-53.12%)
Mutual labels:  component, vuejs2
Stf Vue Select
stf vue select - most flexible and customized select
Stars: ✭ 61 (-61.87%)
Mutual labels:  component, vuejs2
vue-notification-bell
Vue.js notification bell component.
Stars: ✭ 64 (-60%)
Mutual labels:  notifications, vuejs2
Vue Pdf
vue.js pdf viewer
Stars: ✭ 1,700 (+962.5%)
Mutual labels:  component, vuejs2
Vue Form Json Schema
Create forms using JSON schema. Bring your components!
Stars: ✭ 253 (+58.13%)
Mutual labels:  component, vuejs2
Toastnotifications
Toast notifications for WPF allows you to create and display rich notifications in WPF applications. It's highly configurable with set of built-in options like positions, behaviours, themes and many others. It's extendable, it gives you possibility to create custom and interactive notifications in simply manner.
Stars: ✭ 507 (+216.88%)
Mutual labels:  notifications, component
Vue Element Loading
⏳ Loading inside a container or full screen for Vue.js
Stars: ✭ 234 (+46.25%)
Mutual labels:  component, vuejs2
Vue Snotify
Vuejs 2 Notification Center
Stars: ✭ 755 (+371.88%)
Mutual labels:  notifications, vuejs2
Vue Easytable
🍉 Table Component/ Data Grid / Data Table.Support Virtual Scroll,Column Fixed,Header Fixed,Header Grouping,Filter,Sort,Cell Ellipsis,Row Expand,Row Checkbox ...
Stars: ✭ 2,501 (+1463.13%)
Mutual labels:  component, vuejs2
V Bar
The virtual responsive crossbrowser scrollbar component for VueJS 2x
Stars: ✭ 216 (+35%)
Mutual labels:  component, vuejs2
Vue Form Wizard
Vue.js 2 wizard
Stars: ✭ 1,053 (+558.13%)
Mutual labels:  component, vuejs2
Vue Highcharts
The Component of Vue 2.x for highcharts
Stars: ✭ 112 (-30%)
Mutual labels:  component, vuejs2

vue-notifyjs

Minimalist notification component for Vue 2.x

Why use it?

  • Small: 1.5kb (minified & gzipped), 4kb (minified)
  • Simple this.$notify({message:'My message'})
  • Has multiple themes
  • The animations can be customized through Vue transitions
  • Can be used both through npm and as a script tag

Demos:

3 themes supported

Default theme

Material design theme

Now-ui theme

Install

yarn add vue-notifyjs

CDN JS:

CDN CSS:

Usage

<template>
  <notifications></notifications>
</template>

<script>
import Notify from 'vue-notifyjs'
Vue.use(Notify)

export default {
   methods: {
    addNotification() {
      this.$notify({
        message: 'Welcome',
        type: 'success'
      })
    }
  }
}
</script>
<!-- import styles -->
<style src="vue-notifyjs/themes/default.css"></style>

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

You can set notification options in 3 ways

  1. Upon plugin initialization
import Notify from 'vue-notifyjs'
Vue.use(Notify, {type: 'primary', timeout: 2000})
  1. Dynamically via setOptions method
this.$notifications.setOptions({
  type: 'primary', 
  timeout: 2000,
  horizontalAlign: 'right',
  verticalAlign: 'top'
})
  1. When using $notify
this.$notify({
  message: 'Welcome',
  type: 'success'
})

Note: Options sent through this.$notify will override default options and will have higher priority than default options.

Props

Notifications

transitionName: {
 type:String,
 default:'list'
},
transitionMode: {
 type:String,
 default:'in-out'
},
overlap: {
 type: Boolean,
 default: false
}

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

props: {
  message: String,
  title: String,
  icon: String,
  verticalAlign: {
    type: String,
    default: 'top' // top | bottom
  },
  horizontalAlign: {
    type: String,
    default: 'center' // right | center | left
  },
  type: {
    type: String,
    default: 'info' // info | warning | danger | success | primary
  },
  timeout: {
    type: Number,
    default: 5000
  },
  timestamp: {
    type: Date,
    default: () => new Date()
  },
  component: {  //is rendered instead of notification message
    type: [Object, Function]
  },
  showClose: {
      type: Boolean,
      default: true
  },
  closeOnClick: {
      type: Boolean,
      default: true
  },
  clickHandler: Function,
},

Methods

clear() - Clears all current notifications

this.$notifications.clear();

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].