From 38efc34488fa981ad37eef32b439bf91666a537f Mon Sep 17 00:00:00 2001
From: P6018169 <gaowei.li1@gientech.com>
Date: Mon, 21 Sep 2026 11:33:46 +0800
Subject: [PATCH] feat(vue): add v-model usage example

---
 docs/examples/vue3-demo/App.vue   | 36 +++++++++++++++++++++++++++++
 docs/examples/vue3-demo/README.md | 38 +++++++++++++++++++++++++++++++
 2 files changed, 74 insertions(+)
 create mode 100644 docs/examples/vue3-demo/App.vue
 create mode 100644 docs/examples/vue3-demo/README.md

diff --git a/docs/examples/vue3-demo/App.vue b/docs/examples/vue3-demo/App.vue
new file mode 100644
index 00000000..28860647
--- /dev/null
+++ b/docs/examples/vue3-demo/App.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Editor } from '@floatboat/nexus-vue'
+import { createGfmPreset } from '@floatboat/nexus-preset-gfm'
+
+const markdown = ref<string>('# Hello, Nexus 👋\n\nStart typing...')
+
+function handleChange(doc: string) {
+  console.log('markdown changed:', doc)
+}
+
+function handleReady(editor: any) {
+  console.log('editor ready:', editor)
+}
+</script>
+
+<template>
+  <div class="editor-wrapper">
+    <Editor
+      v-model="markdown"
+      :plugins="[createGfmPreset()]"
+      :live-preview="true"
+      @change="handleChange"
+      @ready="handleReady"
+    />
+  </div>
+</template>
+
+<style scoped>
+.editor-wrapper {
+  min-height: 400px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 8px;
+}
+</style>
\ No newline at end of file
diff --git a/docs/examples/vue3-demo/README.md b/docs/examples/vue3-demo/README.md
new file mode 100644
index 00000000..2cce309d
--- /dev/null
+++ b/docs/examples/vue3-demo/README.md
@@ -0,0 +1,38 @@
+# Vue 3 `v-model` 示例
+
+本示例演示如何在 Vue 3 项目中使用 `@floatboat/nexus-vue` 的 `<Editor />` 组件，并通过 `v-model` 实现 Markdown 内容与组件状态的双向绑定。
+
+## 完整代码
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Editor } from '@floatboat/nexus-vue'
+import { createGfmPreset } from '@floatboat/nexus-preset-gfm'
+
+const markdown = ref<string>('# Hello, Nexus 👋\n\nStart typing...')
+
+function handleChange(doc: string) {
+  console.log('markdown changed:', doc)
+}
+</script>
+
+<template>
+  <div class="editor-wrapper">
+    <Editor
+      v-model="markdown"
+      :plugins="[createGfmPreset()]"
+      :live-preview="true"
+      @change="handleChange"
+    />
+  </div>
+</template>
+
+<style scoped>
+.editor-wrapper {
+  min-height: 400px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 8px;
+}
+</style>
\ No newline at end of file