🛠️ Vue kit of useful Vue Composition API functions.
Install
npm install vue-use-kit
Since Vue 3.0 has not yet been released, you must also install @vue/composition-api library, which will enable the composition API in Vue 2.0.
npm install @vue/composition-api
Setup
Vue
Usage
isDesktop: {{ isDesktop ? 'Yes' : 'No' }}
APIs
- Sensors
useGeolocation
— tracks geolocation state of user's device.useHover
— tracks mouse hover state of a given element.useIdle
— tracks whether user is being inactive.useIntersection
— tracks intersection of target element with an ancestor element.useKey
— executes a handler when a keyboard key is pressed.useLocation
— tracks bar navigation location state.useMedia
— tracks state of a CSS media query.useMediaDevices
— tracks connected hardware devices.useMouse
— tracks the mouse position.useMouseElement
— tracks the mouse position relative to given element.useMouseLeavePage
— tracks when mouse leaves page boundaries.useOrientation
— tracks state of device's screen orientation.useSize
— tracks size of an HTML element.useScroll
— tracks an HTML element's scroll position.useScrollbarWidth
— gets current browser's scrollbar width.useSearchParams
— tracks browser's location search params.useWindowSize
— tracksWindow
scroll position.
- Animations
useInterval
— updatescounter
value repeatedly on a fixed time delay.useIntervalFn
— calls function repeatedly on a fixed time delay.useRaf
— returnselapsedTime
with requestAnimationFrame.useRafFn
— calls function with requestAnimationFrame.useTimeout
— returnsisReady
true when timer is completed.useTimeoutFn
— calls function when timer is completed.
- Side Effects
useBeforeUnload
— shows browser alert when user try to reload or close the page.useCookie
— provides way to read, update and delete a cookie.useFetch
— provides a way to fetch resources asynchronously across the network.useLocalStorage
— provides way to read, update and delete a localStorage key.useSessionStorage
— provides way to read, update and delete a sessionStorage key.
- UI
useClickAway
— triggers callback when user clicks outside target area.useFullscreen
— display an element in full-screen mode
- Utils
getQuery
— get a CSS media query string.
🎁 Other examples of composition API functions
Some Vue composition API functions have not been included in this library but can be created easily by following the steps below.
useStore
Creating a useStore function connected to Vuex store is pretty straightforward. For example, given the following store:
// @src/mystore.ts Vue.useVuex
We can get the store from the vm
and expose it in our useStore function:
// @src/useStore.ts
Now we can use useStore inside the setup() method of our component:
// MyComponent.vue
useRouter
Creating a useRouter function connected to VueRouter is rather simple.
We can get $route
and $router
from the vm
and expose them in our useRouter function:
// @src/useRouter.ts
Now we can use useRouter inside the setup() method of our component:
// MyComponent.vue Current id: {{ id }}