Skip to content

Commit

Permalink
Add Vue 3.4+ composition api v-model example
Browse files Browse the repository at this point in the history
  • Loading branch information
silvandiepen committed Mar 19, 2024
1 parent 48935a2 commit 29176a0
Showing 1 changed file with 27 additions and 0 deletions.
27 changes: 27 additions & 0 deletions docs/installation/nuxt.md
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down

0 comments on commit 29176a0

Please sign in to comment.