Découvrir VueUse : la boîte à outils indispensable pour Vue.js

Quand on développe une application Vue, on finit souvent par réécrire les mêmes choses :

• écouter des évènements du navigateur
• gérer des états réactifs
• accéder aux APIs Web
• nettoyer des listeners

C’est précisément le problème que résout VueUse.

Une bibliothèque de composables

VueUse est une immense bibliothèque de composables prêts à l’emploi pour Vue.js.

Elle propose des centaines d’utilitaires pour :

• le navigateur
• les animations
• les capteurs
• les raccourcis clavier
• le stockage local
• les APIs Web modernes

Et surtout tous les utilitaires sont pensés pour fonctionner naturellement avec la réactivité de Vue.

L’installation est très simple :

npm install @vueuse/core

Ensuite, vous pouvez importer uniquement les composables dont vous avez besoin.

Copier du texte avec useClipboard

L’API du presse-papiers du navigateur peut être un peu pénible à utiliser directement.

VueUse simplifie énormément cela avec useClipboard.

import { useClipboard } from "@vueuse/core"

const { copy, copied } = useClipboard()

const copyCode = async () => {
  await copy("Hello world")
}

Le booléen copied devient automatiquement true pendant quelques secondes après la copie.

Parfait pour afficher un message :

<p v-if="copied">Texte copié !</p>

C’est idéal pour :

• des boutons “Copier”
• des snippets de code
• des liens de partage
• des tokens API

Récupérer la position GPS avec useGeolocation

VueUse propose aussi un accès très simple à la géolocalisation du navigateur.

import { useGeolocation } from "@vueuse/core"

const { coords, locatedAt, error } = useGeolocation()

Les coordonnées deviennent automatiquement réactives :

<p>Latitude : {{ coords.latitude }}</p>
<p>Longitude : {{ coords.longitude }}</p>

C’est particulièrement utile pour :

• une carte interactive
• une application météo
• du contenu localisé
• du suivi de position

Et contrairement à une implémentation manuelle, VueUse gère déjà :

• les listeners
• la réactivité
• le nettoyage automatique

Détecter l’état du réseau avec useNetwork

Savoir si un utilisateur est hors ligne peut améliorer énormément l’expérience utilisateur.

Avec useNetwork :

import { useNetwork } from "@vueuse/core"

const { isOnline, downlink, effectiveType } = useNetwork()

Vous pouvez facilement afficher un message :

<p v-if="!isOnline">
  Vous êtes actuellement hors ligne.
</p>

Mais aussi adapter l’application selon la qualité du réseau.

Par exemple :

• réduire la qualité des images
• désactiver certaines animations
• éviter des requêtes lourdes

Utiliser une manette avec useGamepad

C’est probablement l’un des composables les plus amusants.

useGamepad permet d’accéder aux manettes connectées au navigateur.

import { useGamepad } from "@vueuse/core"

const { gamepads } = useGamepad()

Vous pouvez ensuite lire les boutons et axes :

<pre>{{ gamepads }}</pre>

Cela ouvre la porte à énormément de projets :

• mini jeux Vue.js
• interfaces interactives
• bornes tactiles
• contrôles alternatifs

Et tout cela avec très peu de code.