diff --git a/packages/web-chat-x-vue/src/auto-imports.d.ts b/packages/web-chat-x-vue/src/auto-imports.d.ts
index d298c3c..45986f3 100644
--- a/packages/web-chat-x-vue/src/auto-imports.d.ts
+++ b/packages/web-chat-x-vue/src/auto-imports.d.ts
@@ -6,6 +6,10 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
+  const ElButton: typeof import('element-plus/es')['ElButton']
+  const ElMessage: typeof import('element-plus/es')['ElMessage']
+  const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
+  const ElNotification: typeof import('element-plus/es')['ElNotification']
   const computed: typeof import('vue')['computed']
   const createApp: typeof import('vue')['createApp']
   const customRef: typeof import('vue')['customRef']
diff --git a/packages/web-chat-x-vue/src/classes/Libp2pManager.ts b/packages/web-chat-x-vue/src/classes/Libp2pManager.ts
index f48882f..21c1eae 100644
--- a/packages/web-chat-x-vue/src/classes/Libp2pManager.ts
+++ b/packages/web-chat-x-vue/src/classes/Libp2pManager.ts
@@ -23,12 +23,6 @@ import ChatChannel from "./ChatChannel";
 import { base64ToFile, fileToBase64, getPeerIdFromUserId } from "@/utils";
 import { bootstrap } from "@libp2p/bootstrap";
 import { Peer } from "@libp2p/interface";
-import {
-  ElButton,
-  ElMessage,
-  ElMessageBox,
-  ElNotification,
-} from "element-plus";
 const topics = [
   `webChatX._peer-discovery._p2p._pubsub`, // It's recommended but not required to extend the global space
 ];
diff --git a/packages/web-chat-x-vue/src/classes/PeerManager.ts b/packages/web-chat-x-vue/src/classes/PeerManager.ts
index 6250808..68a256c 100644
--- a/packages/web-chat-x-vue/src/classes/PeerManager.ts
+++ b/packages/web-chat-x-vue/src/classes/PeerManager.ts
@@ -1,4 +1,3 @@
-import { ElMessage } from "element-plus";
 import Peer, { DataConnection, MediaConnection } from "peerjs";
 type PeerManagerOption = {
   nearPeerId: string;
diff --git a/packages/web-chat-x-vue/src/components/SetUserInfoComponent.vue b/packages/web-chat-x-vue/src/components/SetUserInfoComponent.vue
index 2b6bfb5..bec973f 100644
--- a/packages/web-chat-x-vue/src/components/SetUserInfoComponent.vue
+++ b/packages/web-chat-x-vue/src/components/SetUserInfoComponent.vue
@@ -68,15 +68,10 @@
 </template>
 
 <script setup lang="ts">
-import {
-  ElButton,
-  ElMessage,
-  ElMessageBox,
-  UploadUserFile,
-} from "element-plus";
 import useDexie from "@/hooks/useDexie";
 import { cloneDeep } from "lodash-es";
 import useLibp2p from "@/hooks/useLibp2p";
+import { UploadUserFile } from "element-plus";
 const { libp2pManager } = useLibp2p();
 const { databaseManager } = useDexie();
 const user = ref(
diff --git a/packages/web-chat-x-vue/src/views/Channel.vue b/packages/web-chat-x-vue/src/views/Channel.vue
index 9d85cd3..387a450 100644
--- a/packages/web-chat-x-vue/src/views/Channel.vue
+++ b/packages/web-chat-x-vue/src/views/Channel.vue
@@ -128,10 +128,10 @@
 
 <script lang="ts" setup>
 import { useRoute } from "vue-router";
-import { ElMain, ElMessage  } from "element-plus";
 import useLibp2p from "@/hooks/useLibp2p";
 import EmojiComponent from "@/components/EmojiComponent.vue";
 import fileIcon from '@/assets/file.svg'
+import { ElMain } from "element-plus";
 const {libp2pManager}=useLibp2p()
 const refMain=ref() as Ref<InstanceType<typeof ElMain>>;
 const route=useRoute()
diff --git a/packages/web-chat-x-vue/src/views/Login.vue b/packages/web-chat-x-vue/src/views/Login.vue
index 910756d..25f590d 100644
--- a/packages/web-chat-x-vue/src/views/Login.vue
+++ b/packages/web-chat-x-vue/src/views/Login.vue
@@ -104,9 +104,6 @@ import {
   UploadProps,
   UploadFile,
   UploadFiles,
-  ElMessageBox,
-  ElButton,
-  ElMessage,
 } from "element-plus";
 import ChatUser from "@/classes/ChatUser";
 import useLibp2p from "@/hooks/useLibp2p";
diff --git a/packages/web-chat-x-vue/src/views/PrivateChat.vue b/packages/web-chat-x-vue/src/views/PrivateChat.vue
index 781154f..9932515 100644
--- a/packages/web-chat-x-vue/src/views/PrivateChat.vue
+++ b/packages/web-chat-x-vue/src/views/PrivateChat.vue
@@ -128,11 +128,11 @@
 
 <script lang="ts" setup>
 import { useRoute } from "vue-router";
-import { ElMain, ElMessage, ElUpload, UploadProps, UploadUserFile } from "element-plus";
 import useLibp2p from "@/hooks/useLibp2p";
 import EmojiComponent from "@/components/EmojiComponent.vue";
 import fileIcon from '@/assets/file.svg'
 import usePeer from "@/hooks/usePeer";
+import { ElMain, ElUpload, UploadProps, UploadUserFile } from "element-plus";
 const {libp2pManager}=useLibp2p()
 const refMain=ref() as Ref<InstanceType<typeof ElMain>>;
 const route=useRoute()