Vite + Vue + VueUse + TS

useTitle

Demo of useTitle

tints & shades

Color shades and tints (10% graduation)

#3eaf7c

Shades of base color

  •  

    #3eaf7c

  •  

    #51b789

  •  

    #65bf96

  •  

    #78c7a3

  •  

    #8bcfb0

  •  

    #9fd7be

  •  

    #b2dfcb

  •  

    #c5e7d8

  •  

    #d8efe5

  •  

    #ecf7f2

  •  

    #ffffff

Tints of base color

  •  

    #3eaf7c

  •  

    #389e70

  •  

    #328c63

  •  

    #2b7a57

  •  

    #25694a

  •  

    #1f583e

  •  

    #194632

  •  

    #133425

  •  

    #0c2319

  •  

    #06110c

  •  

    #000000

Inspired by https://maketintsandshades.com/

useClipboard

Demo of useClipboard

From Reactive Ref

By passing the value to copy function

useDark

Demo of useDark

isDark = false

The value is by default read from the system preferences. See how to adjust that.

useColorMode

Demo of useColorMode

onKeyStroke

Demo from Vueuse docs

Use the arrow keys or w (up), a (left), s (down) or d (right) keys to control the movement of the ball.

Repeated events are ignored on the key `d` or `->` (see property `dedupe`).

Demo from Vueschool course

useMagicKeys

Demo from Vueuse docs

Instructions: press any key simultaneously to update the Set below.

Simultaneously pressed keys:

{
  "Set(0)": []
}

🫸 : si vous faites un CTRL+S ou CTRL+P, votre navigateur réagira comme il se doit...

... and try a+s

... and try a+w

useBattery
 Try to unplug the AC and let the battery be drained... if isSupported = true, of course... 
{
  "isSupported": true,
  "charging": true,
  "chargingTime": 0,
  "dischargingTime": null,
  "level": 1
}
useOnline & useNetwork

Online flag

true

Network info

{
  "isSupported": true,
  "isOnline": true,
  "saveData": false,
  "onlineAt": 1764870808733,
  "downlink": 10,
  "effectiveType": "4g",
  "rtt": 0
}
useGeolocation
{
  "coords": {
    "accuracy": 0,
    "latitude": null,
    "longitude": null,
    "altitude": null,
    "altitudeAccuracy": null,
    "heading": null,
    "speed": null
  },
  "locatedAt": null,
  "error": null
}
usePageLeave & useConfirmDialog
 Try to move your cursor out of the window... 
Cursor hovering the browser window? Yes
usePageLeave & native dialog element

Try to move your cursor out of the window...

You are leaving? 😟

Please don't, pleasssse stay to enjoy more of VueUse ⚡

Using usePageLeave and Native dialog for BEST accessibility

Thanks 😊

Click or Hit ESC ⚡

usePointer & useElementBounding

What is usePointer useful for?

{
  "x": 0,
  "y": 0,
  "pointerId": 0,
  "pressure": 0,
  "tiltX": 0,
  "tiltY": 0,
  "width": 0,
  "height": 0,
  "twist": 0,
  "pointerType": null,
  "isInside": false
}

Usecase: draw something below

Color picked: #000000
Mouse position: 0 x 0 
Canvas position: 311 x 2322
Brush position (in regards to document): 0 x 0
Brush position (in regards to canvas): -311 x -1161
useRafFn

Make the man walk with useIntervalFn

Make the man walk with useRafFn

useTimout

Toast- notification

This is a nice notification...
This is a nice notification... that will disappear!

Toast- notification with stop on mouse hover

Hover the notification before it disappears (within 5 seconds)!

Then move the mouse away from the the notification to make it disappear (within 5 seconds)!

This is a nice notification... that will disappear! 
true

Demo of refAutoReset

useTimestamp, useNow, useDateFormat

Elapsed seconds since last refresh

1

Format dates

From useTimestamp: 4 December 2025
From useNow: 4 December 2025
useTransition

 

Transition from 0 to 100

        load directly: 0
      
        load with transition: 0
      
      load with transition and round values: 0

Loading bar usecase

useRefHistory

The shared input

Demo useRefHistory

[
  {
    "snapshot": "",
    "timestamp": 1764870808749
  }
]

Demo useDebouncedRefHistory

[
  {
    "snapshot": "",
    "timestamp": 1764870808749
  }
]

Demo with todo list

    [
  {
    "snapshot": [],
    "timestamp": 1764870808749
  }
]
    useLocalStorage & useSessionStorage

    Demo useLocalStorage

    Demo useSessionStorage

    useFetch & computedAsync

    Demo of useFetch

    {
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

    Demo of computedAsync

    {
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}
    useBase64

    Demo

    useCycleList

    Demo carousel

    useAlertFavicon

    The Alert button will show an emoji every second in place of the favicon

    The Change button will replace the favicon with another one

    The Cancel will stop the favicon animation

    Demo 1 with defaults

    Demo 2 using options

    useArrayDifference

    List 1

    List 2

    Difference

    Between the list 1 compared to list 2

    None

    Between the list 2 compared to list 1

    None

    useFileSystemAccess

    Demo

    Create a text file on your computer. Its contents will be loaded in the textarea.

    Your browser supports this demo.