VueUse-Vue composable library that has collection of vue composition utilities

VueUse is a collection of utility functions based on Composition API. To use this, you need to familiar with this concept. In the context of Vue applications, a “composable” is a function that leverages Vue’s Composition API to encapsulate and reuse stateful logic.

Why VueUse ?

With over 18,000 GitHub stars, this package is essential for any Vue.js-related project. You can utilize this package in any Vue.js project, including Vue.js 2 and 3, as well as Nuxt 2/3. For Vue.js 2, you may need to install an additional package to use this library. In this post, I will be referring to Vue.js 3

Lets Start !!

VueUse empowers Vue developers with a comprehensive toolkit of utility functions. It covers a vast range of areas, from core functionalities like state management and element interaction to browser APIs, sensors, network requests, animations, and component utilities. You can also leverage advanced features like reactive data handling, array manipulation, time management, and general-purpose utilities. Additionally, VueUse offers add-on support for libraries like Electron and Firebase, providing a seamless integration experience. This expansive feature set streamlines development by offering pre-built solutions for common tasks, saving time and enhancing code maintainability.

Let me start with the key advantages of having this package on your Vue.js project :

1. It has 200+ readymade function which are ready to use

2. Works for vue 3 and 2

3. Flexiable

4. SSR friendly

5. Different add-ons

6. Has own playground to try these function online.

7. Great Documentation with the proper use cases.

Before jumping into the installation part, I want to provide you with some context on how to use the functions:

Use Case: One-Click Text or Image Copying

Imagine you’re building a blog where users can easily copy code snippets or image URLs. Traditionally, you might use a manual approach with a button, a temporary text field, and user selection. However, VueUse’s useClipboard can streamline this process, providing a user-friendly one-click copy experience. (View official example)

Make Clipboard.vue file and add following to try this out:

(Recommanded: Use the playground mentioned above)

In side template:

  <div>
    <h2>Code Snippet</h2>
    <pre>{{ code }}</pre>
    <button @click="copyCode" type="btn">Copy to Clipboard</button>
  </div>

In side script :

<script setup> // following code </script>

import { ref } from 'vue';
import { useClipboard } from '@vueuse/core';

// Create a reactive ref to hold the text content for copying
const code = ref(`const message = 'Hello, world!';`);

// Destructure the useClipboard function to access copy and success
const { copy, success } = useClipboard();

// Function to handle copying the code snippet
const copyCode = async () => {
  // Attempt to copy the content of the code ref
  await copy(code.value);

  // Check if the copy operation was successful
  if (success.value) {
    console.log('Copied');  // Log a message to the console
    // Optionally, replace this with a user-friendly success message
    // displayed in the UI (e.g., "Copied!")
  }
};

Photo by Afif Ramdhasuma on Unsplash

As simple as that, you’ve now added a copyToClipboard feature to your app. This is just one example; the library offers numerous other features and functions that are equally as interesting.

Photo by Magnet.me on Unsplash

You might wonder why use this when it can be achieved using core JavaScript. The answer is yes, it can be done using code alone. In fact, this library is also based on core JS. However, it simplifies the process of implementing these simple yet efficient tools, allowing you to integrate them within minutes with less code.

Installation

Install with the following commad:

Using Npm command:

npm i @vueuse/core

Or CDN use

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

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

For details installation part you can visit the official documentation.

After Installation

Now, you have access to over 200 ready-to-use features/functions. You can visit the list to find the functions you need and explore them further.

Happy Coding !!