Repository files navigation

Out-of-the-box ready to use composables

• 🌴 TreeShakable
• 🧙‍♂️ Fully Typescript
• 💚 Vue 3 and 2 support
• 🔨 Vue Devtools support

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.

# @vue/composition-api# install with yarnyarn add @vue/composition-api vue-composable# install with npmnpm install @vue/composition-api vue-composable# vue 3# install with yarnyarn add vue-composable# install with npmnpm install vue-composable

Check ourdocumentation

• Event - Attach event listener to a DOM element
• Mouse Move - Attachmousemove listener to a DOM element
• Resize - Attachresize listener to a DOM element
• Scroll - Attachscroll listener to a DOM element
• onOutsidePress - Execute callback when click is outside of element

• Mouse distance from Element - Distance in pixels from an element center

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

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

• MatchMedia - reactiveMatchMedia
• Breakpoint - reactivebreakpoints based onwindow.innerWidth
• Chrome - reactive chrome breakpoints
• TailwindCSS - reactive TailwindCSS breakpoints

• sharedRef - cross-tab reactiveref
• VModel - helper to wrap model update into aref[vue3 only]
• injectFactory - same asinject but allows you to have a factory as default value
• interval - self-removesetInterval on unmount
• lockScroll -lock-scroll component
• refDebounced - debounces the update value of aref

• WebStorage - Reactive access toStorage API,useLocalStorage anduseSessionStorage use this
• storage - useslocalStorage or on safari private it usessessionStorage
• localStorage - Reactive access to alocalStorage
• sessionStorage - Reactive access to asessionStorage

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

• Validation - model based validation inspired byvuelidate

• i18n - Simple i18n implementation with API inspired byvue-i18n

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

• Promise -Promise reactive resolve and reject
• promiseLazy - Sugar forusePromiselazy:true
• Cancellable Promise - Allow to cancel promises
• Retry - Provides functionality to retrypromise

• Title - reactivedocument.title

• Timeline - Tracks variable history
• Undo - Tracks variable history, to allowundo andredo
• valueSync - syncs variables value, across multiplerefs

• Fetch - reactivefetch wrapper
• WebSocket - reactiveWebSocket wrapper
• IntersectionObserver - reactiveIntersectionObserver
• NetworkInformation - reactiveNetworkInformation wrapper
• Online - reactivenavigator.onLine wrapper
• PageVisibility - reactivePage Visibility API
• Language - reactiveNavigatorLanguage
• BroadcastChannel - reactiveBroadcastChannel API
• Geolocation API
• CSS variables - reactiveCSS variables
• Worker -Web Worker API
• WorkerFunction - Webworker Function, offload a function to webworker
• share - WebShare API
• Clipboard - Clipboard API

New packages needed

• Axios -@vue-composable/axios reactiveaxios wrapper client
• makeAxios -@vue-composable/axios wrap youraxios instance
• useCookie -@vue-composable/cookiejs-cookie wrapper

This is a monorepo project, please checkpackages

There's some experimental devtools support starting from1.0.0-beta.6, only available forvue-next anddevtools beta 6.

• devtools beta chrome

To use devtools you need to install the plugin first:

import{createApp}from"vue";import{VueComposableDevtools}from"vue-composable";importAppfrom"./App.vue";constapp=createApp(App);app.use(VueComposableDevtools);// orapp.use(VueComposableDevtools,{id:"vue-composable",label:"devtool composables"});app.mount("#app");

To add properties to the component inspector tabComponentState

constbar="bar";useDevtoolsComponentState({    bar},{type:"custom composable"// change group});constbaz=()=>"baz";useDevtoolsComponentState({ baz});// no duplicates added by defaultuseDevtoolsComponentState({ baz});constthe=42;useDevtoolsComponentState({ the});// to allow multiple same keyuseDevtoolsComponentState({ the},{duplicate:true});// use a devtools api list directlyinterfaceStateBase{key:string;value:any;editable:boolean;objectType?:"ref"|"reactive"|"computed"|"other";raw?:string;type?:string;}useDevtoolsComponentState([{key:"_bar",type:"direct",value:"bar",editable:true},{key:"_baz",type:"direct",value:"baz",editable:false}]);// raw changeuseDevtoolsComponentState((payload,ctx)=>{payload.state.push(    ...[{key:"_bar",type:"raw",value:"bar",editable:true},{key:"_baz",type:"raw",value:"baz",editable:false}]);});

To add timeline events:

constid="vue-composable";constlabel="Test events";constcolor=0x92a2bf;const{ addEvent, pushEvent}=useDevtoolsTimelineLayer(id,description,color);// adds event to a specific point in the timelineaddEvent({time:Date.now(),data:{// data object},meta:{// meta object}});// adds event with `time: Date.now()`pushEvent({data:{// data object},meta:{// meta object}});

Allows to create a new inspector for your data.

I'm still experimenting on how to expose this API on a composable, this will likely to change in the future, suggestions are welcome.

useDevtoolsInspector({id:"vue-composable",label:"test vue-composable"},// list of nodes, this can be reactive[{id:"test",label:"test - vue-composable",depth:0,state:{composable:[{editable:false,key:"count",objectType:"Ref",type:"setup",value:myRefValue}]}}]);

Typescript@3.x is not supported, the supported version can be checked onpackage.json, usually is the latest version or the same major asvue-3

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 packagesyarn# build and test for v2yarn build --version=2yarn test:vue2# build and test for v3yarn buildyarntest

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