DEV Community

Cover image for How to Use TipTap Editor with Vue 3
J-Sandaruwan
J-Sandaruwan

Posted on

How to Use TipTap Editor with Vue 3

#tiptap #vue #editor

TipTap is a modern, headless rich text editor framework built on ProseMirror, designed for developers who want to create highly customizable editing experiences. It integrates seamlessly with Vue 3, making it a popular choice for building custom editors in modern web applications.

Getting Started with TipTap in Vue 3

  1. Install Dependencies 
   npm install @tiptap/vue-3 @tiptap/pm @tiptap/starter-kit
Enter fullscreen mode Exit fullscreen mode
  1. Create a TipTap Component Create a new file, e.g., components/Tiptap.vue, and add the following code: 
   <template>
     <editor-content :editor="editor" />
   </template>

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

   const editor = useEditor({
     content: '<p>I\'m running Tiptap with Vue.js. 🎉</p>',
     extensions: [StarterKit],
   })
   </script>
Enter fullscreen mode Exit fullscreen mode
  1. Add the Component to Your App In your App.vue: 
   <template>
     <div id="app">
       <Tiptap />
     </div>
   </template>

   <script>
   import Tiptap from './components/Tiptap.vue'

   export default {
     components: { Tiptap },
   }
   </script>
Enter fullscreen mode Exit fullscreen mode
  1. Optional: Use v-model for Two-Way Binding TipTap supports v-model for binding editor content to your data, making it easy to integrate with forms and reactive data.

Pros and Cons of TipTap

Pros

  • Highly Customizable: TipTap is headless, meaning you can build any UI on top of it and tailor the editor to your needs.
  • Extensible: Over 100 extensions are available, and you can create your own.
  • Open Source: The core editor is free and open source, making it accessible for small projects and startups.
  • Modern Framework: Built for modern web development, with strong Vue 3 support.

Cons

  • Steeper Learning Curve: Requires more setup and configuration compared to out-of-the-box editors.
  • Limited Built-in Features: Many advanced features (like collaboration, AI, or export) require paid plans or custom development.
  • Community Support: While growing, the community is smaller than some alternatives.

TipTap vs TinyMCE: Feature and Pricing Comparison

Feature TinyMCE TipTap
Basic Editing Excellent Good
Advanced Features Extensive plugins Extensible via extensions
Collaboration Built-in Requires setup
Accessibility Excellent Good
Customization High Very High
Pricing Paid (from $25/mo) Freemium (Free plan, paid from $149/mo)
Ease of Use Easy Moderate
  • TinyMCE is a mature, feature-rich editor with a polished UI and extensive plugin ecosystem. It’s ideal for teams needing advanced features out of the box, but it’s paid (from $25/month).
  • TipTap is free for basic use, but advanced features and collaboration require paid plans (starting at $149/month). It’s best for developers who want to build custom editors and have the resources to invest in setup and customization.

Conclusion

TipTap is a powerful, flexible editor for Vue 3, especially suited for developers who want to build custom editing experiences. While it requires more setup than TinyMCE, its open-source core and extensibility make it a great choice for projects where customization is key. For teams needing advanced features and collaboration out of the box, TinyMCE may be a better fit, but it comes at a higher price.

Thank you,
Janith Sandaruwan.
linkedin

Top comments (0)