DEV Community

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

Posted on

18 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 🚀

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay