January 11, 2022

Build with Ben (#23) - VueUse + Vue 3 Overview

👋 Introduction

Hello everyone! I know it's been a little bit, as I've been on break, but I'm glad to be back. So with that, let's kick it off. Shall we? A big, welcome to everyone for the very first session of Build with Ben 2022.

Starting this year, you'll notice something a bit different, which is that every live stream will now come with a companion blog post where you can get an overview of what's covered and I'll mention some highlights of the session.

📋 Outline

For this session, here's what you can expect to learn about:

⭐ Highlights

  1. What is VueUse? Basically it's a utility library that makes common Web APIs like managing local storage, color preferences, and so much more incredibly easy to work with.
  2. VueUse is amazing. Seriously. I think it's going to be in basically every app I work with because of how easy it makes things.
  3. If I need to manage any type of theming in an app going forward, useColorMode is going to be my approach 99.999% of the time. Not only is the app preference managed in local storage without any additional configuration, but it lets you manage more than simply dark and light themes.
  4. Other interesting functions I'm looking forward to playing around with include useMagicKeys and onClickOutside
  5. useDraggable was fun to play with, but it looks like it'd be much easier if you use the component version rather than the way I configured it manually.

📚 Resources

Here are all the resources mentioned in the video:

🤔 Final Thoughts

If you only left this post with one thing, it's this: Give VueUse a shot. It's very likely well worth your time. A huge thanks to Anthony Fu for the incredible work he did on this library.

And if you'd like to attend live for Build with Ben, be sure to check out the schedule here at https://www.bencodezen.io/schedule. Thanks for reading!