🛠️ Vue kit of useful Vue Composition API functions.
npm install vue-use-kitSince 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-apiimport Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)<template>
<div>isDesktop: {{ isDesktop ? 'Yes' : 'No' }}</div>
</template>
<script lang="ts">
import Vue from 'vue'
import { useMedia } from 'vue-use-kit'
export default Vue.extend({
name: 'UseMedia',
setup() {
const query = '(min-width: 1024px)'
const isDesktop = useMedia(query)
return { isDesktop }
}
})
</script>- 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.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— tracksWindowscroll position.
- Animations
useInterval— updatescountervalue repeatedly on a fixed time delay.useIntervalFn— calls function repeatedly on a fixed time delay.useRaf— returnselapsedTimewith requestAnimationFrame.useRafFn— calls function with requestAnimationFrame.useTimeout— returnsisReadytrue 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.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.
