N Notification

Naive UI Notification Component

If something is to be told to somebody. Notification component displays global notification messages at the corner of the page.

When to Use

Use this component when:

• System notifications: Show success, error, warning, or info messages
• Operation feedback: Provide feedback after user actions
• Background process alerts: Notify users about async operations
• Persistent messages: Display important information that needs attention

When to Invoke

Invoke this skill when:

• User needs to implement toast notifications
• User wants to show success/error/warning messages
• User needs notification system with different types
• User asks about notification placement options
• User wants to customize notification behavior

Features

• Multiple Types: Support for info, success, warning, error types
• Flexible Placement: Configurable position on screen
• Dynamic Content: Can update notification content after creation
• Auto Close: Configurable duration for auto-dismiss
• Max Limit: Control maximum number of visible notifications

API Reference

NotificationProvider Props

notification Injection Methods

NotificationOption Properties

Basic Usage

Setup Provider

<!-- App.vue -->
<template>
  <n-notification-provider>
    <content />
  </n-notification-provider>
</template>

Basic Notification

<template>
  <n-space>
    <n-button @click="handleClick1">
      Wouldn't it be Nice
    </n-button>
    <n-button @click="handleClick2">
      Satisfaction
    </n-button>
  </n-space>
</template>

<script setup>
import { useNotification } from 'naive-ui'

const notification = useNotification()

const handleClick1 = () => {
  notification.create({
    title: 'Wouldn't it be Nice',
    content: 'From the Beach Boys',
    duration: 3000
  })
}

const handleClick2 = () => {
  notification.create({
    title: 'Satisfaction',
    content: 'From the Rolling Stones',
    duration: 3000
  })
}
</script>

Different Types

<template>
  <n-space>
    <n-button @click="notify('info')">Info</n-button>
    <n-button @click="notify('success')">Success</n-button>
    <n-button @click="notify('warning')">Warning</n-button>
    <n-button @click="notify('error')">Error</n-button>
  </n-space>
</template>

<script setup>
import { useNotification } from 'naive-ui'

const notification = useNotification()

const notify = (type) => {
  notification[type]({
    content: `${type} message`,
    duration: 3000
  })
}
</script>

Common Patterns

Change Content Dynamically

<template>
  <n-space>
    <n-button @click="open">Open it</n-button>
    <n-button :disabled="!nRef" @click="change">Change it</n-button>
  </n-space>
</template>

<script setup>
import { ref } from 'vue'
import { useNotification } from 'naive-ui'

const notification = useNotification()
const nRef = ref(null)

const open = () => {
  nRef.value = notification.create({
    title: 'Initial Title',
    content: 'Initial Content'
  })
}

const change = () => {
  if (nRef.value) {
    nRef.value.title = 'Changed Title'
    nRef.value.content = 'Changed Content'
  }
}
</script>

With Duration

<template>
  <n-button @click="handleClick">
    Duration: 10000ms
  </n-button>
</template>

<script setup>
import { useNotification } from 'naive-ui'

const notification = useNotification()

const handleClick = () => {
  notification.create({
    title: 'Auto Close',
    content: 'This will close in 10 seconds',
    duration: 10000
  })
}
</script>

Unclosable Notification

<template>
  <n-button @click="handleClick">
    Unclosable
  </n-button>
</template>

<script setup>
import { useNotification } from 'naive-ui'

const notification = useNotification()

const handleClick = () => {
  notification.create({
    title: 'Unclosable',
    content: 'This notification cannot be closed by user',
    closable: false,
    duration: 5000
  })
}
</script>

Max Notifications

<template>
  <n-notification-provider :max="3">
    <NotificationButton />
  </n-notification-provider>
</template>

<script setup>
import { useNotification } from 'naive-ui'

const notification = useNotification()

const handleClick = () => {
  notification.create({
    content: 'New notification'
  })
}
</script>

Custom Placement

<template>
  <n-notification-provider placement="bottom-left">
    <Content />
  </n-notification-provider>
</template>

With Action

<template>
  <n-button @click="handleClick">
    Notification with Action
  </n-button>
</template>

<script setup>
import { h } from 'vue'
import { useNotification, NButton } from 'naive-ui'

const notification = useNotification()

const handleClick = () => {
  notification.create({
    title: 'Update Available',
    content: 'A new version is available',
    action: () => h(NButton, {
      size: 'small',
      onClick: () => console.log('Update clicked')
    }, { default: () => 'Update Now' })
  })
}
</script>

Best Practices

1. Wrap with Provider: Always wrap components using notification with n-notification-provider

2. Choose appropriate type: Use the correct notification type (info, success, warning, error)

3. Set reasonable duration: Configure duration based on message importance

4. Limit notifications: Use max prop to prevent notification overflow

5. Keep alive on hover: Enable keepAliveOnHover for important messages

6. Clean up: Use destroyAll to clear all notifications when needed