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:
- Local Storage
- Click Outside
- Axios wrapper
- 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 🚀
Top comments (0)