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