Intro to VueUse — Transcript

Transcript of the free Vue.js lesson Intro to VueUsewatch the video lesson.

Hello, and welcome to the course, Vue Use for Everyone. If you haven't had the chance to play around with Vue Use yet, then stick around and be prepared to have your mind blown. js composables brings the same reactivity that we know and love to various browser APIs, sensor APIs, animation APIs, state APIs, and more. Best of all, it's only an npm install away.

after which you can pick and choose exactly what functionality you'd like to include for your project. But what exactly do we have to choose from? I'll obviously dig into that more throughout the course. But here's a quick sampling of some things to expect.

For example, you can reactively update a page title with just a couple of lines of code, or support dark mode and even completely custom themes that persist to local storage, and fall back to the user's system preferences. Or get reactive data in real time about the position of the mouse pointer, whether it's being clicked or not, and likewise for touch events on mobile devices. Support keyboard shortcuts for your app by easily listening to absolutely any combination of keys with a short and intuitive syntax. Also, get information from sensors like battery levels.

or network connections that reactively update whenever the sensor provides new information. Plus, use handy composables to reactively store state in local storage, or even track the change history of a reactive ref in order to undo or redo its value. Finally, access a number of different utility functions aimed at making Vue's reactivity APIs even more of a pleasure to use. Now, don't be fooled.

This is only a small sampling of all the available goodies. In fact, Vue Use has over 200 functions available at this time, and probably even more so as time goes on. And many of them work with both Vue 2 and Vue 3. Plus, since they're fully tree-shakeable, you can install the whole library and then quickly pick and choose just the ones that you need.

Furthermore, Vue Use is written in TypeScript. so you can be sure of top-notch autocompletion and error feedback in your IDE. Also, it's extremely flexible, usable via a CDN or as an NPM package, SSR-friendly for all your server-side rendering needs, supports various add-ons, and let's face it, these interactive docs are really just a delight to browse, and they make discovering the exact composable that you're looking for a breeze. Now, since there are so many functions available, we certainly won't have time to go over them all.

However, I have handpicked a few from various categories that we'll dig into further. In the process, you'll get a glimpse into the reusability that's made possible by the Vue Composition API. Plus, you'll equip yourself with some very practical tools that you can immediately start using in your own applications. Best of all, perhaps, though, you'll get a glimpse into the depth and breadth of the functionality provided by Vue Use.

And then next time you find yourself needing Feature X or Functionality Y, your first thought just might be, I wonder if Vue Use has a solution for that. Hello, and welcome to the course, Vue Use for Everyone. If you haven't had the chance to play around with Vue Use yet, then stick around and be prepared to have your mind blown. js composables brings the same reactivity that we know and love to various browser APIs, sensor APIs, animation APIs, state APIs, and more.

Best of all, it's only an npm install away. after which you can pick and choose exactly what functionality you'd like to include for your project. But what exactly do we have to choose from? I'll obviously dig into that more throughout the course.

But here's a quick sampling of some things to expect. For example, you can reactively update a page title with just a couple of lines of code, or support dark mode and even completely custom themes that persist to local storage, and fall back to the user's system preferences. Or get reactive data in real time about the position of the mouse pointer, whether it's being clicked or not, and likewise for touch events on mobile devices. Support keyboard shortcuts for your app by easily listening to absolutely any combination of keys with a short and intuitive syntax.

Also, get information from sensors like battery levels. or network connections that reactively update whenever the sensor provides new information. Plus, use handy composables to reactively store state in local storage, or even track the change history of a reactive ref in order to undo or redo its value. Finally, access a number of different utility functions aimed at making Vue's reactivity APIs even more of a pleasure to use.

Now, don't be fooled. This is only a small sampling of all the available goodies. In fact, Vue Use has over 200 functions available at this time, and probably even more so as time goes on. And many of them work with both Vue 2 and Vue 3.

Plus, since they're fully tree-shakeable, you can install the whole library and then quickly pick and choose just the ones that you need. Furthermore, Vue Use is written in TypeScript. so you can be sure of top-notch autocompletion and error feedback in your IDE. Also, it's extremely flexible, usable via a CDN or as an NPM package, SSR-friendly for all your server-side rendering needs, supports various add-ons, and let's face it, these interactive docs are really just a delight to browse, and they make discovering the exact composable that you're looking for a breeze.

Now, since there are so many functions available, we certainly won't have time to go over them all. However, I have handpicked a few from various categories that we'll dig into further. In the process, you'll get a glimpse into the reusability that's made possible by the Vue Composition API. Plus, you'll equip yourself with some very practical tools that you can immediately start using in your own applications.

Best of all, perhaps, though, you'll get a glimpse into the depth and breadth of the functionality provided by Vue Use. And then next time you find yourself needing Feature X or Functionality Y, your first thought just might be, I wonder if Vue Use has a solution for that.