DejaVue
DejaVue
  • 18
  • 14 814
DejaVue #E017 - Tiptap and Vue.js (with Vanessa Otto)
In this episode of DejaVue, Alex and Michael are joined by Vanessa Otto, a Senior Engineer at GitLab and previously being the head of Frontend at Zavvy.
After discussing Vanessa's co-host role in the German Working Draft podcast, it all revolves around the headless editor "Tiptap" in the episode. From hearing why Vanessa chose it instead of other editors and her research around editors, Tiptaps integration with Vue and what the "headless" part of the editor adds to it, over to which use cases are ideal for Tiptap. And yes, an example repository is included so you can convince yourself of the easiness!
Enjoy the episode!
---
Our Guest
* Vanessa Otto (fka. Vanessa Böhner)
* Web - vannsl.io/
* Twitter - x.com/vannsl
* Mastodon - elk.zone/hachyderm.io/@vanessa_otto
* LinkedIn - www.linkedin.com/in/otto-vanessa/
---
Your Hosts
* Michael Thiessen
* Twitter - MichaelThiessen
* UA-cam - @michaelnthiessen
* Web - michaelnthiessen.com/
* Alexander Lichter
* UA-cam - @TheAlexLichter
* Twitter - TheAlexLichter
* Web - www.lichter.io/
--
Chaptermarks:
00:00 Welcome to DejaVue
00:55 Guest Introduction
04:00 About the "Working Draft" podcast
09:54 What is Tiptap?
12:30 Is Tiptap framework agnostic?
15:38 The headless part of Tiptap
18:38 Customization as the biggest benefit?
23:26 How Tiptap content is serialized and saved
25:25 Maturity of Tiptap
28:03 Adding own blocks to Tiptap
32:01 Tiptap and Vue principles
34:42 Did the community around Tiptap grew?
36:22 ProseMirror as the base for Tiptap
38:50 Tiptap Extensions - Seamless with Vue?
42:48 Calling Tiptap extensions
46:55 Call to Action: A fun idea for a Tiptap Project?
47:09 Meet Vanessa and Alex in Germany this Autumn!
48:22 Why Vanessa chose Tiptap
51:32 Wrapping Up!
--
Links and Resources
▶ 10% discount for the vue.js de Conf in Bonn, Germany with code DEJAVUE conf.vuejs.de/
▶ Working Draft (German) workingdraft.de/
▶ Vanessa's Research/Comparison Table raw.githubusercontent.com/Vannsl/ijs-london/main/ijs-london-2024-slides/dist/research.png
▶ Tiptap tiptap.dev/
▶ awesome-tiptap github.com/ueberdosis/awesome-tiptap
▶ awesome-vue github.com/vuejs/awesome-vue
▶ ProseMirror github.com/ProseMirror/prosemirror
▶ Vanessa's Example repo with TipTap and OpenAI gitlab.com/Vannsl/nuxt-tiptap-openai
--
Follow DejaVue on
▶ The Web: dejavue.fm/
▶ Twitter: dejavuefm
▶ Apple Podcast: podcasts.apple.com/us/podcast/dejavue/id1737631788
▶ UA-cam: www.youtube.com/@DejaVueFm
▶ Spotify: open.spotify.com/show/5VQ15QHkC7HSmwTYR7vCPF
▶ Deezer: www.deezer.com/show/1000792252
▶ Amazon Music: music.amazon.com/podcasts/798ccbb2-4a8f-4d83-bff7-00cbc8730f56
▶ Pocket Casts: pca.st/49qr8d1k
--
Links marked with * are affiliate links. We get a small commission when you register for the service through our link. This helps us to keep the podcast running. We only include affiliate links for services mentioned in the episode or that we use ourselves.
Переглядів: 366

Відео

DejaVue #E016 - The Future of Vue.js (with Evan You)
Переглядів 2,2 тис.День тому
After the first part, Michael and Alex continue their conversation with the one and only Evan You, covering the future of the modern JavaScript Framework. Starting straight with *possible* plans for Vue 4 to address common pain points and no ETA for the next major, exciting improvements like native CSS Scoping or removing the need for declaring props are discussed (though nothing is set on ston...
DejaVue #E015 - Ten Years of Vue.js (with Evan You)
Переглядів 1,3 тис.14 днів тому
This DejaVue episode is special - Alex and Michael meet up with the creator of Vue, Vite and Rolldown, Evan You himself and talk about the last ten years of Vue! Starting with how Vue.js started as a side project while Evan still worked at Google, Evan shares the story of how Vue.js came to be and how it evolved over the years. Interesting insights, such as why the Composition API was created a...
DejaVue #E014 - VueUse and Our Favorite Composables
Переглядів 65121 день тому
VueUse might be a library known to many Vue and Nuxt developers - and if not, it should be quickly! With over 200 functions, composables and utilities, it provides a "standard composable kit" which Alex and Michael take a look at in this DejaVue episode. And more than that, they also share their favorite composables that they use or learnt a lot from. Definitely do not miss that out and stay fo...
DejaVue #E013 - The Road to Nuxt 4 (with Daniel Roe)
Переглядів 1,2 тис.Місяць тому
Nuxt 4 is cooking for a while and is close to being released soon. An ideal time for a DejaVue episode where Michael and Alex we explore the upcoming major version of the metaframework with the lead of the Nuxt team, Daniel Roe. After introducing Daniel, we jump into the power of small changes and how Daniel explains his day job to people. We then dive into why Nuxt 4 is being necessary "now", ...
DejaVue #E012 - Geotastic, a Vue-based Browser Game (with Creator Eduard But)
Переглядів 483Місяць тому
Today on DejaVue, Alex and Michael are joined by Game and Web Developer Eduard But, who created Geotastic - a Vue-based browser game revolving around geographical knowledge and uses Googles Maps and Streetview API! Starting with Edu's background in programming and web development and initial experiences with Vue.js, we dive deep into how it happened he got into Game Development, which multiplay...
DejaVue #E011 - Learning new Vue Features and Concepts (with LearnVue aka. Matt Maribojoc)
Переглядів 769Місяць тому
In this episode of DejaVue, Michael is joined by Matt Maribojoc, better known as @LearnVue on UA-cam. While Alex is being absent at VueConf US, Matt and Michael discuss topics around learning and understanding new programming features - from figuring out what the latest features are over to how to properly learn them and eventually teach them to their audience. Tune into the episode to figure o...
DejaVue #E010 - Design Patterns in Vue.js
Переглядів 1,3 тис.Місяць тому
Michael is back from his paternity leave! And he brought three Design Patterns in Vue.js which he and Alex discuss in the 10th DejaVue Episode! Learn more about what Design Patterns are and what the three shown patterns do, when they should be used and which downsides they could bring. Enjoy the episode! Your Hosts * Michael Thiessen * Twitter - MichaelThiessen * Web - michaelnthies...
DejaVue #E009 - Vue.js in Large Applications (with Tim Benniks)
Переглядів 4512 місяці тому
In DejaVue episode number nine, Tim Benniks joins Alex discussing how he used Vue in huge applications and how Tim and his team built 3000 websites for a single brand that most of you know - Louis Vuitton. In addition, Tim shares his journey from becoming a nurse to eventually learn web development. Learn which benefits Vue brought compared to the old jQuery application, how Tim and his team mi...
DejaVue #E008 - Vue.js Amsterdam
Переглядів 2212 місяці тому
Welcome to the eighth episode of DejaVue! In this episode, Alex and (past) Michael recap the highlights of Vue.js Amsterdam, one of the largest Vue.js conference. They discuss the amazing talks, including Evan You's keynote on the 10-year journey of Vue, exciting announcements like NuxtHub, and memorable moments from the conference. They also share their experiences of connecting with the commu...
DejaVue #E007 - From Code to DevRel and Leadership (with Marc Backes)
Переглядів 2042 місяці тому
In the seventh episode of DejaVue, Alex sits down with Team Lead Marc Backes as our guest. Our conversation takes us on a journey through his career with Programming and Vue.js. Marc shares the beginnings of his coding journey, from the development of Software for a Mexican University and lessons learned from founding a startup and eventually joining a German company as freelance developer. We ...
DejaVue #E006 - Nuxt Server Components (with Julien Huang)
Переглядів 6962 місяці тому
Welcome to the sixth episode of DejaVue! Alex is joined by another amazing guest - he is a Front-end Developer, Public Speaker and also part of the Nuxt.js core team - Julien Huang. While Michael is still off on paternity leave, Julien and Alex talk about how Julien started to code (during COVID 😲) and when he dabbled into open source, which culminated in joining the Nuxt team and regularly con...
DejaVue #E005 - From Side Hustle to Server Side Events (with Patrick van Everdingen)
Переглядів 3102 місяці тому
Welcome to the fifth episode of DejaVue! While Michael is on paternity leave after becoming a father, Alex is joined by a special guest, Patrick van Everdingen, Full Stack Developer, Speaker, Panel Host an Co-Founder of CareerDeck. In this episode, we talk about how Patrick started his Vue- and Nuxt-based side project, CareerDeck - and how it grew from an idea at a pool in Italy to a full-fledg...
DejaVue #E004 - Teleports and When to Use Them
Переглядів 5993 місяці тому
Welcome to the fourth episode of DejaVue! From a Nuxt topic last week, Michael and Alex jump into a plain Vue.js topic again, or would you say... teleport? Yes, correct! The Teleports feature from Vue 3 will be explored - from its use cases to the native HTML dialog tag. The two hosts also cover how Teleports were created, even back in Vue 2, and talk about a Nuxt implementation too. Learn more...
DejaVue #E003 - Nitro: The Next Generation Server Toolkit
Переглядів 7293 місяці тому
Welcome to the third episode of DejaVue! After talking about an open source SaaS the last time and hearing a lot about Nitro, Alex and Michael dive deeper into the server framework which powers not only Nuxt but also other frameworks like Analog or SolidStart. Learn more about what Nitro is, the difference between Nuxt and Nitro and amazing features it offers, no matter if you use it standalone...
DejaVue #E002 - Building a Nuxt.js SaaS in less than a week (with Harlan Wilton)
Переглядів 1,5 тис.3 місяці тому
DejaVue #E002 - Building a Nuxt.js SaaS in less than a week (with Harlan Wilton)
DejaVue #E001 - The Need for Server-Side Rendering (SSR)
Переглядів 9713 місяці тому
DejaVue #E001 - The Need for Server-Side Rendering (SSR)
DejaVue #E000 - Trailer
Переглядів 9263 місяці тому
DejaVue #E000 - Trailer

КОМЕНТАРІ

  • @clelsonlopes
    @clelsonlopes 5 днів тому

    Nice to see ProseMirror mentioned. In my case, I had to dive deep in ProseMirror itself because what I needed was really custom features. And I can confirm that ProseMirror is hard, but absolutely fantastic piece of work. I'm using it along Nuxt and Quasar, to develop a spreadsheet-like component (as part of a bigger project) to manage dubbing scripts. It's being quite challenging but so rewarding.

  • @amardeepgill3213
    @amardeepgill3213 5 днів тому

    I would love to know what technique Vanessa is using to persist the editor content in a database. TipTap exposes methods to export as JSON and HTML. I'm using HTML export because there are mature packages I can use to sanitize the content before persisting into the database.

    • @clelsonlopes
      @clelsonlopes 5 днів тому

      I went for HTML/text format, because I need to parse the content in table cells, and editing happens for individual content when the user hits Enter. For this part then, ProseMirror can parse the content as well, from a dummy div element where its innerHTML content is the HTML/text stored. And I think you don't need to worry about sanitizing the content (if it's saved from ProseMirror beforehand) as it only allows content based on the schema you defined. Anything pasted or written in the editor will be forced to parse according to the schema.

    • @amardeepgill3213
      @amardeepgill3213 5 днів тому

      @@clelsonlopes you're right about pasting content into editor being sanitized client side. but if I want to take that same html string and render it into a pdf, or use it anywhere else, I'd have to sanitize it server side before serving to the consumer

  • @amardeepgill3213
    @amardeepgill3213 5 днів тому

    I'm using TipTap with NuxtUI and it's looking and feeling real nice

  • @user-sj7tf2yv3m
    @user-sj7tf2yv3m 5 днів тому

    Пошли интересные темы ❤ 🇩🇪🇩🇪

  • @julianzb
    @julianzb 6 днів тому

    Michael Thiessen: I'm very happy Michael Thiessen too: ಠ_ಠ

  • @LuzAramburo13
    @LuzAramburo13 9 днів тому

    having to learn react to get a job is such a strong mentality for some people. But honestly you should be able to switch between the 2 of them, especially since Vue is so easy. At the end they are both JS frameworks and fairly similar.

  • @FirstUnShame
    @FirstUnShame 10 днів тому

    One thing I hoped would be addressed about Suspense is the fact that, unlike in react, there's no easy way to reenter the suspended state. So it's not usable for cases like search results. You either have to specify the key on the suspended component, or duplicate the loading state inside the component, both of which kind of defeat the purpose of Suspense.

    • @DejaVueFm
      @DejaVueFm 7 днів тому

      We might pick that up in the future!

  • @abhayprince
    @abhayprince 11 днів тому

    Reactive prop destructing is going to be a very good feature

  • @Fearthelettuce
    @Fearthelettuce 11 днів тому

    Great interview! Very cool to hear about the future. Is Evan saying he doesn't have to restart TS server after adding every file? Is there a recommended configuration for how to fix that?

    • @DejaVueFm
      @DejaVueFm 7 днів тому

      At least he didn't say otherwise. Ideally, I'd suggest to provide a reproduction in the VS Code Extension repo with clear steps to reproduce, versions of all (vs code, extensions, vue etc.) so it can be dealt with

  • @luk318
    @luk318 12 днів тому

    I'm surprised about negativity towards Volar. First time I hear this. People already forgot Vetur that was not maintained at all and had more bugs than features? Volar just worked, from day one. I was very early adopter, when there were literally only few issues posted on GH and whole project was experimental. And even in that state, it was 10x better than Vetur. That's why i started sponsoring it also as one of firsts, if not first (not big amount, but still) . I was happy that eventually Volar become official extension. When I had any issue, it was addressed by Johnson usually in matter of hours and fixed/explained right away. Since that it just works, used it in small private projects and big commercial ones. Volar is one of biggest pros of Vue ecosystems.I get it's hard to give reproduction for problem with extension, but I just opened some random open issue, and description of problem literally has one sentence! You need to help someone to help you...

    • @johnsonchu5816
      @johnsonchu5816 12 днів тому

      Thank you. 🫶 (I have forwarded your reply on Twitter.)

  • @andrzejrumak7868
    @andrzejrumak7868 12 днів тому

    Michael, Alexander, Evan great talk. The future of Vue is awesome with Evan and his team. Thanks

    • @DejaVueFm
      @DejaVueFm 7 днів тому

      Thank you so much for listening! 🙏

  • @Aryuzak1
    @Aryuzak1 12 днів тому

    Great one. In next interview, i would like to hear if they gonna do something with reactive primitives. For example, removing part about reactive() from essentials in docs so new developers won’t even question what should they use. I know that docs are already recommending to use ref() but I recently saw people arguing about it.

  • @reubenjunior512
    @reubenjunior512 12 днів тому

    more memes ofcourse

  • @rrd_webmania
    @rrd_webmania 12 днів тому

    "Most people on the happy path" - Yes!

  • @jabal_team
    @jabal_team 12 днів тому

    A shoutout from Lorens Osman in Syria ! To Vue team 👋😎

  • @it_is_random
    @it_is_random 12 днів тому

    I just like your channel name

    • @michaelnthiessen
      @michaelnthiessen 12 днів тому

      Haha thanks! Spent a good deal of time on it. Turns out naming isn't just hard in programming...

  • @codestuff3685
    @codestuff3685 13 днів тому

    v4 changes are gud to haves

  • @TheAlexLichter
    @TheAlexLichter 13 днів тому

    What do you think about the Vue 4 changes?

  • @naranyala_dev
    @naranyala_dev 13 днів тому

    JSX toggle in the docs

  • @Kid-vr6zf
    @Kid-vr6zf 16 днів тому

    You cant tell people you work in open source without explaining how you make money, that is why they dont believe you. You are also trying to confuse them if you talk to the layman like that. Just tell people you are a computer programmer. Then it doesnt confuse anyone. Unless that is what you WANT to do.

    • @Kid-vr6zf
      @Kid-vr6zf 16 днів тому

      I couldnt listen to any more of this. It was aweful and full of stuff like this. I thought I was going to get some info about Nuxt 4, but I couldn't make it that far.

    • @DejaVueFm
      @DejaVueFm 14 днів тому

      Chapter Marks ;)

  • @dvdrtrgn
    @dvdrtrgn 17 днів тому

    Revisiting the old days of IE support is therapeutic for old devs like me. IE never died a clean death. We have come a long way and using Vue and Nuxt is such a pleasure for me. We now have a wonderful distillation of the best parts of web dev history.

  • @tangsi721
    @tangsi721 18 днів тому

    感谢祖师爷赏饭吃,vite就是god-like,不过我实际上一直在写react,虽然它很垃圾,我也不知道是什么原因

  • @ColinJohnsun
    @ColinJohnsun 18 днів тому

    What a great episode. I am so glad you guys started this podcast. You guys did a great interview with Evan. I was worried that this was just going to be a repeat of the "10years of Vue" talk that Evan gave at recent conferences but instead it was a great in-depth interview with Evan and his motivations and reasoning for the direction that Vue has taken. Well done guys, I always look forward to your either watching your videos or most often just listening to your podcast. Please keep this going as it really fills in a void that has been missing in Vue.

  • @user-xe4yv2cz5c
    @user-xe4yv2cz5c 18 днів тому

    Awesome episode, thank you! Loved how Daniel mentioned Jeffrey Way's laracasts courses, his voice😃. My memories of those are the same.

  • @alimaher1
    @alimaher1 19 днів тому

    Great episode! Need more episodes with Evan!! It would be amazing if there was a regular episode with him.

  • @josbouma7924
    @josbouma7924 19 днів тому

    I like how Doniel thinks, amd why i stick with Nuxt, because i believe it's the way forward for this ecosystem.

  • @michaelpumo83
    @michaelpumo83 19 днів тому

    Nice episode guys! Very interesting to hear some of the background behind Vue and why some decisions were made the way they were.

    • @michaelnthiessen
      @michaelnthiessen 19 днів тому

      Thanks! This was my favourite part as well. I don't think I've ever heard Evan talk about the origin story elsewhere (I could just be ignorant though).

  • @SG-br9vj
    @SG-br9vj 19 днів тому

    One of my favourite episodes, I wish I could talk about Vue like Evan and convince my bosses to use it at larger scale 🥺

    • @DejaVueFm
      @DejaVueFm 19 днів тому

      Happy you enjoyed it! ✨ Why is your boss against using Vue at larger scale?

    • @SG-br9vj
      @SG-br9vj 19 днів тому

      Because he thinks React is better ☹️

    • @dvdrtrgn
      @dvdrtrgn 17 днів тому

      When tech decisions are made by bosses who have dated understanding, they just want to play it safe, it creates a hellish lack of progress.

  • @Saeid-Za
    @Saeid-Za 19 днів тому

    Thanks for such an amazing episode, looking forward to next one ❤

    • @DejaVueFm
      @DejaVueFm 19 днів тому

      Glad you enjoyed that one 🙏 We also can't wait to unveil the last half of our conversation 👀

  • @user-sj7tf2yv3m
    @user-sj7tf2yv3m 19 днів тому

    А вы то же сначала не поверили, что это правда?😮

    • @DejaVueFm
      @DejaVueFm 19 днів тому

      Но это правда! 🎉

    • @antidegenerates7449
      @antidegenerates7449 19 днів тому

      @@DejaVueFm big fan of Russia and China, don't you?

    • @darksideishere
      @darksideishere 19 днів тому

      @@antidegenerates7449 get a life weirdo

    • @DejaVueFm
      @DejaVueFm 13 днів тому

      @@antidegenerates7449 Especially a big fan Of DeepL 🥴

  • @antidegenerates7449
    @antidegenerates7449 19 днів тому

    Using Vue was the worst decision I made on the start of my dev career. I wish I've picked React from the start 😁

    • @TheAlexLichter
      @TheAlexLichter 19 днів тому

      How come? 👀 And on that note: I think any dev familiar with either React, Vue, Svelte (and probably also Angular to some extend) shouldn't have a big issue switching to a different framework after learning the core concepts of one. 😁

    • @michaelpumo83
      @michaelpumo83 19 днів тому

      What a bizarre thing to say.

    • @darksideishere
      @darksideishere 19 днів тому

      brainrot is real

  • @TheAlexLichter
    @TheAlexLichter 19 днів тому

    How did you like the episode folks? 👀

    • @dvdrtrgn
      @dvdrtrgn 17 днів тому

      I thought it was great. On the topic of dead versus done open source projects: library authors might add periodic commits that indicate the code (for petite vue, in this case) is believed to be still valid. I am guilty of simply looking at the last commit to judge if a library is worth testing .

  • @lararawf6100
    @lararawf6100 24 дні тому

    I'm excited to move as long as it only takes a day, not 4 months! Great work.

  • @lararawf6100
    @lararawf6100 24 дні тому

    I was thinking that “a jack of all trades is a master of none, but oftentimes better than a master of one. Is bad! But it's make you more creative!

  • @lararawf6100
    @lararawf6100 24 дні тому

    I volunteered and started coding, eagerly seeking more experience to contribute.

  • @ElFerBlocks
    @ElFerBlocks 24 дні тому

    I have been useed composables like a function library ( number format, data to sql format , string function like vfp etc) but i think is time to use more often with with all power of composables

  • @christophermaile3842
    @christophermaile3842 25 днів тому

    Which parts of Nuxt 4 are only responsible for front-end? I'd like to use Python / Django for back-end with Django Ninja for API. Thanks. Christopher Maile fro South Africa

    • @DejaVueFm
      @DejaVueFm 20 днів тому

      Technically everything except the server/ folder 👌

  • @nyambe
    @nyambe 26 днів тому

    makeDestructurable makes sense when re-factoring. Can it be used to get single values of an Array?

  • @nyambe
    @nyambe 26 днів тому

    ClicOutSide has to be one of the ones I use most

  • @alimaher1
    @alimaher1 27 днів тому

    Amazing video for a great library! One more thing that you guys hinted to, also Evan You himself mentioned, is reading its source code is a great way to learn not only about Vue but akso about Javascript in general. Also, regarding code quality and organization. Can't wait for native signals support so that the whole ecosystem would enjoy that library. It would be a game changer.

  • @rrd_webmania
    @rrd_webmania 27 днів тому

    I am ending up adding vueuse to almost all of my projects 😊 Like Michael, implementing my own and realize ah there was a better way 😂

    • @DejaVueFm
      @DejaVueFm 27 днів тому

      One day we look up what we need in VueUse first and *then* try to write our own implementations if it doesn't exist 😛

  • @yoanestradablanco1608
    @yoanestradablanco1608 29 днів тому

    Excellent podcast, I have used the three patterns in my work but I did the one to preserve the complete object because I thought it was more comfortable but I didn't know it was a design pattern

    • @DejaVueFm
      @DejaVueFm 27 днів тому

      Thank you 🙏🏻 Glad you could learn something in the episode 🔥

  • @designerjehovah4453
    @designerjehovah4453 Місяць тому

    loved it. Please keep it coming.

    • @DejaVueFm
      @DejaVueFm Місяць тому

      Glad you enjoyed it! Check out the earlier episodes too for more ✨ And of course, on episode released every week, usually around thursday

  • @rrd_webmania
    @rrd_webmania Місяць тому

    "Rather then ones a year have a heart attack..." 😂

  • @QueeeeenZ
    @QueeeeenZ Місяць тому

    Daniel Roe on DejaVue! The man. The legend! Excited for Nuxt 4! 🎉🔥

    • @DejaVueFm
      @DejaVueFm Місяць тому

      Did you like the episode? 😊

    • @QueeeeenZ
      @QueeeeenZ Місяць тому

      @@DejaVueFm yes

  • @alimaher1
    @alimaher1 Місяць тому

    Before being a great and remarkable developer, Daniel is foremost a kind and humble person. Great episode as usual. Thank you guys.

    • @DejaVueFm
      @DejaVueFm Місяць тому

      He 100% is. We really enjoyed having him on 🙌 Glad you enjoyed this episode too 😊

  • @chstappert
    @chstappert Місяць тому

    Great episode! Nice talk, insights. Looking forward to the follow up.

  • @lararawf6100
    @lararawf6100 Місяць тому

    God bless you

  • @user-sj7tf2yv3m
    @user-sj7tf2yv3m Місяць тому

    Тяжело, тяжело...

    • @DejaVueFm
      @DejaVueFm Місяць тому

      Nuxt 4 migration will be easy though 😁

  • @hungify
    @hungify Місяць тому

    Keep up great work ❤