vue-composable

1.0.0-beta.24 verified Sat Apr 25 auth: no javascript

vue-composable (v1.0.0-beta.24) is a library of out-of-the-box ready-to-use composable functions for Vue 3 and Vue 2 (with @vue/composition-api). It provides tree-shakable, fully typed TypeScript composables for events (mouse move, resize, scroll, outside press), DOM (mouse distance from element), dates (now, dateNow, performanceNow), formatting (string format, object path), breakpoints (MatchMedia, Chrome, TailwindCSS responsive breakpoints), and miscellaneous utilities (sharedRef, vModel helper, injectFactory, interval, lockScroll). Its key differentiators from other composable libraries are aggressive tree-shaking to minimize bundle size, Vue Devtools support, and focus on real-world patterns. First beta released in 2020, with ongoing beta releases and no stable release yet. Requires Vue or @vue/composition-api as peer dependency.

Common errors

error Cannot read property 'ref' of undefined ↓

cause Missing @vue/composition-api registration or using Vue 2 without the plugin.

fix

Install @vue/composition-api and call Vue.use(VueCompositionAPI) before mounting the app.

error export 'format' was not found in 'vue-composable' ↓

cause The composable was renamed to 'useFormat' in v1.0.0-beta.22.

fix

Import 'useFormat' instead of 'format'.

error Default import is not a function ↓

cause Trying to use default import like `import VueComposable from 'vue-composable'` after v1.0.0-beta.15.

fix

Use named imports: import { useNow } from 'vue-composable'.

error TypeError: Cannot read property 'setup' of undefined ↓

cause Vue 2 project missing @vue/composition-api plugin or using incorrect version.

fix

Ensure @vue/composition-api is installed and registered before vue-composable.

Warnings

breaking In v1.0.0-beta.22, 'format' composable renamed to 'useFormat' and 'path' composable renamed to 'usePath'. Old names cause runtime errors. ↓

fix Update imports from 'format' to 'useFormat' and from 'path' to 'usePath'.

breaking In v1.0.0-beta.15, the package changed from default export to named exports only. Code using `import VueComposable from 'vue-composable'` will break. ↓

fix Use named imports: `import { useMouseMove } from 'vue-composable'`.

breaking Vue 2 users must install @vue/composition-api as a peer dependency and register it before vue-composable. Missing this causes 'Cannot read property 'ref' of undefined'. ↓

fix Install @vue/composition-api and call `Vue.use(VueCompositionAPI)` before using vue-composable.

deprecated Since v1.0.0-beta.10, the 'useInterval' composable was marked deprecated in favor of the more general 'useTimeout' with interval option. ↓

fix Replace `useInterval` with `useTimeout` and set `interval: true` in options.

gotcha `sharedRef` uses BroadcastChannel API which is not supported in Node.js or older browsers. Falling back to localStorage leads to limited cross-tab reactivity. ↓

fix Check browser compatibility before using sharedRef; consider alternative for SSR or legacy environments.

Install

npm install vue-composable

yarn add vue-composable

pnpm add vue-composable

Imports

useMouseMove
wrong
```
const { useMouseMove } = require('vue-composable')
```
correct
```
import { useMouseMove } from 'vue-composable'
```
ESM only; CommonJS require() is not supported by vue-composable. This is a named export from the package main entry.
useNow
wrong
```
import useNow from 'vue-composable'
```
correct
```
import { useNow } from 'vue-composable'
```
All composables are named exports; there is no default export. useNow returns reactive current time with configurable refresh interval.
useBreakpoint
```
import { useBreakpoint } from 'vue-composable'
```
Named export. Available since v1.0.0-beta.14. Returns reactive breakpoints based on window.innerWidth. Uses MatchMedia for responsiveness.
sharedRef
```
import { sharedRef } from 'vue-composable'
```
Provides cross-tab reactive ref using BroadcastChannel API (fallback to localStorage). Uses Vue's ref internally, so the result is a standard Ref.
useFormat
wrong
```
import { format } from 'vue-composable'
```
correct
```
import { useFormat } from 'vue-composable'
```
Older versions exported 'format' as a named function; in v1.0.0-beta.22+ it was renamed to 'useFormat'. Check changelog if upgrading.

Quickstart

Demonstrates two composables: useMouseMove tracks cursor position, useNow updates every second. Requires vue/composition-api.

// Install: npm install vue-composable vue (or @vue/composition-api if using Vue 2)
import { ref } from 'vue';
import { useMouseMove, useNow } from 'vue-composable';

export default {
  setup() {
    const { x, y } = useMouseMove();
    const now = useNow({ refreshMs: 1000 });
    return { x, y, now };
  }
};