Composables

Intro

Vant provide some built-in composition APIs, you can directly use these APIs for development.

Install

Although @vant/use is already included in Vant's dependencies, it is still recommended to install this package explicitly:

# with npm
npm i @vant/use

# with yarn
yarn add @vant/use

# with pnpm
pnpm add @vant/use

# with Bun
bun add @vant/use

Demo

import { useWindowSize } from '@vant/use';

const { width, height } = useWindowSize();

console.log(width.value); // -> window width
console.log(height.value); // -> window height

API List

Name	Description
useClickAway	Triggers a callback when user clicks outside of the target element
useCountDown	Used to manage the countdown
useCustomFieldValue	Used to custom Field value
useEventListener	Used to attach event
usePageVisibility	Get the visible state of the page
useRect	Get the size of an element and its position relative to the viewport
useRelation	Establish the association relationship between parent and child components
useScrollParent	Get the closest parent element that is scrollable
useToggle	Used to switch between true and false
useWindowSize	Get the viewport width and height of the browser window
useRaf	Used to manage the requestAnimationFrame