![DejaVue](/img/default-banner.jpg)
- 18
- 14 814
DejaVue
Netherlands
Приєднався 18 бер 2024
Welcome to DejaVue, the Vue podcast you didn't know you needed until now! Join Michael Thiessen and Alexander Lichter on a thrilling journey through the world of Vue and Nuxt.
Get ready for weekly episodes packed with insights, updates, and deep dives into everything Vue-related. From component libraries to best practices, and beyond, they've got you covered.
Get ready for weekly episodes packed with insights, updates, and deep dives into everything Vue-related. From component libraries to best practices, and beyond, they've got you covered.
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.
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)
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.
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.
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.
@@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
I'm using TipTap with NuxtUI and it's looking and feeling real nice
Пошли интересные темы ❤ 🇩🇪🇩🇪
Michael Thiessen: I'm very happy Michael Thiessen too: ಠ_ಠ
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.
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.
We might pick that up in the future!
Reactive prop destructing is going to be a very good feature
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?
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
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...
Thank you. 🫶 (I have forwarded your reply on Twitter.)
Michael, Alexander, Evan great talk. The future of Vue is awesome with Evan and his team. Thanks
Thank you so much for listening! 🙏
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.
more memes ofcourse
"Most people on the happy path" - Yes!
A shoutout from Lorens Osman in Syria ! To Vue team 👋😎
I just like your channel name
Haha thanks! Spent a good deal of time on it. Turns out naming isn't just hard in programming...
v4 changes are gud to haves
What do you think about the Vue 4 changes?
JSX toggle in the docs
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.
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.
Chapter Marks ;)
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.
感谢祖师爷赏饭吃,vite就是god-like,不过我实际上一直在写react,虽然它很垃圾,我也不知道是什么原因
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.
Awesome episode, thank you! Loved how Daniel mentioned Jeffrey Way's laracasts courses, his voice😃. My memories of those are the same.
Great episode! Need more episodes with Evan!! It would be amazing if there was a regular episode with him.
I like how Doniel thinks, amd why i stick with Nuxt, because i believe it's the way forward for this ecosystem.
Nice episode guys! Very interesting to hear some of the background behind Vue and why some decisions were made the way they were.
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).
One of my favourite episodes, I wish I could talk about Vue like Evan and convince my bosses to use it at larger scale 🥺
Happy you enjoyed it! ✨ Why is your boss against using Vue at larger scale?
Because he thinks React is better ☹️
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.
Thanks for such an amazing episode, looking forward to next one ❤
Glad you enjoyed that one 🙏 We also can't wait to unveil the last half of our conversation 👀
А вы то же сначала не поверили, что это правда?😮
Но это правда! 🎉
@@DejaVueFm big fan of Russia and China, don't you?
@@antidegenerates7449 get a life weirdo
@@antidegenerates7449 Especially a big fan Of DeepL 🥴
Using Vue was the worst decision I made on the start of my dev career. I wish I've picked React from the start 😁
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. 😁
What a bizarre thing to say.
brainrot is real
How did you like the episode folks? 👀
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 .
I'm excited to move as long as it only takes a day, not 4 months! Great work.
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!
I volunteered and started coding, eagerly seeking more experience to contribute.
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
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
Technically everything except the server/ folder 👌
makeDestructurable makes sense when re-factoring. Can it be used to get single values of an Array?
ClicOutSide has to be one of the ones I use most
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.
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 😂
One day we look up what we need in VueUse first and *then* try to write our own implementations if it doesn't exist 😛
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
Thank you 🙏🏻 Glad you could learn something in the episode 🔥
loved it. Please keep it coming.
Glad you enjoyed it! Check out the earlier episodes too for more ✨ And of course, on episode released every week, usually around thursday
"Rather then ones a year have a heart attack..." 😂
Right? 🙈
Daniel Roe on DejaVue! The man. The legend! Excited for Nuxt 4! 🎉🔥
Did you like the episode? 😊
@@DejaVueFm yes
Before being a great and remarkable developer, Daniel is foremost a kind and humble person. Great episode as usual. Thank you guys.
He 100% is. We really enjoyed having him on 🙌 Glad you enjoyed this episode too 😊
Great episode! Nice talk, insights. Looking forward to the follow up.
Thanks! I am looking forward to it as well!
🙏🙏🙏
God bless you
Likewise 🙏
Тяжело, тяжело...
Nuxt 4 migration will be easy though 😁
Keep up great work ❤
Thank you 🙌