diff --git a/packages/vue/package.json b/packages/vue/package.json
index b94a848..386abd0 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tidbcloud/tisqleditor-vue",
-  "version": "0.0.6",
+  "version": "0.0.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -8,12 +8,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.4.31"
+    "@tidbcloud/tisqleditor": "workspace:^"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.5",
     "typescript": "^5.2.2",
     "vite": "^5.3.4",
+    "vue": "^3.4.31",
     "vue-tsc": "^2.0.24"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.31"
   }
 }
diff --git a/packages/vue/src/components/HelloWorld.vue b/packages/vue/src/components/HelloWorld.vue
deleted file mode 100644
index 60fe9c4..0000000
--- a/packages/vue/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
-      target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
diff --git a/packages/vue/src/editor-cache-provide.vue b/packages/vue/src/editor-cache-provide.vue
new file mode 100644
index 0000000..7e5df54
--- /dev/null
+++ b/packages/vue/src/editor-cache-provide.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { provide, onUnmounted } from 'vue'
+import { EditorCache } from '@tidbcloud/tisqleditor'
+
+const editorCache = new EditorCache()
+
+provide('editor-cache', editorCache)
+
+onUnmounted(() => {
+  editorCache.clearEditors()
+})
+</script>
+
+<template>
+  <slot />
+</template>
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index 2d49f0b..79b4179 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -1,3 +1,4 @@
-import HelloWorld from './components/HelloWorld.vue'
+import EditorCacheProvide from './editor-cache-provide.vue'
+import SQLEditor from './sql-editor.vue'
 
-export { HelloWorld }
+export { EditorCacheProvide, SQLEditor }
diff --git a/packages/vue/src/sql-editor.vue b/packages/vue/src/sql-editor.vue
new file mode 100644
index 0000000..948356e
--- /dev/null
+++ b/packages/vue/src/sql-editor.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ref, watch, inject, watchEffect } from 'vue'
+import {
+  CreateSQLEditorOptions,
+  createSQLEditorInstance,
+  EditorCache
+} from '@tidbcloud/tisqleditor'
+
+type SQLEditorProps = CreateSQLEditorOptions & {
+  class?: string
+}
+const props = defineProps<SQLEditorProps>()
+
+const editorContainerRef = ref<HTMLInputElement | null>(null)
+const editorCache = inject('editor-cache', new EditorCache())
+
+function editorIdChange(newId: string, oldId: string) {
+  if (!editorContainerRef.value) {
+    return
+  }
+  const oldInst = editorCache.getEditor(oldId)
+  if (oldInst) {
+    editorContainerRef.value.removeChild(oldInst.editorView.dom)
+  }
+  let newInst = editorCache.getEditor(newId)
+  if (!newInst) {
+    const { theme, sqlConfig, ...rest } = props
+    newInst = createSQLEditorInstance({
+      theme,
+      sqlConfig,
+      ...rest,
+      editorId: newId
+    })
+    editorCache.addEditor(newId, newInst)
+  }
+  editorContainerRef.value.appendChild(newInst.editorView.dom)
+  newInst.editorView.focus()
+}
+editorIdChange(props.editorId, '')
+
+watch(() => props.editorId, editorIdChange)
+
+watchEffect(() => {
+  editorCache.getEditor(props.editorId)?.changeTheme(props.theme ?? [])
+})
+
+watchEffect(() => {
+  editorCache.getEditor(props.editorId)?.changeSQLConfig(props.sqlConfig ?? {})
+})
+</script>
+
+<template>
+  <div :class="class" ref="editorContainerRef"></div>
+</template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a9787da..6d6afe3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -537,9 +537,9 @@ importers:
 
   packages/vue:
     dependencies:
-      vue:
-        specifier: ^3.4.31
-        version: 3.4.34(typescript@5.4.5)
+      '@tidbcloud/tisqleditor':
+        specifier: workspace:^
+        version: link:../core
     devDependencies:
       '@vitejs/plugin-vue':
         specifier: ^5.0.5
@@ -550,6 +550,9 @@ importers:
       vite:
         specifier: ^5.3.4
         version: 5.3.4(@types/node@20.14.2)
+      vue:
+        specifier: ^3.4.31
+        version: 3.4.34(typescript@5.4.5)
       vue-tsc:
         specifier: ^2.0.24
         version: 2.0.28(typescript@5.4.5)