VueUseGet Started 开始
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.
Vueuse 是一组基于 Vue 组合式 API 的实用函数合集。继续阅读之前我们假设你已经熟悉了 Vue 组合式 API 的基本概念。
Installation 安装
🎩 From v4.0, it works for Vue 2 & 3 within a single package by the power of vue-demi! 🎩 从 4.0 版本开始，借助于 vue-demi 的能力，可以在一个包里同时支持 Vue 2 & 3
npm i @vueuse/core
npm i @vueuse/core
From v6.0, VueUse requires
vue>= v3.2 or@vue/composition-api>= v1.1从 6.0 版本开始， Vueuse 需要
vue>= v3.2 或@vue/composition-api>= v1.1
Demos
CDN
<script src="https://unpkg.com/@vueuse/shared"></script>
<script src="https://unpkg.com/@vueuse/core"></script>
<script src="https://unpkg.com/@vueuse/shared"></script>
<script src="https://unpkg.com/@vueuse/core"></script>
It will be exposed to global as window.VueUse
将以 window.VueUse 的方式暴露到全局环境
Nuxt
From v7.2.0, we shipped a Nuxt module to enable auto importing for Nuxt 3 and Nuxt Bridge.
从 7.2.0 版本开始，我们发布了一个 Nuxt 模块以便 Nuxt 3 和 Nuxt Bridge 可以自动导入
npm i -D @vueuse/nuxt @vueuse/core
npm i -D @vueuse/nuxt @vueuse/core
Nuxt 3
// nuxt.config.ts
export default {
modules: [
'@vueuse/nuxt',
],
}
// nuxt.config.ts
export default {
modules: [
'@vueuse/nuxt',
],
}
Nuxt 2
// nuxt.config.js
export default {
buildModules: [
'@vueuse/nuxt',
],
}
// nuxt.config.js
export default {
buildModules: [
'@vueuse/nuxt',
],
}
And then use VueUse function anywhere in your Nuxt app. For example:
之后就可以在 Nuxt app 中随意使用 Vueuse 函数了。例如：
<script setup lang="ts">
const { x, y } = useMouse()
</script>
<template>
<div>pos: {{x}}, {{y}}</div>
</template>
<script setup lang="ts">
const { x, y } = useMouse()
</script>
<template>
<div>pos: {{x}}, {{y}}</div>
</template>
Usage Example 使用示例
Simply importing the functions you need from @vueuse/core
只需从 @vueuse/core 中导入所需的函数
import { useLocalStorage, useMouse, usePreferredDark } from '@vueuse/core'
export default {
setup() {
// 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',
},
)
return { x, y, isDark, store }
},
}
import { useLocalStorage, useMouse, usePreferredDark } from '@vueuse/core'
export default {
setup() {
// 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',
},
)
return { x, y, isDark, store }
},
}
Refer to functions list for more details.
参阅 functions list 获取更多细节。