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

[komestible]

I spent at least 2 days being blocked on my project, using Tiptap to send form data to my DB. And your video was exactly what I needed. Thank you so much 🙏

[SAIEN]

yes Sir, this is how a tutorial should be,
not in any rush, very detailed .
thankyou

[picozzimichele]

Thanks! That prose + tailwind was exactly what I was looking for!

[nemercevroman]

amaaazing! actually on last part of 2024

[bobdpa]

Andre is back and with perfect timing. Thank you! 💯

[dclindner]

Fantastic! I've needed this kind of solution for a long time. Thank you.

[GondarMD]

Great tutorial. Thank you for the detail.

[biLLie_wiLLie]

I would like to see how to work with images in tiptap

[OualidOUKASSOU]

Thanks for this amazing tutorial, can you explain how to implement image copy and past or drag & drop

[datalabwork]

Nice video....Can you demonstrate creating Admin Dashboard without using any other premade stuff please.

[millennia]

Andre, thank you for your amazing videos ❤ can you make a video for next and laravel

[iliantachev]

Guys, am I the only one who has issues with the rendering? When I type long text, <p> for example, in the editor it comes as normal, it goes on new line, but upon rendering, it is scrolling on y-axis.

[longminhnguyenvu]

Hi sir, How can i customize vscode theme and font like you, please send me a tutorial video. Thank you so much.

[CoreCave]

Can you tell me about the tool you used to search through tailwind docs

[mingxindong]

I encountered an issue where the Tiptap editor content didn't update when the inital modelValue changed. I solved it by watch the inital value:
watch(
() => props.modelValue,
(newValue) => {
if (editor && editor.value?.isEditable && newValue !== editor.value?.getHTML()) {

}
}
)

[kristiyan.zhelyazkov]

what extension do you use for selecting the entire tag?

[LMayor]

Hey Andre, What an awesome tutorial !, truly love your simple and precise way, i wonder how can i get starter laravel-vue boilerplate kit project like yours if it's possible