vue-composable is out-of-box ready to use composition-api generic components.

100% typescript based composable components and full type support out-of-box.

Built for vue-next and composition-api

This library aim is to be one stop shop for many real-world composable functions, with aggressive tree-shaking to keep it light on your end code.

Vue3 aka vue-next is fully supported.

# @vue/composition-api # install with yarn yarn add @vue/composition-api vue-composable # install with npm npm install @vue/composition-api vue-composable # vue 3 # install with yarn yarn add vue-composable # install with npm npm install vue-composable

Check our documentation

• Event - Attach event listener to a DOM element
• Mouse Move - Attach mousemove listener to a DOM element
• Resize - Attach resize listener to a DOM element
• Scroll - Attach scroll listener to a DOM element
• onOutsidePress - Execute callback when click is outside of element

• useNow : Return reactive custom timer with specified refresh rate
• useDateNow : Returns reactive Date.now() with custom refresh rate
• usePerformanceNow : Returns reactive performance.now() with custom refresh rate

• format - Reactive string format
• path - Retrieve object value based on string path

• MatchMedia - reactive MatchMedia
• Breakpoint - reactive breakpoints based on window.innerWidth
• Chrome - reactive chrome breakpoints
• TailwindCSS - reactive TailwindCSS breakpoints

• sharedRef - cross-tab reactive ref
• VModel - helper to wrap model update into a ref [vue3 only]
• injectFactory - same as inject but allows you to have a factory as default value
• interval - self-remove setInterval on unmount
• lockScroll - lock-scroll component

• WebStorage - Reactive access to Storage API, useLocalStorage and useSessionStorage use this
• storage - uses localStorage or on safari private it uses sessionStorage
• localStorage - Reactive access to a localStorage
• sessionStorage - Reactive access to a sessionStorage

• Pagination - Generic reactive pagination controls
• Array Pagination - Array pagination

• Validation - model based validation inspired by vuelidate

• i18n - Simple i18n implementation with API inspired by vue-i18n

• dateTimeFormat - Intl.DateTimeFormat
• numberFormat - Intl.NumberFormat
• currencyFormat - CurrencyFormat with Intl.NumberFormat

• Promise - Promise reactive resolve and reject
• promiseLazy - Sugar for usePromise lazy:true
• Cancellable Promise - Allow to cancel promises
• Retry - Provides functionality to retry promise

• Title - reactive document.title

• Timeline - Tracks variable history
• Undo - Tracks variable history, to allow undo and redo
• valueSync - syncs variables value, across multiple refs

• Fetch - reactive fetch wrapper
• WebSocket - reactive WebSocket wrapper
• IntersectionObserver - reactive IntersectionObserver
• NetworkInformation - reactive NetworkInformation wrapper
• Online - reactive navigator.onLine wrapper
• PageVisibility - reactive Page Visibility API
• Language - reactive NavigatorLanguage
• BroadcastChannel - reactive BroadcastChannel API
• Geolocation API
• CSS variables - reactive CSS variables
• Worker - Web Worker API
• WorkerFunction - Webworker Function, offload a function to webworker
• share - WebShare API

New packages needed

• Axios - @vue-composable/axios reactive axios wrapper client
• makeAxios - @vue-composable/axios wrap your axios instance

This is a monorepo project, please check packages

You can contribute raising issues and by helping out with code.

Tests and Documentation are the most important things for me, because good documentation is really useful!

I really appreciate some tweaks or changes on how the documentation is displayed and how to make it easier to read.

Twitter: @pikax_dev

# install packages yarn # build and test for v2 yarn build --version=2 yarn test:vue2 # build and test for v3 yarn build yarn test

1. Fork it!
2. Create your feature branch: git checkout -b feat/new-composable
3. Commit your changes: git commit -am 'feat(composable): add a new composable'
4. Push to the branch: git push origin feat/new-composable
5. Submit a pull request

MIT