Open
Description
From the readme, to show the notification we can use
this.$notify({
message: 'Welcome',
type: 'success'
})
how to do this in .js files? e.g I have api.js and when the API call returns error, I want to show the notification.
Tried these but it doesn't work
import Vue from 'vue'
// some API call
Vue.prototype.$notify({message: 'some error', type: 'danger'})
/* Cannot read property 'notify' of undefined */
import Vue from 'vue'
import Notify from 'vue-notifyjs'
import '@/assets/css/themify-icons.css'
import 'vue-notifyjs/themes/default.css'
// some API call
Notify({message: 'some error', type: 'danger'})
/* vue_notifyjs__WEBPACK_IMPORTED_MODULE_2___default(...) is not a function */
Also I'm thinking of putting the initialization in a single js file (notification.js), which then imported to main.js
import Vue from 'vue'
import Notify from 'vue-notifyjs'
import '@/assets/css/themify-icons.css'
import 'vue-notifyjs/themes/default.css'
Vue.use(Notify, {
timeout : 3000,
verticalAlign : 'bottom',
horizontalAlign : 'right',
})
Vue.prototype.$notif = {
success: (message, title = 'Success') => {
Notify({
message,
title,
type : 'success',
icon : 'fas fa-check-circle fa-fw',
})
},
error: (message, title = 'Error') => {
Notify({
message,
title,
type : 'danger',
icon : 'fas fa-times-circle fa-fw',
})
},
warning: (message, title = 'Warning') => {
Notify({
message,
title,
type : 'warning',
icon : 'fas fa-exclamation-circle fa-fw',
})
},
info: (message, title = 'Info') => {
Notify({
message,
title,
type : 'info',
icon : 'fas fa-info-circle fa-fw',
})
},
}
export default {}
So that in the template I can just call
this.$notif.success("message")
or in the Vuex modules / api.js
Vue.prototype.$notif.error(error.response.data)
Metadata
Metadata
Assignees
Labels
No labels