In episode 52 of DejaVue (yes, it is a whole year), Dennis Adriaansen joins Michael and Alex to discuss data visualization in Vue.js. Dennis shares insights about building chart components, his experience with different charting libraries, and introduces his own Vue charting library. They explore topics like chart customization, performance considerations, and integrating charts into dashboards.
The conversation also gets into broader topics such as open source sustainability, UI libraries, and backend integrations with Nuxt.
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.
Chapters
Welcome to DejaVue
A year of DejaVue
Another announcement from Michael
How did you get into programming?
Would people choose Vue more if it was more popular?
Podcasts and Hot Takes
Why charts?
How do you get started with building chart components?
What was your use case for charts?
What does Unovis provide?
Why not other Chart Libraries?
Performance of Charts
A tiny Vapor update
Which Charts does your library support?
When do you do Open Source?
Open Source Funding & Contributions
What makes a good Dashboard?
Which backend do you use with Nuxt?
Do you have a preferred UI library?
Where can people find you?
In episode 52 of DejaVue (yes, it is a whole year), Dennis Adriaansen joins Michael and Alex to discuss data visualization in Vue.js. Dennis shares insights about building chart components, his experience with different charting libraries, and introduces his own Vue charting library. They explore topics like chart customization, performance considerations, and integrating charts into dashboards.
The conversation also gets into broader topics such as open source sustainability, UI libraries, and backend integrations with Nuxt.
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.
Creators & Guests
Host
Alexander Lichter
Web Engineering Consultant • Founder • Nuxt team • Speaker
Host
Michael Thiessen
Full-time Vue educator
Guest
Dennis Adriaansen ⚡️
Senior Frontend Dev & Vue Chrts Creator
Editor
Niki Brandner
Audio Engineer and Video Editor
What is DejaVue?
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.
Michael Thiessen:
Welcome to DejaVue.
Alexander Lichter:
It's your favorite Vue podcast. You just don't know it yet. And we are in episode 52 here. It is Michael and me again both on the microphones after lovely episode with Patak all around Vite. Definitely check it out if you haven't heard or seen that yet.
Alexander Lichter:
It's a long one as well. And of course, not only it's with us, we have a wonderful guest. With us is senior front end developer, Dennis Adriaansen. Dennis, how are you doing?
Dennis Adriaansen:
Yeah, I'm doing very good. I'm pretty excited to be here. Thanks for having me.
Alexander Lichter:
Of course.
Michael Thiessen:
Yeah this is a bit of a special episode in a way. 52 episodes, I guess. That's a year in my books at least.
Dennis Adriaansen:
It's a milestone.
Michael Thiessen:
Indeed. Yeah, it's a milestone. I don't know if we forgot to plan anything special other than having you on.
Dennis Adriaansen:
If you had me say something, I had to get some confetti or something. But
Michael Thiessen:
Yeah. Yeah.
Alexander Lichter:
Balloons. But, I mean, there there will be a kinda, let's say, unconventional episode in in a little bit, so you can definitely stay tuned for that. It's, like, maybe in one or two episodes from here as well so to say, belated special. But, yeah, it's it's happened. One year of the DejaVue podcast and hopefully many more years to follow.
Dennis Adriaansen:
Oh, congrats, guys.
Alexander Lichter:
Thanks.
Alexander Lichter:
Yeah. Thanks.
Michael Thiessen:
Thank you.
Alexander Lichter:
And well, coming from that whole year to another special, Michael, you also have a somewhat big announcement, right?
Michael Thiessen:
Yeah. So Mastering Nuxt is the second edition or maybe not the second edition is not the right way of saying it. But the next big version, big update of Mastering Nuxt is coming out on March 25. And that should be next Tuesday if you're seeing this seeing this in the first couple days after it comes out. So you can go check that out at masteringnuxt.com.
Michael Thiessen:
Yeah. We've been working on this for a while. It's a whole completely redone from the ground up. We're talking about all the latest stuff in Nuxt, including Nuxt four and that Nuxt four isn't out yet, but we can, you know, do the compatibility thing and yeah. So so I'm excited for that one.
Michael Thiessen:
You get to build a an AI chat app, which is pretty fun. Nice. AI's kinda all the rage these days. But even if you don't like AI, it's a cool app to, to build.
Alexander Lichter:
Sounds great. Yeah. Check it out. Link in the show notes, of course, as usual. And, yeah, it's it's really nice what you cook there over the the last, well, months, so to say, of, like, preparation using all the new Nuxt features and diving a bit more into that.
Michael Thiessen:
Yeah. Yeah. I'm excited. I hope people like it. So we'll see see how it goes.
Alexander Lichter:
Yeah. If if people try it, they should leave some feedback here or send it straight away. Oh, yeah. For sure. We'll we'll look into that.
Alexander Lichter:
But, coming coming from mastering Nuxt to someone who also mastered certain parts of Vue and Nuxt for sure, Dennis, before before we dive into a big main topic, I think people follow you on social media. They see a lot with, like, certain charts. We were curious how did you get into programming after all and how did you get in touch with you and Nuxt?
Dennis Adriaansen:
That's some time ago. I think I'm programming for more than eleven years now and I did start with programming HTML CSS like all of us. And then after my internship I went to a company and I could stay there with a lot of smart people and that was really fun. They introduced me to Angular, Angular 1.6, I guess.
Alexander Lichter:
Angular JS basically.
Dennis Adriaansen:
Angular JS, yes.
Alexander Lichter:
Wow.
Dennis Adriaansen:
Before the second two, it was pretty exciting. But other than I know Vue now, it was really MVC based. So Model View Controller, that was the thing then that was for the back end and Angular introduced it for the front end.
Dennis Adriaansen:
So that was my first framework that I touched. And at my second company, they worked with Vue. Formerly a reason for that was Laravel shipping Vue JS really early on. And the back end was there, they're calling the shots. They used Laravel and they shipped Vue.
Dennis Adriaansen:
So why don't we use Vue for this project? And that was Vue version 0.6. I don't know. Before the first release, I guess. It was pretty early.
Dennis Adriaansen:
I didn't know stuff. I didn't know Reactivity. I barely know two way data binding. So it was pretty rough to get started. But that was the start for my program career.
Michael Thiessen:
It's a pretty common thing that we keep hearing again and again about how either people started with Angular because that was popular at the time, But then Laravel has had such a big impact on Vue and I haven't used Laravel. I'm not part of that. I haven't touched that. I want to, as more and more people keep talking about it. But yeah, Laravel seems to have had like a really big influence on Vue and the popularity of Vue and how it shipped it at the beginning when it was not even version one yet and made it popular or helped to make it popular at least.
Dennis Adriaansen:
Kind of crazy how such a framework can bootstrap another framework just by shipping it it. I can remember a time that WordPress was programming on Gutenberg, their content management or their editor. And I heard sounds that they would choose for Vue, too. I do think it's React now.
Alexander Lichter:
Yeah, It has been React eventually.
Dennis Adriaansen:
It's been React. Yes. And they talked about maybe it's Vue. And I don't know, but if they choose Vue too, that's probably a major step towards the Vue ecosystem, of course. But it's React.
Alexander Lichter:
Yeah. But it's also funny, I don't know, Wikipedia, the Wikimedia Foundation , they, for example, also chose Vue as their JavaScript front end framework for all the tiny things they need there. Quite some other bigger companies chose it eventually. And Laravel is also someone who used Laravel in the past and came from the PHP ecosystem. So we have some in common there.
Alexander Lichter:
Not as early as Vue zero point something, but I think it was like Vue two or like briefly after release or so. It's interesting that they, for example, switched back to Laravel Cloud to react and but they still, in a way, like, they have vue as first class citizen with, like, starter kits, with a lot of things in there. And Aaron Francis, who we had on the show a couple episodes ago with Fusion PHP.
Dennis Adriaansen:
Oh, yeah. That sounds like sense.
Alexander Lichter:
Having like, Vue is first class. It isn't like, hey. You can try it out and people working on React, but Vue is the first in there. So it's still nice to see that even though React is, of course, the, let's say, biggest player in in the ballpark, Vue is still getting a very nice treatment, so to say.
Dennis Adriaansen:
Would you guys think that if the job market is a bit bigger for Vue, like if you ask people objectively to choose between developer experience of React versus Vue independent from the job market? I guess that so much more people would choose Vue or what do you guys think?
Michael Thiessen:
I think I'm not so sure about that because what I've seen in the past is people like React because it's almost simpler in a way because it's more JavaScript y and you can kind of there's less built in stuff. You, you know, you get you get to choose all the different libraries and things. And I don't know if it's quite the same as it was a few years ago. Maybe it's more standardized for, like, routing and state management and stuff. But it seems like there's some people who just want that choice, whereas, like, in Vue or Laravel, it's like, this is what you use, and it's easier in that way.
Michael Thiessen:
So, like, I think different kinds of people gravitate towards those two approaches.
Alexander Lichter:
Okay. I would probably think the opposite.
Alexander Lichter:
So that's that's quite interesting mainly because, yeah, the the just JavaScript part, I think, really changed with the composition API because now, like, Vue is closer to, like, the just JavaScript thing. Why people don't do this, of course, because and and, like, boot camps, for example, and, like, education, React is the main thing because of, okay. You wanna land the job. You should know React.
Alexander Lichter:
Well, I still think you can land the job if you know any of the major frameworks and can, like, have the the desire or, like, the chance to switch if you need a job. But in terms of, let's say, how easy it is to learn a framework, I would say Vue is definitely still the number one given how close it is to JavaScript, HTML, CSS, how you can just start straight away with a script tag. So you don't even need a build step necessarily, of course, though. Most of the applications nowadays have one. But even then, if you say a Valera application need a little bit of progressive enhancement, you can throw in Vue.
Alexander Lichter:
Reactivity just works. You don't have to think like, oh, I forgot a dependency in my, like, useMemo or, like, useEffect whatsoever. So I I I really think if more people would have seen Vue and I think, like, similarly also frameworks like Svelte that are more, like, idiomatic and easy to learn, I think more people would probably use it if the job market wouldn't be like for, hey. You kinda need need to know React. Dennis, I'm full on there with you, actually.
Dennis Adriaansen:
Let's change the job market then. Let's let's go.
Alexander Lichter:
I think it's really interesting because the quest the question always comes up. Right? And during Vue Amsterdam last week, there was also a panel discussion where, for example, Evan, Daniel Roe, Jakub, a few other people. And I also had a chance to take part while we're in there. And, course, the question also comes, yeah, job market.
Alexander Lichter:
In the end, it's it's really about for a company, it doesn't make much sense to switch to React if all the people, all the projects they have are, like, in React except the departments can, like, own their own tech stack, which is great then, a sort of certain size. But for, like, I don't know, mid sized company, if all the knowledge isn't there, it's really difficult. But then as a developer, you don't have to pigeonhole yourself saying, oh, you are a React developer. You if you know React, you can learn Vue pretty easily and get going. You just have to be open to that.
Alexander Lichter:
So the other thing is I I saw that in Reddit recently as well where there was, a job a post like, oh, I'm looking for a Vue job where all the good Vue jobs
Dennis Adriaansen:
So I see.
Alexander Lichter:
Under that post, straight away under that, was someone like, Oh, we are hiring for a Vue position. Why is nobody applying? So in a way it's really difficult and there might also be a mismatch in terms of hiring culture. It's no monocausal problem in a way.
Dennis Adriaansen:
I think you're right on that.
Michael Thiessen:
Think we also talked on the podcast about, I forget which episode it was, but about Nuxt maybe moving towards more enterprise-y level kinds of things. Because there is like a big difference in features that like a marketing agency or a development agency or like small these small businesses need and like a big enterprise needs Yeah. A different set of features. And so if Nuxt is more appealing to enterprise, then maybe that leads into more jobs as well.
Alexander Lichter:
That's a good point.
Dennis Adriaansen:
Yeah. It makes sense.
Alexander Lichter:
This could have been episode nine with Tim Benniks, where it was called Vue.js Large Applications or maybe with Daniel Roe, one of the many episodes with him. Maybe episode 13,
Michael Thiessen:
I thought it was a little more recent actually.
Dennis Adriaansen:
We have to to to watch so much episodes still. That's I don't have the time.
Alexander Lichter:
Oh, it's it's always tough with podcasts. But it's great for, like, commuting, just, like, listening to that or, like I I do it when I when I bike. I actually just came from a a wonderful lunch with Rijk van Zanten who was also on the on the show already, who was in town. I was like, let's let's grab some lunch. Okay.
Alexander Lichter:
So that's always great a great chance. Or, like, in a gym. That's always good. But then it's like, ref versus shallow ref and you're lifting some weights. It's like
Dennis Adriaansen:
That kept you going. Right?
Alexander Lichter:
Either way, yeah, it's like, oh, shallowRef. Yes. There we go.
Michael Thiessen:
Well, if it's some hot takes that you disagree with, maybe it's like gets you, like, angry and you're like,
Alexander Lichter:
oh, yeah. Gets the
Michael Thiessen:
blood going. You can
Dennis Adriaansen:
Template template string on top. That's really a good debate and you get into a fight if you ask that.
Alexander Lichter:
Yes. Script first, not the template tag. No.
Dennis Adriaansen:
I posted about my charts on Reddit and Reddit is pretty not aggressive with their comments but they say what they think. But in the ranking for most popular posts in the month was number one was let's put the template tag on top. And you see that so many reactions and upvotes and downvotes, it's triggered so many people. It's so cool with such controversy the view ecosystem. It's so cool to follow.
Alexander Lichter:
It's it's also really funny. I mean, Michael, you post about it on Twitter as well. I even made a video about it too. So in a way, they're, like, controversial takes, and it's, I think, good to know why that also changed from, like, template first to script first. But in the end, these are things developers love to discuss, and it's great, but it gives zero value for any audience.
Alexander Lichter:
Yeah.
Dennis Adriaansen:
No one no one experiences it in the in the full website. No consumer or visitor will ever notice such tiny thing.
Alexander Lichter:
And the code doesn't run faster. Your your code is like it won't change for the product if you do template first or script first. It's like, honestly, settle on the convention, enable like in the Essent rule that or like a lynching rule. Now we have also not only Essent the house that just says, okay. Template first and script or the other way around, and then you you just agree on things and it's fine.
Alexander Lichter:
Yeah. Exactly. That's that that will save you a lot of time you could actually put into features like shipping stuff. I know, like, we all love to bike shed and to discuss, like, oh, should we use this or that or a Keybap case versus Camo or a Pasco case. I know.
Alexander Lichter:
I know. It's all fun and games, but it doesn't lead us anywhere. Then let's talk rather about what should be in a composable whatnot because then you actually get some value out of it as well.
Dennis Adriaansen:
Oh, I'm gonna push you in thinking.
Michael Thiessen:
I've actually switched now because I was I used to always just do template first because that's what I did. And then since I I posted about it and people told me that, they didn't like that, then I was like, well, okay. If I'm gonna do, you know, like recording videos and different content, then I'm gonna do it in a way that people are more used to. So I'm just gonna stick with the popular approach because at the end, it doesn't really matter to me how it's done. But if it's easier for you to follow in a video or something, then that's that's valuable.
Dennis Adriaansen:
Yeah. That makes sense. Yeah.
Alexander Lichter:
Do I also wonder, like, how much would it change compared to like, okay. Fine. I have the template part first or I have the script part first. Is it, like, really that big of a deal for people? I'm not sure about that.
Alexander Lichter:
It's hard to tell.
Dennis Adriaansen:
I don't know. Don't know for sure. It's it's I think it's personal preference. If you like template first, go ahead. What's the most important is that you bring the team together.
Dennis Adriaansen:
And with your direct team, you have to agree on one thing. And what you said, just set up a linter that's automatically formatting and forcing it that way. And I don't know if people have such a strong opinion that if they see a tutorial or video with the template tag above the script that they say, I don't want to watch this video. They got a template tech upfront. I don't know for sure.
Dennis Adriaansen:
I think that people are looking for real value like how to deal with reactivity problems or how to obstruct your logic to a composer or what you said. So yeah, don't know.
Michael Thiessen:
Well, it's just one of those things where it's like, okay, if I remember to do it then it doesn't add any extra work for me and it might make it a little bit nicer for some people. If forget to do it then whatever.
Dennis Adriaansen:
Yeah. It's kind of balanced. If you please the others, disappoint the other group, of course.
Michael Thiessen:
That's actually one of the challenges that I got with the previous version of Master Egg Nuxt. I got a lot of feedback and it was like, all this like bimodal distribution, I guess, where some people were like, Oh, you're, you're going too fast. But then a whole bunch of other people would say, Oh, you're, you're not going fast enough. And then it's so hard. Or like, it's, it's too, the material's not advanced enough.
Michael Thiessen:
Then other people say, Oh, it's too advanced. So it's like, well, you can't That's why feedback is so hard sometimes because you have to actually look at it as a whole and say, okay, this is like a whole distribution. I'm like
Alexander Lichter:
Yes.
Michael Thiessen:
Sampling different data points. So I have to get a bunch of data points. I can't just like see one person on Twitter said this was like, you talk too fast or you talk too slow. And I, you know
Michael Thiessen:
Take it all at once.
Alexander Lichter:
That's the thing. Like, if you have to then, like, Gaussian distribution, just a normal distribution, you have, like on both sides, we always have people saying, okay. This is too easy or this is too hard or this is too fast or this is too slow. And the best case is in the most of the parts, especially with the speed, then put it down to 0.75 or to 1.25 depending on your needs. That's totally fine.
Alexander Lichter:
I know a lot of people just listen to podcasts like 1.5, I I usually do it as well. And that that's good. For learning, it's like, okay. If it's too easy, if you already know the content and just skip a patch in the next lesson, that's also great. Or maybe, okay, there is, a beginner, intermediate, advanced course and then you know as well.
Alexander Lichter:
So but if you have both ends, not only, I don't know, 90% of people saying it's too much or it's, I don't know, not enough, also, like, size wise or, like, how how long the lessons are, then you kinda do things right because, yeah, you you can't please everyone.
Michael Thiessen:
Yeah. This is so this is the last thing I'll say about Mastering Nuxt before we turn this whole episode into, like, an ad for it. And then we should we should get on to to talking about charts and things because that's, that's why why you're here, Dennis. So the, the last thing I wanted to say is that we were trying some, something new with the way that we structure it. So the first part of the course is like, kind of like the basics, getting things set up.
Michael Thiessen:
So like kind of building like a, an MVP of the app so that then partway through the course, if you already know the basics, you already know how to do routing and stuff like that, you can just skip ahead to that point, and then we start to go into more advanced data fetching stuff and caching and route rules and all that kind of stuff. You can skip the first part and not be bored out of your mind and wondering when we'll get to good stuff. So I think it'll be nice. We'll see how it goes. Get some feedback on that.
Michael Thiessen:
But I think that'll be a nice way of doing that.
Dennis Adriaansen:
Very nice. I'm looking forward to this.
Alexander Lichter:
It sounds very reasonable. And it's it's a bit like the slicing that way. I I see the benefits. So, yeah, let's let's see how people like it. And in terms of people liking things, I heard a lot of people like charts, but they usually don't like building them.
Alexander Lichter:
And, Dennis, luckily, you had a a few tweaks that went pretty well out there about a certain Vue Chart library and like you building amazing chart components for Vue. Js. So before we get into the release of Vue Charts and how that all came together, why charts?
Dennis Adriaansen:
That's a good question. I do think that the charts in general can make any dashboard or any interesting web page immediately more fun by its appealing. I don't know what it is. If you have two text blocks that are styled correctly and spacing is good and you add a chart, it's instantly more interesting. And I think the visual appeal about Charts is what we as content developers very much appreciate.
Dennis Adriaansen:
So I think that's for me the reason that I'm zooming in on the details and I can tell you more about it later. But I do think that charts can boost a template or a web page enormously. Especially
Alexander Lichter:
for, let's say, a dashboard, you want some charts. You want to see not only here is the text form, you want have the the things visualized. But even for landing pages, be it like for software as a service or anything. Like, yeah, some some graphics in a way make a lot of sense. And, I mean, there are also, like, tons of different ways to to actually show that, which I guess also brings some difficulties because, well, I don't know.
Alexander Lichter:
For example, one one thing I had, like, a side project where I basically just drafted a very simple uptime chart of of something. And then already is like, okay. You don't have to write out. It was down ten minutes, but more like you have the bars and you see where things were up or down. Already like, the the GitHub commit graphs that are a great example of contribution graphs that are
Dennis Adriaansen:
Oh, that's so cool. Yes. I like them too.
Alexander Lichter:
It's it's so great just to see a little bit little things visualize. So we see a lot of graphs in the end. And I wonder okay. Graphs are great. We'll we'll see them, but there are, like, tons of solutions out there already.
Alexander Lichter:
Like, from things like, okay. Just use your own SVGs. Like, just come up with with a few tiny rectangles here and there. You have a bar chart. Tada.
Alexander Lichter:
To more complex solutions like D3, for example. So how did you get into building chart components, first of all?
Dennis Adriaansen:
Another good question for sure. There are a lot of existing chart libraries and they are pretty good though. And I tested a bunch of them and the main thing I stumbled upon was getting into the details. I think we all know Tremor Labs and the Tremor charts and awesome components they are building. I kind of tried to reproduce such charts and what I found is that it's beautiful in the details.
Dennis Adriaansen:
So you have to customize the X and Y axis, but also the dashes on that axis and you have to customize the labels, colors. So you kind of need to be able to customize every detail. And that's when I found unovis library. They are making SVG based charts already looking good. But the configuration was a little bit harsh.
Dennis Adriaansen:
And I do found two components within a chart very important and that is the tooltip and that's legends. Those are two important additions of a chart. So I wanted to customize those two.
Dennis Adriaansen:
Unovis had a bit of weird construction to do the tooltip. So I wrote a simple function that's creating a new component that I can customize fully and that's looking really good.
Dennis Adriaansen:
So I don't want to copy and paste that to future projects. I thought let's make a chart. Let's make a library out of it. And yes, I posted it on X or Twitter or X. Don't know how you want say it.
Dennis Adriaansen:
A lot of people are liking it. So I I get through with this chart and I'm gonna see where it brings me.
Alexander Lichter:
Yeah. I think that makes a lot of sense. Like just, okay, I need these charts in different projects. Let's build a wraparound UniWiz and then making things even easier to customize for any level of setup necessarily.
Dennis Adriaansen:
Exactly.
Alexander Lichter:
Yes. And I've seen like you got like, yeah, I think thousand or so or even more likes on Twitter, which is of course great. I mean, people are always fascinated about charts, benchmarks, speed ups. So that was a good choice there as well. Before we get into the chart library part, what was your specific use case to say, okay.
Alexander Lichter:
I need charts. Because you said, like, they fit kinda everywhere. But in which projects, if you can share that, of course, you thought like, okay. That type of chart was great and here's why.
Dennis Adriaansen:
My project before this project was our Nuxt error dashboard. So I previously launched an SEO tool on Product Hunt and that went firewall too. And there were way too many visitors on my site and I tested the application like 50% and I didn't catch all those errors. So it was partly a success, but it failed tremendously because the errors I hadn't overseen. So I thought, okay, I need to get a dashboard, simply take the Nitro plugin, catch the errors and send it to some dashboard.
Dennis Adriaansen:
I can see them easily. And that's when I worked on that dashboard and oh, this chart is amazing. And I got the line chart, but I thought I need a bar chart. The bar chart is way more cool than a line chart. So that was a moment where I did play with some different charts and thought, okay, this must be an easier way to get vector charts into my app without doing the configuration all over again.
Dennis Adriaansen:
That's that's kind of the reason.
Michael Thiessen:
Okay. So I'm not so familiar with unovis. So I'm wondering about what does UNOVIS provide? And then what does your chart library add on top of this to where are the lines there?
Dennis Adriaansen:
Most important difference is that Unovis is a wrapper around d3.js. And d3 provides exactly the vectors and calculations between a time series and how much values on the Y axis should scale if the data is increasing. So if you see that you have some reactive data, then the Y axis will scale with it. So that's what you obviously want.
Dennis Adriaansen:
There are a specific set of calculations that D3. Js provides. And Unovus makes a wrapper about around that. So a bit easier to consume. But that's it too.
Dennis Adriaansen:
It's just a wrapper around the X and Y axis. They provide some custom options where you can tweak some CSS variables or something else. And I make a wraparound it to make that settings in Universe even simpler. So I don't provide enormous value or insane calculations or something. You can see I make it just a little bit easier to customize the visual details.
Michael Thiessen:
I think I see a lot of this around where we have like libraries or even services that make things just easier to use. I think that is a huge value, like without adding necessarily any extra functionality. If you can, you know, if instead of me taking a day to add a line chart to my app, I can take like an hour or even ten minutes, that's a massive thing because that's the difference between me adding a line chart or me not adding a line chart to my app because it's just like an extra thing.
Dennis Adriaansen:
I do think so. And I do not use AI a lot, but I saw the guys of Vercel and shadcn, they are pretty much intensified their CLI behavior and they want to run things via the CLI. So if you make things easier to generate, then those tools will be able to generate those things easier. I do think so. And if the generated code is also easier to interpret it, then UniR devs can work way easier with it.
Dennis Adriaansen:
I have tried to consume or build a D3.js implementation myself and I could understand it but it was a bunch of code and you have to scroll and dig through it before you actually know what's happening and you will understand it. But it's hard and it's a lot of code. If you can bring that down to a couple lines and each line describes exactly what it does, that make a life for a junior dev even better but also for senior devs. It's pretty to work with.
Alexander Lichter:
I guess it also helps with the abstractions to like, okay, here's that component. It works. Here's documentation. You don't necessarily have to worry what's underneath. So you basically have that, let's say subset of an API.
Alexander Lichter:
It still does what it should. It might be a bit opinionated but that's fine. And if you really need to then you can also read for something else if that doesn't fulfill your needs so to say.
Dennis Adriaansen:
Yeah, of course. You could first try my library and think, Oh, the charts are awesome. But if you find yourself in the spot and you think, I need more, then it's a level to downstep to. I'm going to use Unovis directly. And so you can upgrade as you need it to more dedicated tools.
Dennis Adriaansen:
I think we all do that in all kinds of projects and software we use.
Alexander Lichter:
Yeah. Definitely. Like, I think using a dependency or like a wrapper of a wrapper of a wrapper until you might need to go a little deeper makes a lot of sense because, well, the rule of least power. Right? I have this specific subset.
Alexander Lichter:
I use it until I need something more low level, so to say, or something that that wrapper can't do.
Alexander Lichter:
Now you mentioned Unovis, and that's, of course, what's your chart library is is based on. But what about other chart solutions, like very common things like, I don't know, Chart.jJS and other libraries? Why not just rolling with them because they can also do, like, I don't know, line charts, bar charts, and so on and so on. Probably also something you have you have thought about before and thought like, hey, here are the reasons why not?
Alexander Lichter:
Or like why?
Dennis Adriaansen:
Yes. I don't know if the reasons for each library here lay down. But what I could remember for Chart.js is that they provide legends in the top right corner from the charts. And I find it way too hard to customize them.
Dennis Adriaansen:
Maybe I didn't look enough, I don't know. But it's bothering me that it is there. Didn't like it. So it's mainly the basic configuration that pushed me away from it. I maybe had to dig a little deeper to learn it, to get the API up and running.
Dennis Adriaansen:
But what I said, it's a step to take to learn a new API, to learn new And how faster an library teaches me off, yet I'm going to look for easier solutions. And I saw Sebastian from the Nuxt author. I saw him using Unovis in a Nuxt UI Pro example somewhere and that looked insane. It looked so good. So that was the reason that I thought, maybe I should try that library because that's looking clean.
Dennis Adriaansen:
Basic configuration is clean. Let's go for that. So I can't say that I tested them all and tested everything 100%, but I liked Innovus really fast.
Michael Thiessen:
I used Chart JS in a Vue project a number of years ago and my experience was that there were some challenges with the reactivity, sometimes not working correctly. And I think it was really simple to get going and get started. But once I needed to customize something or get it to look a specific way, that specific customization was really difficult to do. And there was not an easy way to, you say, go down that level of abstraction to get a little bit more control over what's going on. It was like I hit a brick wall and was like, okay, we have to to throw it out and like try something new entirely.
Michael Thiessen:
So, I mean, it could be different now, in later versions, but that's that's what I recall.
Dennis Adriaansen:
Yeah. Same. Same. Exactly.
Alexander Lichter:
Yeah. Also, like, I think Chart.js is notoriously well known for not having the best docs. At least I've seen like, I I've used it in for as as you said, for, like, basic use cases. Like, it works.
Alexander Lichter:
It's fine. I think it's very powerful, but, yeah, it's not that not that trivial to go through all the options. And I've seen, like, countless times on social media people like, oh, if someone would just make a doc site for charges with all the kinds of examples and code to copy and then just smash ads on that, they would be a millionaire. Probably not exactly, but I wouldn't lie if I wouldn't have thought about it for a second. I didn't, of course.
Dennis Adriaansen:
I think something you said is really spot on. You said the ability copy paste something. I think we all like that we see an example that exactly matches our needs and that we can swap up the code and copy paste it. And it's even faster than using AI or something. It's why it's there and it's looking good.
Dennis Adriaansen:
Want this. If you can copy that to your projects, it's an awesome feeling. So that's good reason.
Alexander Lichter:
100%. And then having, of course, all these examples that show different ways of doing things that like, hey, here are a thousand examples. Maybe they're tagged and you're like, I don't know. I want a bar chart and should have, I don't know, legends the legend only for I think legend on on the on the left or left and right and both whatsoever. Like, some more complex things as well.
Alexander Lichter:
And, yeah, that's I I think it is always tricky because you have all these like options to to actually draw charts and all these different use cases from like, I don't know, scatter plots and things to simple bar charts. And it is tough. The other thing I think of Charge. Js is like that it's a Canvas based library. So it's not SVG based which makes debugging not necessarily easier.
Alexander Lichter:
And of course also the implication that like, okay, Canvas is browser only so you have to train the client. That might also mean some flickering for SSR content. Well, in SVGs you can just fire it up like here's the data and it's fine.
Dennis Adriaansen:
Unovis has on this point no support for SSR as far as I know.
Alexander Lichter:
Okay. Interesting
Dennis Adriaansen:
They use the document I guess to generate the first baselines. Don't know this for sure, but I'm experimenting with some layer that I can fake the documents on the server and actually support the server side rendering in Nuxt, working on the module for Nuxt specific. So SSR is highly on top of the list because yes, it's awesome if it gets server side rendered.
Dennis Adriaansen:
And the only thing you said it's Canvas based. Canvas based is a bit harder to debug, but it comes with performance gains. Said before that my Reddit post was pretty not aggressive, but well commented.
Alexander Lichter:
Criticized.
Dennis Adriaansen:
Criticized.
Dennis Adriaansen:
Yes. The most upvoted comment below that post was the performance of vector based charts. He said around 1,000 data points you get lag and your chart will slow down. I commented below, Okay, thanks for pointing it out. I never had such use case before so thanks that I know it now.
Dennis Adriaansen:
But that's another question to take. Do you need thousands data points into your dashboards? Or do you want to visualize just a time series over a year? Are there thousand data points? I don't know for sure.
Dennis Adriaansen:
But yeah, that's the kind of a choice that you have to make.
Michael Thiessen:
I guess that's because there are just so many DOM nodes going on in the document that it starts to slow down. I think, that's a good question because it's like, well, okay, that makes sense. At around a thousand, it starts to slow down, but how useful is it to see a thousand things on the screen at once? Like is it Exactly, yes. Like, can you actually understand that?
Michael Thiessen:
Like most charts, most analytics that I look at, it's like, if you're looking at a specific day, there's like, okay, there's a data point per hour. But when you zoom out to the year, you don't need a data point per hour because you can't it's not useful anymore. You might as well just do like one per day or even like one And so probably that's more of like a UX question. Just like, I remember one time trying to figure out how to get like, we had a modal system and we were trying to figure out how do you open a modal from a modal? And then Oh.
Michael Thiessen:
We were like, a second. Wait a second. This is a UX question. Why why have stacked modals in the first place? Like, let's just Let's just not do that.
Michael Thiessen:
And then we solve that issue. Sometimes it's a UX problem.
Dennis Adriaansen:
Solved it by avoiding it to choose not modal in the middle. It's funny you say that. I'm working at a great Dutch company and they have thought of modal and modals many times and they build it in jQuery and PHP. Long story, long story. But my team is always saying, do we need this?
Dennis Adriaansen:
Do we need a modal in a modal? And they have a model on desktop and sometimes a bottom drawer within that modal. So like to fake iOS bottom drawer within a modal on desktop, it's so weird to do. And my team is always, Do we have to do this? And I go to the stakeholders and ask, Do we have to do this or can we skip this?
Dennis Adriaansen:
No, no, I want this in the project! And then it's so bad that we pretty much want to avoid it too. But sometimes we don't make that decision.
Alexander Lichter:
Yeah. It's tricky. But I think especially they're starting with like, hey. Look. Let's actually see if that's something we can improve UX wise and then we can avoid all of that would be great.
Alexander Lichter:
Yeah. I think I think though in terms of, like, thousand nodes, I mean, I'm also not a big, like, data visuals, like, guy, but I've seen quite some scenarios, especially, like, yeah, time series and so on where, like, okay. Or, like, everything related to maps. You don't want to put every point on, like, I don't know, the map of Europe somewhere. I don't know, every city.
Alexander Lichter:
That's not necessarily a good idea. But on the other hand, you also wanted to still be, like, as fine grained as possible. Like, when you zoom in, you add more and so on and so on. So I also see, let's say, I don't know, you have a lecture at the city and wanna show the different districts with certain things. There can be a few elements, if we add like tool tips and popovers and then in there you have some more options.
Alexander Lichter:
It can be difficult. But luckily, also there in Vue, that's something a lot of people are looking forward to, right? Vapor mode might help with that. So the rendering actually and the reactivity changes of like the templates will be just more fine grained and easy and then also on par with things like Svelte and Salt and even better than that. I think the last stats were showing that view vapor mode will be even faster when it comes to that.
Dennis Adriaansen:
That's awesome.
Alexander Lichter:
So we we've talked about it, like, in our, I think, 2025 prediction episode a little bit, but right now, like, vapor mode is is still work in progress. There will be if everything goes well on experimental version and three dot six, I think hydration is not ready. So for SSR, it's yeah. Not there yet, but the the Vue team is, like, working hard to get that done.
Alexander Lichter:
But it would be great to, like, actually have that working because I think data visualization is, like, one of the few cases where it actually matters. We have these insane amount of DOM nodes at least sometimes. Want to make sure that things work also fine granularly on mobile systems as well on low end devices too.
Dennis Adriaansen:
Yeah, true. Especially low end devices, yes.
Alexander Lichter:
So yeah, can't wait for that to happen. I think you can only try it out like in Vapor playground. We also linked that in the show notes for everybody curious. And then we can't wait for the next Vue Vue minor version as well where things happening.
Dennis Adriaansen:
Is there a time path for Vue Vapor that you know of of?
Alexander Lichter:
This is no, like, said thing, but I personally think this year would be very realistic. Of course, not like with full feature parity or, like, options API support, but as experimental comes in three dot six and the playground is already running it pretty well, I can imagine, like, that's we would see it this year. Yeah.
Dennis Adriaansen:
Awesome. I have to dive a little bit more into that. That's great material to dive into next week or this week
Dennis Adriaansen:
Absolutely.
Alexander Lichter:
And are like as you said, there is the REPL you can already try out. You can run things in and see how fast it actually is. So definitely recommend checking it out. Also, some links for that for everybody interested in the show notes for the playground, but, also, there is a great document. We we mentioned it before about diving into the source code of Vue Vapor, which is, of course, a whole different story than using it.
Alexander Lichter:
It's like, contributing or writing. But also a link for that down in in notes.
Alexander Lichter:
Okay. So we we've talked about like we've mentioned your chart library now quite a bit. And as you said, okay, you wanted to make sure that you don't have to copy paste components from projects, which is always a good idea.
Alexander Lichter:
That's like how how great contributions start of like, okay, not copy pasting 10 times, just like putting it in npm package and let's go. So could you maybe give us a little rundown what type of like charts your library include right now and maybe what the big picture or division of the library would be from your side if there is like a big plan so to say?
Dennis Adriaansen:
Yeah, of course. I just released a beta version and that's containing the basic chart types like a line chart, area chart, bar charts and stacked area charts. Yes, stacked. I said that correctly. So those are the basic charts we expect in dashboard.
Dennis Adriaansen:
And my focus is to get that stable. That's the first version. I don't know if I want to zoom in on all chart types and make it like a Unovis wrapper for Vue that can do anything. I just want to focus on the dashboard side of charts. So everything we can see in for example Google Analytics.
Dennis Adriaansen:
It's great if you have all the dashboards open. Find it great to watch that. Those are the charts I want to focus on and also add some more components that not are charged. So the status component I really like with the tiny little steps that shows when you're up and running or not. So the chart library is one basic library and I'm going to focus on even more components that will enrich any dashboard so that you can copy and paste the chart but also can copy and paste other useful components for your dashboards.
Alexander Lichter:
I think that makes a lot of sense. Focusing on that specific subsection, are you also planning to make some, let's say I mean, you have examples up there like, hey, this is how like a bar chart works or a line chart or similar. Are you planning to make like a little dashboards demo where you, let's say, have random live data being generated and the charts are updating, maybe some animations for that and all? Is it also on the list to see like, hey, this is what you could do or maybe hear even some default animations that happen when you update a chart or similar?
Dennis Adriaansen:
Yes, that's the first thing I'm going to do before expanding any chart types. I imagine a bar chart or an area chart with a sort of slider above that you can drag and that you can visualize the data changes into the chart. I think that's something we as front end developers really, really like. And it's cool to demo to stakeholders. Assume if we change this button color from green to blue, I assume that we increase sales by 1% and then you drag that bar to a percent extra and you see the data visuals.
Dennis Adriaansen:
That sells, I guess. I'm becoming enthusiastic about this or I get motivated about such components. So that's something I want to share. And maybe others are really excited about that too. That's great.
Dennis Adriaansen:
Yeah, that's my focus. It makes me happy, then I do think it will make other people happy too.
Alexander Lichter:
More than sure, there are always people the same with I don't know. If you have a bug, you're not the only one having that usually. There are other people. And maybe they say something or maybe even contribute or just be like or just use it. Right?
Alexander Lichter:
On that note, it's like the library is open source, obviously. It's already available on GitHub and also link to that in the description slash show notes. Do you do open source, like, in your spare time, or are you allowed doing that throughout some work hours? So how does it work for you usually?
Dennis Adriaansen:
I'm kind of new to the open source world. I programmed a long time but never did contribute to open source. But it's greatly allowed in our company And the Junior devs are pretty motivated to contribute to any library. So we had a bug in Tailwind CSS 4 lately. We were early adopters from the customized container queries.
Dennis Adriaansen:
So you can contain a query six on hundred pixels. XS. And there was a bug that container queries didn't work anymore just after release. So one guy of my team, he was, Let's go. I find a solution. Let's shove a ticket into GitHub.
Dennis Adriaansen:
I do think it's really valuable to provide your knowledge back to the open source world. If I see my company, they use Nuxt, they're not making money with it because it's not public yet. But if it's public and they can't use it, it's generating a lot of revenue. So my opinion is that at least a part of that revenue belongs to the open source world or the creators of that software. So it's a kind of hard balance between contributing to open source but you have to make money too.
Dennis Adriaansen:
I guess that's how it sounds for a lot of people. So I do it for fun and if I encounter some kind of bug I will notice it, try to solve it. Yeah. That's my part new for contribution to open source.
Alexander Lichter:
But it's already great that you can do it throughout your working hours and you're not like, oh, there's a bug. I know there are some especially being a corporate and then they have policies saying, oh, yeah. You can't do that because then legal and this. As a as a German, I heard things. Well, of course, then what will happen is to just do it, like, sneakily with a different account and or, like, just write it down, do it in their, like, spare time.
Alexander Lichter:
But often they just don't do it then because, well, it's also extra time. Even better that it's possible for you doing that through the work hours. And of course, thanks for giving back to the community. That's amazing.
Dennis Adriaansen:
Nice. We love to do it. And I think everyone should, especially if you make money about other people work, you have to give something back, right?
Alexander Lichter:
That would be great. The whole topic of open source sustainability and funding is sadly not solved. There are great initiatives like the Open Source Pledge where basically companies say: Hey, we give €2,000 per developer or employee. I'm not entirely sure, but you can check the website. I think it's per developer.
Alexander Lichter:
To open source projects per year, which is like, hey, if you have a well running company, that is usually a small amount compared to what you pay on salaries and so on, of course. And then you can even say, hey. Yeah. I don't know. We use a certain package or a certain library.
Alexander Lichter:
They are underfunded. Spoiler, most of them are. Let's give them some money out of that.
Dennis Adriaansen:
Yeah. That would be so great.
Alexander Lichter:
And yeah. That's I I think also if like more more and more corporations would do that, that that would just help. Plus, they can choose, for example, hey. That's your own our own stack. Let's support them.
Alexander Lichter:
So we make sure we still can use them or there's a new version, things run faster, better and so on and so on.
Dennis Adriaansen:
And our people don't have to spend time fixing bugs or maintaining this project and they can focus on real business issues within the company. So it's a win win.
Alexander Lichter:
Exactly. Mean, that would be the other option of contributing. Right? It's not only money. Like we have talked with Patzak about it also last episode when he is hired full time to do full time open source and Stackbloods, but also other models like fifty fifty or a certain percent.
Alexander Lichter:
So that's another way, let's say, not like throw money at it, but make sure, okay, people that maintaining critical parts or important parts of open source are well, can pay their bills.
Dennis Adriaansen:
Yes. Yes. Of course. It must be a win win. That's for sure.
Michael Thiessen:
It's kind of crazy when you think about like if open source software was all like if it didn't exist and was entirely paid for, there'd be so many companies that just wouldn't exist because they wouldn't have been able get started or afford the software or even now wouldn't be able to afford the software. So give some money
Dennis Adriaansen:
I mentioned some, but we all know the feeling that we really bite into a bug or bite into a solution we cannot find. And often that's happening in the night hours or in the evening when you're not at You can get loose from it and you keep thinking about it. But you say many problems get solved by an open source contributor. If it wasn't open source, that problems would maybe never get solved. So we are twenty years behind without open source, I guess.
Alexander Lichter:
Yeah. And some ideas don't even come up. Some things never happen. I also like the model that's like some source available because they're not by definition open source like projects follow on that you just say, okay, hey, it's free until your company reaches a certain amount of revenue they make and then you have to get license. Where it's like, it's basically open for everyone starting up and then at the end for the people reaching a certain threshold.
Alexander Lichter:
I mean, I know I'd say if you have 10,000,000 ARR, then you can probably also pay for a license in a way. You would say. That's at least a way of not saying, I don't know, you have all these different options like freemium, OpenCore and so on and so on where it's a bit tricky, but that seemed like a somewhat straightforward solution.
Dennis Adriaansen:
Yeah. I agree.
Michael Thiessen:
Yeah, we had you put down some things about what makes a good dashboard. We've kind of covered that a little bit about charts make a good dashboard. But do you have any other thoughts around maybe some UI UX ideas around that?
Dennis Adriaansen:
Yeah, I do think Charts make a lot of good dashboards. Also data tables, when you can't get to fill the data, they are just awesome.
Alexander Lichter:
Another easy component.
Dennis Adriaansen:
Yeah, I did tweet about the Nuxt UI three data tables that are using 10 stack tables and I just couldn't get used to TanStack tables. But now they are in Nuxt three UI and I played a bit more with it. I'm getting pretty hyped that it's the best solution to make such complex data tables, especially with pagination and I think that's a pretty good spot for now. So if if you say it was a good dashboard, I imagine some data cards, a chart, and an awesome data table below it. And then you can filter out everything you want and it's visual, awesome to look at.
Alexander Lichter:
That makes a lot of sense. Like, all the dashboards that you have, all data you want straight away there, it could be customizable as well. It's always a big big aspect. But like, oh, I want to see that differently or like give me that time span and save all of that. And yeah.
Alexander Lichter:
But it's it's also not a super simple thing to build, just mention data tables. But also if you have all the components ready, the sheer amount of data and like then you start off like, okay, you need pagination, you need filtering, you need sorting. It can be really tough even though if you're like, it's just a bit of data and you display it.
Dennis Adriaansen:
Yeah, let's fill it out. There is a thing with pagination though. You can paginate at the front end. So you get 1,000 records from the API and you divide it in pages. But if you need to combine the pagination component to an API and have to get pages with query paramates, page, it's X, whatever.
Dennis Adriaansen:
That's a combination that's hard too. So yeah, you can have the components. They should all be able to use pretty easily. But then you have to do the data fetching and transform it to whatever you need. So that's another topic maybe.
Alexander Lichter:
Yeah, there could be probably a whole other episode around that as well. On that note, in your company, your daily dev life, you use Nuxt, do you use a separate backend or is it all written in Nuxt JS and Nitro? So how are you usually doing that for your case?
Dennis Adriaansen:
No, it is a pretty old company. So the APIs are really old and they are making
Alexander Lichter:
Java.
Dennis Adriaansen:
No, PHP.
Alexander Lichter:
That was my second guess.
Dennis Adriaansen:
I say Symphony, but the real core API is built on Sense. Oh,
Alexander Lichter:
Zend framework.
Dennis Adriaansen:
Yeah. It's pretty old.
Alexander Lichter:
It's called Laminas now, think. It's still kind of around. Yeah.
Dennis Adriaansen:
I think you're right. Exactly. So they're making new APIs for us and we pass it to the next server routes. I love the option to cache our server routes. That in combination with Keep Alive, that has blown away some backend developers at our office.
Dennis Adriaansen:
Come with me, work something on my page and I go page back, page back. Is this so fast? Did we do that? I said, No, no. That's the next part of the application.
Dennis Adriaansen:
You have nothing to do with that.
Alexander Lichter:
You wish.
Dennis Adriaansen:
Yeah, you wish. It was fast. I know.
Dennis Adriaansen:
That's something we do. We call the API endpoints from our Nitro server, do some caching and then modernize it to what we need. Also the transformer is awesome. We get a lot of unnecessary API data and we transform it exactly to our component props and we can just bind the response. Yes, it's a little too heavy.
Dennis Adriaansen:
But we can bind almost directly the response and it works. That's the approach we use.
Michael Thiessen:
That's a really nice pattern because then you don't have to rewrite your entire backend, but you still get next step you're building gets a nice back end that's fast and like cached and everything.
Dennis Adriaansen:
You just consume
Michael Thiessen:
I've had a bug where we were V binding data from the API pretty much directly, but the component only took like a few props and then the the actual object from the database had I don't know. There were like probably like 20 or 30 different properties on this thing.
Michael Thiessen:
So then when you go to like open up the dev tools and like try and debug the the actual HTML elements, then all of a sudden you notice that there's, like, dozens and dozens of extra attributes that were put on to the to the elements because they weren't props. So Vue was like, oh, this is HTML attribute. So you're like, oh, this weird, we had JSON
Michael Thiessen:
in the DOM. And it was like, okay, that's
Alexander Lichter:
object object. That's also a very common thing.
Michael Thiessen:
Exactly.
Dennis Adriaansen:
You have to change that. That's so cool. And on transformers, you apply a response type and you apply the type you expect in your components and you write that once and it will work. And if the API is sending more data, if everything is correctly, we can see it while programming that's not good where we get back from the API.
Alexander Lichter:
That's true.
Dennis Adriaansen:
I love Nuxt server endpoint.
Alexander Lichter:
The whole back end for front end pattern is really useful. Then every application of multiple apps use the same back end as well, like different deployments, different regions, whatsoever can have their own caches, their own cache timers as well. So it's really customizable and you also don't have to budget like, Hey, backend developer, can you change this and that? You can just do it yourself, which is pretty helpful so to say.
Dennis Adriaansen:
True. Very true.
Michael Thiessen:
For those server routes, are you using something like zod or maybe contract testing or something like that to verify that the other API is going to give you back the things that you're expecting and things don't get weird and change around?
Dennis Adriaansen:
Not yet. It's response types with bind an interface to the response and we say, Okay, we expect a type for component x. And that's well developing. We can play with it. But as you mentioned, Zod prevents even more API data to come into the application and that's not the case for us right now.
Dennis Adriaansen:
If the API is sending more data, yeah, then we would see but it's not asthmatic label. Because Zod is runtime checking, So you bind your types to the runtime from the app. That would be a good solution. I think I have a new task for this week to do.
Michael Thiessen:
There we go. Well, sorry for that.
Alexander Lichter:
Well, mean, it has pros and cons, right?
Dennis Adriaansen:
In my private project site, I do use it. I I wrote a little CLI for the server last time to reproduce some Laravel behavior in the the Nitro server folder. And there you have some resources and you have some request validation. And there you want to request validate with zod. So I kind of questioned myself why I do that in my private projects but do not apply it on my nine to five.
Dennis Adriaansen:
Maybe I have to do that.
Alexander Lichter:
Yeah, definitely you should. Or at least bring it up and then people are like, Oh, what's that? Oh, parsing is apparently cool. Can make sure things work in runtime as well, not only pretend Predated you in real time. True.
Alexander Lichter:
Yeah. And like you can use any kind of that's also nice library no matter if it's like valibot, Zod. There are tons of others that use ideally standard schema because the method to like validate you can even just write your own in Nitro. So you can do, I don't know, read validate or the validated body, same for query and so on. You can write your own function, just pass in a parse function of a schema.
Alexander Lichter:
That's really, really powerful and there is more to come.
Dennis Adriaansen:
Yes, it's really exciting to be part of this ecosystem. And I see a lot of backend developers kind of look at Nuxt before they, Oh, it's ugly, it's JavaScript in the backend. I don't like it. But now they see pretty much how the ecosystem provides lots of values. Think, oh, that's pretty cool.
Dennis Adriaansen:
We need that too in the back end. I know for sure you need that in the back end. That's very cool.
Alexander Lichter:
Yeah. It's so great to see how that modern touch, like, influences people. Like, okay. I see where this is useful. There's still some parts that I don't like about it, but it's like, okay.
Alexander Lichter:
That's that's good. Good that we have that.
Dennis Adriaansen:
Yes. Let's coach them to to do Nuxt too.
Alexander Lichter:
Yes. That would be great. That is the step where we're going. All right. For your dashboards, you have of course your chart library.
Alexander Lichter:
Is there any UI library that you prefer to use it with? Do you all hand roll it? What's your thing there usually?
Dennis Adriaansen:
I do use Nuxt UI a lot lately. They do use SHACEN Vue implementation too. But I find Nuxt UI is really good, customizable and it's looking good already. So that's one thing I use the most lately and I think I'm going to use this for the upcoming projects all along. And my chart library will be focusing on supporting Nuxt as most important and therefore Nuxt UI too.
Dennis Adriaansen:
What do you guys use if you have to choose a library today for a new product?
Michael Thiessen:
So I would choose Next UI now, but that's only a more recent thing for me. I spent a number of years working on component library for a company, so I built it all from scratch. And so that was like one of the most fun things that I I've done. So then I kind of got stuck in this mode where I just couldn't use any other UI library. I just wanted to hand roll everything myself.
Michael Thiessen:
And it's it's fun to make, like, little, you know, context menus and drop downs and things like that until until it's not fun and you realize that there's all these, bugs and things and you're like, okay, maybe I should just swap it out for something else and then customize it from there. That's where I'm at now. I think my site and my course platform and stuff, I'll have to slowly transition over to Nuxt UI eventually.
Alexander Lichter:
Pretty sweet. Yeah. I I'm kind of in the same boat, I would like to say. I think I still hand roll a lot of things because I don't build huge dashboards. But for, like, let's say, internal applications, I just roll with with Nuxt UI.
Alexander Lichter:
I was there because it's customizable with Nuxt UI Pro. It's super easy to just, like, get some really nice components out of the box and then still update them. So yeah. All in all, that's it. But I I think for, like, more landing page rate things, also like to use Inspira UI.
Alexander Lichter:
I also made a long video about that because it's really like you just copy paste things, it's tailwind supported, but it's more like for design aspects. Not like, here's the data table component, but more like, here's a really cool, I don't know, button with a rainbow border or like a certain effect.
Dennis Adriaansen:
Yeah. Yeah, that's cool.
Alexander Lichter:
And, yeah, shout out to the people there. Also like to Recur UI, which is the underlying UI primitives for for Nuxt UI as well. So it's basically a rebrand from Radix. And that's that's pretty good.
Dennis Adriaansen:
Yeah. One card zernonia is his name called, I guess you Yeah, exactly. He's also contributed to the Unovis Vue package a lot. So that's nice.
Alexander Lichter:
Yeah. That's that's the good part. He's also he's also into charts for sure. And, like, the the whole, yep, the whole RadixView port and now, like, the rebrand is, like, really amazing job. So Lots of credits to him.
Alexander Lichter:
Yes.
Alexander Lichter:
Alright. Then I think we can slowly wrap it up. Then maybe the last question that could be pretty interesting, Dennis, where can people follow you if they wanna see how the chart library is going? Maybe if they wanna contribute, if they wanna reach out and say, hey.
Alexander Lichter:
Have you thought about that, this, some more questions besides of course in the comments hereon YouTube or in socials. So yeah, where can people find you?
Dennis Adriaansen:
I'm pretty active on X lately. So I post every day, mostly every day. So please follow there or send me a direct email. If you have my number, call me or ask for my number. I'm here to help and I like to share what I'm building.
Dennis Adriaansen:
So keep an eye on my X profile and I will share a lot there.
Alexander Lichter:
Perfect. Links to all of that in the show notes, including your number. No kidding. We'll get all the links down there so people can follow along.
Dennis Adriaansen:
Awesome.
Michael Thiessen:
All right. Thanks for coming on. And yeah, it's been lovely to chat with you and to learn about some charts and things like that. I'm gonna have to find an excuse to add charts to to my next projects. Definitely.
Dennis Adriaansen:
Thanks for having me. It's that's been fun. Thank you again.
Alexander Lichter:
Of course. And for everybody out there, if that's not the latest episode and jump to the the next one or, like, keep listening. Otherwise, check out the older episodes. We mentioned a few quite old or the recent ones. But, yeah, definitely definitely have a look and follow along for more information around the Nuxt.me ecosystem.
Alexander Lichter:
See you next episode, and thanks for tuning in, folks.
