VueUse Hooks & Vue Transitions

[00:00:00]
>> I just wanna do a quick show and tell demo on, is if you haven't heard of this, this library, VueUse is a phenomenal library. It is a bunch of wrappers around basically browser API's. So things that you might commonly wanna do, say, I don't know, you wanna be able to do something with a clipboard.

[00:00:19]
This should look familiar. It says, this is a use Clipboard function that we can import. And when you import it it'll actually basically copy over whatever it is as like a V model and whatnot, and it just works. And so to show you just as a sort of show and tell on this, something that we often wanna do when it comes to apps is use local storage.

[00:00:39]
And if you've never done that from scratch, it's a pretty good API to use but there is a bit to do as far as manually configuring that in addition to managing reactive state. So one of my favorite functions is the useStorage share with Pinia. So if we look at Pinia useStorage with VueUse.

[00:00:59]
Okay, here we go. This is a blog post that actually shows how it would work. So basically if I scroll down here you'll notice that inside of this to do list you have this one line right here that allows you to import from useStorage. And what it does is basically creates a local storage key, and then every time it's being updated, when Pinia loads, it will know VueUse's help to check the local storage first to see if there's new data.

[00:01:21]
If there's already existing data, it will actually start from the local storage and not from this initialized value. And so what you end up getting is it's really elegant coming together of your VueUse functionality with your reactive data inside of your Vue app. And so other ones that are really fun that you might wanna check out as well is the color preference like color mode.

[00:01:41]
And so what you see here is that what this is doing is that it's basically a reactive property that allows you to easily toggle the state of the theme of your app. There's so much stuff in here because basically what they've done is taken a bunch of browser API's and made it really easy to integrate inside of your Vue app.

[00:01:59]
So definitely highly recommended is one to check out. The other final thing i wanna shout out is is regarding transitions in Vue. So as you know creating good use experiences, that's a really important part making things easier for you just to follow. And so we don't have time to go into detail on this but basically there are built in components called transition and transition group that help you manage how things are being attached as they exit.

[00:02:27]
So the most common example that I'll show right now cuz you can check out the docs, so the one that I love to show is the one for transition group because this is the one that I think we do a lot. So if I go down into transition group.

[00:02:44]
A lot of us, render lists, rather than have them blink in like this, you can also have them move in a way that's even smoother. So you see here, this actually allows you to shuffle stuff. And all that is being done how? It's being done by wrapping basically your component inside of this transition group.

[00:03:04]
There's a little bit of CSS that happens there. But I'll leave you to check out the docs to get inspiration from that. But just know that this is built into the library so that if you wanna try playing around with it, making the users easier to track things.

[00:03:16]
This is also where the keys are very important because as you can see, when we're doing things like shuffling here, Vue needs to be able to know which element it is where it needs to go as it's moving stuff around. So this is another bit that if you all are developing for your apps, definitely check out the transition group and transition for ways to enhance user experience.