diff --git a/src/components/AppProvider/NotificationContent.vue b/src/components/AppProvider/NotificationContent.vue
new file mode 100644
index 0000000..f23d3ec
--- /dev/null
+++ b/src/components/AppProvider/NotificationContent.vue
@@ -0,0 +1,10 @@
+<template></template>
+
+<script setup>
+import { useNotification } from 'naive-ui'
+window['$notification'] = useNotification()
+Object.defineProperty(window, '$notification', {
+  configurable: false,
+  writable: false,
+})
+</script>
diff --git a/src/components/AppProvider/index.vue b/src/components/AppProvider/index.vue
index e834bf9..307a864 100644
--- a/src/components/AppProvider/index.vue
+++ b/src/components/AppProvider/index.vue
@@ -6,7 +6,10 @@
         <DialogContent />
         <n-message-provider>
           <MessageContent />
-          <slot></slot>
+          <n-notification-provider>
+            <NotificationContent />
+            <slot></slot>
+          </n-notification-provider>
         </n-message-provider>
       </n-dialog-provider>
     </n-loading-bar-provider>
@@ -18,6 +21,7 @@ import MessageContent from './MessageContent.vue'
 import DialogContent from './DialogContent.vue'
 import LoadingBar from './LoadingBar.vue'
 import { useThemeStore } from '@/store/modules/theme'
+import NotificationContent from './NotificationContent.vue'
 
 const useTheme = useThemeStore()
 </script>