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.

Please note that Vue 3.0 has not been released yet, therefore the installation and setup of @vue/composition-api is required for this library to work.

Install

npm install @vue/composition-api vue-use-kit

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.
- useIntersection — tracks intersection of target element with an ancestor element.
- useMedia — tracks state of a CSS media query.
- useMouse — tracks the mouse position.
- useMouseElement — tracks the mouse position relative to given element.
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.
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