Supercharge your Vue.js and Nuxt.js apps with VueUse

Vue.js and Nuxt.js are frameworks already well-known for his or her superior developer expertise. Since Vue 3 was launched (on which Nuxt 3 is written), we’re supplied with set of APIs that permit us to creator Vue elements utilizing imported features as an alternative of declaring choices. That is generally often called the composition API. This API permits us to create abstractions on Vue’s Reactivity API, Lifecycle Hooks and its underlying dependency injection system.

On this article, we will talk about how Vue builders can leverage VueUse’s features to effectively simplify growth and scale back boilerplate code, whereas permitting them to shortly prototype and check concepts.

Contents

VueUse and the composition API

VueUse cash itself as a set of important Vue composition utilities. VueUse leverages its energy from the API provided by the composition API, and offers greater than 200 versatile and typesafe features that add fundamental interactions in your elements which will in any other case require code from you.

The VueUse playground allows you to experiment with the APIs as a lot as you need. This playground is simply the proper addition to such an in depth library. We’ve got the flexibility to put in different libraries, play with VueUse’s features in actual time, and even share the hyperlink to the playground on which you might be experimenting.

Any developer may certainly write a composable operate that appears like those provided by VueUse, nevertheless, VueUse features are structured, examined, and optimized, making it a purposeful Swiss Military Knife for any Vue developer.

Getting began with VueUse

As a result of VueUse is only a assortment of features, getting began with it needs to be as seamless as including a utils file in your challenge and easily importing features from it.

To put in VueUse in your Vue challenge, you’ll be able to both get it through npm set up:

npm i @vueuse/core

Or by way of the CDN, exposing it as window.VueUse:

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

Take a look at their getting began web page for putting in on Nuxt and different environments.

Composing with VueUse

Utilizing composables with VueUse is simple. You’re given a operate that does precisely one utility, or offers a set of options. This operate handles the entire complexity behind the function, and is ready to return refs, that are reactive and mutable objects in Vue. The ref is then used as a Vue reactive variable and can be utilized or mutated

Under is an instance of the useClipboard VueUse operate. This composable operate is ready to learn and write from the clipboard, in addition to reply to repeat, lower, and paste instructions. and even verify whether it is supported within the present setting:

import { useClipboard } from '@vueuse/core'

const supply = ref('One thing it is advisable copy')
const { textual content, copy, copied, isSupported } = useClipboard({ supply })

The utilization is simple and really versatile; you’ll be able to use it throughout your Vue app. The operate will return the refs of the variables that you just want. The useClipboard supply code is concise but full, providing you the only API wanted to implement this performance.

In case you wish to use the identical features with reactive fairly than refs, you’ll be able to merely wrap them with vue’s reactive() operate:

import { reactive } from 'vue'
import { useMouse } from '@vueuse/core'

const clipboard = reactive(useClipboard())

// "all accessible refs" will likely be unwrapped.
console.log(clipboard.copied)

Configuring composables

VueUse features present numerous flexibility, for instance, you might have the flexibility to throttle, debounce and even pause them utilizing Occasion Filters:

import { debounceFilter, throttleFilter, useMouse } from '@vueuse/core'

// mouse place will likely be up to date after mouse idle for 1s
const { x, y } = useMouse({ eventFilter: throttleFilter(1000) })

// mouse place will likely be up to date after mouse idle for 100ms
const { x, y } = useMouse({ eventFilter: debounceFilter(100) })

VueUse additionally permits additional configuration on reactive timing for different particular features. You’ve gotten the flexibility to alter when the occasions occur relative to Vue lifecycle occasions.

Renderless elements

VueUse offers renderless elements through the @vueuse/elements package deal. In renderless elements, ref binding is finished robotically and VueUse offers ready-to-use elements with slots and props to catch occasions and set off and edit elements.

Under is an instance of a VueUse part that permits us to “eye drop” (catch colours) in a webpage:

<script setup>
import { useEyeDropper } from '@vueuse/elements'
<script/>

<template>
  <UseEyeDropper v-slot="{ isSupported, sRGBHex, open }">
    <button :disabled="!isSupported" @click on="open">
      sRGBHex: {{ sRGBHex }}
    </button>
  </UseEyeDropper>
<template>

The identical operate may additionally present usable reactive refs if imported from @vueuse/core. This offers builders the perfect accessible flexibility to make use of and reuse these features.

VueUse’s library of features is totally tree-shakable, examined, typed, SSR-friendly and nicely optimized for Vue, making it protected and developer pleasant.

Utilizing composables concisely with Reactivity Rework

Reactivity Rework is an experimental compile-time remodel that enables us to entry our Vue ref with out utilizing .worth. They’re created by prefixing $ on the equal macro, like so:

• ref → $ref
• computed → $computed
• shallowRef → $shallowRef
• customRef → $customRef
• toRef → $toRef

For VueUse, which means we’re in a position to make use of the refs ensuing from the composable in a destructured approach:

import { useMouse } from '@vueuse/core'
const { x, y } = $(useMouse())
console.log(x, y) // no want to jot down x.worth and y.worth 

Standout features in VueUse

We are able to clearly construct numerous cool issues with the features coming from VueUse; every operate has a particular use case. Under, yow will discover an overview on how we will use a few of these features to simply construct and lengthen mind-blowing interfaces and interactions.

On VueUse, features are separated by class and regrouped into two differing types: core and add-ons. Core features are light-weight and dependency free features which internally use Vue reactivity to carry out a activity. Add-ons are wrapped purposeful variations of well-liked packages following the composable vogue.

Within the following sections, I’ll checklist every class with a quick clarification of the features it comprises and examples of what you’ll be able to construct with them.

Browser

Browser features are reactive features will the flexibility to work together with the browser API. You’ve gotten the flexibility to verify permissions; use APIs like notifications, fullscreen, and vibration; and even manipulate your UI primarily based on breakpoints (useBreakpoint).

Sensors

Sensor features are capable of seize consumer occasions and use the gadget API. These features vary from grabbing completely different occasions from the mouse or keyboard (useMousePressed, useMouse, onStartTyping, onMagicKeys) to DOM emitted occasions like useElementHover and onClickOutside.

VueUse sensor features are nice as a result of their relation with reactivity. Typically you want the occasions in actual time, however generally it’s possible you’ll must throttle them, which VueUse accomplishes nicely.

Animation

Animation features are largely time-related. They aren’t solely particular to animations, nevertheless; you may as well use them to replace your UI primarily based on time.

These features embrace useNow and useTimestamp, giving us the present date (in actual time). We even have useInterval and useTimeout, which act like JavaScript setTimeout and setInterval, and useTransition. which may carry out quite simple to advanced and customized transitions.

VueUse additionally exposes an add-on referred to as @vueuse/movement. @vueuse/movement makes use of popmotion underneath the hood to allows you to create lovely animations. @vueuse/movement additionally lets you use its API as a directive or as a composable. Go to the docs for extra examples on the best way to animate with this nice add-on.

State

State features allow you to entry every thing associated to your Vue elements and browser states. The highlights on this class are createGlobalState, useLocalStorage and useRefHistory.

createGlobalState can be utilized to create a reusable and shareable state amongst completely different Vue situations. useLocalStorage permits us to make use of the browser’s localStorage reactively, and useRefHistory tracks the change historical past of a ref.

Components

Component elements show you how to reactively entry the state of your HTML components. You should use useMouseInElement to get the relative place of the mouse in a component, or useDraggable to make any HTML component draggable. The useDraggable operate is extraordinarily highly effective, as a result of you’ll be able to monitor them position-wise and persist their coordinates within the browser storage.

Element

Element features permit you to deal with many features of your elements reactively. There are features to bind template refs in an effort to safely work together with the elements lifecycle.

My spotlight on this class is useVirtualList, which is ready to virtualize a rendered array into one line. This operate lets you render the minimal variety of components mandatory to point out the objects from an array inside a container.

Watch

Watch features act just like the Vue watch function on steroids. They provide the capacity to observe solely as soon as, watch and filter occasions, watch in a debounced or throttled approach, and even watch and ignore sure modifications.

Community

These are features that work together with community occasions. They can make async HTTP calls and return the state of the decision or connection.

The highlighted operate on this class is useFetch and useWebSocket, as a result of they may in all probability be one other package deal on their very own and nonetheless be very talked-about.

useFetch permits us to fetch, refetch, intercept, and abort HTTP requests in our Vue app. It is extremely highly effective due to the best way it handles reactivity; the operate returns refs and callbacks that allow you to trace the state of the request, abort, and hearth different features after fetch occasions.

VueUse additionally offers a composable wrapper across the Axios library. useAxios implements all the Axios options whereas holding Vue’s reactivity on the occasions.

Utilities

This class comprises some other operate which will show you how to create or deal with reactive components and features in your Vue app.

The features mentioned above are simply an outline of among the 200+ features accessible to you, and the checklist retains getting greater.

Apps you’ll be able to construct with VueUse

• Advanced and animated drag and drop interfaces just like the Trello kanban board may simply be applied utilizing the @vueuse/gesture add-on package deal
• A picture classification UI enabling customers to pick out part of a picture and classify could possibly be constructed by combining useDraggable and useResizeObserver to assist the consumer create choice bins and monitor their place relative to the picture being labeled
• VueUse could possibly be a very good companion whereas creating video games on the browser because of its assist for enter with @vueuse/gestures, useGamepad, useMagicKeys, and useMouse. This simplifies the code written to work together with the native APIs

The VueUse contributors at all times search for inventive methods to point out examples of the best way to leverage every operate. Going by way of the docs is usually a supply of inspiration to builders.

Writing your individual composable

Writing Vue composables is as simple as utilizing them. Under is an instance of a composable that helps reactively monitor the place of the mouse:

// mouse.js
import { ref, onMounted, onUnmounted } from 'vue'

// by conference, composable operate names begin with "use"
export operate useMouseCustom() {
  // state encapsulated and managed by the composable
  const x = ref(0)
  const y = ref(0)

  // a composable can replace its managed state over time.
  operate replace(occasion) {
    x.worth = occasion.pageX
    y.worth = occasion.pageY
  }

  // a composable can even hook into its proprietor part's
  // lifecycle to setup and teardown negative effects.
  onMounted(() => window.addEventListener('mousemove', replace))
  onUnmounted(() => window.removeEventListener('mousemove', replace))

  // expose managed state as return worth
  return { x, y }
}

The useMouseCustom operate above follows among the outlined tips uncovered by VueUse. These tips show you how to write higher composables, that are backwards appropriate between Vue variations and have minimal or no negative effects.

Conclusion

I consider VueUse is a good addition to Vue’s ecosystem. The worth it brings by way of developer expertise is big. The library is approachable by builders of any stage and open to any doable enchancment.

On this publish, we’ve seen how VueUse leverages the ability of the composition API to create features that may supercharge your growth workflow. These features are examined, protected and straightforward to combine in your Vue/Nuxt apps of any measurement.