### Start Documentation Development Server

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/CONTRIBUTING.md

Use this command in the root folder to start the documentation development server. Alternatively, run 'pnpm initial' and then 'pnpm docs:dev' in the 'packages/hooks' folder.

```bash
pnpm docs:dev
```

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

### Install useUrlState

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/en/hooks/useUrlState.md

Install the package using npm. This command adds the necessary library to your project dependencies.

```bash
npm i @vue-hooks-plus/use-url-state
```

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

### Install Dependencies and Build Project

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/superpowers/plans/2026-06-10-toolchain-upgrade.md

Install new dependencies and build the project. Expect the build process to pass with exit code 0, potentially requiring minimal type assertion fixes.

```bash
pnpm install
pnpm build
```

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

### Install vue-hooks-plus

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/en/guide/getting-started.md

Install the library using npm. This is the first step to using vue-hooks-plus in your project.

```bash
npm i vue-hooks-plus
```

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

### Install Dependencies

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/en/hooks/useRequest/plugins/fetchsing.md

Install pinia and the use-request-plugins package. Ensure pinia is already set up in your Vue instance.

```bash
npm i pinia

npm i @vue-hooks-plus/use-request-plugins
```

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

### Install BroadcastChannel Plugin Dependencies

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/en/hooks/useRequest/plugins/broadcastChannel.md

Install the necessary packages for the BroadcastChannel plugin. Ensure 'broadcast-channel' is installed before the plugin.

```bash
1. npm i broadcast-channel

2. npm i @vue-hooks-plus/use-request-plugins
```

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

### Install BroadcastChannel and Vue Hooks Plus Plugins

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/packages/hooks/src/useRequest/docs/plugins/broadcastChannel/index.zh-CN.md

Ensure the broadcast-channel package is installed for the plugin to function. Then, install the use-request-plugins package.

```bash
npm i broadcast-channel
npm i @vue-hooks-plus/use-request-plugins
```

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

### Install Dependencies with pnpm

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/CONTRIBUTING.md

Use this command in the root folder to install and link dependencies for the monorepo.

```bash
pnpm i
```

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

### Install Dependencies and Build Package

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/superpowers/plans/2026-06-10-toolchain-upgrade.md

Install dependencies and build the specific package (`@vue-hooks-plus/use-request-plugins`). This step verifies API compatibility with broadcast-channel v7.

```bash
pnpm install
pnpm --filter @vue-hooks-plus/use-request-plugins build
```

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

### Start VitePress Docs Development Server

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/CLAUDE.md

Launches the VitePress documentation development server, allowing for live preview of documentation changes.

```bash
pnpm docs:dev
```

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

### Install Dependencies with pnpm

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/CLAUDE.md

Installs all project dependencies. This project requires pnpm for package management.

```bash
pnpm install
```

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

### Install Pinia and use-request-plugins

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/zh/hooks/useRequest/plugins/broadcastChannel.md

Ensure your application includes Pinia and is used by the Vue instance. Install Pinia and the use-request-plugins package using npm.

```bash
# 需要保证应用含有pinia，并且被Vue实例 use。

1. npm i pinia

2. npm i @vue-hooks-plus/use-request-plugins

```

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

### Install useImmer Hook

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/en/hooks/useImmer.md

Install the useImmer hook package using npm. Ensure Immer is installed in your project for normal operation.

```bash
npm i @vue-hooks-plus/use-immer
```

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

### Install useWorker Hook

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/en/hooks/useWorker.md

Install the useWorker library using npm. This is the initial setup step before using the hook in your Vue project.

```bash
npm i @vue-hooks-plus/use-worker
```

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

### Basic useWinResize Demo

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/en/hooks/useWinResize.md

Demonstrates how to use the useWinResize hook to listen for window dimensions. No specific setup or imports are required beyond using the hook itself.

```vue
<template>
  <div>Window size: {{ width }} x {{ height }}</div>
</template>

<script setup>
import { ref } from 'vue'
import { useWinResize } from 'vue-hooks-plus'

const width = ref(0)
const height = ref(0)

useWinResize((event) => {
  width.value = window.innerWidth
  height.value = window.innerHeight
})
</script>
```

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

### Directory Structure for Project Setup

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/packages/hooks/src/useRequest/docs/guide/index.en-US.md

Illustrates the recommended directory structure for a Vue project utilizing useRequest, including network configuration, views, services, and type definitions.

```bash
.\n├── src\n│   ├── network\n│   │    ├── axios.ts\n│   ├── views\n│   │    ├── home\n│   │    │    ├── Home.vue\n│   │    │    ├── Home.less\n│   │    │    ├── services.ts  // API\n│   │    │    └── data.d.ts    // TS type\n│   ├── services   // recommend\n│   │   └── api.ts // global API\n└── typings.d.ts   // global ts type

```

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

### Basic useCounter Demo

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/en/hooks/useCounter.md

A simple example demonstrating the basic usage of the useCounter hook for managing a counter.

```vue
<template>
  <div>
    <p>Count: {{ current }}</p>
    <button @click="inc()">Increment</button>
    <button @click="dec()">Decrement</button>
    <button @click="set(10)">Set to 10</button>
    <button @click="reset()">Reset</button>
  </div>
</template>

<script setup lang="ts">
import { useCounter } from 'vue-hooks-plus'

const [current, { inc, dec, set, reset }] = useCounter(0)
</script>
```

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

### useTimeout with Immediate Execution

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/zh/hooks/useTimeout.md

This example shows how to use the `immediate` option to execute the function immediately upon hook initialization, followed by a delay.

```vue
<template>
  <div>
    <p>Function executed immediately and will repeat after 2 seconds.</p>
  </div>
</template>

<script setup lang="ts">
import { useTimeout } from 'vue-hooks-plus';

const logMessage = () => {
  console.log('Immediate execution or delayed execution.');
};

useTimeout(logMessage, 2000, { immediate: true });
</script>
```

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

### Verify Bootstrap Artifacts

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/superpowers/plans/2026-06-10-toolchain-upgrade.md

Install dependencies, run the bootstrap script, and check for differences in the generated meta-data file. An empty diff indicates successful formatting.

```bash
pnpm install
pnpm bootstrap
command git diff --stat packages/hooks/meta-data.json
```

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

### useCounter Demo

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/zh/hooks/useCounter.md

A simple example demonstrating the management of a counter using the useCounter Hook.

```vue
<template>
  <div>
    <p>Count: {{ current }}</p>
    <button @click="inc()">Increment</button>
    <button @click="dec()">Decrement</button>
    <button @click="set(10)">Set to 10</button>
    <button @click="reset()">Reset</button>
  </div>
</template>

<script setup lang="ts">
import { useCounter } from '@/hooks/useCounter';

const [current, { inc, dec, set, reset }] = useCounter(0, { min: -5, max: 10 });
</script>
```

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

### V1 Formatter Plugin Example

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/en/hooks/useRequest/plugin.md

An example of a V1 plugin that formats data upon successful request. It uses `setFetchState` to update the 'data' field.

```typescript
const useFormatterPlugin: UseRequestPlugin<
  {
    name: string
    age: number
  },
  [],
  {
    formatter?: ({ name, age }?: { name: string; age: number }) => any
  }
> = (fetchInstance, { formatter }) => {
  return {
    onSuccess: () => {
      fetchInstance.setFetchState(formatter?.(fetchInstance.state.data), 'data')
    },
  }
}
```

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

### V2 Formatter Plugin Example

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/en/hooks/useRequest/plugin.md

An example of a V2 plugin that formats data upon successful request, accessing options via `pluginOptions`. It uses `setFetchState` to update the 'data' field.

```typescript
const useFormatterPlugin: UseRequestPlugin<
  {
    name: string
    age: number
  },
  [],
  {
    formatter?: ({ name, age }?: { name: string; age: number }) => any
  }
> = (fetchInstance, { pluginOptions }) => {
  return {
    onSuccess: () => {
      fetchInstance.setFetchState(pluginOptions?.formatter?.(fetchInstance.state.data), 'data')
    },
  }
}
```

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

### Debounce Request Example

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/en/hooks/useRequest/debounce.md

This example demonstrates how to use the debounce functionality. Enter text rapidly in the input box to trigger the `run` function frequently. The request will only execute 1000ms after the last trigger.

```vue
<template>
  <input v-model="search" placeholder="Enter text" />
  <p>Result: {{ data }}</p>
</template>

<script setup lang="ts">
import { useRequest } from 'vue-hooks-plus';
import { ref } from 'vue';

const search = ref('');

const { data } = useRequest(
  () =>
    Promise.resolve([
      {
        id: 1,
        name: 'example1',
      },
      {
        id: 2,
        name: 'example2',
      },
    ]),
  {
    debounceWait: 1000,
    // You can also use debounceLeading and debounceTrailing to control execution timing
    // debounceLeading: true,
    // debounceTrailing: false,
    // debounceMaxWait: 2000, // Maximum time the request can be delayed
  }
);
</script>

```

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

### Debounce Example with Input

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/zh/hooks/useRequest/debounce.md

This example demonstrates how to use debounce with an input field. Rapid typing in the input will trigger `run` multiple times, but due to the debounce setting (1000ms), the request will only execute 1000ms after the last input event.

```vue
<template>
  <input v-model="value" @input="run(value)" />
</template>

<script setup>
import { useRequest } from 'vue-hooks-plus';

const { run } = useRequest(() => {
  // request logic
  return Promise.resolve(1);
}, {
  debounceWait: 1000,
});

const value = ref('');
</script>
```

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

### Default Request Example

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/packages/hooks/src/useRequest/docs/basic/index.zh-CN.md

Demonstrates the default behavior of `useRequest` where the service function is automatically executed upon component initialization.

```vue
<demo src="./demo/demo.vue"
  language="vue"
  title="" 
  desc="默认发送获取请求"> </demo>
```

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

### SWR Cache Example

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/en/hooks/useRequest/cache.md

Demonstrates setting a `cacheKey` to enable caching. When the component reloads, cached data is returned first, followed by a background request. Experience this by clicking the button.

```vue
<template>
  <button @click="() => run()">
    run
  </button>
  <p>{{ data }}</p>
</template>

<script lang="ts" setup>
import { useRequest } from 'vue-hooks-plus';

const { data, loading, run } = useRequest('/api/user/profile', {
  cacheKey: 'user-profile',
});
</script>
```

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

### Basic useDrop and useDrag Usage

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/en/hooks/useDrop-useDrag.md

Demonstrates a basic setup for accepting files, URLs, text, or other dropped content within a designated drop area.

```vue
<template>
  <div class="drop-area" v-drop>
    {{ text }}
  </div>
</template>

<script lang="ts" setup>
import { useDrop, useDrag } from "vue-hooks-plus";
import { ref } from "vue";

const text = ref("Drop something here");

useDrop({
  onText: (val: string) => {
    text.value = val;
  },
  onFiles: (val: File[]) => {
    text.value = val.map((f) => f.name).join(", ");
  },
  onUrl: (val: string) => {
    text.value = val;
  },
  onDom: (val: any) => {
    text.value = JSON.stringify(val);
  },
});

useDrag(ref(null), {
  onDragEnd: () => {
    console.log("drag end");
  },
});
</script>

<style>
.drop-area {
  height: 200px;
  width: 200px;
  border: 2px dashed #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
```

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

### Custom Async Cache Example

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/en/hooks/useRequest/cache.md

Demonstrates using asynchronous cache mechanisms like `localforage` or `IndexDB` by implementing custom `setCache` and `getCache` functions that handle asynchronous operations.

```vue
<template>
  <button @click="() => run()">
    run
  </button>
  <p>{{ data }}</p>
</template>

<script lang="ts" setup>
import { useRequest } from 'vue-hooks-plus';
import localforage from 'localforage';

interface CachedData<TData, TParams> {
  data: TData;
  params: TParams;
  time: number;
}

const local = localforage.createInstance({
  name: 'vue-hooks-plus',
});

const { data, loading, run } = useRequest('/api/user/profile', {
  cacheKey: 'user-profile',
  // Use async cache
  async setCache(data: CachedData<any, any>) {
    await local.setItem('user-profile', data);
  },
  async getCache(params: any) {
    return await local.getItem('user-profile');
  },
});
</script>
```

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

### Vue Infinite Scroll Demo

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/zh/hooks/useInfiniteScroll.md

A basic Vue component demonstrating the useInfiniteScroll hook. This example likely showcases the initial setup and data fetching.

```vue
<template>
  <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loadingMore || noMore">
    <div v-for="item in data?.list" :key="item.id">
      {{ item.title }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { useInfiniteScroll } from 'vue-hooks-plus';

const service = async (data) => {
  // Replace with your actual API call
  const response = await fetch('/api/items', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  });
  return await response.json();
};

const { data, loadingMore, loadMore, noMore } = useInfiniteScroll(service, {
  // Optional: configure target, isNoMore, etc.
});
</script>

<style scoped>
.scrollable-container {
  height: 400px;
  overflow-y: auto;
}
</style>
```

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

### Build Documentation Site

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/CLAUDE.md

Performs a full build of all packages and then builds the VitePress documentation site.

```bash
pnpm docs:build
```

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

### Build Project with pnpm

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/CONTRIBUTING.md

Run this command in the root folder to build the project.

```bash
pnpm run build
```

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

### Feature PR Title Example

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/CONTRIBUTING.md

Example of a pull request title for adding a new feature.

```git
feat: xxxxx
```

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

### Basic useHover Demo

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/en/hooks/useHover.md

Demonstrates the basic usage of the useHover hook with a ref to monitor hover state.

```vue
<template>
  <div ref="hoverTarget">Hover over me</div>
</template>

<script setup>
import { useHover } from "@vue-hooks-plus/usehover";
import { ref } from "vue";

const hoverTarget = ref(null);
const isHovering = useHover(hoverTarget, {
  onEnter: () => {
    console.log("Mouse entered!");
  },
  onLeave: () => {
    console.log("Mouse left!");
  },
  onChange: (hovering) => {
    console.log("Hover state changed: ", hovering);
  },
});
</script>
```

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

### Install Auto Import Resolver

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/en/guide/getting-started.md

Install the necessary package for integrating with unplugin-auto-import. This allows for automatic imports of hooks.

```bash
npm i -D @vue-hooks-plus/resolvers
```

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

### Build All Packages

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/CLAUDE.md

Performs a bootstrap process, regenerating meta-data.json, and then builds all packages within the monorepo.

```bash
pnpm build
```

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

### Fix Bug PR Title Example

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/CONTRIBUTING.md

Example of a pull request title for fixing a bug, including the issue ID.

```git
fix: update entities encoding/decoding (fix #3899)
```

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

### useWebSocket Basic Usage

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/en/hooks/useWebSocket.md

Demonstrates the basic usage of the useWebSocket hook. Ensure the demo.vue file is correctly configured.

```vue
<template>
  <div>
    <p>Latest Message: {{ latestMessage }}</p>
    <button @click="sendMessage('Hello WebSocket!')">Send Message</button>
    <button @click="disconnect">Disconnect</button>
    <button @click="connect">Connect</button>
    <p>Ready State: {{ readyState }}</p>
  </div>
</template>

<script lang="ts" setup>
import { useWebSocket } from '@vue-hooks-plus/use-websocket';

const { latestMessage, sendMessage, disconnect, connect, readyState } = useWebSocket('wss://your-websocket-url.com');
</script>
```

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

### Basic Usage of useDrop and useDrag

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/zh/hooks/useDrop-useDrag.md

Demonstrates how to use useDrop and useDrag together. The drop zone accepts files, links, text, and content from the box element.

```vue
<template>
  <div class="container">
    <div class="drop-zone" v-drop>
      拖拽区域
    </div>
    <div class="box" v-drag="'box content'">
      可拖拽的盒子
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  useDrop,
  useDrag,
  DropOptions,
  DragOptions,
} from 'vue-hooks-plus';

const vDrop = useDrop({
  onText: (text) => {
    console.log('onText:', text);
  },
  onFiles: (files) => {
    console.log('onFiles:', files);
  },
  onUrl: (url) => {
    console.log('onUrl:', url);
  },
  onDom: (content) => {
    console.log('onDom:', content);
  },
  onDrop: (e) => {
    console.log('onDrop:', e);
  },
  onPaste: (e) => {
    console.log('onPaste:', e);
  },
  onDragEnter: (e) => {
    console.log('onDragEnter:', e);
  },
  onDragOver: (e) => {
    console.log('onDragOver:', e);
  },
  onDragLeave: (e) => {
    console.log('onDragLeave:', e);
  },
});

const vDrag = useDrag({
  onDragStart: (e) => {
    console.log('onDragStart:', e);
  },
  onDragEnd: (e) => {
    console.log('onDragEnd:', e);
  },
});
</script>

<style>
.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 200px;
}

.drop-zone {
  width: 200px;
  height: 100px;
  border: 2px dashed #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

```

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

### Debounce Input Example

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/packages/hooks/src/useRequest/docs/debounce/index.zh-CN.md

This example demonstrates how to use debounce with an input field. Frequent typing in the input triggers the `run` function, but due to the debounce setting, the request is only executed 1000ms after the last input event.

```vue
<template>
  <input v-model="value" @input="run(value)" />
</template>

<script lang="ts" setup>
import { useRequest } from 'vue-hooks-plus';

const { run } = useRequest(
  async (val) => {
    // Simulate API request
    console.log('请求参数：', val);
    await new Promise((resolve) => setTimeout(resolve, 1000));
    return val;
  },
  {
    debounceWait: 1000,
  },
);

const value = ref('');
</script>
```

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

### Bash Script for Project Structure

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/zh/hooks/useRequest/guide.md

Illustrates a recommended directory structure for a Vue.js project, organizing network, views, services, and type definitions.

```bash
.
├── src
│   ├── network
│   │    ├── axios.ts
│   ├── views
│   │    ├── home
│   │    │    ├── Home.vue
│   │    │    ├── Home.less
│   │    │    ├── services.ts  // 模块 API
│   │    │    └── data.d.ts    // 模块 TS 类型
│   ├── services   // 推荐目录
│   │   └── api.ts // 全局公共的 API
└── typings.d.ts   // 全局公共的 TS 类型声明

```

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

### Parameter Caching Example

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/zh/hooks/useRequest/cache.md

Utilize cached params to initialize the keyword from the previous request's conditions.

```vue
<template>
  <input v-model="keyword" />
  <div v-if="loading">loading...</div>
  <div v-else>{{ data }}</div>
</template>

<script lang="ts" setup>
import { useRequest } from 'vue-hooks-plus';
import { ref } from 'vue';

const keyword = ref('');

const { data, loading } = useRequest(
  (k) => fetch(`/api/search?keyword=${k}`).then((res) => res.json()),
  {
    cacheKey: 'search-results',
    // Initialize keyword from cache if available
    initialData: ()=>({
        data: undefined,
        params: [localStorage.getItem('lastKeyword')] // Example: retrieve last keyword from localStorage
    })
  }
);

// Update keyword and potentially trigger a new request
watch(keyword, (newKeyword) => {
  localStorage.setItem('lastKeyword', newKeyword); // Example: save current keyword to localStorage
  // The useRequest hook will automatically re-fetch if params change and cacheKey is set
});
</script>
```

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

### Basic Usage of useVirtualList

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/zh/hooks/useVirtualList.md

Use this snippet to render a large list with default settings. Ensure your data is provided as a Ref.

```vue
<template>
  <div ref="wrapperRef">
    <div v-for="(item, index) in list" :key="index" :style="{ height: `${itemHeight}px` }">
      {{ item.data }}
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useVirtualList } from 'vue-hooks-plus';

const list = ref(Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`));
const itemHeight = ref(50);

const { list: virtualList, ref: wrapperRef, onScroll } = useVirtualList(list, {
  itemHeight: itemHeight.value,
});
</script>

```

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

### Basic Usage of useAsyncOrder

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/en/hooks/useAsyncOrder.md

Demonstrates the basic usage of the useAsyncOrder hook. The first data appears after 3000ms, and the second data appears after 2000ms.

```vue
<template>
  <div>
    <p>Data 1: {{ data1 }}</p>
    <p>Data 2: {{ data2 }}</p>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useAsyncOrder } from 'vue-hooks-plus';

const data1 = ref<string | null>(null);
const data2 = ref<string | null>(null);

useAsyncOrder({
  task: [
    async (resolve) => {
      setTimeout(() => {
        data1.value = 'First data';
        resolve();
      }, 3000);
    },
    async (resolve) => {
      setTimeout(() => {
        data2.value = 'Second data';
        resolve();
      }, 2000);
    },
  ],
});
</script>

```

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

### useTimeout Basic Usage

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/zh/hooks/useTimeout.md

This example demonstrates the basic usage of the useTimeout hook. The function will execute after a 2000ms delay.

```vue
<template>
  <div>
    <p>Message will appear after 2 seconds.</p>
  </div>
</template>

<script setup lang="ts">
import { useTimeout } from 'vue-hooks-plus';

const showMessage = () => {
  console.log('Message displayed!');
};

useTimeout(showMessage, 2000);
</script>
```

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

### Basic Usage of useFetchs

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/en/hooks/useFetchs.md

Demonstrates the basic usage of the useFetchs hook for managing multiple requests simultaneously. Ensure the service function and options are correctly defined.

```vue
<template>
  <p>Request status: {{ status }}</p>
  <p>Data: {{ data }}</p>
  <button @click="fetchRun">Fetch</button>
</template>

<script lang="ts" setup>
import { useFetchs } from 'vue-hooks-plus';

interface User {
  name: string;
}

interface Result {
  list: User[];
}

const service = (params: { page: number }) => {
  return fetch('/api/users', {
    params,
  }).then(res => res.json());
};

const { fetchRun, data, status } = useFetchs<Result, { page: number }>(service, {
  // If you want to pass params to the service, you can use the following
  // onSuccess(data, params) {
  //   console.log(data, params);
  // },
  // fetchKey: params => params.page,
});
</script>
```

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

### Configure AutoImport for Vite

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/README.md

Set up `unplugin-auto-import` with `VueHooksPlusResolver` for Vite to automatically import hooks. This requires installing `unplugin-auto-import` and `@vue-hooks-plus/resolvers`.

```typescript
import AutoImport from 'unplugin-auto-import/vite'
import { VueHooksPlusResolver } from '@vue-hooks-plus/resolvers'

export const AutoImportDeps = () =>
  AutoImport({
    imports: ['vue', 'vue-router'],
    include: [/\[tj]sx?$/, /\.vue$/, /\.vue\?vue/, /\.md$/],
    dts: 'src/auto-imports.d.ts',
    resolvers: [VueHooksPlusResolver()],
  })
```

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

### Basic Usage of useWebSocket

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/zh/hooks/useWebSocket.md

Demonstrates the fundamental usage of the useWebSocket hook. This snippet shows how to establish a WebSocket connection and utilize its basic functionalities.

```vue
<template>
  <div>
    <p>Ready state: {{ readyState }}</p>
    <p>Latest message: {{ latestMessage }}</p>
    <button @click="sendMessage('Hello WebSocket!')">Send Message</button>
    <button @click="disconnect">Disconnect</button>
    <button @click="connect">Connect</button>
  </div>
</template>

<script setup lang="ts">
import { useWebSocket } from '@vue-hooks-plus/use-websocket';

const { sendMessage, latestMessage, readyState, disconnect, connect } = useWebSocket('wss://websocket.example.com');
</script>
```

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

### SWR Cache Example

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/zh/hooks/useRequest/cache.md

When cacheKey is set, the component initially displays cached content on re-render and then re-fetches the data in the background.

```vue
<template>
  <div v-if="loading">loading...</div>
  <div v-else>{{ data }}</div>
</template>

<script lang="ts" setup>
import { useRequest } from 'vue-hooks-plus';

const { data, loading } = useRequest('/api/user', {
  cacheKey: 'user-data',
});
</script>
```

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

### useSet Basic Usage

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/zh/hooks/useSet.md

Demonstrates the basic usage of the useSet hook for managing a Set state.

```vue
<template>
  <div class="basic">
    <p>count: {{ count }}</p>
    <p>
      <button @click="increment">increment</button>
      <button @click="decrement">decrement</button>
    </p>
  </div>
</template>

<script lang="ts" setup>
import { useSet } from '@vue-hooks-plus/use';

const [count, { increment, decrement }] = useSet(0);
</script>
```

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

### Basic Usage of useKeyPress

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/en/hooks/useKeyPress.md

Demonstrates the basic functionality of the useKeyPress hook. Use this to listen for simple key presses or aliases.

```vue
<template>
  <div>
    <p>Press ArrowUp or ArrowDown</p>
  </div>
</template>

<script setup lang="ts">
import { useKeyPress } from 'vue-hooks-plus'

useKeyPress('ArrowUp', () => {
  console.log('ArrowUp pressed')
})

useKeyPress('ArrowDown', () => {
  console.log('ArrowDown pressed')
})
</script>
```

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

### Use useNetwork Hook

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/zh/hooks/useNetwork.md

Returns network status information. No specific setup or imports are required beyond using the hook.

```vue
<template>
  <div>
    <p>Online: {{ networkState.online }}</p>
    <p>RTT: {{ networkState.rtt }}</p>
    <p>Type: {{ networkState.type }}</p>
  </div>
</template>

<script setup lang="ts">
import { useNetwork } from '@vueuse/core'

const networkState = useNetwork()
</script>
```

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

### Run Tests with pnpm

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/CONTRIBUTING.md

Execute this command in the root folder to run all tests for the project.

```bash
pnpm test
```

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

### Vue - Default Mouse Tracking

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/en/hooks/useMouse.md

Use this snippet to track the cursor's position on the screen. No additional setup is required.

```vue
<template>
  <div>Mouse position: X {{ mouse.screenX }}, Y {{ mouse.screenY }}</div>
</template>

<script setup>
import { useMouse } from '@vue-hooks-plus/core/lib/useMouse';

const mouse = useMouse();
</script>
```

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

### Configure AutoImport for Webpack

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/README.md

Configure `unplugin-auto-import` for Webpack to automatically import hooks, using `VueHooksPlusResolver`. Ensure `unplugin-auto-import` and `@vue-hooks-plus/resolvers` are installed.

```javascript
const { VueHooksPlusResolver } = require('@vue-hooks-plus/resolvers')
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-auto-import/webpack')({
      imports: ['vue', 'vue-router'],
      include: [/\[tj]sx?$/, /\.vue$/, /\.vue\?vue/, /\.md$/],
      dts: 'src/auto-imports.d.ts',
      resolvers: [VueHooksPlusResolver()],
    }),
  ],
}
```

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

### Basic useScroll Usage

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/zh/hooks/useScroll.md

Use this snippet to listen to the scroll position of an element. No specific setup is required beyond importing the hook.

```vue
<script setup>
import { useScroll } from '@vueuse/core'

const el = ref<HTMLElement>()

// target is the element to observe
const { arrived: arrivedEnd, directions } = useScroll(el)
</script>

<template>
  <div ref="el" style="height: 200px; overflow: auto;">
    <div style="height: 500px;">
      <p>Scroll down</p>
      <p v-if="arrivedEnd">End</p>
    </div>
  </div>
  <p>Directions: {{ directions }}</p>
</template>
```

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

### useFetchs Basic Usage

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/zh/hooks/useFetchs.md

Demonstrates the basic usage of useFetchs for managing the state of multiple concurrent requests.

```vue
<template>
  <div v-if="loading">Loading...</div>
  <div v-else-if="error">Error: {{ error.message }}</div>
  <div v-else>
    <div v-for="item in data" :key="item.id">
      {{ item.title }}
    </div>
  </div>
</template>

<script setup>
import { useFetchs } from 'vue-hooks-plus';

const service = (params) => {
  return fetch('/api/users', {
    params,
  }).then((res) => res.json());
};

const { fetchRun, fetchs } = useFetchs(
  service,
  { fetchKey: (params) => params.id },
  {
    manual: true,
  }
);

// Example of fetching data for multiple users
fetchRun({ id: 1 });
fetchRun({ id: 2 });
fetchRun({ id: 3 });

// fetchs will contain the state of all requests
// console.log(fetchs.value);
</script>

```

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

### Configure Auto Import for useImmer Resolver

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/en/hooks/useImmer.md

Import the VueHooksPlusUseImmerResolver for automatic import configuration. This setup is necessary for the hook to work correctly.

```typescript
import { VueHooksPlusUseImmerResolver } from '@vue-hooks-plus/resolvers'
```

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

### Run and Commit Testing Commands

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/superpowers/plans/2026-06-10-test-completion.md

Execute the specified command to run tests for multiple hooks and then add the relevant test files to the staging area before committing the changes with a descriptive message.

```bash
pnpm vitest run packages/hooks/src/useFullscreen packages/hooks/src/useDrop packages/hooks/src/useDrag packages/hooks/src/useMouse
```

```bash
git add packages/hooks/src/useFullscreen/__tests__ packages/hooks/src/useDrop/__tests__ packages/hooks/src/useDrag/__tests__ packages/hooks/src/useMouse/__tests__
```

```bash
git commit -m "test: deepen useFullscreen, useDrop, useDrag and useMouse specs"
```

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

### Basic Usage of useTrackedEffect

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/zh/hooks/useTrackedEffect.md

This example demonstrates the basic usage of the useTrackedEffect hook. Check the console for the printed results to observe dependency changes.

```vue
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useTrackedEffect } from 'vue-hooks-plus';

const count = ref(0);

useTrackedEffect(
  (changes, previousDeps, currentDeps) => {
    console.log('Changes:', changes);
    console.log('Previous Deps:', previousDeps);
    console.log('Current Deps:', currentDeps);

    // Optional: return a cleanup function
    return () => {
      console.log('Cleanup effect');
    };
  },
  [count.value] // Dependencies array
);

const increment = () => {
  count.value++;
};
</script>

```

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

### Basic useMedia Hook Usage

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/en/hooks/useMedia.md

Demonstrates basic usage of the useMedia hook with a minimum width query. Ensure the queries and values arrays align.

```javascript
const value = useMedia(['(min-width: 320px)'], [true], false)
```

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

### Monitor Full Page Scrolling

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/zh/hooks/useScroll.md

This example demonstrates how to monitor the scrolling of the entire page. Simply pass `document` as the target to the `useScroll` hook.

```vue
<script setup>
import { useScroll } from '@vueuse/core'

// target is the document
const { arrived: arrivedEnd, directions } = useScroll(document)
</script>

<template>
  <div style="height: 200vh;">
    <p>Scroll down</p>
    <p v-if="arrivedEnd">End</p>
  </div>
  <p>Directions: {{ directions }}</p>
</template>
```

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

### Basic Usage of useKeyPress

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/zh/hooks/useKeyPress.md

Demonstrates the fundamental use of the useKeyPress hook. It supports listening for individual keys using their key codes or defined aliases. Press ArrowUp or ArrowDown to see it in action.

```vue
<template>
  <div>
    <p>Press ArrowUp or ArrowDown</p>
  </div>
</template>

<script lang="ts" setup>
import { useKeyPress } from 'vue-hooks-plus';

useKeyPress('ArrowUp', () => {
  console.log('Arrow Up pressed!');
});

useKeyPress('ArrowDown', () => {
  console.log('Arrow Down pressed!');
});
</script>
```

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

### Basic Mouse Tracking with useMouse

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/zh/hooks/useMouse.md

Demonstrates the fundamental usage of the useMouse hook to track the mouse's position on the screen. No additional setup is required beyond importing and calling the hook.

```vue
<template>
  <div>
    <p>Mouse position: {{ x }} {{ y }}</p>
  </div>
</template>

<script setup lang="ts">
import { useMouse } from '@vue-hooks-plus/core/useMouse';

const { x, y } = useMouse();
</script>
```

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

### Basic useCookieState Usage

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/zh/hooks/useCookieState.md

This example demonstrates the fundamental usage of useCookieState. After refreshing the page, the input field's content will be restored from the cookie.

```vue
<template>
  <input v-model="value" />
</template>

<script setup lang="ts">
import { useCookieState } from '@vue-hooks-plus/usecookie-state';

const value = useCookieState('my-key');
</script>
```

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

### Uncontrolled Mode Example

Source: https://github.com/inhiblabcore/vue-hooks-plus/blob/master/docs/en/hooks/useControlledState.md

Illustrates the uncontrolled mode of useControlledState. When no reactive value is passed as the first argument, the hook manages its own internal state.

```vue
<template>
  <input :value="state" @input="setState($event.target.value)" />
</template>

<script setup>
import { useControlledState } from 'vue-hooks-plus'

const [state, setState] = useControlledState(undefined, 'Default Value')
</script>
```