Vue
Who doesn't know that one guy, shouting Vue mentioned on every occasion he gets because he pretends people care.
I might be one of them.
So, what is so special about the Vue ecosystem that makes me think people should keep an eye on it, even if they don't use vue?
Simply put, it generally just builds tomorrows tools for everybody.
The first tool that would come to mind would probably be vite.
Vite
Vite came out in 2020 and is one of the fastest exploding tools in webdev I personally witnessed. From release to pretty much everybody is using it and shaming create-react-app was only about 2 years.
Of course this happened for good reason, a basic setup was relatively easy, it had a very powerful plugin system, and compared to it's competition it was blazingly fast.
Volar
Volar originally was Vue3's language support tool for VScode (I don't know about other editors). By today, volar has become a language indipendent framework to create language tools. It might still be a bit early for the dev with skill issues like me to use it and build some tools, but astro and svelte already use Volar to create their language tools.
Now, moving on to the reason I actually wanted to write this post
UnJS
UnJS is a collection of framework agnostic single purpose tools that are actually great, trust me bro.
If that didn't convince you, maybe the nearly 400 million downloads per month might.
So, what packages are there? Why should I care?
DevTools
The (devtools)[https://devtools.nuxt.com/] I want to talk about shortly are the (Nuxt)[https://nuxt.com/] devtools which are I would say by a landslide the best devtools out there. You don't need to trust me, just try it out, get a basic nuxt app running, open devtools, go to modules, add tailwind, maybe add an API route and play around with the dev tools a bit. I'm pretty confident in saying that it's the best experience out there in JS land, and belive it or not, the plan is to make it vue/nuxt agnostic, so it might become something react, svelte etc devs would enjoy in the future
Nitro
Nitro is a nice https webserver that you can deploy everywhere. Comparing it to express, it doesn't need weird middlewares for json, it has a simple way to support caching, a file system router, tasks and scheduled tasks that avoid quite a few shell scripts, db:migrations etc, plugins, KV storages, SQL connectors, websockets...
h3
H3 is a small and delightful webserver.
It honestly won me over the second I saw how simple the server side implementation of websockets was.
It's actually so good, it even has bindings for uploadthing
app.use(
"/_ws",
defineWebSocketHandler({ // handles all the magic upgrade etc
open(peer) {
console.log("[ws] open", peer);
},
message(peer, message) {
console.log("[ws] message", peer, message);
if (message.text().includes("ping")) {
peer.send("pong");
}
},
close(peer, event) {
console.log("[ws] close", peer, event);
},
error(peer, error) {
console.log("[ws] error", peer, error);
},
}),
);
Now, good developers will tell you that the upgrade of the connection to a websocket is not that bad. Now I'm not a good developer, I had quite some issues to make that work in the past. Also, server sent events are also first party supported, which is always nice.
uqr
Uqr is a library used to generate QR codes. You can even render them as ANSI SVG codes, which means you can print them in the console.
I can't be bothered to write the rest, so I'll just list the most intresting ones for me personally
-
Consola
Simple to use console wrapper that allows to have pretty console IO
[sourced by Consola docs homepage]
- magic-regexp How about Regexp that get's compiled away, is typesafe and it's actually somewhat legible
- unimport is the plugin that powers the magic auto imports for nuxt, it's actually quite simple to set up
There are tons of other packages around bundling, vite, webkack, generic JS utility, configurations, default values etc... It's an interesting and always evolving ecosystem of generally good documented tools with solid performance and exceptional dx
Top comments (10)
One thing no one can deny: Vue developers community created so many tools (and patterns) that became cross-technological and ubiquitous. You can use anything else but you cannot deny the extreme usefulness of being aware of what these Vue guys are cooking next 😄
Nice summary of tooling, it is incredible how the Vue community after the Vite development has crossed the borders to influence and power the whole JS community
React is only more popular because it is backed by Facebook, so more people get to know it first. Otherwise you can use JSX in Vue too, while it is much faster. And once they'll finish Vapor mode and rewrite Vite into Rust, it will be even more performant.
Corporate dinosaurs would advocate for Angular due to enforcing more consistency in bigger projects, but this is also rather a matter of coding skills and design approach. There is no reason you shouldn't write clean and maintainable code in Vue.
It is my number one (especially Nuxt) and I doubt I will move to something else anytime soon.
Well, JSX isn't really first party supported and Vite rewrite won't really increase runtime performance, more compile time. That being said, I think even if people don't plan on using vue, vue ecosystem is kind of prototyping a possible future of JS land, and it looks kind of promising
Fair enough, but it still could be a gamechanger, even if it is "just" compile time - dev.to/justinschroeder/rolldown-wh...
Btw. from a dev's perspective fast compile times possibly mean even more than fast runtime. I have to deal with big legacy Java project in my work. It takes up to MINUTES between making a change and seeing it running...
Sure, faster compile times are always great. What I ment is, vite performance is already quite fast, and generally I never felt like it is blocking me from doing stuff by any means. The build is a bit slower, but I generally look up some docs, start prepping a commit etc or write some small documentation for myself or other devs if they use that library, so I tend to not really notice it. Now, if that is 1 min every time I want to run dev build, yeah, would be anoying for sure ^^
It is true that thanks to Vite's HMR in dev mode I don't even experience "slow" builds that much. Changes I make during development are close to instant now.
progressive means reckless.
I never want to try a reckless library.
h3 is just another reckless ugly creation of a node.js web framework.
I only use angular-like library.