Mark views with Vue

Using Vanilla JavaScript can feel complex if you are used to work in Vue. Good news: You can use regular Vue components in your mark views, too. There is just a little bit you need to know, but let’s go through this one by one.

Render a Vue component

Here is what you need to do to render Vue components inside your editor:

Create a mark extension
Create a Vue component
Pass that component to the provided VueNodeViewRenderer
Register it with addMarkView()
Configure Tiptap to use your new mark extension

This is how your node extension could look like:

import { Mark } from '@tiptap/core'
import { VueMarkViewRenderer } from '@tiptap/vue-3'

import Component from './Component.jsx'

export default Mark.create({
  // options…

  addMarkView() {
    return VueMarkViewRenderer(Component)
  },
})

And here is an example of a Vue component:

<template>
  <span className="content" data-test-id="mark-view">
    <mark-view-content />
    <label contenteditable="false"
      >Vue Component::
      <button @click="increase" class="primary">
        This button has been clicked {{ count }} times.
      </button>
    </label>
  </span>
</template>

<script>
import { MarkViewContent, markViewProps } from '@tiptap/vue-3'
export default {
  components: {
    MarkViewContent,
  },
  data() {
    return {
      count: 0,
    }
  },
  props: markViewProps,
  methods: {
    increase() {
      this.count += 1
    },
  },
}
</script>

Got it? Let’s see it in action. Feel free to copy the below example to get started.

Updating the mark view attributes

Updating your mark view's attributes is very straightforward. You can use the updateAttributes method provided by the component's props.

<template>
  <span :id="HTMLAttributes.id" className="content">
    <mark-view-content />
  </span>
</template>

<script>
import { MarkViewContent, markViewProps } from '@tiptap/vue-3'
export default {
  components: {
    MarkViewContent,
  },
  props: markViewProps,
  methods: {
    increase() {
      this.count += 1
    },
    updateId() {
      this.updateAttributes({ id: Date.now() })
    }
  },
}
</script>