VueUse

https://vueuse.org/
Admin
VueUse is a collection of over 200 essential, type-strong, and tree-shakeable Vue Composition...
Tokens:383,532
Snippets:2,991
Trust Score:9.1
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install dependencies

Source: https://vueuse.org/contributing.html

Run this command to install all necessary project dependencies.

```bash
pnpm install
```

--------------------------------

### Install @vueuse/components

Source: https://vueuse.org/guide/components

Install the core and components packages via npm.

```bash
npm i @vueuse/core @vueuse/components
```

--------------------------------

### Install @vueuse/integrations

Source: https://vueuse.org/integrations/README

Command to install the package via npm.

```bash
npm i @vueuse/integrations
```

--------------------------------

### Install temporal-polyfill

Source: https://vueuse.org/core/useTemporalNow

Install the polyfill for environments without native Temporal support.

```bash
npm i temporal-polyfill
```

--------------------------------

### Install qrcode package

Source: https://vueuse.org/integrations/useQRCode

Install the required qrcode dependency before using the integration.

```bash
npm i qrcode@^1
```

--------------------------------

### Install axios

Source: https://vueuse.org/integrations/useaxios

Install the required axios dependency.

```bash
npm i axios@^1
```

--------------------------------

### Start development server

Source: https://vueuse.org/contributing.html

Use this command to start the VitePress development server locally.

```bash
pnpm dev
```

--------------------------------

### Install @vueuse/math and @vueuse/core

Source: https://vueuse.org/math/README.html

Use this command to install the @vueuse/math package along with its required dependency, @vueuse/core.

```bash
npm i @vueuse/math @vueuse/core
```

--------------------------------

### Install focus-trap

Source: https://vueuse.org/integrations/useFocusTrap

Install the required focus-trap dependency before using the integration.

```bash
npm i focus-trap@^7
```

--------------------------------

### Buffer Input Example

Source: https://vueuse.org/core/useBase64

Example of initializing a buffer input for base64 transformation.

```javascript
new ArrayBuffer(1024)
```

--------------------------------

### Install @vueuse/electron

Source: https://vueuse.org/electron/readme

Install the package and its peer dependency using npm.

```bash
npm i @vueuse/electron electron
```

--------------------------------

### Install idb-keyval peer dependency

Source: https://vueuse.org/integrations/useIDBKeyval

Install the required peer dependency for the integration.

```bash
npm install idb-keyval@^6
```

--------------------------------

### Install jwt-decode

Source: https://vueuse.org/integrations/useJwt

Command to install the required jwt-decode dependency.

```bash
npm install jwt-decode@^4
```

--------------------------------

### Install VueUse via npm

Source: https://vueuse.org/guide

Install the core VueUse package using npm.

```bash
npm i @vueuse/core
```

--------------------------------

### DeviceOrientation Demo Output

Source: https://vueuse.org/core/usedeviceorientation

Example output showing the initial state of the device orientation properties.

```text
isSupported: true
isAbsolute: false
alpha: null
beta: null
gamma: null

```

--------------------------------

### Install @vueuse/rxjs

Source: https://vueuse.org/rxjs/README

Command to install the @vueuse/rxjs package and its peer dependency rxjs.

```bash
npm i @vueuse/rxjs rxjs
```

--------------------------------

### Install async-validator

Source: https://vueuse.org/integrations/useAsyncValidator

Install the required async-validator package version 4 or higher.

```bash
npm i async-validator@^4
```

--------------------------------

### Using useStorage and useLocalStorage

Source: https://vueuse.org/guide/work-with-ai.html

Implementation example for using useStorage and useLocalStorage from @vueuse/core.

```typescript
import { useLocalStorage, useStorage } from '@vueuse/core'

const state = useStorage('my-key', { hello: 'hi' }) // localStorage by default
const theme = useLocalStorage('theme', 'light')
```

--------------------------------

### Wizard state example

Source: https://vueuse.org/core/useStepper

Example of the wizard state object used in the stepper demo.

```json
{
  "steps": {
    "user-information": {
      "title": "User information"
    },
    "billing-address": {
      "title": "Billing address"
    },
    "terms": {
      "title": "Terms"
    },
    "payment": {
      "title": "Payment"
    }
  },
  "stepNames": [
    "user-information",
    "billing-address",
    "terms",
    "payment"
  ],
  "index": 0,
  "current": {
    "title": "User information"
  },
  "next": "billing-address",
  "isFirst": true,
  "isLast": false
}
```

--------------------------------

### AI Agent Prompt Example

Source: https://vueuse.org/guide/work-with-ai.html

An example prompt used to request a todo application with specific features from an AI agent.

```text
create a todo app with the following features:
- save todos to local storage
- show remains todo count on browser title
- add a copy button for each todo items
- infinite scrolling for this todo list
- dark / light mode
```

--------------------------------

### Install VueUse Skills

Source: https://vueuse.org/guide/work-with-ai.html

Use this command to add the VueUse skills to your AI agent environment.

```bash
npx skills add vueuse/skills
```

--------------------------------

### Basic usage of useDropZone

Source: https://vueuse.org/core/useDropZone

This example demonstrates how to set up a drop zone using a template reference and the useDropZone composable. It includes configuration for data types, multi-file support, and an onDrop callback.

```vue
<script setup lang="ts">
import { 
useDropZone
 } from '@vueuse/core'
import { 
useTemplateRef
 } from 'vue'

const 
dropZoneRef
 = 
useTemplateRef
('dropZoneRef')

function 
onDrop
(
files
: File[] | null) {
  // called when files are dropped on zone
}

const { 
isOverDropZone
 } = 
useDropZone
(
dropZoneRef
, {
  
onDrop
,
  // specify the types of data to be received.
  
dataTypes
: ['image/jpeg'],
  // control multi-file drop
  
multiple
: true,
  // whether to prevent default behavior for unhandled events
  
preventDefaultForUnhandled
: false,
})
</script>

<template>
  <
div
 
ref
="
dropZoneRef
">
    Drop files here
  </
div
>
</template>
```

--------------------------------

### Install SortableJS

Source: https://vueuse.org/integrations/useSortable

Install the required SortableJS dependency.

```bash
npm i sortablejs@^1
```

--------------------------------

### Basic Usage Output

Source: https://vueuse.org/core/useMouse

Example output showing the initial state of mouse coordinates and source type.

```text
x: 0
y: 0
sourceType: null
```

--------------------------------

### Install universal-cookie

Source: https://vueuse.org/integrations/useCookies

Install the required universal-cookie package before using the integration.

```bash
npm i universal-cookie@^7
```

--------------------------------

### Basic usage of useFileSystemAccess

Source: https://vueuse.org/core/useFileSystemAccess

Demonstrates how to import and initialize the useFileSystemAccess composable to access file system utilities and reactive file properties.

```typescript
import { 
useFileSystemAccess
 } from '@vueuse/core'

const {
  
isSupported
,
  
data
,
  
file
,
  
fileName
,
  
fileMIME
,
  
fileSize
,
  
fileLastModified
,
  
create
,
  
open
,
  
save
,
  
saveAs
,
  
updateData

} = 
useFileSystemAccess
()
```

--------------------------------

### Install nprogress

Source: https://vueuse.org/integrations/useNProgress

Install the required nprogress dependency via npm.

```bash
npm i nprogress@^0
```

--------------------------------

### Install drauu

Source: https://vueuse.org/integrations/useDrauu

Install the required drauu package using npm.

```bash
npm i drauu@^0
```

--------------------------------

### Usage of useDisplayMedia

Source: https://vueuse.org/core/useDisplayMedia

Demonstrates how to initialize the composable, start the stream, and bind the resulting MediaStream to a video element using a template reference.

```vue
<script setup lang="ts">
import { 
useDisplayMedia
 } from '@vueuse/core'
import { 
useTemplateRef
 } from 'vue'

const { 
stream
, 
start
 } = 
useDisplayMedia
()

// start streaming

start
()

const 
videoRef
 = 
useTemplateRef
('video')

watchEffect
(() => {
  // preview on a video element
  
videoRef
.value.srcObject = 
stream
.
value

})
</script>

<template>
  <
video
 
ref
="
video
" />
</template>
```

--------------------------------

### JWT Payload Example

Source: https://vueuse.org/integrations/usejwt

Example of a decoded JWT payload structure.

```json
{
  "sub": "1234567890",
  "iat": 1516239022
}
```

--------------------------------

### Device Orientation Demo Output

Source: https://vueuse.org/core/useDeviceOrientation

Example output showing the reactive state values for device orientation.

```text
isSupported: true
isAbsolute: false
alpha: null
beta: null
gamma: null
```

--------------------------------

### JWT Header Example

Source: https://vueuse.org/integrations/usejwt

Example of a decoded JWT header structure.

```json
{
  "alg": "HS256",
  "typ": "JWT"
}
```

--------------------------------

### useUserMedia(options?: UseUserMediaOptions)

Source: https://vueuse.org/core/useUserMedia

Initializes a reactive media stream. Returns an object containing the stream, control methods, and configuration refs.

```APIDOC
## useUserMedia(options)

### Description
Reactive wrapper for `mediaDevices.getUserMedia`. It manages the lifecycle of a media stream and provides reactive access to the stream object and control methods.

### Parameters
- **options** (UseUserMediaOptions) - Optional - Configuration object:
  - **enabled** (MaybeRef<boolean>) - Whether the stream is enabled (default: false).
  - **autoSwitch** (MaybeRef<boolean>) - Whether to recreate the stream when constraints change (default: true).
  - **constraints** (MaybeRef<MediaStreamConstraints>) - Media constraints to apply.

### Returns
- **stream** (Ref<MediaStream | undefined>) - The current media stream.
- **start** (() => Promise<MediaStream | undefined>) - Starts the media stream.
- **stop** (() => void) - Stops the media stream.
- **restart** (() => Promise<MediaStream | undefined>) - Restarts the media stream.
- **constraints** (Ref<MediaStreamConstraints | undefined>) - The current constraints.
- **enabled** (ShallowRef<boolean>) - Reactive state of the stream enabled status.
- **autoSwitch** (ShallowRef<boolean>) - Reactive state of the auto-switch configuration.
```

--------------------------------

### useDisplayMedia(options?: UseDisplayMediaOptions)

Source: https://vueuse.org/core/useDisplayMedia

Initializes the screen sharing stream with optional constraints for video and audio.

```APIDOC
## useDisplayMedia(options)

### Description
Reactive wrapper for `mediaDevices.getDisplayMedia` to handle screen sharing streams.

### Parameters
- **options** (UseDisplayMediaOptions) - Optional - Configuration object for the stream.
  - **enabled** (MaybeRef<boolean>) - Optional - Whether the stream is enabled (default: false).
  - **video** (boolean | MediaTrackConstraints) - Optional - Video media constraints.
  - **audio** (boolean | MediaTrackConstraints) - Optional - Audio media constraints.

### Returns
- **stream** (ShallowRef<MediaStream | undefined>) - The current media stream.
- **start** (() => Promise<MediaStream | undefined>) - Function to start the screen sharing stream.
- **stop** (() => void) - Function to stop the screen sharing stream.
- **enabled** (ShallowRef<boolean>) - Reactive state indicating if the stream is active.
```

--------------------------------

### Usage of useCeil

Source: https://vueuse.org/math/useCeil

Demonstrates how to import and use useCeil with a reactive ref.

```typescript
import { 
useCeil
 } from '@vueuse/math'

const 
value
 = 
ref
(0.95)
const 
result
 = 
useCeil
(
value
) // 1
```

--------------------------------

### Basic Usage of useMediaQuery

Source: https://vueuse.org/core/useMediaQuery

Demonstrates how to import and use useMediaQuery to track screen size and color scheme preferences.

```typescript
import { 
useMediaQuery
 } from '@vueuse/core'

const 
isLargeScreen
 = 
useMediaQuery
('(min-width: 1024px)')
const 
isPreferredDark
 = 
useMediaQuery
('(prefers-color-scheme: dark)')
```

--------------------------------

### Basic usage of useCycleList

Source: https://vueuse.org/core/useCycleList

Demonstrates how to initialize useCycleList with an array and use the returned state, next, prev, and go methods to navigate the list.

```ts
import { 
useCycleList
 } from '@vueuse/core'

const { 
state
, 
next
, 
prev
, 
go
 } = 
useCycleList
([
  'Dog',
  'Cat',
  'Lizard',
  'Shark',
  'Whale',
  'Dolphin',
  'Octopus',
  'Seal',
])


console
.
log
(
state
.
value
) // 'Dog'


prev
()


console
.
log
(
state
.
value
) // 'Seal'


go
(3)


console
.
log
(
state
.
value
) // 'Shark'
```

--------------------------------

### Install Playwright dependencies

Source: https://vueuse.org/contributing.html

Install the required dependencies for experimental browser tests.

```bash
npx playwright install --with-deps
```

--------------------------------

### useDevicesList(options?: UseDevicesListOptions)

Source: https://vueuse.org/core/usedeviceslist

Initializes the reactive device list. Returns an object containing lists of devices and methods to manage permissions.

```APIDOC
## useDevicesList(options)

### Description
Reactive `enumerateDevices` listing available input/output devices.

### Parameters
#### Options (UseDevicesListOptions)
- **onUpdated** (Function) - Optional - Callback triggered when devices are updated.
- **requestPermissions** (boolean) - Optional - Whether to request permissions immediately if not granted. Default: false.
- **constraints** (MediaStreamConstraints) - Optional - Media constraints for permission requests. Default: { audio: true, video: true }.

### Returns (UseDevicesListReturn)
- **devices** (ShallowRef<MediaDeviceInfo[]>) - All available devices.
- **videoInputs** (ComputedRef<MediaDeviceInfo[]>) - List of video input devices.
- **audioInputs** (ComputedRef<MediaDeviceInfo[]>) - List of audio input devices.
- **audioOutputs** (ComputedRef<MediaDeviceInfo[]>) - List of audio output devices.
- **permissionGranted** (ShallowRef<boolean>) - Reactive state of permission status.
- **ensurePermissions** (Function) - Method to manually trigger permission request. Returns Promise<boolean>.
```

--------------------------------

### useClipboard(options)

Source: https://vueuse.org/core/useClipboard

Initializes the clipboard reactive interface with optional configuration.

```APIDOC
## useClipboard(options)

### Description
Initializes the clipboard reactive interface. It returns reactive references and methods to interact with the system clipboard.

### Parameters
#### Options
- **source** (MaybeRefOrGetter<string>) - Optional - Default content to copy when copy() is called without arguments.
- **read** (boolean) - Optional - Enable reading clipboard content on copy/cut events. Default: false.
- **copiedDuring** (number) - Optional - Milliseconds before copied resets to false. Default: 1500.
- **legacy** (boolean) - Optional - Fallback to document.execCommand if Clipboard API is unavailable. Default: false.

### Return Values
- **isSupported** (ComputedRef<boolean>) - Whether clipboard is supported (native or legacy).
- **text** (Ref<string>) - Current clipboard content (when read: true).
- **copied** (Ref<boolean>) - true after successful copy, auto-resets.
- **copy** ((text?: string) => Promise<void>) - Copy text to clipboard.
```

--------------------------------

### Starting the Promise

Source: https://vueuse.org/core/createTemplatePromise

Invoking the start method to trigger the rendering of the template promise.

```ts
const 
result
 = await 
TemplatePromise
.
start
()
```

```js
'use strict'
const result = await TemplatePromise.start()
```

--------------------------------

### useVirtualList<T>(list, options)

Source: https://vueuse.org/core/useVirtualList

Initializes a virtual list with the provided data and configuration options.

```APIDOC
## useVirtualList<T>(list, options)

### Description
Creates a virtualized list from a reactive array of data. It returns the necessary props for the container and wrapper elements, as well as a method to scroll to specific indices.

### Parameters
- **list** (MaybeRef<readonly T[]>) - Required - The reactive list of items to render.
- **options** (UseVirtualListOptions) - Required - Configuration options including item size (height or width) and overscan buffer.

### Returns
- **list** (Ref<UseVirtualListItem<T>[]>) - The currently visible items.
- **scrollTo** ((index: number, options?: UseVirtualListScrollToOptions) => void) - Method to scroll to a specific item index.
- **containerProps** (Object) - Props to be applied to the scrollable container element.
- **wrapperProps** (ComputedRef) - Props to be applied to the inner wrapper element containing the items.
```

--------------------------------

### Install @vueuse/router

Source: https://vueuse.org/router/README

Install the package along with vue-router version 5 using npm.

```bash
npm i @vueuse/router vue-router@5
```

--------------------------------

### Install Fuse.js via Yarn

Source: https://vueuse.org/integrations/useFuse

Install the required peer dependency using Yarn.

```bash
yarn add fuse.js
```

--------------------------------

### useGamepad()

Source: https://vueuse.org/core/useGamepad

Initializes the gamepad reactive bindings. Returns an object containing the current state of gamepads, control functions, and event listeners.

```APIDOC
## useGamepad()

### Description
Initializes reactive bindings for the browser Gamepad API. It provides access to connected gamepads and lifecycle events.

### Returns
- **isSupported** (Ref<boolean>) - Whether the browser supports the Gamepad API.
- **gamepads** (Ref<Gamepad[]>) - A reactive array of currently connected gamepads.
- **pause** (Function) - Stops the internal polling of gamepad state.
- **resume** (Function) - Resumes the internal polling of gamepad state.
- **onConnected** (Function) - Event listener for when a gamepad is connected. Receives the index of the gamepad.
- **onDisconnected** (Function) - Event listener for when a gamepad is disconnected. Receives the index of the gamepad.
```

--------------------------------

### Install Fuse.js via NPM

Source: https://vueuse.org/integrations/useFuse

Install the required peer dependency using NPM.

```bash
npm install fuse.js@^7
```

--------------------------------

### Install change-case dependency

Source: https://vueuse.org/integrations/useChangeCase

Install the required change-case package version 5 or higher.

```bash
npm i change-case@^5
```

--------------------------------

### Install VueUse Nuxt dependencies

Source: https://vueuse.org/guide

Manually install the required Nuxt and core packages.

```bash
npm i -D @vueuse/nuxt @vueuse/core
```

--------------------------------

### Usage of createProjection

Source: https://vueuse.org/math/createProjection

Demonstrates how to initialize a projector with source and target domains and use it to map reactive input values.

```typescript
import { 
createProjection
 } from '@vueuse/math'

const 
useProjector
 = 
createProjection
([0, 10], [0, 100])
const 
input
 = 
ref
(0)
const 
projected
 = 
useProjector
(
input
) // projected.value === 0


input
.
value
 = 5 // projected.value === 50

input
.
value
 = 10 // projected.value === 100
```

--------------------------------

### Basic Event Bus Usage

Source: https://vueuse.org/core/useEventBus

Demonstrates how to initialize an event bus, listen for events, emit events, and manage listener unsubscription.

```typescript
import { 
useEventBus
 } from '@vueuse/core'

const 
bus
 = 
useEventBus
<string>('news')

function 
listener
(
event
: string) {
  
console
.
log
(`news: ${
event
}`)
}

// listen to an event
const 
unsubscribe
 = 
bus
.
on
(
listener
)

// fire an event

bus
.
emit
('The Tokyo Olympics has begun')

// unregister the listener

unsubscribe
()
// or

bus
.
off
(
listener
)

// clearing all listeners

bus
.
reset
()
```

```javascript
import { useEventBus } from '@vueuse/core'
const bus = useEventBus('news')
function listener(event) {
  console.log(`news: ${event}`)
}
// listen to an event
const unsubscribe = bus.on(listener)
// fire an event
bus.emit('The Tokyo Olympics has begun')
// unregister the listener
unsubscribe()
// or
bus.off(listener)
// clearing all listeners
bus.reset()
```

--------------------------------

### Install @vueuse/firebase

Source: https://vueuse.org/firebase/README

Command to install the @vueuse/firebase package along with the required firebase dependency.

```bash
npm i @vueuse/firebase firebase
```

--------------------------------

### useBreakpoints(breakpoints, options?)

Source: https://vueuse.org/core/useBreakpoints

Initializes the breakpoints utility with a set of screen sizes and optional configuration.

```APIDOC
## useBreakpoints(breakpoints, options?)

### Description
Creates a reactive object that tracks viewport width against defined breakpoints.

### Parameters
- **breakpoints** (Object) - Required - An object mapping breakpoint names to their pixel values.
- **options** (Object) - Optional - Configuration object containing `strategy` ('min-width' | 'max-width') or `ssrWidth` (number).

### Returns
- **Object** - An object containing reactive methods and shortcut properties for checking viewport status.
```

--------------------------------

### Usage with Options API

Source: https://vueuse.org/core/useVModels

Demonstrates how to use useVModels within the setup function of the Options API.

```typescript
import { 
useVModels
 } from '@vueuse/core'

export default {
  
props
: {
    
foo
: 
String
,
    
bar
: 
Number
,
  },
  
setup
(
props
, { 
emit
 }) {
    const { 
foo
, 
bar
 } = 
useVModels
(
props
, 
emit
)

    
console
.
log
(
foo
.
value
) // props.foo
    
foo
.
value
 = 'foo' // emit('update:foo', 'foo')
  },
}
```

--------------------------------

### Form state example

Source: https://vueuse.org/core/useStepper

Example of the form state object used in the stepper demo.

```json
{
  "firstName": "Jon",
  "lastName": "",
  "billingAddress": "",
  "contractAccepted": false,
  "carbonOffsetting": false,
  "payment": "credit-card"
}
```

--------------------------------

### Delaying Animation Start

Source: https://vueuse.org/core/useAnimate

Using immediate: false to prevent automatic start and triggering it manually.

```typescript
import { 
useAnimate
 } from '@vueuse/core'

const { 
play
 } = 
useAnimate
(el, keyframes, {
  
duration
: 1000,
  
immediate
: false,
})

// Start the animation manually

play
()
```

--------------------------------

### Usage of get utility

Source: https://vueuse.org/shared/get

Demonstrates how to import and use the get function to retrieve the value of a ref.

```typescript
import { 
get
 } from '@vueuse/core'

const 
a
 = 
ref
(42)


console
.
log
(
get
(
a
)) // 42
```

--------------------------------

### useShare(shareOptions?, options?)

Source: https://vueuse.org/core/useShare

Initializes the Web Share API wrapper. Returns a share function and a support status flag.

```APIDOC
## useShare(shareOptions?, options?)

### Description
Initializes the reactive Web Share API. The returned `share` method must be invoked following a user gesture (e.g., a button click).

### Parameters
- **shareOptions** (MaybeRefOrGetter<UseShareOptions>) - Optional - Initial sharing options including title, text, url, or files.
- **options** (ConfigurableNavigator) - Optional - Configuration for the navigator object.

### Returns
- **share** (Function) - A function that triggers the browser share dialog. Accepts optional override options.
- **isSupported** (Boolean) - Indicates if the Web Share API is supported in the current browser.

### UseShareOptions Interface
- **title** (string) - Optional - The title of the shared content.
- **text** (string) - Optional - The text body of the shared content.
- **url** (string) - Optional - The URL to be shared.
- **files** (File[]) - Optional - An array of files to be shared.
```

--------------------------------

### useVModel with Options API

Source: https://vueuse.org/core/useVModel

Demonstrates basic usage of useVModel within the setup function of an Options API component.

```typescript
import { 
useVModel
 } from '@vueuse/core'

export default {
  
setup
(props, { 
emit
 }) {
    const 
data
 = 
useVModel
(props, 'data', 
emit
)

    
console
.
log
(data.value) // props.data
    data.value = 'foo' // emit('update:data', 'foo')
  },
}
```

--------------------------------

### Transition delay and lifecycle callbacks

Source: https://vueuse.org/core/useTransition

Configures a delay before the transition starts and defines callbacks for when the transition starts or finishes.

```typescript

useTransition
(source, {
  
delay
: 1000,
  
onStarted
() {
    // called after the transition starts
  },
  
onFinished
() {
    // called after the transition ends
  },
})
```

```javascript
'use strict'
useTransition(source, {
  delay: 1000,
  onStarted() {
    // called after the transition starts
  },
  onFinished() {
    // called after the transition ends
  },
})
```

--------------------------------

### Basic usage of useRouteQuery

Source: https://vueuse.org/router/useRouteQuery

Demonstrates basic initialization, default values, and type transformation for query parameters.

```ts
import { 
useRouteQuery
 } from '@vueuse/router'

const 
search
 = 
useRouteQuery
('search')

const 
search
 = 
useRouteQuery
('search', 'foo') // or with a default value

const 
page
 = 
useRouteQuery
('page', '1', { 
transform
: 
Number
 }) // or transforming value


console
.
log
(
search
.
value
) // route.query.search

search
.
value
 = 'foobar' // router.replace({ query: { search: 'foobar' } })
```

--------------------------------

### Type Declarations for get

Source: https://vueuse.org/shared/get

The type definitions for the get function, supporting both direct ref access and property access via a key.

```typescript
/**
 * Shorthand for accessing `ref.value`
 */
export declare function 
get
<
T
>(
ref
: 
MaybeRef
<
T
>): 
T

export declare function 
get
<
T
, 
K
 extends keyof 
T
>(
  
ref
: 
MaybeRef
<
T
>,
  
key
: 
K
,
): 
T
[
K
]
```

--------------------------------

### transition<T>(source, from, to, options)

Source: https://vueuse.org/core/useTransition

Transitions a source ref from a starting value to a target value over time.

```APIDOC
## transition<T>(source, from, to, options)

### Description
Transitions a reactive source reference from a starting value to a target value. Returns a Promise that resolves when the transition completes.

### Parameters
- **source** (Ref<T>) - The reactive reference to update.
- **from** (MaybeRefOrGetter<T>) - The starting value.
- **to** (MaybeRefOrGetter<T>) - The target value.
- **options** (TransitionOptions<T>) - Optional configuration including duration, easing, and abort logic.
```

--------------------------------

### Basic usage of useUserMedia

Source: https://vueuse.org/core/useUserMedia

Demonstrates how to initialize a media stream and bind it to a video element using the useUserMedia composable.

```vue
<script setup lang="ts">
import { 
useUserMedia
 } from '@vueuse/core'
import { 
useTemplateRef
, 
watchEffect
 } from 'vue'

const { 
stream
, 
start
 } = 
useUserMedia
()

start
()

const 
videoRef
 = 
useTemplateRef
('video')

watchEffect
(() => {
  // preview on a video element
  
videoRef
.value.srcObject = 
stream
.
value

})
</script>

<template>
  <
video
 
ref
="
video
" />
</template>
```

--------------------------------

### get<T>(ref: MaybeRef<T>): T

Source: https://vueuse.org/shared/get

Accesses the value of a ref.

```APIDOC
## get<T>(ref: MaybeRef<T>)

### Description
Shorthand for accessing `ref.value`.

### Signature
`export declare function get<T>(ref: MaybeRef<T>): T`

### Parameters
- **ref** (MaybeRef<T>) - Required - The ref or value to access.

### Returns
- **T** - The unwrapped value.
```
Tokens:
Raw