5 VueUse libraries that can speed up development (summary)

VueUse is an open source project by Anthony Fu that provides Vue developers with a large number of basic Composition API utility functions for Vue 2 and Vue 3.

It provides dozens of solutions for common developer use cases, such as tracking ref changes, detecting element visibility, simplifying common Vue patterns, keyboard/mouse input, and more. This is a great way to really save development time since you don't have to add all this standard functionality yourself.

I like the VueUse library because it really puts the developer first when deciding what utilities to provide, and it is a well-maintained library because it stays in sync with the current version of Vue.

What utilities does VueUse have?

If you want to see a complete list of each utility, I definitely recommend checking out the official documentation. But to summarize, there are 9 functions in VueUse.

• Animation—Contains easy-to-use transition, timeout, and timing functions
• Browser - can be used for different screen controls, clipboard, preferences, etc.
• Component — Provides shorthand for different component methods
• Formatters – Provides reaction time formatting functionality
• Sensors — used to monitor different DOM events, input events, and network events
• State — manage user state (global, local storage, session storage)
• Utility — different utility functions like getters, conditionals, reference synchronization, etc.
• Watch — more advanced observer types, such as pausable observers, debounce observers, and conditional observers
• Misc — Events, WebSockets, and different types of Web Worker functionality

Most of these categories cover several different functionalities, so VueUse is flexible for your use case and serves as a great place to quickly start building a Vue application.

In this article, we'll look at 5 different VueUse functions so you can see how easy it is to work with this library.

But first, let's add it to our Vue project!

Install VueUse into your Vue project

One of the best features of VueUse is that it is compatible with both Vue 2 and Vue 3 with just one package!

There are two options for installing VueUse: npm or CDN

npm i @vueuse/core # yarn add @vueuse/core

<script src="https://unpkg.com/@vueuse/shared"></script>
<script src="https://unpkg.com/@vueuse/core"></script>

I recommend using NPM because it's easier to understand, but if we use a CDN, we can access VueUse in our application via window.VueUse

For NPM installations, all functions can be accessed by importing them via @vueuse/core using standard object destructuring, like this:

// Example importing from VueUse import { useRefHistory } from '@vueuse/core'

OK Now that we have VueUse installed, let's use it in our application.

1. useRefHistory to track changes in responsive data

useRefHistory tracks every change made to a ref and stores it in an array. This allows us to easily provide undo and redo functionality to our applications.

Let's look at an example where we are building a text area that we want to be able to undo.

The first step is to create our basic component without VueUse - using a ref, a textarea, and buttons for undo and redo.

<template>
  <p> 
    <button> Undo </button>
    <button> Redo </button>
  </p>
  <textarea v-model="text"/>
</template>

<script setup>
import { ref } from 'vue'
const text = ref('')
</script>

<style scoped>
  button {
    border: none;
    outline: none;
    margin-right: 10px;
    background-color: #2ecc71;
    color: white;
    padding: 5px 10px;;
  }
</style>

Then, let's add VueUse by importing the useRefHistory function and then extracting the history, undo, and redo properties from our text reference. This is as simple as calling useRefHistory and passing our ref.

import { ref } from 'vue'
import { useRefHistory } from '@vueuse/core'

const text = ref('')
const { history, undo, redo } = useRefHistory(text)

Every time our ref changes, this will trigger an observer - updating the history property we just created.

Then, so we can really see what's going on, let's print the history in our template and undo and redo the calls to our functions when the corresponding buttons are clicked.

<template>
  <p> 
    <button @click="undo"> Undo </button>
    <button @click="redo"> Redo </button>
  </p>
  <textarea v-model="text"/>
  <ul>
    <li v-for="entry in history" :key="entry.timestamp">
      {{ entry }}
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'
import { useRefHistory } from '@vueuse/core'
const text = ref('')
const { history, undo, redo } = useRefHistory(text)
</script>

<style scoped>
  button {
    border: none;
    outline: none;
    margin-right: 10px;
    background-color: #2ecc71;
    color: white;
    padding: 5px 10px;;
  }
</style>

OK, now let's run it. As we type, each character triggers a new entry in the history array, and if we click Undo/Redo we are taken to the corresponding entry.

There are also different options to add more functionality to this feature. For example, we can trace deep into reaction objects and limit the number of such history entries.

const { history, undo, redo } = useRefHistory(text, {
  deep: true,
  capacity: 10,
})

For a full list of options, be sure to check out the documentation.

2. onClickOutside closes the modal

onClickOutside detects any click made outside of an element. In my experience, the most common use case for this feature is closing any modal or popup.

Often, we want a modal to block out the rest of the web page to focus the user's attention and limit errors. However, if they do click outside of the modal, we want it to close.

This can be done in just two steps:

• Create a template reference for the element we want to detect
• onClickOutside runs with this template reference

This is a simple component with a popup, using onClickOutside.

<template>
  <button @click="open = true"> Open Popup </button>
  <div class="popup" v-if='open'>
    <div class="popup-content" ref="popup">
      I am a very corrupt person, and I am very corrupt! I am very corrupt, and I am very corrupt!
    </div>
  </div>
</template>
 
 
<script setup>
import { ref } from 'vue'
import { onClickOutside } from '@vueuse/core'
const open = ref(false) // state of our popup
const popup = ref() // template ref
// whenever our popup exists, and we click anything BUT it
onClickOutside(popup, () => {
  open.value = false
})
</script>
 
 
<style scoped>
  button {
    border: none;
    outline: none;
    margin-right: 10px;
    background-color: #2ecc71;
    color: white;
    padding: 5px 10px;;
  }
  .popup {
    position: fixed;
    top: ;
    left: ;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(, , , 0.1);
  }
  .popup-content {
    min-width: 300px;
    padding: 20px;
    width: 30%;
    background: #fff;
  }
</style>

The result is that we can open the popup with our button and then close it by clicking outside the popup content window.

3. useVModel simplifies v-model binding

A common use case for Vue developers is to create custom v-model bindings for components. This means that our component accepts a value as a prop, and whenever that value is modified, our component emits an update event to the parent.

For a full tutorial on building a custom v-model, check out our complete guide on the topic.

The useVModel function simplifies this to just using the standard ref syntax. Let's say we have a custom text input that tries to create a v-model for its text input's value. Normally, we have to accept a prop for the value and then emit a change event to update the data value in the parent component.

Instead of using ref and calling props.value and , we can use and treat it like a normal ref! This helps reduce the number of different syntaxes we need to remember! update:valueuseVModel

<template>
    <div>
        <input 
            type="text" 
            :value="data"
            @input="update"
        />
    </div>
</template>
 
 
<script>
import { useVModel } from '@vueuse/core'
export default {
  props: ['data'],
  setup(props, { emit }) {
    const data = useVModel(props, 'data', emit)
    console.log(data.value) // equal to props.data
    data.value = 'name' // equal to emit('update:data', 'name')
    const update = (event) => {
        data.value = event.target.value
    }
    return {
        data,
        update
    }
  },
}
</script>

Whenever we need to access our value, we simply call .valueuseVModel and it will fetch the value from our component props. Whenever we change the value of the object, useVModel will emit an update event to the parent component.

Here’s a quick example of what a parent component might look like…

<template>
  <div>
    <p> {{ data }} </p>
    <custom-input 
      :data="data" 
      @update:data="data = $event"
    />
  </div>
</template>
 
 
<script>
import CustomInput from './components/CustomInput.vue'
import { ref } from 'vue'
export default {
  components:
    CustomInput,
  },
  setup () {
    const data = ref('hello')
    return {
      data
    }
  }
}

The result looks something like this, our value in the parent is always in sync with the input in the child.

4. Track element visibility using InterpObserver

Interp Observers are very powerful when it comes to determining if two elements overlap. A good use case for this is checking if an element is currently visible in the viewport.

Essentially it checks what percentage of the target element intersects with the root element/document. If the percentage exceeds a certain threshold, it calls a callback to determine whether the target element is visible.

useInterpObserver provides a simple syntax for using the InterpObserver API. All we need to do is provide a template reference for the element we want to inspect.

By default, the InterpObserver will use the document's viewport as the root, with a threshold of 0.1 - so when that threshold is crossed in either direction, our intersection observer will trigger.

The code for this example might look something like this, where we have a dummy paragraph that only takes up space in the viewport, in the target element.

<template>
  <p> Is target visible? {{ targetIsVisible }} </p>
  <div class="container">
    <div class="target" ref="target">
      <h1>Hello world</h1>
    </div>
  </div>
</template>
 
 
<script>
import { ref } from 'vue'
import { useInterpObserver } from '@vueuse/core'
export default {
  setup() {
    const target = ref(null)
    const targetIsVisible = ref(false)
    const { stop } = useInterpObserver(
      target,
      ([{ isIntersecting }], observerElement) => {
        targetIsVisible.value = isIntersecting
      },
    )
    return {
      target,
      targetIsVisible,
    }
  },
}
</script>
 
 
<style scoped>
.container {
  width: 80%;
  margin: auto;
  background-color: #fafafa;
  max-height: 300px;
  overflow: scroll;
}
.target {
  margin-top: 500px;
  background-color: #1abc9c;
  color: white;
  padding: 20px;
}
</style>

When we run it and scroll, we'll see that it updates correctly.

We can also specify more options for the Interp Observer, such as changing its root element, margin (the offset of the root bounding box used to calculate the intersection points), and threshold level.

//useInterpObserver options const { stop } = useInterpObserver(
      target,
([{ isIntersecting }], observerElement) => {
        targetIsVisible.value = isIntersecting
      },
      {
// root, rootMargin, threshold, window
// full options in the source: https://github.com/vueuse/vueuse/blob/main/packages/core/useInterpObserver/index.ts
        threshold: 0.5,
      }
)

It's also important to see that this method returns a stop function that we can call to stop observing intersections. This is especially useful if we only want to track the first time an element becomes visible on the screen.

In this code snippet, once targetIsVisible is set to true, the observer will stop and even if we scroll away from the target element, our value will remain true.

//Stop InterpObserver
const { stop } = useInterpObserver(
      target,
      ([{ isIntersecting }], observerElement) => {
        targetIsVisible.value = isIntersecting
        if (isIntersecting) {
          stop()
        }
      },
    )

5. useTransition to ease between values

useTransition is one of my favorite functions in the entire VueUse library. It allows us to smoothly ease between values ​​in a row.

We have a digital source stored as ref and an output which will be the transition between different values. For example, let’s say we want to build a counter similar to the one on the signup page for our Vue 3 cheat sheet.

We can do this in three steps:

• Create our countref and initialize it to zero
• Create our output reference useTransition (set our duration and transition type)
• Change the value of count

// Use conversion code <script setup>
import { ref } from 'vue'
import { useTransition, TransitionPresets } from '@vueuse/core'
 
 
const source = ref(0)
 
 
const output = useTransition(source, {
  duration: 3000,
  transition: TransitionPresets.easeOutExpo,
})
 
 
source.value = 5000
</script>

Then, in our template, we want to display the value of output because it smoothly transitions between different values.

<template>
  <h2> 
    <p> Join over </p>
    <p> {{ Math.round(output) }}+ </p>
    <p>Developers </p>
  </h2>
</template>
 
 
<script setup>
import { ref } from 'vue'
import { useTransition, TransitionPresets } from '@vueuse/core'
const source = ref()
const output = useTransition(source, {
  duration: 3000,
  transition: TransitionPresets.easeOutExpo,
})
source.value = 5000
</script>

Here are the results!

We can also useTransition to transform the entire array of numbers. This is useful when working with position or color. An important trick for working with colors is to use computed properties to format RGB values ​​into the correct color syntax.

<template>
<h2 :style="{ color: color } "> COLOR CHANGING </h2>
</template>
<script setup>
import { ref, computed } from 'vue'
import { useTransition, TransitionPresets } from '@vueuse/core'
const source = ref([, , ])
const output = useTransition(source, {
duration: 3000,
transition: TransitionPresets.easeOutExpo,
})
const color = computed(() => {
const [r, g, b] = output.value
return `rgb(${r}, ${g}, ${b})`
})
source.value = [255, , 255]
</script> 

There are also some cool ways we can customize this further, either by using any of the built-in transition presets or defining them using CSS easing functions, it’s up to you.

Final Thoughts

This is by no means a complete guide to VueUse. These are just some of the many functions in VueUse that I found most interesting.

What I like about all of these utility functions is that they can help us speed up our development projects and improve our development efficiency, because each of them is designed to solve a specific but common use case.

This concludes this article about 5 VueUse function libraries that can speed up development. For more relevant VueUse function library content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!