From 29176a03a486a731b78ebc4f5ad5361d8295607a Mon Sep 17 00:00:00 2001
From: Sil van Diepen <me@sil.mt>
Date: Tue, 19 Mar 2024 09:55:47 +0100
Subject: [PATCH] Add Vue 3.4+ composition api v-model example

---
 docs/installation/nuxt.md | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/docs/installation/nuxt.md b/docs/installation/nuxt.md
index 550c0ee630a..711b51a80cd 100644
--- a/docs/installation/nuxt.md
+++ b/docs/installation/nuxt.md
@@ -105,6 +105,33 @@ You’re probably used to bind your data with `v-model` in forms, that’s also
 
 https://embed.tiptap.dev/preview/GuideGettingStarted/VModel
 
+Using the composition API with Vue 3.4+
+
+```html
+<template>
+  <ClientOnly>
+    <editor-content :editor="editor" />
+  </ClientOnly>
+</template>
+
+<script lang="ts" setup>
+import { useEditor, EditorContent } from "@tiptap/vue-3";
+import StarterKit from "@tiptap/starter-kit";
+
+const modelValue = defineModel();
+
+const editor = useEditor({
+  content: modelValue.value,
+  extensions: [StarterKit],
+  onUpdate: ({ editor }) => {
+    modelValue.value = editor.getHTML();
+  },
+});
+</script>
+```
+
+Or the Options API 
+
 ```html
 <template>
   <editor-content :editor="editor" />