JSPM

Package Exports

vue-use-kit

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-use-kit) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🛠️ 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

import Vue from 'vue';
import VueCompositionAPI from '@vue/composition-api';
Vue.use(VueCompositionAPI);

Usage

<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>

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.
- 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.
- useSearchParams — tracks browser's location search params.
Animations
- useInterval — updates counter value repeatedly on a fixed time delay.
- useIntervalFn — calls function repeatedly on a fixed time delay.
- useRaf — returns elapsedTime with requestAnimationFrame.
- useRafFn — calls function with requestAnimationFrame.
- useTimeout — returns isReady 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.
- 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.

vue-use-kit