Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/binarcode/vue-notifyjs
Minimalist 1kb Notification component
https://github.com/binarcode/vue-notifyjs
component notifications vue vuejs2
Last synced: about 1 month ago
JSON representation
Minimalist 1kb Notification component
- Host: GitHub
- URL: https://github.com/binarcode/vue-notifyjs
- Owner: BinarCode
- License: mit
- Created: 2017-06-28T13:25:08.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T01:01:06.000Z (about 2 years ago)
- Last Synced: 2025-01-09T20:50:06.985Z (about 1 month ago)
- Topics: component, notifications, vue, vuejs2
- Language: CSS
- Homepage:
- Size: 642 KB
- Stars: 170
- Watchers: 7
- Forks: 28
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:
- [jsFiddle demo](https://jsfiddle.net/z11fe07p/2879/)
- [Overlaping notifications](https://jsfiddle.net/z11fe07p/2878/)
- [Custom html content via components](https://jsfiddle.net/z11fe07p/2880/)
- [Custom animations](https://jsfiddle.net/z11fe07p/2882/)
- [Clears all current notifications](https://jsfiddle.net/z11fe07p/2883/)
### 3 themes supported
#### [Default theme](https://jsfiddle.net/z11fe07p/2879/)
#### [Material design theme](https://jsfiddle.net/z11fe07p/2884/)
#### [Now-ui theme](https://jsfiddle.net/z11fe07p/2886/)
## Install
```bash
yarn add vue-notifyjs
```
### CDN JS:
* https://unpkg.com/vue-notifyjs/dist/vue-notifyjs.min.js
* https://unpkg.com/vue-notifyjs/dist/vue-notifyjs.js
### CDN CSS:
* https://unpkg.com/vue-notifyjs/themes/default.css
* https://unpkg.com/vue-notifyjs/themes/material.css
* https://unpkg.com/vue-notifyjs/themes/now-ui.css
## Usage
```vue
import Notify from 'vue-notifyjs'
Vue.use(Notify)
export default {
methods: {
addNotification() {
this.$notify({
message: 'Welcome',
type: 'success'
})
}
}
}
```
**Note:** `` 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
```js
import Notify from 'vue-notifyjs'
Vue.use(Notify, {type: 'primary', timeout: 2000})
```
2. Dynamically via `setOptions` method
```js
this.$notifications.setOptions({
type: 'primary',
timeout: 2000,
horizontalAlign: 'right',
verticalAlign: 'top'
})
```
3. When using `$notify`
```js
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
```js
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)
```js
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
```js
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