DEV Community

Cover image for Useful Vue Utils with VueUse
Jakub Andrzejewski
Jakub Andrzejewski

Posted on

19 1 1 1 1

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:

VueUse

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>


Enter fullscreen mode Exit fullscreen mode

useMouse

Used to track mouse position.



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

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


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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:

Vue School Link

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 🚀

Top comments (0)

Gen AI apps are built with MongoDB Atlas

Gen AI apps are built with MongoDB Atlas

MongoDB Atlas is the developer-friendly database for building, scaling, and running gen AI & LLM apps—no separate vector DB needed. Enjoy native vector search, 115+ regions, and flexible document modeling. Build AI faster, all in one place.

Start Free

Join the Algolia MCP Server Challenge: $3,000 in Prizes!

Explore the intersection of AI and search technology by building with the Algolia’s MCP Server. Three talented winners will be selected to share in our $3,000 prize pool!

Check out the challenge

DEV is bringing live events to the community. Dismiss if you're not interested. ❤️