Vue Simple Notify
Simple notify handler component for Vue.js.
Demo
Quick Start
NPM
Install the package:
npm install vue-simple-notify
Register the component:
import Vue from 'vue'
import VueSimpleNotify from 'VueSimpleNotify'
Vue.component('VueSimpleNotify', VueSimpleNotify)Use the component:
<vue-simple-notify :items="[]"></vue-simple-notify>CDN
Include styles:
<link href="https://unpkg.com/vue-simple-notify/dist/vue-simple-notify.min.css">Include scripts:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-simple-notify/dist/vue-simple-notify.min.js"></script>Register the component:
Vue.component('VueSimpleNotify', VueSimpleNotify.VueSimpleNotify)Use the component:
<vue-simple-notify :items="[]"></vue-simple-notify>Examples
Examples of use for this component:
- Using CDN
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/vue-simple-notify/dist/vue-simple-notify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<vue-simple-notify :items="[]"></vue-simple-notify>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-simple-notify/dist/vue-simple-notify.min.js"></script>
<script>
Vue.component('VueSimpleNotify', VueSimpleNotify.VueSimpleNotify)
new Vue().$mount('#app')
</script>
</body>
</html>- Adding items
<vue-simple-notify
:items="items"
></vue-simple-notify>new Vue({
el: '#app',
components: { VueSimpleNotify },
data () {
return {
items: [
{
message: 'example of error message.'
},
{
type: 'Success',
color: '#2ecc71',
dismissable: false,
message: 'example of success message.'
}
]
}
}
})- Setting the delay between notifications
<vue-simple-notify
:items="items"
:delay="delay"
></vue-simple-notify>new Vue({
el: '#app',
components: { VueSimpleNotify },
data () {
return {
items: [{}, {}, {}],
delay: 1000
}
}
})- Listening to the @onDismiss event
<vue-simple-notify
:items="items"
@onDismiss="onDismiss"
></vue-simple-notify>new Vue({
el: '#app',
components: { VueSimpleNotify },
data () {
return {
items: [{}]
}
},
methods: {
onDismiss: function onDismiss (index) {
console.log(index)
}
}
})- Removing items from the component
<vue-simple-notify
:items="items"
ref="vsn"
></vue-simple-notify>const vueSimpleNotify = new Vue({
el: '#app',
components: { VueSimpleNotify },
data () {
return {
items: [{}, {}, {}]
}
}
}).$refs.vsn
vueSimpleNotify.dismiss(1)- Removing all elements
<vue-simple-notify
:items="items"
ref="vsn"
></vue-simple-notify>const vueSimpleNotify = new Vue({
el: '#app',
components: { VueSimpleNotify },
data () {
return {
items: [{}, {}, {}]
}
}
}).$refs.vsn
vueSimpleNotify.clear()Props
Available props in this component:
:items
Description: Notifications array.
Type: Array
Required: true
Default: null
<vue-simple-notify :items="[]">:delay
Description: Time interval between notifications when displayed.
Type: Number
Default: 500
<vue-simple-notify :items="[]" :delay="1000">Events
Available events in this component:
@onDismiss
It is triggered each time a notification is dismissed.
onDismiss: function onDismiss (index) { }| Attribute | Type | Description |
|---|---|---|
| index | Number |
Notification index. |
<vue-simple-notify :items="[]" :delay="1000" @onDismiss="onDismiss">Methods
Available methods in this component:
dismiss
Dismiss a notification by a index.
vueSimpleNotify.dismiss(index)| Attribute | Type | Description | Required |
|---|---|---|---|
| index | Number |
Notification index. | true |
clear
Clear all notifications.
vueSimpleNotify.clear()Tests
Clone the repository:
git clone https://github.com/Josantonius/vue-simple-notify.git vue-simple-notify
Go to the directory:
cd vue-simple-notify
Install dependencies:
npm install
Run unit tests:
npm run test
Run ESLint to ensure that code style is compatible with Standar JavaScript:
npm run lint
Run serve with hot reload:
npm run dev
Build distribution with minification:
npm run bundle
Build demo for production with minification:
npm run build
Run all the above:
npm run finish
Sponsor
If this project helps you to reduce your development time, you can sponsor me to support my open source work 😊
License
This repository is licensed under the MIT License.
Copyright © 2018-2022, Josantonius