FxNotification

A global notification that appears as a floating element at the corner of the page.

Methods

Calling Notification or this.$notify returns the current Notification instance. To manually close the instance, call its close method.

Method	Description
close	Close the current Notification

Basic Usage

General purpose notification bar.

Auto-close Won't auto-close

The Notification component provides notification functionality. FxUI registers the $notify method which accepts an options literal parameter. At its simplest, you can set the title and message fields to configure the notification's title and content. By default, the Notification component will automatically close after a period of time, but you can control the duration via the duration parameter. Setting it to 0 will disable auto-closing. Note: duration accepts a Number in milliseconds, defaulting to 4500.

<template>
  <fx-button
    plain
    @click="open1">
    Auto-close
  </fx-button>
  <fx-button
    plain
    @click="open2">
    Won't auto-close
    </fx-button>
</template>

<script>
  export default {
    methods: {
      open1() {
        const h = this.$createElement;

        this.$notify({
          title: 'Title',
          message: h('i', { style: 'color: teal'}, 'This is a reminder text. This is a reminder text. This is a reminder text. This is a reminder text.')
        });
      },

      open2() {
        this.$notify({
          title: 'Info',
          message: 'This is a message that will not automatically close',
          duration: 0
        });
      }
    }
  }
</script>

Expand Copy Copy

With Type

Displays system messages with icons for different states: success, warning, info, and error.

Success Warning Info Error

FxUI provides four notification types: success, warning, info, and error. Set via the type field (other values will be ignored). Convenience methods are also available for each type, allowing direct calls like open3 and open4 without specifying type.

<template>
  <fx-button
    plain
    @click="open1">
    Success
  </fx-button>
  <fx-button
    plain
    @click="open2">
    Warning
  </fx-button>
  <fx-button
    plain
    @click="open3">
    Info
  </fx-button>
  <fx-button
    plain
    @click="open4">
    Error
  </fx-button>
</template>

<script>
  export default {
    methods: {
      open1() {
        this.$notify({
          title: 'Success',
          message: 'This is a success message',
          type: 'success'
        });
      },

      open2() {
        this.$notify({
          title: 'Warning',
          message: 'This is a warning message',
          type: 'warning'
        });
      },

      open3() {
        this.$notify.info({
          title: 'Info',
          message: 'This is an info message'
        });
      },

      open4() {
        this.$notify.error({
          title: 'Error',
          message: 'This is an error message'
        });
      }
    }
  }
</script>

Expand Copy Copy

Custom Position

Allows notifications to appear from any corner of the screen.

Top-right Bottom-right Bottom-left Top-left

Use the position property to define the notification's display position. Supported values: top-right, top-left, bottom-right, bottom-left. Defaults to top-right.

<template>
  <fx-button
    plain
    @click="open1">
    Top-right
  </fx-button>
  <fx-button
    plain
    @click="open2">
    Bottom-right
  </fx-button>
  <fx-button
    plain
    @click="open3">
    Bottom-left
  </fx-button>
  <fx-button
    plain
    @click="open4">
    Top-left
  </fx-button>
</template>

<script>
  export default {
    methods: {
      open1() {
        this.$notify({
          title: 'Custom Position',
          message: 'Message from top-right'
        });
      },

      open2() {
        this.$notify({
          title: 'Custom Position',
          message: 'Message from bottom-right',
          position: 'bottom-right'
        });
      },

      open3() {
        this.$notify({
          title: 'Custom Position',
          message: 'Message from bottom-left',
          position: 'bottom-left'
        });
      },

      open4() {
        this.$notify({
          title: 'Custom Position',
          message: 'Message from top-left',
          position: 'top-left'
        });
      }
    }
  }
</script>

Expand Copy Copy

With Offset

Adds offset to the notification position.

With Offset

The offset property allows setting a pixel offset from the screen edge. Note: All Notification instances should share the same offset value at any given time.

<template>
  <fx-button
    plain
    @click="open">
    With Offset
  </fx-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$notify({
          title: 'Offset',
          message: 'This is a message with offset',
          offset: 100
        });
      }
    }
  }
</script>

Expand Copy Copy

Using HTML Fragments

The message property supports HTML fragments.

Use HTML

Set dangerouslyUseHTMLString to true to process message as HTML.

<template>
  <fx-button
    plain
    @click="open">
    Use HTML
  </fx-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$notify({
          title: 'HTML',
          dangerouslyUseHTMLString: true,
          message: '<strong>This is <i>HTML</i> content</strong>'
        });
      }
    }
  }
</script>

Expand Copy Copy

:::warning While the message property supports HTML fragments, dynamically rendering arbitrary HTML on websites is dangerous as it may lead to XSS attacks (opens new window). When dangerouslyUseHTMLString is enabled, ensure the message content is trusted. Never assign user-submitted content to the message property. :::

Hide Close Button

Option to hide the close button.

Hide Close Button

Set showClose to false to hide the close button.

<template>
  <fx-button
    plain
    @click="open">
    Hide Close Button
  </fx-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$notify.success({
          title: 'Info',
          message: 'This message has no close button',
          showClose: false
        });
      }
    }
  }
</script>

Expand Copy Copy

Global Method

FxUI adds the global method $notify to Vue.prototype, making it available in Vue instances as shown throughout this page.

Options

Parameter	Description	Type	Options	Default
title	Title	string	—	—
message	Content text	string/Vue.VNode	—	—
dangerouslyUseHTMLString	Whether message is treated as HTML fragment	boolean	—	false
type	Notification type	string	success/warning/info/error	—
iconClass	Custom icon class (overridden by type)	string	—	—
customClass	Custom class name	string	—	—
duration	Display duration in ms (0 means no auto-close)	number	—	4500
position	Custom position	string	top-right/top-left/bottom-right/bottom-left	top-right
showClose	Whether to show close button	boolean	—	true
onClose	Callback when closed	function	—	—
onClick	Callback when clicked	function	—	—
offset	Offset distance (all instances should share same offset)	number	—	0