vueUseの概要と使い方

vueUseとは

よく使う機能をロジック単位で切り取り、それを関数として簡単に利用できるようにしたライブラリ。

vueUseの長点

• vue2もvue3でもサポート
• compositionAPIの使用が可能
• 安定したコミュニティが存在
• よく使う機能の関数を提供

vueUseの特徴

• 関数の戻り値はrefのオブジェクトである。
• イベントを制御するためのフィルターが提供される関数もある。
  • 制御する際には、関数の引数として前もって定義されたプロパティを操作することでOK

vueUseの使用

方法１：以下のコマンドでvueUseをインストールする。

npm i @vueuse/core

方法２：CDNを利用する。

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

vueUseの主な関数

１) useBreakpoints

メディアクエリのブレークポイントを設定できる。

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

const breakpoints = useBreakpoints({
  sm: 300,
  md: 600,
  lg: 900
})
const sm = breakpoints.smaller('sm')//より小さい
const md = breakpoints.between('sm', 'md')//間
const lg = breakpoints.between('md', 'lg')//間
const xl = breakpoints.greater('lg')//より大きい
</script>

<template>
<div>
    <div> sm: <p v-if="sm" >NOW</p></div>
    <div> md: <p v-if="md" >NOW</p></div>
    <div> lg: <p v-if="lg" >NOW</p></div>
    <div> xl: <p v-if="xl" >NOW</p></div>
  </div>
</template>

上記のようにブラウザのサイズをuseBreakpointsをもってチェックすることができる。
上記のコードを実行すると以下のようになる。

２) useScroll

スクロールに関する様々な情報を取得できる。

<script setup lang="ts">
const el = ref<HTMLElement | null>(null)
const {
  x,  // 横方向のスクロール量
  y, // 縦方向のスクロール量
  isScrolling, // 現在スクロール中か
  arrivedState,  // 左右上下いずれかのページの端にいるか
  directions // スクロールの方向
} = useScroll(el)

//左右上下のそれぞれ端にいるかどうか、boolean
const { left, right, top, bottom } = toRefs(arrivedState)

//スクロールの方向
const { left: toLeft, right: toRight, top: toTop, bottom: toBottom } = toRefs(directions)
</script>

<div>
    <div style="display: flex;"> x: <p style="color: red;">{{ x }}</p></div>
    <div style="display: flex;"> y: <p style="color: red;">{{ y }}</p></div>
    <div style="display: flex;"> isScrolling: <p style="color: red;">{{ isScrolling }}</p></div>
    <div style="display: flex;"> left: <p style="color: red;">{{left}}</p></div>
    <div style="display: flex;"> right: <p style="color: red;">{{right}}</p></div>
    <div style="display: flex;"> top: <p style="color: red;">{{top}}</p></div>
    <div style="display: flex;"> bottom: <p style="color: red;">{{bottom}}</p></div>
  </div>

useScrollを使って、現在のスクロール量 / スクロール中かどうか / ページの一番上(右、下、左)にいるか / スクロールの方向などの情報を取得することができる。
上記のコードを実行すると以下のようになる。

３）useNow

現在時刻を毎秒リアルタイムで取得できる。
controlsオプションを付けることで、時刻の一時停止やキャンセルも可能

<script setup lang="ts">
import { useNow } from '@vueuse/core'
const { now, pause, resume } = useNow({ controls: true })
</script>

<div>
  Now: {{ now }} <!--毎秒更新される-->
</div>
<div>
  <button @click="pause()">Pause</button>
</div>
<div>
  <button @click="resume()">Resume</button>
</div>

上記のコードを実行すると以下のようになる。