Useful Vue Utils with VueUse

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:

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:

Vue Use also has a very useful playground that you can check out with here

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

useLocalStorage

Used to handle local storage in a reactive way.

<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.

<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.

<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.

You can check out VSF Console documentation here.

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 or by clicking the image below:

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 🚀