Vue use kit

NPM Version NPM Downloads Build Status GitHub license Demo

🛠️ Vue kit of useful Vue Composition API functions.

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

import 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. Demo
  • useHover — tracks mouse hover state of a given element. Demo
  • useIdle — tracks whether user is being inactive. Demo
  • useIntersection — tracks intersection of target element with an ancestor element. Demo Demo
  • useKey — executes a handler when a keyboard key is pressed. Demo
  • useLocation — tracks bar navigation location state. Demo
  • useMedia — tracks state of a CSS media query. Demo Demo
  • useMediaDevices — tracks connected hardware devices. Demo
  • useMouse — tracks the mouse position. Demo Demo
  • useMouseElement — tracks the mouse position relative to given element. Demo
  • useMouseLeavePage — tracks when mouse leaves page boundaries. Demo
  • useOrientation — tracks state of device's screen orientation. Demo
  • useSize — tracks size of an HTML element. Demo
  • useScroll — tracks an HTML element's scroll position. Demo
  • useScrollbarWidth — gets current browser's scrollbar width. Demo
  • useSearchParams — tracks browser's location search params. Demo
  • useWindowSize — tracks Window scroll position. Demo
• Animations
  • useInterval — updates counter value repeatedly on a fixed time delay. Demo
  • useIntervalFn — calls function repeatedly on a fixed time delay. Demo
  • useRaf — returns elapsedTime with requestAnimationFrame. Demo
  • useRafFn — calls function with requestAnimationFrame. Demo Demo
  • useTimeout — returns isReady true when timer is completed. Demo
  • useTimeoutFn — calls function when timer is completed. Demo
• Side Effects
  • useBeforeUnload — shows browser alert when user try to reload or close the page. Demo
  • useCookie — provides way to read, update and delete a cookie. Demo
  • useFetch — provides a way to fetch resources asynchronously across the network. Demo
  • useLocalStorage — provides way to read, update and delete a localStorage key. Demo
  • useSessionStorage — provides way to read, update and delete a sessionStorage key. Demo
• UI
  • useClickAway — triggers callback when user clicks outside target area. Demo
  • useFullscreen — display an element in full-screen mode Demo
• Utils
  • getQuery — get a CSS media query string. Demo

Some Vue composition API functions have not been included in this library but can be created easily by following the steps below.

// @src/mystore.ts
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
 state: { searchTerm: '' },
 mutations: {
 SET_SEARCH(state, newVal) {
 state.searchTerm = newVal
 }
 },
 getters: { searchTerm: state => state.searchTerm },
 actions: {},
 modules: {}
})
export default store

// @src/useStore.ts
import { getCurrentInstance } from '@vue/composition-api'
export function useStore() {
 const vm = getCurrentInstance()
 if (!vm) throw new Error('Vue instance not found!')
 return vm.$store
}

// MyComponent.vue
<template>
 <input type="text" v-model="searchTerm" placeholder="🔎 Search..." />
</template>
<script lang="ts">
 import Vue from 'vue'
 import { ref, watch } from '@src/api'
 import { useStore } from '@src/useStore'
 export default Vue.extend({
 name: 'UseStoreDemo',
 setup() {
 const { commit, getters } = useStore()
 const searchTerm = ref(getters['searchTerm'])
 watch(searchTerm, newVal => commit('SET_SEARCH', newVal))
 return { searchTerm }
 }
 })
</script>

// @src/useRouter.ts
import { getCurrentInstance } from '@vue/composition-api'
export function useRouter() {
 const vm = getCurrentInstance()
 if (!vm) throw new Error('Vue instance not found!')
 const route = vm.$route
 const router = vm.$router
 return { route, router }
}

// MyComponent.vue
<template>
 <div>
 Current id: {{ id }}
 </div>
</template>
<script lang="ts">
 import Vue from 'vue'
 import { useRouter } from '@src/useRouter'
 export default Vue.extend({
 name: 'UseRouterDemo',
 setup() {
 const { route } = useRouter()
 return { id: route.params.id }
 }
 })
</script>

• react-use 👍
• vue-hooks
• vue-use-web

• Vue
• @vue/composition-api
• @vue/test-utils
• Jest