开始使用

¥Get Started

通过视频学习 Vue 使用

VueUse 是基于 组合式 API 的实用函数集合。在继续之前，我们假设你已经熟悉 组合式 API 的基本思想。

¥VueUse is a collection of utility functions based on Composition API. We assume you are already familiar with the basic ideas of Composition API before you continue.

安装

¥Installation

从 v12.0 开始，VueUse 不再支持 Vue 2。请使用 v11.x 来支持 Vue 2。

¥From v12.0, VueUse no longer supports Vue 2. Please use v11.x for Vue 2 support.

npm i @vueuse/core

插件 | Nuxt 模块

¥Add ons | Nuxt Module

演示

¥Demos

• Vite + Vue 3

• Nuxt 3 + Vue 3

• Webpack + Vue 3

CDN

<script src="https://unpkg.com/@vueuse/shared"></script>

<script src="https://unpkg.com/@vueuse/core"></script>

它将作为 window.VueUse 暴露于全局

¥It will be exposed to global as window.VueUse

Nuxt

从 v7.2.0 开始，我们提供了 Nuxt 模块来启用 Nuxt 3 和 Nuxt Bridge 的自动导入。

¥From v7.2.0, we shipped a Nuxt module to enable auto importing for Nuxt 3 and Nuxt Bridge.

使用 nuxi 将 vueuse 模块安装到你的应用中：

¥Install the vueuse module into your application using nuxi:

npx nuxi@latest module add vueuse

或者使用 npm:

¥Or use npm:

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

Nuxt 3

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@vueuse/nuxt',
  ],
})

Nuxt 2

// nuxt.config.js
export default {
  buildModules: [
    '@vueuse/nuxt',
  ],
}

然后在 Nuxt 应用中的任何位置使用 VueUse 函数。例如：

¥And then use VueUse function anywhere in your Nuxt app. For example:

<script setup lang="ts">
const { x, y } = useMouse()
</script>

<template>
  <div>pos: {{ x }}, {{ y }}</div>
</template>

使用示例

¥Usage Example

只需从 @vueuse/core 导入你需要的函数

¥Simply importing the functions you need from @vueuse/core

<script setup>
import { useLocalStorage, useMouse, usePreferredDark } from '@vueuse/core'

// tracks mouse position
const { x, y } = useMouse()

// is user prefers dark theme
const isDark = usePreferredDark()

// persist state in localStorage
const store = useLocalStorage(
  'my-storage',
  {
    name: 'Apple',
    color: 'red',
  },
)
</script>

详细信息请参阅 函数列表。

¥Refer to functions list for more details.