[Vue.js] VueUseを使ってみる。

Vue.jsには、VueUseという便利なライブラリがあると知り、ちょっと使ってみました。

useMouse()関数を使うと、マウスの座標を簡単に取れます。

<script setup>
import { useMouse } from "@vueuse/core";

const { x, y } = useMouse();
</script>

<template>
  <div>
    <p>マウスの座標は、x: {{ x }}, y: {{ y }}です。</p>
  </div>
</template>

コードペンで書くと？？

これをコードペンで書こうとしましたが、
Vue.jsや、VueUseのCDNをどうやって設定すれば良いのか分からずに、ちょっと困り調べました。

Vue.jsについては、以下の記事を参考にすれば良くて、

上部メニューにあるSettingsをクリック => JSを選択 => Add External Scripts/Pens に、追加したいURLを入れる。

上部メニューのSettingsクリック

Add External Scripts/Pens に、追加したいURLを入れる。

このURLを入れた。
https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.17/vue.global.js

VueUse は

Vue.jsは上の記事を参考にできたけど、
VueUseは、どのCDN入れればいいのかわからん...と、調べてて行きついた。

この記事では、vueuseのCDNに以下を使っているよう。

https://unpkg.com/@vueuse/core@vue3

これを使うと、動かすことができた。

（ここ、末尾が、@vue3になってないとダメで、@vue3を削除して単に、https://unpkg.com/@vueuse/coreとすると動かなかった。）

コードペンで書いた

こんな感じになる。

See the Pen VueUse Demo - Vue3 by sasuke (@vhmbdiog-the-flexboxer) on CodePen.

html

<div id="app" v-cloak>
  <p>x: {{ x }}</p>
  <p>y: {{ y }}</p>
</div>

css

[v-cloak] {
  display: none;
}

js

const { createApp } = Vue;
const { useMouse } = VueUse;

const app = createApp({
  setup() {
    const { x, y } = useMouse();
    return { x, y };
  },
});
app.mount('#app');