Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

247
Views
How to bind TipTap to parent v-model in Vue 3 script setup?

I'm trying to use tiptap as a child component and pass its content to the parent's v-model but tiptap's documentation only seems to provide info on how to do this without script setup, which uses a different API.

This is my parent component:

<template>
    <cms-custom-editor v-model:modelValue="state.content"/>
    <p>{{state.content}}</p>
</template>


<script setup>
import CmsCustomEditor from '../../components/backend/cms-custom-editor.vue'
import {reactive} from "vue";

const state = reactive({
    content: '<p>A Vue.js wrapper component for tiptap to use <code>v-model</code>.</p>',
})

</script>

and this the child component with tiptap:

<template>
  <div id="cms-custom-editor" class="cms-custom-editor">
    <editor-content :editor="editor"/>
  </div>
</template>


<script setup>
import {useEditor, EditorContent} from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'

const props = defineProps({
    modelValue: {
        type: String,
        default: ''
    }
})

const emit = defineEmits(['update:modelValue'])

const editor = useEditor({
    extensions: [StarterKit],
    content: props.modelValue,
    onUpdate: () => {
        emit('update:modelValue', editor.getHTML())
    }
})
</script>

As soon as I type something into the editor field, this code line fails:

emit('update:modelValue', editor.getHTML())

and throws this error:

Uncaught TypeError: editor.getHTML is not a function
    at Editor2.onUpdate (cms-custom-editor.vue?t=1654253729389:28:42)
    at chunk-RCTGLYYN.js?v=89d16c61:11965:48
    at Array.forEach (<anonymous>)
    at Editor2.emit (chunk-RCTGLYYN.js?v=89d16c61:11965:17)
    at Editor2.dispatchTransaction (chunk-RCTGLYYN.js?v=89d16c61:12252:10)
    at EditorView.dispatch (chunk-RCTGLYYN.js?v=89d16c61:9138:27)
    at readDOMChange (chunk-RCTGLYYN.js?v=89d16c61:8813:8)
    at DOMObserver.handleDOMChange (chunk-RCTGLYYN.js?v=89d16c61:8924:77)
    at DOMObserver.flush (chunk-RCTGLYYN.js?v=89d16c61:8575:12)
    at DOMObserver.observer (chunk-RCTGLYYN.js?v=89d16c61:8455:14)

I've used the approach from the docs (chapter 5. v-model), which like I said, is not designed for script setup.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Man, the docs are confusing. They mix up standard composition api and script setup. Anyway this is how it works:

const editor = useEditor({
    extensions: [StarterKit],
    content: props.modelValue,
    onUpdate: ({editor}) => {
        emit('update:modelValue', editor.getHTML())
    }
})
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!