Nuxt Notify
-Pro Component
The Nuxt Notify is a beautiful, responsive, customisable, accessible replacement for Javascript’s popup boxes. This plugin helps to turn standard Nuxt alerts into "growl" like notifications.
Keep reading our Nuxt Notify examples and learn how to use this plugin.
Initialization
You can trigger notifications both from template and javascript via $notify
or this.$notify
method.
<notifications></notifications>
Example
<div>
<base-button @click="notifyTopLeft">Top left</base-button>
<base-button @click="notifyTopCenter">Top center</base-button>
<base-button @click="notifyTopRight">Top right</base-button>
<base-button @click="notifyBottomLeft">Bottom left</base-button>
<base-button @click="notifyBottomCenter">Bottom center</base-button>
<base-button @click="notifyBottomRight">Bottom right</base-button>
</div>
<script>
export default {
methods: {
notifyTopRight() {
this.$notify({verticalAlign: 'top', horizontalAlign: 'right', message: 'Top right'});
},
notifyTopLeft() {
this.$notify({verticalAlign: 'top', horizontalAlign: 'left', message: 'Top left'});
},
notifyTopCenter() {
this.$notify({verticalAlign: 'top', horizontalAlign: 'center', message: 'Top center'});
},
notifyBottomLeft() {
this.$notify({verticalAlign: 'bottom', horizontalAlign: 'left', message: 'Bottom left'});
},
notifyBottomCenter() {
this.$notify({verticalAlign: 'bottom', horizontalAlign: 'center', message: 'Bottom center'});
},
notifyBottomRight() {
this.$notify({verticalAlign: 'bottom', horizontalAlign: 'right', message: 'Bottom center'});
}
}
}
</script>
Colors
<div>
<base-button @click="$notify('Simple notification')">Simple</base-button>
<base-button @click="$notify({type: 'primary', message: 'Primary Notification'})">Primary</base-button>
<base-button @click="$notify({type: 'info', message: 'Info Notification'})">Info</base-button>
<base-button @click="$notify({type: 'success', message: 'Success Notification'})">Success</base-button>
<base-button @click="$notify({type: 'warning', message: 'Warning Notification'})">Warning</base-button>
<base-button @click="$notify({type: 'danger', message: 'Danger Notification'})">Danger</base-button>
</div>
Notification props
PROP NAME | TYPE | DEFAULT | DESCRIPTION |
---|---|---|---|
message | String | N/A | |
title | String | N/A | Notification title |
icon | String | N/A | Notification icon |
verticalAlign | String | top | Vertical alignment of notification (top/bottom) |
horizontalAlign | String | right | Horizontal alignment of notification (left/center/right) |
type | String | info | Notification type of notification (default/info/primary/danger/warning/success) |
timeout | Number | 5000 | Notification timeout (closes after X milliseconds). Default is 5000 (5s) |
timestamp | Date | Thu Apr 16 2020 14:51:53 GMT+0300 (Ora de vară a Europei de Est) | Notification timestamp (used internally to handle notification removal correctly) |
component | Object / Function | N/A | Custom content component. Cane be a .vue component or render function |
showClose | Boolean | true | Whether to show close button |
closeOnClick | Boolean | true | Whether to close notification when clicking it’ body |
clickHandler | Function | N/A | Custom notification click handler |