diff --git a/package.json b/package.json
index ece6226..8b022ab 100644
--- a/package.json
+++ b/package.json
@@ -115,7 +115,8 @@
     "stylelint": "^15",
     "ts-json-schema-generator": "^1.4.0",
     "typescript": "^5",
-    "vitest": "^1"
+    "vitest": "^1",
+    "vue": "^3.4.27"
   },
   "peerDependencies": {
     "react": ">=18",
diff --git a/src/client/hooks/index.ts b/src/client/hooks/index.ts
index 42ef7d9..b9d07e9 100644
--- a/src/client/hooks/index.ts
+++ b/src/client/hooks/index.ts
@@ -2,3 +2,4 @@ export * from './useOnStandalonePluginInit';
 export * from './usePluginSettings';
 export * from './usePluginState';
 export * from './useWatchPluginMessage';
+export * from './vue';
diff --git a/src/client/hooks/vue/index.ts b/src/client/hooks/vue/index.ts
new file mode 100644
index 0000000..6a45795
--- /dev/null
+++ b/src/client/hooks/vue/index.ts
@@ -0,0 +1,4 @@
+export * from './useOnStandalonePluginInitVue';
+export * from './usePluginSettingsVue';
+export * from './usePluginStateVue';
+export * from './useWatchPluginMessageVue';
diff --git a/src/client/hooks/vue/useOnStandalonePluginInitVue.ts b/src/client/hooks/vue/useOnStandalonePluginInitVue.ts
new file mode 100644
index 0000000..7db725e
--- /dev/null
+++ b/src/client/hooks/vue/useOnStandalonePluginInitVue.ts
@@ -0,0 +1,15 @@
+import { onMounted } from 'vue';
+
+import { PluginPayload, lobeChat } from '@/client';
+
+export const useOnStandalonePluginInitVue = <T = any>(
+  callback: (payload: PluginPayload<T>) => void,
+) => {
+  onMounted(() => {
+    lobeChat.getPluginPayload().then((e) => {
+      if (!e) return;
+
+      callback(e);
+    });
+  });
+};
diff --git a/src/client/hooks/vue/usePluginSettingsVue.ts b/src/client/hooks/vue/usePluginSettingsVue.ts
new file mode 100644
index 0000000..a2eb7fd
--- /dev/null
+++ b/src/client/hooks/vue/usePluginSettingsVue.ts
@@ -0,0 +1,20 @@
+import { UnwrapRef, onMounted, ref } from 'vue';
+
+import { lobeChat } from '@/client';
+
+export const usePluginSettingsVue = <T>(initialValue: T) => {
+  const value = ref(initialValue);
+  onMounted(() => {
+    lobeChat.getPluginSettings().then((e) => {
+      if (!e) return;
+      value.value = e;
+    });
+  });
+
+  const updateValue = (newValue: T) => {
+    value.value = newValue as UnwrapRef<T>;
+    lobeChat.setPluginSettings(newValue);
+  };
+
+  return [value, updateValue] as const;
+};
diff --git a/src/client/hooks/vue/usePluginStateVue.ts b/src/client/hooks/vue/usePluginStateVue.ts
new file mode 100644
index 0000000..8d2ec51
--- /dev/null
+++ b/src/client/hooks/vue/usePluginStateVue.ts
@@ -0,0 +1,28 @@
+import { UnwrapRef, ref, watch } from 'vue';
+
+import { lobeChat } from '@/client';
+
+export const usePluginStateVue = <T>(key: string, initialValue: T) => {
+  const value = ref(initialValue);
+
+  watch(
+    () => key,
+    (newValue) => {
+      lobeChat.getPluginState(newValue).then((e) => {
+        if (!e) return;
+
+        value.value = e;
+      });
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  const updateValue = (newValue: T) => {
+    value.value = newValue as UnwrapRef<T>;
+    lobeChat.setPluginState(key, value);
+  };
+
+  return [value, updateValue] as const;
+};
diff --git a/src/client/hooks/vue/useWatchPluginMessageVue.ts b/src/client/hooks/vue/useWatchPluginMessageVue.ts
new file mode 100644
index 0000000..4c66677
--- /dev/null
+++ b/src/client/hooks/vue/useWatchPluginMessageVue.ts
@@ -0,0 +1,30 @@
+import { UnwrapRef, onMounted, ref } from 'vue';
+
+import { PluginChannel } from '../../const';
+import { PluginRenderProps } from '../../type';
+import { onReceiveData } from '../../utils';
+
+export const useWatchPluginMessageVue = <T = any>() => {
+  const result = ref<{ data: T; loading: boolean }>({
+    data: undefined as T,
+    loading: true,
+  });
+
+  const receiverData = (e: MessageEvent) => {
+    onReceiveData(e, (data: PluginRenderProps<T>) => {
+      result.value = { data: data.content as UnwrapRef<T>, loading: false };
+    });
+  };
+
+  onMounted(() => {
+    window?.addEventListener('message', receiverData);
+
+    top?.postMessage({ type: PluginChannel.pluginReadyForRender }, '*');
+
+    return () => {
+      window?.removeEventListener('message', receiverData);
+    };
+  });
+
+  return result;
+};