Notification

Usage

First of all, add the Notifications component to your app, preferably inside app.vue.

<template>
  <div>
    <UContainer>
      <NuxtPage />
    </UContainer>

    <UNotifications />
  </div>
</template>

This component will render the notifications at the bottom right of the screen by default. You can configure its behavior in the app.config.ts through ui.notifications:

export default defineAppConfig({
  ui: {
    notifications: {
      // Show toasts at the top right of the screen
      position: 'top-0 bottom-[unset]'
    }
  }
})

Then, you can use the useToast composable to add notifications to your app:

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

When using toast.add, this will push a new notification to the stack displayed in <UNotifications />. All the props of the Notification component can be passed to toast.add.

<script setup lang="ts">
const toast = useToast()

onMounted(() => {
  toast.add({
    id: 'update_downloaded',
    title: 'Update downloaded.',
    description: 'It will be installed on restart. Restart now?',
    icon: 'i-octicon-desktop-download-24',
    timeout: 0,
    actions: [{
      label: 'Restart',
      click: () => {

      }
    }]
  })
})
</script>

You can also use the Notification component directly in your app as an alert for example.

Title

Pass a title to your Notification.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Description

You can add a description in addition of the title.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Icon

Use any icon from Iconify by setting the icon prop by using this pattern: i-{collection_name}-{icon_name} or change it globally in ui.notification.default.icon.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Avatar

Use the avatar prop as an object and configure it with any of its props.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Timeout

Use the timeout prop to configure how long the Notification will remain. The default value is 5000, set it to 0 to disable the timeout. The pauseTimeoutOnHover prop (true by default) controls whether hovering the notification should pause the timeout.

You will see a progress bar at the bottom of the Notification which will indicate the remaining time. When hovering the Notification, the progress bar will be paused if pauseTimeoutOnHover is enabled; otherwise, it won't stop.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Style

Use the color prop to change the progress and icon color of the Notification.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Click

Use the click prop to execute a function when the Notification is clicked.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Callback

Use the callback prop to execute a function when the Notification expires.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Close

Use the close-button prop to hide or customize the close button on the Notification.

You can pass all the props of the Button component to customize it through the close-button prop or globally through ui.notification.default.closeButton.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Actions

Use the actions prop to add actions to the Notification.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Like for closeButton, you can pass all the props of the Button component inside the action or globally through ui.notification.default.actionButton.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Actions will render differently whether you have a description set.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Slots

title / description

Use the #title and #description slots to customize the Notification.

This can be handy when you want to display HTML content. To achieve this, you can define those slots in the top-level <UNotifications /> component in your app.vue and use the v-html directive.

<template>
  <UNotifications>
    <template #title="{ title }">
      <span v-html="title" />
    </template>

    <template #description="{ description }">
      <span v-html="description" />
    </template>
  </UNotifications>
</template>

This way, you can use HTML tags in the title and description props when using useToast.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Props

Config

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}