---
title: "Mark views with Vue"
description: "Use Vue to build custom mark views in Tiptap."
canonical_url: "https://tiptap.dev/docs/editor/extensions/custom-extensions/mark-views/vue"
---

# Mark views with Vue

Use Vue to build custom mark views in Tiptap.

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:

1. [Create a mark extension](https://tiptap.dev/docs/editor/extensions/custom-extensions/create-new/mark.md)
2. Create a Vue component
3. Pass that component to the provided `VueNodeViewRenderer`
4. Register it with `addMarkView()`
5. [Configure Tiptap to use your new mark extension](https://tiptap.dev/docs/editor/getting-started/configure.md)

This is how your node extension could look like:

```ts
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:

```vue
<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.

> **Interactive demo:** [VueComponent](https://embed.tiptap.dev/preview/GuideMarkViews/VueComponent?inline=false\&hideSource=false)

## 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.

```vue
<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>
```