Awesome and extendable rich text editor component for Vuetify projects using tiptap


<v-tiptap v-model="value" />

To ensure full consistency between whats is seen in the editor and what you see when you render the HTML value, the component also has a view mode.

<v-tiptap v-model="value" view />

The toolbar is fully customizable and you can add, remove or reorder buttons. You can also use slots to add custom buttons with your own functionality.

  :toolbar="['bold', 'italic', '|', 'h1', 'p', '>', '#mybutton']"
    <template #mybutton="{ editor }">
        <v-btn icon small title="Clear Content" @click="editor.commands.clearContent()">

⚠️ This project uses Vue 2 and Vuetify 2. We plan to upgrade to Vue 3 as soon as Vuetify supports it.


First, install the package using npm or yarn.

npm i -S @peepi/vuetify-tiptap

Then add the package to the transpileDependencies config on vue.config.js

module.exports = {
  transpileDependencies: ["vuetify", "@peepi/vuetify-tiptap"],

Finally, register the plugin on your main.ts.

import VTiptap from "@peepi/vuetify-tiptap";


Uploading Images

In order to use the upload image feature, pass down a prop uploadImage to the component with a function that receives a File and returns a Promise to an URL.

  <v-tiptap :uploadImage="uploadImage" />

async function uploadImage(file) {
  const url = await myApi.upload(file);
  return url;

You can also pass this function as a global option to the plugin.

Vue.use(VTiptap, { uploadImage: myApi.upload });


Check the live demo for documentation.


Please see CHANGELOG for more information what has changed recently.


Please see CONTRIBUTING for details.


This package was developed at Peepi, a SaaS platform to engage customers and employees.


The MIT License (MIT). Please see License File for more information.