Tiptap Editor with Vue.js, Tailwind CSS and Laravel

Tiptap is a modern, headless WYSIWYG editor that can be easily integrated into your web applications. It has support for modern JavaScript frameworks like React, Vue, and Svelte and offers a ton of functionality via its plugin/extension system. In this video, we’ll look at using Tiptap with an Inertia app using Vue 3, Tailwind, and Laravel. We’ll cover installation, styling with Tailwind CSS and the typography plugin, using v-model, persisting content to the backend, and protecting from cross-site scripting attacks using the Laravel Purify package. 00:00 Introduction 01:26 Installation 05:46 Customize Editor with Tailwind classes 08:26 Add buttons 16:21 Style tags with Tailwind typography plugin 22:14 Add icons for buttons 25:40 Using v-model and extracting to component 40:18 Persisting to the backend 51:13 Protecting against cross-site scripting attacks # LINKS