Introducing unjs - VueConf US 2023

(screen scanning) (bright music) (text whooshing) (button clicking) (text whooshing) (screen scanning) - I would like to think that somewhere in the world, like, there's a fan club of people who when they were kids, watched "Little Frog Learns English." That, like that's my dream, really. I hope that one day, I will discover that is the case. Today, I want to talk about UnJs, and I, oh, I've prepared a very short presentation

of about 30, 40 minutes to talk about 50 libraries that I think can transform your life. UnJs is a GitHub organization. You can access it at github.com/unjs, and it's all about creating utilities that anyone can use that work everywhere, that enable best practices, and this happened because, I should say, by the way, hi, I'm Daniel, and I'm involved in a lot

of different things. You might know me from Nuxt. I'm leading the Nuxt core team. I'm also involved in UnJs, of course. I've created a library to make regular expressions magical, another one to get rid of font layout shift. I'm one of the team building Elk, a Mastodon client, which you should definitely check out, and I'm some other things as well, and you can find me on Twitter if you want to message me,

and ask any questions or whatever, and Mastodon. UnJs is a library all about universal JavaScript. It's created, really, out of Nuxt, so we found that we were using utilities, creating utilities that we were using internally, but we didn't want these to be ecosystem specific. We didn't want them to be Nuxt only, and so as much as possible we tried to pull them out, collaborate with other people, make them useful for as many people as possible,

and so my aim today, I wish that I'd... You know, I'd love to tell you all about Nuxt, but I'm not going to. I'm gonna tell you all about the utilities we created out of it that you can use in your project, whether or not you're using Nuxt. So here's one, and I've gotta be quick, I realize that. Ofetch, it's an opinionated wrapper for native Fetch. It uses the same API, but it gets rid of all the pain so you can just create like, a pre-configured Fetch instance, maybe you're used to doing that with Axios?

You can maybe set a base URL, or add some interceptors, and then you just call it. It will handle, if it's a JSON response, they'll come back, it will handle pulling it out and making it an object. It's also fully typed. We use it in Nuxt under the hood to provide typed access to our own internal API roots, and it works everywhere. It works in the browser, with Fetch in the browser, it works in Node, using Node and native Fetch,

a Node-Fetch native, and it should be... I use it everywhere, utilities, scripts, give it a go. We do quite a lot of things in Nuxt that have to be cross-environment. We want Nuxt to be deployable anywhere, to CloudFlare workers, or to Deno, or to Bun, or anywhere, and so we've built a couple of utilities and libraries that enable that work, and one of them is called unenv.

So this is an example configuration from unenv. It includes lots and lots of stubs, and mocks, and things that basically you can drop into a build pipeline to make sure that libraries that don't work in your target environment are replaced with ones that do, and so this is how we can basically deploy the same app that even if it has hard dependencies on Node libraries to a CloudFlare worker, or to Deno, or something like that. We also are able to use it to handle things like,