{"id":18908,"library":"vue-composable","title":"vue-composable","description":"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.","status":"active","version":"1.0.0-beta.24","language":"javascript","source_language":"en","source_url":"https://github.com/pikax/vue-composable","tags":["javascript","vue","composition-api","vue-composable","composable","typescript"],"install":[{"cmd":"npm install vue-composable","lang":"bash","label":"npm"},{"cmd":"yarn add vue-composable","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-composable","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency: Vue 3 or Vue 2 with @vue/composition-api is required for reactivity and lifecycle hooks.","package":"vue","optional":false},{"reason":"Required for Vue 2 support; not needed for Vue 3 projects.","package":"@vue/composition-api","optional":true}],"imports":[{"note":"ESM only; CommonJS require() is not supported by vue-composable. This is a named export from the package main entry.","wrong":"const { useMouseMove } = require('vue-composable')","symbol":"useMouseMove","correct":"import { useMouseMove } from 'vue-composable'"},{"note":"All composables are named exports; there is no default export. useNow returns reactive current time with configurable refresh interval.","wrong":"import useNow from 'vue-composable'","symbol":"useNow","correct":"import { useNow } from 'vue-composable'"},{"note":"Named export. Available since v1.0.0-beta.14. Returns reactive breakpoints based on window.innerWidth. Uses MatchMedia for responsiveness.","wrong":"","symbol":"useBreakpoint","correct":"import { useBreakpoint } from 'vue-composable'"},{"note":"Provides cross-tab reactive ref using BroadcastChannel API (fallback to localStorage). Uses Vue's ref internally, so the result is a standard Ref.","wrong":"","symbol":"sharedRef","correct":"import { sharedRef } from 'vue-composable'"},{"note":"Older versions exported 'format' as a named function; in v1.0.0-beta.22+ it was renamed to 'useFormat'. Check changelog if upgrading.","wrong":"import { format } from 'vue-composable'","symbol":"useFormat","correct":"import { useFormat } from 'vue-composable'"}],"quickstart":{"code":"// Install: npm install vue-composable vue (or @vue/composition-api if using Vue 2)\nimport { ref } from 'vue';\nimport { useMouseMove, useNow } from 'vue-composable';\n\nexport default {\n  setup() {\n    const { x, y } = useMouseMove();\n    const now = useNow({ refreshMs: 1000 });\n    return { x, y, now };\n  }\n};","lang":"typescript","description":"Demonstrates two composables: useMouseMove tracks cursor position, useNow updates every second. Requires vue/composition-api."},"warnings":[{"fix":"Update imports from 'format' to 'useFormat' and from 'path' to 'usePath'.","message":"In v1.0.0-beta.22, 'format' composable renamed to 'useFormat' and 'path' composable renamed to 'usePath'. Old names cause runtime errors.","severity":"breaking","affected_versions":">=1.0.0-beta.22"},{"fix":"Use named imports: `import { useMouseMove } from 'vue-composable'`.","message":"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.","severity":"breaking","affected_versions":">=1.0.0-beta.15"},{"fix":"Install @vue/composition-api and call `Vue.use(VueCompositionAPI)` before using vue-composable.","message":"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'.","severity":"breaking","affected_versions":"all"},{"fix":"Replace `useInterval` with `useTimeout` and set `interval: true` in options.","message":"Since v1.0.0-beta.10, the 'useInterval' composable was marked deprecated in favor of the more general 'useTimeout' with interval option.","severity":"deprecated","affected_versions":">=1.0.0-beta.10"},{"fix":"Check browser compatibility before using sharedRef; consider alternative for SSR or legacy environments.","message":"`sharedRef` uses BroadcastChannel API which is not supported in Node.js or older browsers. Falling back to localStorage leads to limited cross-tab reactivity.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Install @vue/composition-api and call `Vue.use(VueCompositionAPI)` before mounting the app.","cause":"Missing @vue/composition-api registration or using Vue 2 without the plugin.","error":"Cannot read property 'ref' of undefined"},{"fix":"Import 'useFormat' instead of 'format'.","cause":"The composable was renamed to 'useFormat' in v1.0.0-beta.22.","error":"export 'format' was not found in 'vue-composable'"},{"fix":"Use named imports: `import { useNow } from 'vue-composable'`.","cause":"Trying to use default import like `import VueComposable from 'vue-composable'` after v1.0.0-beta.15.","error":"Default import is not a function"},{"fix":"Ensure @vue/composition-api is installed and registered before vue-composable.","cause":"Vue 2 project missing @vue/composition-api plugin or using incorrect version.","error":"TypeError: Cannot read property 'setup' of undefined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}