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.
Welcome to DejaVue.
Alexander Lichter:It's your favorite Vue podcast. And as usual, I'm here with my lovely host, Michael Thiessen. Michael, how are you doing today?
Michael Thiessen:I'm doing pretty good. And how about you?
Alexander Lichter:Fine. Fine. Can't complain. And, I mean, we've seen some very interesting things in the last couple days. A shadow drop, one could almost say, of a new major version of Vite, and that's what we wanna talk about today in this little episode.
Michael Thiessen:Yeah. Major version. It's been, I think, five years now since the very first version of Vite by Evan, and lots of this happened. And seven major versions in five years. It's it's pretty good.
Alexander Lichter:It's huge. Yeah. I'm really curious about the next one that's coming up, Vite eight, but we might also get into that a bit later. But still this one, looking good. I'm really curious to see how migrations will go.
Alexander Lichter:I mean, with the last major version, Vite six, there was actually that that was a maybe a bit weird one. We can talk about that briefly before we get into seven because there was no actual, like, major change. There was no break and change really there, but still it was a major version. So that was a bit surprising. But because v eight introduced the environment API, they basically marked us like, hey.
Alexander Lichter:This is a big thing. So contrary to semantic versioning, this was indeed something something special, so to say.
Michael Thiessen:Right. Even though it's still experimental, it's still like it's kinda funny to introduce an experimental thing as like a big thing, but it is a huge thing, think. Kind of changes how we use Vite in the whole way we use it. So
Alexander Lichter:Yeah. And interestingly, we see more and more frameworks adopting that. Daniel Roe, who was in guest couple episodes before talking about Nuxt four and five also working on using the environment API to use that in Nuxt JS itself and other frameworks and also know they adopt that. People over from TanStack are looking into that and so on and so on. So it's really nice to see how this is, let's say, shaping the framework and then also the development world.
Michael Thiessen:Yeah. So why don't we just get started with some of the things that have come with Vite seven? And the first thing is node version.
Alexander Lichter:Exactly. So Vite v seven breaking changes, as you know, for semantic versioning, it's what major, so therefore and the Node. Js support of node 18 has been dropped. So only node 20, I think, 20 dot 19 and node 22 dot one two or so it can read up in the changes as well. They're now required.
Alexander Lichter:Why the whole thing? Well, Node. Js 18 went end of life, I think in May, so quite recently. And that's a good chance to actually drop that node version from being supported because it's end of life, no security fixes, no bug fixes and it's time to move on so to say. On the other hand, a lot of people are critical in terms of, Oh, why do we need a new major version release?
Alexander Lichter:Why do we all need to upgrade? The typical problem in refusing dependencies no matter what that you have to keep your apps up to date. The good thing I think in this case, as long as you don't rely on node 18 or lower, which ideally the platform where you're deploying to or like a few docker images, you upgrade that. You can redo it and should do because, well, no security fixes actual problem. So it shouldn't be too hard in this case, and it's a good thing to move forward.
Michael Thiessen:Yeah. And it looks like my understanding here is that the Node version also allows Vite to be ESM only.
Alexander Lichter:Exactly. That's a perfect segue over to that topic. So before Vite was published as CommonJS in this ESM, maybe before we dive into what it means to be ESM only, maybe we should talk about what CJS and ESM are in the broader context of web development. Because I remember when I heard of that first time and also back then was like, Oh, there was UMD and SystemJS and so on and so on. This is all a bit confusing.
Alexander Lichter:It feels like I need some kind of degree in module formats. So maybe we dive into that first and then talk about why we just use them only now and what the benefit of that is.
Michael Thiessen:Yeah. This is a topic that I feel like I only, like, vaguely understand, and then somehow I've, like, muddled my way through life without, like, really, digging into the differences between these two. But Node has, like, on the back end with Node, for the longest time, you've had to do, you know, this require syntax, which is the CommonJS syntax. And the front end has a totally different syntax with the imports and and everything like that. And that's the ESM, the ECMAScript modules.
Michael Thiessen:I think that's what it stands for.
Alexander Lichter:Correct, yes.
Michael Thiessen:Confusing that ECMAScript so anyways, I won't go into that. Standards. Standards and acronyms and fun names for things. Basically, there's been this progression over a very long time now where things have been slowly migrating from this CommonJS format to being more and more ESM supported so that we have we can have one module system rather than having these two. So if you've been doing development for a while, you may have had to fight with things being in different versions or a library only supporting CommonJS or only supporting ESM, but you want to use it in your project that is using a different module format and it's like this whole headache and slowly we're getting to a point where we don't have to deal with that and things are just under ESM.
Alexander Lichter:Absolutely. As mentioned before, UMD and also AMD's universal module definition. I think asynchronous module definition were also a thing, but these are really mainly a thing of the past. Well, CJS is still around luckily nowadays. So, basically, a lot of things were CGS before.
Alexander Lichter:Now a lot of things in Node are still are, but Node finally supports ESM. And there's one more great thing because as you said, it is a bit of pain to have both in your project and then make them interoperable because, okay, you have that import whatever from syntax, Then you have the require syntax. So how you make sure, okay, I mix and match them? Well, not easily. And then if you also write libraries, that's the other side of the coin.
Alexander Lichter:You can publish them as CJS only. You can dual publish them to do both as CJS and ESM. And you can, of course, publish them as ESM only. The latter is the more preferred version nowadays because luckily with Node 18 going end of life, there is no reason to carry around CommonJS library anymore. The reason behind that is the following.
Alexander Lichter:There is a new feature that was back ported to Node 20 and it came in Node 22. It's called require ESM. So even if you use CommonJS in your Node application, you still do. You never switch. Now you can require ECMAScript modules for just like requiring the name of dependency.
Alexander Lichter:So for library author perspective, you have really no reason to ship CommonJS anymore unless you say, Oh yeah, I want to support Node 18 and below. But, I mean, that's up to you in that case. I mean, I know people saying I wanna support Node like zero dot something. But eventually, if you now write package that should support Node versions that are not end of life, ESM only is the way.
Michael Thiessen:That's a feature that I think I missed, the require ESM, but that's a really nice one. And, yeah, I can see why it would be backported because, like, it simplifies so many things. And now, you know, with Vite, we can just have ESM libraries and use them in everything. So then that's great.
Alexander Lichter:So with
Michael Thiessen:So many some of the pain points.
Alexander Lichter:Yes, absolutely. You're not the only one who has missed these features. I have opened issues about that and people saying, Oh yeah, people move to ESM only and that sucks. And then like, Well, but now there's literally no reason to not do that, not to move to ESM only. Dual publishing is still fine.
Alexander Lichter:So having CJS and ESM versions of your package is okay. The only downside is that you basically increase the installation size, not the bundle size, installation size by basically doubling it. Only CJS is a problematic thing because then your library can't be tree shaken. Right? So if we are in the front end side again, you say, I I wanna use a a CJS only library, then you have to load all the things.
Alexander Lichter:There is just little CJS tree shaking possible. But for for admins for modules, it's it's perfect. You can tree shake a lot out of that. So that's why ESM modules are preferred. Plus, of course, if you use some kind of build tool that she wants to build and roll down now with like tsdown or obuild and so on, that can also help by saying, okay, I don't wanna load all the things.
Alexander Lichter:I just need a single function. So even in Node it could be faster. There was a great example. I sent a PR to a library called fdir. So it's basically to search through directories, to crawl directories and globbing and stuff.
Alexander Lichter:And that was about like, okay, let's publish this ESM as well. We can do a publish whatsoever, up to you, but let's have an ESM version.
Alexander Lichter:And the were some speed test been done and it is way faster now when you only use a few subsets. So that's a great thing.
Michael Thiessen:So random little tidbit of information here, some trivia. I wanted to know what ECMAscript stands for because I've never actually looked up what the ECMA is for because that's not a word. And it stands for European Computer Manufacturers Association.
Alexander Lichter:Yeah. They have a lot of standards. Right? That's why I have to add
Michael Thiessen:There's a good standard. There's a little history for you, I guess.
Alexander Lichter:Exactly. So now now you know. And the next next Jeopardy or a programmer's trivia, you will score the 2,000 points.
Michael Thiessen:Yeah. You can impress all of your developer friends with that piece of trivia.
Alexander Lichter:Exactly. I recently relearned what what GIF or how people actually pronounce it GIF, that's the right way
Michael Thiessen:Mhmm.
Alexander Lichter:Stands for. Michael, do you know that by any chance? I had no idea at first.
Michael Thiessen:Graphics interchange format?
Alexander Lichter:Bingo.
Michael Thiessen:Or graphical?
Alexander Lichter:No. Graphics. It's all correct.
Michael Thiessen:Okay. Graphics. K.
Alexander Lichter:I also like, okay. Format, obvious. G, graphic. But the I, no idea. And that that's graphics even.
Alexander Lichter:Yeah. Would have scored valuable points in the last quiz, but for for the next one.
Michael Thiessen:I should do one sometime.
Alexander Lichter:Yeah. But, yeah, all all coming back to to dual publishing and after just making making that. It's there. It's there as ECMAScript module. Their PR is up and might emerge when you hear this episode.
Alexander Lichter:A link to that, of course, in the description just to see that's not really difficult to do that also for you if you have a package out there. Or if you use a package, definitely, make sure to request that. It shouldn't be a big thing. And, yeah, Kevin, who's working on tsdown, was saying, oh, yeah. If you do dual format, the import time decreased from nine to six milliseconds to around ten milliseconds, which sounds like, oh, yeah.
Alexander Lichter:That's not a big deal. But it's like, okay. It's a two weeks improvement by doing literally not much. So big win.
Michael Thiessen:And since we're talking about standards, web standards, there's a newer one which was also new to me before reading this announcement blog post, that's the baseline browser target, which basically defines all of the features that have been adopted for the last two and a half years in Chrome, Edge, Firefox, and Safari, so the mainstream browsers. Now Vite uses that by default as its build target.
Alexander Lichter:Correct. So that's another breaking change, so to say, would just raise the browser target once again. So we don't have to like polyfill or transform features that browsers support already. Of course, people using Vite or frameworks built on Vite, they can always override that and say, okay, want that whatsoever. With baseline, it's very interesting.
Alexander Lichter:So you might have seen that if you use a website like caniuse or like MDN or web. Dev as well. There, the new features are sometimes marked as these like, oh yeah, that's baseline limited availability or similar. And there are actually two steps of baseline. There's one that's called widely available.
Alexander Lichter:That's what Vite just defaulting to right now. And there's also one just saying newly available. So it's basically in all the major browsers, which is, well, all Chromium based browsers, Safari and Firefox. So that's the baseline, so to say. And that means in that point when all latest versions of browsers implement that, it's called newly available.
Alexander Lichter:And as soon as you have them supported for two and a half years, it's widely available. So there's a tiny differentiation. Of course, it's not the case that just had limited availability. But next time you look at the feature, it's definitely worth just checking the little badge if it's somewhere. Especially if it's limited available and you wanna build an application that works and, I don't know, everything beyond Chrome or Chromium based browsers or in case of Temporals, Firefox.
Alexander Lichter:So that's there's always a good good chance to look at that.
Michael Thiessen:And if you use a website like can I use, then on the feature pages underneath the actual, like, title, there's, a little box that shows you either a green check mark or green check mark is widely available and then I think a blue for newly available? And then it just won't be there if it's not really supported yet.
Alexander Lichter:There is limited availability, which is like this yellow x cross time symbol. It's a bit weird because it's not fully red. Yeah. It's a kind of weird symbol, but it's it's also visible. But, like, for, I don't know, built in things in JavaScript, like, I don't know, string dot character header or something like that, it's not there because that was before baseline was defined as a standard.
Alexander Lichter:So everything that has no symbol on it is all good. It's in forever and will will be fine.
Michael Thiessen:Alright. Yeah. Learning something new every day. You know?
Alexander Lichter:Absolutely. And I think it's it's super helpful once again because back in time, like, okay. Can I use this in this feature? And you take a look and then you say, okay. You see the browsers.
Alexander Lichter:You see the the big matrix of where is what available, you might think. What does it actually say? Of course, you should ideally correlate that with your users. If you still support IE6 then baseline probably doesn't mean much to you because you have to do polyfill and not use all things. But if you say, hey, I'm just building an internal application and we all use the latest Chrome, then you know, okay, baseline is fine.
Alexander Lichter:So definitely worth checking out. And if you need all the things, setting your browser target is important there.
Michael Thiessen:Yeah. It's a good signal that you can use just like for the basic cases and probably for most apps, it's baseline is what you want. And then, yeah, you can dig into specific things a bit more if you really need to.
Alexander Lichter:Correct.
Alexander Lichter:Coming next, we can talk once again about the environment API. We did it already in the episode with Sebastian, the creator of NUXT and NuxtLabs and also in the one with Patak. But surprise, that API, as we also mentioned earlier in this episode, was added to Meet six, And there are almost like no changes to it. So in Veed seven, we still have it.
Alexander Lichter:It's still marked as kind of experimental, but not really. It's a bit of an interesting state because it's more like let's go slow on that. Like people wanna hit that right.
Michael Thiessen:So it's more like suspense in Vue?
Alexander Lichter:Yeah. Kind of.
Michael Thiessen:Kind of. Still experimental.
Alexander Lichter:We're still waiting for stabilizing that as well. Yeah. Like, the next Vue minor version as well, three zero six. One day, we'll get there. But, actually, the the fun part is in v seven, not much is being added to environment API.
Alexander Lichter:There's one new hook called build hub. So you can, like, the plugins coordinate which environment they build how. And other than that, it's more about really, like, let it cook slow. But make sure to hit that right to avoid breaking changes later on. So if you out there ever use that API, if you're building a framework by any chance, could be an internal one or something bigger, then definitely give some feedback and chat with the Vite folks because they are all curious for that.
Alexander Lichter:We wanna, like, make sure there's, like, some kind of shared infrastructure for all the frameworks out there, and that's should be a big part of that.
Michael Thiessen:Yeah. I think I'm excited for when this environment API is finally stabilized or less experimental. I don't know how you'd phrase it. But once Vite eight seven now we're in Vite eight.
Alexander Lichter:That's the next one. Yes.
Michael Thiessen:Vite eight. Once that one comes out, then
Alexander Lichter:It's probably stabilizing. Yeah. There's a good chance. But with Vite eight, there are also other things likely coming out. Right?
Alexander Lichter:Not saying it will be the case depending when that major version will land, but there is a fair chance that also Veed eight will eventually contain the changes from Rolldown-Vite. So Rolldown as the default bundler. So that that will be also exciting. But we will see when it is. That could be a couple months from now.
Alexander Lichter:End of the year. Next year, we'll see. More likely towards the end of the year. But, yeah, we'll we'll watch it closely. And, of course, if you're interested in that, you can try it out already.
Alexander Lichter:There's the rolldown-vite package that you can use to get all the benefits of that wonderful Rust based bundler instead of roll up and esbuild. No matter if you use Vite and Vue like plain on or, like, with Nuxt.js it also works well. And even all the other frameworks out there that are Vite based.
Michael Thiessen:Yeah. And that one's a drop in replacement. Right? You don't really have to change much to get the roll down version.
Alexander Lichter:Exactly. I think like not changing much fits pretty well. You might want to change a few things here and there. So for example, if you use some advanced configuration like roll down doesn't necessarily cover them all, especially if you set up chunking to say, Hey, there's an option we call manual chunks to define which parts of the JavaScript should go where. This is something that Growdown supports slightly different, so you might have to adapt things to a more fine grained and well, let's I wanna say better API, but just it offers more customizability.
Alexander Lichter:But other than that, for most of the things, it is just dropping that in and you're good to go. Exactly.
Alexander Lichter:And I think then for Vite seven, I mean, it's a major version. I said before, there are some breaking changes as in removing old deprecated APIs. So there was like an old SCSS or SaaS API.
Alexander Lichter:It's gone. Split vendor chunks. A lot of things that they were good to go, good to be removed for a while. And now it's time to clean things up because that's the best part of major versions. So if you use anything that was deprecated in Vite six already, that might be your time to switch over.
Alexander Lichter:And I think it kind of wraps up the big changes in Vite seven already. Did we miss anything?
Michael Thiessen:I think that's it. There's also in the blog post, it was announced, and I think on the socials, was announced a little bit earlier as well, Void Zero and Nuxt Labs have teamed up so that now Anthony Fu is gonna be working on some Vite dev tools.
Alexander Lichter:Good one.
Michael Thiessen:Yeah. If you have been following along with Nuxt and the Nuxt dev tools, you'll know that he was helped out a lot with that and made them really awesome. And so looking forward to seeing what kind of dev tools we might get with Vite.
Alexander Lichter:Yeah. It will be interesting to see because I feel like right now, in terms of dev tools, like every framework does a bit on their own. And you can, for example, visualize your bundle already to have, like, little tree chart to say, hey. Which chunk is how big? But there are a lot of things that could be improved.
Alexander Lichter:For example, to see what's Vite plugin, for example, takes the most time and which places takes the longest and build or maybe even less frameworks hook into that, inject own things, analyzers, and so on. So I'm also really curious what will happen there. I'll link to a social media post where the folks at VoidZero. So I think I even said a post a couple of weeks ago, shared a little screenshot of how that might look like at some point, a little prototype. They're definitely in the work.
Alexander Lichter:Anthony is doing an amazing job there. And the best part, once again, it's all framework agnostic, so we can use that with you, with Nuxt, with everything based on Vite. So, yeah, that'll be great.
Michael Thiessen:Yeah. That'll be really cool. I think that'll be a a big impact because dev tools like this feels like a lot of great things. And it's only recently that like Nuxt has gotten like the the really good dev tools and few years had good dev tools for a while, like really leveraging the whole pipeline, like the whole stack and seeing everything in your app from the bottom up is really useful.
Alexander Lichter:Yeah. Then you also can exactly pinpoint not only why is your bundle maybe bigger because that you can kind of do already, but also like, hey, why is the build taking that long? Or maybe there's an automatic warning saying, hey, this dependency is still CJS and that's not fee shakable. You might wanna search for an alternative or whatever. So once again, there are a lot of options for customizability, for DevTools plugins, hooking into things, frameworks providing maybe their own rule set and so on.
Alexander Lichter:So really exciting when when that will end.
Michael Thiessen:Yeah. And, like, how Nitro has become framework agnostic in providing, like, so so much, not just for Nuxt, but, like, all these other meta frameworks and Vite was pulled out of Vue and now powering, like, everything. I think it would be a nice a nice future if we have dev tooling that was like that, like, a nice base platform for dev tools instead of every single framework and every single thing just kind of rolling their own thing. We could have like a base set of primitives or whatever and and go from there.
Alexander Lichter:So Yeah.
Michael Thiessen:I don't know if that's part of what the plan is for now. I think they might be trying to tackle some other stuff initially, but
Alexander Lichter:I mean, Vite is that in a way. Right? For for frameworks except Next. Js, Vite is this like shared infrastructure layer and Mhmm. Like leverage it and building it on top of that is pretty fun.
Alexander Lichter:And of course, Nitro could be the same thing for, let's say, meta framework slash the back end. It will be also interesting to see how Nitro will integrate with Vite at some point. So we're we're still about to witness that in the future.
Alexander Lichter:And while we're talking about Vite and Nitro, there's also something coming up for later this year, but still doesn't hurt to mention it. A ViteConf that happened two times online already with a lot of amazing talks, links to the playlist also in the show notes.
Alexander Lichter:It's going live in person, flesh and blood, so to say. So if you wanna learn more about Veets, wanna see AvenueLive, some people off the Veet core team, some Void Zero folks, then in October, it's time to come to Amsterdam, The Netherlands. So, luckily, just a quick bike ride from here, maybe a bit further from your side to check that out. So we also have a link in the description. And maybe let's see.
Alexander Lichter:Maybe you leave a little discount code. There will definitely be a good chunk of amazing talks. Already had a little sneak peek at lineup. CFP is also still open if you're interested in submitting a talk yourself. If you have, like, a really cool story to tell with Vite, that's your chance.
Michael Thiessen:Yeah. This one looks exciting. And, yeah, I'm just looking through a little bit of the schedule here. It looks like there's gonna be a bunch of great talks. So
Alexander Lichter:Check it out.
Michael Thiessen:Yes. And get your ticket.
Alexander Lichter:And I think that's kind of it when it comes to Vite - Vite seven, at least. We'll stay tuned for patch releases that usually follow the minor versions with some new features.
Michael Thiessen:Of course.
Alexander Lichter:That's the way to go. And also, as you mentioned before, the integration with the environment API and the Nuxt side, there's also oh, maybe that's also one more thing. It's not really related to Vite seven, but there is a Vue plugin. So the the Vue plugin Vue, so to say, there's a beta release. So if you ever wanna try it out, if you use plain Vue and Vite together, that might be the chance to upgrade that.
Alexander Lichter:If you already use rolldown-vite, that means even faster builds because there's a there are a few changes there. So, yeah, worth checking. I'll also link to that as usual in the show notes slash description.
Michael Thiessen:Exciting stuff. There's lots of new features and new versions of everything. Feels like all coming out and, it's exciting and a little bit stressful to try and keep on top of it all, but you also don't need to keep on top of it all and just pay attention to the things you actually care about.
Alexander Lichter:Yeah. That's true. And I feel also like that's what we've mentioned beginning, the whole stress of upgrading. Ideally, with, like, major versions like that, you have a little bit of less stress because it's not much to do on your side, luckily. Mhmm.
Alexander Lichter:And once again, if you don't do it today or tomorrow, nobody will kick you out of the company, I suppose. So it's also fine to let that simmer for a little bit. Of course, if you have the chance, if you wanna stay up to date, that's a good chance to upgrade now. But for example, I said before, you're still another 18 or lower, that might be a more important target first or Vue two or Nuxt two and so on and so on. Yeah.
Alexander Lichter:Also, let us know where you are, what you think about all the upgrades about Vite seven and what's your plan with that. We we would like to know.
Michael Thiessen:Yeah. Let us know in the comments, and also let us know if you're hoping to make it to ViteConf in October.
Alexander Lichter:Exactly. Well, I I know I'll be around, so at least hope to see some of you there. Michael, any plans to for October ready or not sure yet?
Michael Thiessen:No plans in October, but I don't think that I'll be making it out to this one, unfortunately.
Alexander Lichter:Well, I heard there's also a livestream. So in case you can't make it in person, that might be an option as well.
Michael Thiessen:I I can make it virtually. Exactly.
Alexander Lichter:So see you all either virtually or in person over at ViteConf. And of course also you will see us in either the next stage of your episode if this is not the most recent one. Well, if it is, then there are a bunch of older ones as well. A few that we mentioned throughout this episode, so an assurance that you can continue or just take the next one that you might've missed out. Otherwise, yeah, we'll see you in the next episode.
Alexander Lichter:If you listened through all of them already, then congrats. Amazing job. Let us know in the comments which year it is and which day just in case. This could be that's, I don't know, in 2027. Like, hey.
Alexander Lichter:I got into view. I wanna hear what happened in the last, I don't know, three years we go. Or if it's just like, yeah, I listen every week. So, yeah, we'd be curious to hear and, see you in the next episode all.