diff --git a/frontend_nuxt/composables/useToast.js b/frontend_nuxt/composables/useToast.js
new file mode 100644
index 000000000..20db14d6c
--- /dev/null
+++ b/frontend_nuxt/composables/useToast.js
@@ -0,0 +1,74 @@
+// 导出一个便捷的 toast 对象
+export const toast = {
+  success: async (message) => {
+    if (process.client) {
+      try {
+        const { useToast } = await import('vue-toastification')
+        const toastInstance = useToast()
+        toastInstance.success(message)
+      } catch (error) {
+        console.warn('Toast not available:', error)
+      }
+    }
+  },
+  error: async (message) => {
+    if (process.client) {
+      try {
+        const { useToast } = await import('vue-toastification')
+        const toastInstance = useToast()
+        toastInstance.error(message)
+      } catch (error) {
+        console.warn('Toast not available:', error)
+      }
+    }
+  },
+  warning: async (message) => {
+    if (process.client) {
+      try {
+        const { useToast } = await import('vue-toastification')
+        const toastInstance = useToast()
+        toastInstance.warning(message)
+      } catch (error) {
+        console.warn('Toast not available:', error)
+      }
+    }
+  },
+  info: async (message) => {
+    if (process.client) {
+      try {
+        const { useToast } = await import('vue-toastification')
+        const toastInstance = useToast()
+        toastInstance.info(message)
+      } catch (error) {
+        console.warn('Toast not available:', error)
+      }
+    }
+  }
+}
+
+// 导出 useToast composable
+export const useToast = () => {
+  if (process.client) {
+    return new Promise(async (resolve) => {
+      try {
+        const { useToast: useVueToast } = await import('vue-toastification')
+        resolve(useVueToast())
+      } catch (error) {
+        console.warn('Toast not available:', error)
+        resolve({
+          success: () => {},
+          error: () => {},
+          warning: () => {},
+          info: () => {}
+        })
+      }
+    })
+  }
+  
+  return Promise.resolve({
+    success: () => {},
+    error: () => {},
+    warning: () => {},
+    info: () => {}
+  })
+} 
\ No newline at end of file
diff --git a/frontend_nuxt/main.js b/frontend_nuxt/main.js
index d69b82425..0a388129f 100644
--- a/frontend_nuxt/main.js
+++ b/frontend_nuxt/main.js
@@ -5,28 +5,5 @@ export const GITHUB_CLIENT_ID = 'Ov23liVkO1NPAX5JyWxJ'
 export const DISCORD_CLIENT_ID = '1394985417044000779'
 export const TWITTER_CLIENT_ID = 'ZTRTU05KSk9KTTJrTTdrVC1tc1E6MTpjaQ'
 
-// 导入真实的 toast 功能
-import { useToast } from 'vue-toastification'
-
-// 创建一个全局的 toast 实例
-let toastInstance = null
-
-// 初始化 toast 实例的函数
-export const initToast = () => {
-  if (!toastInstance) {
-    toastInstance = useToast()
-  }
-  return toastInstance
-}
-
-// 导出 toast 对象，提供 success 和 error 方法
-export const toast = {
-  success: (message) => {
-    const toast = initToast()
-    toast.success(message)
-  },
-  error: (message) => {
-    const toast = initToast()
-    toast.error(message)
-  }
-}
\ No newline at end of file
+// 重新导出 toast 功能，使用 composable 方式
+export { toast } from './composables/useToast'
\ No newline at end of file
diff --git a/frontend_nuxt/plugins/toastification.client.ts b/frontend_nuxt/plugins/toastification.client.ts
index cd951c7dd..f03c0ad60 100644
--- a/frontend_nuxt/plugins/toastification.client.ts
+++ b/frontend_nuxt/plugins/toastification.client.ts
@@ -1,13 +1,22 @@
 import { defineNuxtPlugin } from '#app'
-import Toast, { POSITION } from 'vue-toastification'
 import 'vue-toastification/dist/index.css'
 import '~/assets/toast.css'
 
-export default defineNuxtPlugin(nuxtApp => {
-  nuxtApp.vueApp.use(Toast, {
-    position: POSITION.TOP_RIGHT,
-    containerClassName: 'open-isle-toast-style-v1',
-    transition: 'Vue-Toastification__fade',
-    timeout: 2000,
-  })
+export default defineNuxtPlugin(async (nuxtApp) => {
+  // 确保只在客户端环境中注册插件
+  if (process.client) {
+    try {
+      // 使用动态导入来避免 CommonJS 模块问题
+      const { default: Toast, POSITION } = await import('vue-toastification')
+      
+      nuxtApp.vueApp.use(Toast, {
+        position: POSITION.TOP_RIGHT,
+        containerClassName: 'open-isle-toast-style-v1',
+        transition: 'Vue-Toastification__fade',
+        timeout: 2000,
+      })
+    } catch (error) {
+      console.warn('Failed to load vue-toastification:', error)
+    }
+  }
 })