Vue.js | Supermouse.js

PACKAGE@supermousejs/vue

DEPENDENCYvue >= 3.2.0

LICENSEMIT

The Vue adapter wraps @supermousejs/core in Vue's provide/inject system. It handles engine lifecycle (mount/unmount) automatically so you don't manage destroy calls manually.

01 Installation

Terminal

pnpm add @supermousejs/vue @supermousejs/core @supermousejs/dot

02 Root Provider

Call provideSupermouse once in your root component (App.vue or a layout). It accepts the same options as the Supermouse constructor plus a plugins array.

src/App.vue

<script setup>
import { provideSupermouse } from '@supermousejs/vue';
import { Dot } from '@supermousejs/dot';

// Call once at the root component. Mirrors the Supermouse constructor options.
provideSupermouse({
  smoothness: 0.15,
  hideCursor: true,
}, [
  Dot({ size: 8, color: 'black' })
]);
</script>

<template>
  <router-view />
</template>

03 Usage in Components

Use useSupermouse() in any child component to access the running instance. The return value is a reactive Ref<Supermouse | null> — always guard with mouse.value before accessing state or calling methods.

src/components/MyButton.vue

<script setup>
import { useSupermouse } from '@supermousejs/vue';

// Returns Ref<Supermouse | null> — null until the engine is mounted.
const mouse = useSupermouse();

const snap = () => {
  if (mouse.value) {
    // Direct write to state.target — picked up next frame
    mouse.value.state.target.y += 100;
  }
};
</script>

Using with Nuxt?

Wrap provideSupermouse in a <ClientOnly> component or guard it with process.client. The engine accesses window on initialization and will throw during SSR.