Registry / web-framework / vue-composable

vue-composable

library1.0.0-beta.24jsnpmunverified

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.

web-framework

npm install vue-composable

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-COMPOSABLE

vue-composable

web-frameworkjavascriptv1.0.0-beta.24

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

useMouseMove

✓ import { useMouseMove } from 'vue-composable'

✗ const { useMouseMove } = require('vue-composable')

ESM only; CommonJS require() is not supported by vue-composable. This is a named export from the package main entry.

useNow

✓ import { useNow } from 'vue-composable'

✗ 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

✓ import { useFormat } from 'vue-composable'

✗ import { format } 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.

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 }; } };

Debug

Known issues

breakingIn 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'.

affects: >=1.0.0-beta.22

breakingIn 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'`.

affects: >=1.0.0-beta.15

breakingVue 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.

affects: all

deprecatedSince 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.

affects: >=1.0.0-beta.10

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.

affects: all

Errors

Common errors & fixes

Cannot read property 'ref' of undefined

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.

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

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

fix

Import 'useFormat' instead of 'format'.

Default import is not a function

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'`.

TypeError: Cannot read property 'setup' of undefined

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

fix

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

Upgrade

Version history

1.0.0-beta.24latest on npm

Audit

Dependencies

vuerequiredPeer dependency: Vue 3 or Vue 2 with @vue/composition-api is required for reactivity and lifecycle hooks.

@vue/composition-apioptionalRequired for Vue 2 support; not needed for Vue 3 projects.

Agent activity

17 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/pikax/vue-composable ↗

packagehttps://www.npmjs.com/package/vue-composable ↗

homepagehttps://pikax.me/vue-composable/composable ↗