開始使用

透過影片學習 VueUse

VueUse 是一個基於 Composition API 的實用函式庫。我們假設您在繼續之前已經熟悉 Composition API 的基本概念。

安裝

從 v12.0 開始，VueUse 不再支援 Vue 2。請使用 v11.x 版本以支援 Vue 2。

npm i @vueuse/core

附加元件 | Nuxt 模組

示範

• 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 的形式公開。

Nuxt

從 v7.2.0 開始，我們發布了一個 Nuxt 模組，以啟用 Nuxt 3 和 Nuxt Bridge 的自動導入。

使用 nuxi 將 vueuse 模組安裝到您的應用程式中

npx nuxi@latest module add vueuse

或使用 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 函式。例如

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

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

使用範例

只需從 @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>

請參閱函式列表以獲取更多詳細資訊。