はじめに

VueUseはComposition APIに基づいたユーティリティ関数のコレクションです。続ける前に、Composition APIの基本的な考え方に既に精通していることを前提としています。

インストール

v12.0から、VueUseはVue 2をサポートしなくなりました。Vue 2のサポートが必要な場合はv11.xを使用してください。

npm i @vueuse/core

アドオン | Nuxtモジュール

デモ

• Vite + Vue 3
• Nuxt 3 + Vue 3
• Webpack + Vue 3

CDN

</script>

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

window.VueUseとしてグローバルに公開されます。

Nuxt

v7.2.0から、Nuxt 3およびNuxt Bridgeの自動インポートを有効にするNuxtモジュールを提供しています。

@nuxt/cliを使用してアプリケーションにvueuseモジュールをインストールします：

npx nuxt@latest module add vueuse

またはnpmを使用します：

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

Nuxt 3

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

その後、Nuxtアプリ内のどこでもVueUse関数を使用できます。例えば：

<script setup lang="ts">
// ---cut-start---
// 実際には自動インポートされますが、ここではTwoSlashに伝える必要があります
import { useMouse } from '@vueuse/core'
// ---cut-end---
const { x, y } = useMouse()
</script>

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

使用例

必要な関数を@vueuse/coreから単純にインポートします。

import { useLocalStorage, useMouse, usePreferredDark } from '@vueuse/core'

// マウスの位置を追跡
const { x, y } = useMouse()

// ユーザーがダークテーマを好むかどうか
const isDark = usePreferredDark()

// localStorageに状態を保持
const store = useLocalStorage(
  'my-storage',
  {
    name: 'Apple',
    color: 'red',
  },
)

詳細については関数リストを参照してください。