Vuetify Pro Tiptap

Theme by Yikoyu

|

Updated: 9 May 2025

|

227 Stars

A Rich Text Editor (WYSIWYG) for Vue3 with tiptap & Vuetify.

Categories

Overview

Vuetify Pro Tiptap is a WYSIWYG rich-text editor for Vue.js that utilizes tiptap and vuetify. It offers features like Vuetify components, out-of-the-box extensions, markdown support, TypeScript support, and internationalization (I18n) support. The editor is compatible with Vuetify 3.x and Vue 3.x, as well as Vuetify 2.x.

Features

• Vuetify Components: Utilizes Vuetify components for a seamless experience.
• Out of Box Extensions: Offers multiple extensions with the ability to request more.
• Markdown Support: Supports markdown formatting within the editor.
• TypeScript Support: Compatible with TypeScript for improved development workflow.
• I18n Support: Supports multiple languages including English, Chinese (Simplified), and Dutch.
• Vuetify 3.x and Vue 3.x Support: Compatible with the latest versions of Vuetify and Vue.

Installation

To install Vuetify Pro Tiptap, follow these steps:

1. NPM installation:

   npm install vuetify-pro-tiptap
   

2. Global Settings:

   • For Vuetify 2.x usage, use the latest version of vuetify-pro-tiptap@1.X.X.

3. Extensions:

   • Declare the necessary extensions to add corresponding command-buttons in the editor.

4. Custom Theme:

   • Create a custom theme using the provided SCSS file.
   • Import the custom theme in the component for usage.

Summary

Vuetify Pro Tiptap is a feature-rich WYSIWYG rich-text editor built for Vue.js developers. With support for Vuetify components, out-of-the-box extensions, markdown formatting, TypeScript, and internationalization, it offers a comprehensive solution for creating rich-text editing experiences. By following the installation guide and leveraging the customizable features, developers can enhance their applications with a powerful text editor seamlessly integrated into their Vue.js projects.