https://github.com/koumoul-dev/notif-vue
Small utility to manage notifications in vuejs applications.
https://github.com/koumoul-dev/notif-vue
Last synced: 6 months ago
JSON representation
Small utility to manage notifications in vuejs applications.
- Host: GitHub
- URL: https://github.com/koumoul-dev/notif-vue
- Owner: koumoul-dev
- License: mit
- Created: 2018-08-07T08:55:54.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-08-07T09:10:04.000Z (about 7 years ago)
- Last Synced: 2025-02-16T10:15:40.129Z (8 months ago)
- Language: JavaScript
- Size: 52.7 KB
- Stars: 0
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# notif-vue
Small utility to manage notifications in vuejs applications.
## Example integration
In you store:
```
import Vue from 'vue'
import Vuex from 'vuex'
import {notificationStore} from './notif-vue'
Vue.use(Vuex)
export default () => {
return new Vuex.Store({
modules: {notification: notificationStore},
actions: {
async doStuff() {
try {
await ...doing stuff
dispatch('notification/queue', 'Stuff done')
} catch(error) {
dispatch('notification/queue', {error, msg: 'Error while doing stuff'})
}
}
}
})
}
```
In your page (example with [vuetify](https://vuetifyjs.com)):
```
...
...
{{ notif.msg }}
{{ notif.errorMsg }}
close
import {mapState, mapGetters} from 'vuex'
export default {
computed: {
...mapState('notification', ['notif'])
}
}
body .application {
.notification .v-snack__content {
height: auto;
p {
margin-bottom: 4px;
margin-top: 4px;
}
}
}
```