Useful Vue Utils with VueUse
Tags: vue, typescript, javascript, nuxt
Published: 2023-12-11 08:41:47

I always heard good words and recommendations about VueUse but I never really had a chance to use it in the work/commercial project. Before, I was using it mainly to handle cases like `onClickOutside` as it was a bit challenging to develop (especially with certain edge cases like toggling popups 😉)

Almost a year a go, a friend of mine recommended to add VueUse library to our Frontend project of the product that I am developing for almost two years now. At first, I wasn't sure if this will be actually needed as I thought that VueUse is mostly a wrapper around common API and utils. And in general this is true, but oh boy, let me tell you that VueUse helped our project a lot - especially with the architecture, stability and maintainability of the project.

In this article, I would like to tell you a bit more about VueUse and how much you can get out of it. And believe me, you will gain a lot 🚀

## 🤔 What is VueUse?

VueUse is basically a collection of essential Vue composition utilities. You can check out more about it by clicking the below image:

[![VueUse](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zum5yn4k8b9nu2byf7wx.png)](https://vueuse.org/)

I have recorded a short tips video for one of the Vue School events called Vue Forge where I explained how to use `useMouse` composable and talked about other available composables. Check out the video below:

{% embed https://youtu.be/8c2efMLs5y0 %}

Vue Use also has a very useful playground that you can check out with [here](https://play.vueuse.org/)


Let's take a look at few useful VueUse composables below.

### `useLocalStorage`

Used to handle local storage in a reactive way.

```ts
<script setup lang="ts">
import { useLocalStorage } from '@vueuse/core'

// persist state in localStorage
const store = useLocalStorage(
 'my-storage',
 {
  name: 'Apple',
  color: 'red',
 },
)
</script>
```

### `useMouse`

Used to track mouse position.

```ts
<script setup lang="ts">
import { useMouse } from '@vueuse/core'

// tracks mouse position
const { x, y } = useMouse()
</script>
```

### `usePreferredDark`

Used to verify if user has a preferred dark theme enabled.

```ts
<script setup lang="ts">
import { usePreferredDark } from '@vueuse/core'

// is user prefers dark theme
const isDark = usePreferredDark()
</script>
```

Let's take a look at what VueUse composables we are using at Vue Storefront.

## 🟢 How do we use VueUse at Vue Storefront?

At Vue Storefront, we have a project called VSF Console that is a storefront hosting and monitoring platform.

{% embed https://youtu.be/du9fwUACFKc %}

You can check out VSF Console documentation [here](https://docs.vuestorefront.io/console).

So at VSF Console, we are using VueUse quite a lot as it is especially useful in following cases:

1. Local Storage
2. Click Outside
3. Axios wrapper
4. VModel

And many more!

## 📖 Learn more 

There is a great course about VueUse from Vue School that you can check out with this [link](https://vueschool.io/lessons/installation-course-prerequisites?friend=baroshem) or by clicking the image below:

[![Vue School Link](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i662jpyni4zs2dlaeud1.png)](https://vueschool.io/lessons/installation-course-prerequisites?friend=baroshem)

It covers most important composables to help you handle browser, sensors, animation and other useful utilities in an easy and Vue-like way 😉

## ✅ Summary

Well done! You have just learned how to use VueUse to help you build Vue applications more easily. It is a powerful set of utility functions that I am using on a daily basis that help me handle common functionality and accelerate repetitive development so that I can focus on more important things 🚀