{"id":13435142,"url":"https://github.com/microcipcip/vue-use-kit","last_synced_at":"2025-03-18T02:31:09.187Z","repository":{"id":38174667,"uuid":"239099371","full_name":"microcipcip/vue-use-kit","owner":"microcipcip","description":"🛠️Useful collection of Vue composition API functions https://microcipcip.github.io/vue-use-kit/","archived":false,"fork":false,"pushed_at":"2023-05-07T23:33:09.000Z","size":18522,"stargazers_count":46,"open_issues_count":8,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-27T17:25:43.585Z","etag":null,"topics":["vue","vue-composition-api","vue-function-api","vue-hooks","vue-use","vue-use-hooks"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/microcipcip.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"code-of-conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-02-08T09:19:09.000Z","updated_at":"2024-01-09T16:43:29.000Z","dependencies_parsed_at":"2024-04-06T23:31:01.405Z","dependency_job_id":"974494c6-a6c6-4e61-ab56-04682662ebfe","html_url":"https://github.com/microcipcip/vue-use-kit","commit_stats":{"total_commits":104,"total_committers":1,"mean_commits":104.0,"dds":0.0,"last_synced_commit":"584bc1a3a050fcb82fc8cc3d825c3b8611edbbb0"},"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microcipcip%2Fvue-use-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microcipcip%2Fvue-use-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microcipcip%2Fvue-use-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microcipcip%2Fvue-use-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/microcipcip","download_url":"https://codeload.github.com/microcipcip/vue-use-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244143949,"owners_count":20405304,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["vue","vue-composition-api","vue-function-api","vue-hooks","vue-use","vue-use-hooks"],"created_at":"2024-07-31T03:00:33.083Z","updated_at":"2025-03-18T02:31:08.223Z","avatar_url":"https://github.com/microcipcip.png","language":"TypeScript","funding_links":[],"categories":["Packages","Components \u0026 Libraries","✨ Composition API functions"],"sub_categories":["Composition API"],"readme":"\u003cp align=\"center\"\u003e\r\n  \u003cbr\u003e\r\n  \u003cbr\u003e\r\n  \u003ca href=\"https://github.com/microcipcip/vue-use-kit\"\u003e\r\n    \u003cimg \r\n      src=\"https://raw.githubusercontent.com/microcipcip/vue-use-kit/master/public/branding/logo.png\" \r\n      alt=\"Vue use kit\" \r\n      width=\"200\" \r\n    /\u003e\r\n  \u003c/a\u003e\r\n  \u003cbr\u003e\r\n  \u003cbr\u003e\r\n  \u003cbr\u003e\r\n\u003c/p\u003e\r\n\r\n[![NPM Version](https://img.shields.io/npm/v/vue-use-kit.svg)](https://www.npmjs.com/package/vue-use-kit) [![NPM Downloads](https://img.shields.io/npm/dm/vue-use-kit.svg)](https://www.npmjs.com/package/vue-use-kit) [![Build Status](https://img.shields.io/travis/microcipcip/vue-use-kit/master.svg)](https://travis-ci.org/microcipcip/vue-use-kit) [![GitHub license](https://img.shields.io/github/license/microcipcip/vue-use-kit?style=flat-square)](https://github.com/microcipcip/vue-use-kit/blob/master/LICENSE)\r\n[![Demo](https://img.shields.io/badge/demos-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/)\r\n\r\n\u003e 🛠️ Vue kit of useful [Vue Composition API](https://vue-composition-api-rfc.netlify.com) functions.\u003c/em\u003e\r\n\r\n## Install\r\n\r\n```shell script\r\nnpm install vue-use-kit\r\n```\r\n\r\nSince Vue 3.0 has not yet been released, you must also install [@vue/composition-api](https://github.com/vuejs/composition-api) library, which will enable the composition API in Vue 2.0.\r\n\r\n```shell script\r\nnpm install @vue/composition-api\r\n```\r\n\r\n## Setup\r\n\r\n```js\r\nimport Vue from 'vue'\r\nimport VueCompositionAPI from '@vue/composition-api'\r\nVue.use(VueCompositionAPI)\r\n```\r\n\r\n## Usage\r\n\r\n```html\r\n\u003ctemplate\u003e\r\n  \u003cdiv\u003eisDesktop: {{ isDesktop ? 'Yes' : 'No' }}\u003c/div\u003e\r\n\u003c/template\u003e\r\n\r\n\u003cscript lang=\"ts\"\u003e\r\n  import Vue from 'vue'\r\n  import { useMedia } from 'vue-use-kit'\r\n\r\n  export default Vue.extend({\r\n    name: 'UseMedia',\r\n    setup() {\r\n      const query = '(min-width: 1024px)'\r\n      const isDesktop = useMedia(query)\r\n      return { isDesktop }\r\n    }\r\n  })\r\n\u003c/script\u003e\r\n```\r\n\r\n## APIs\r\n\r\n- Sensors\r\n  - [`useGeolocation`](./src/functions/useGeolocation/stories/useGeolocation.md) \u0026mdash; tracks geolocation state of user's device.\r\n    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usegeolocation--demo)\r\n  - [`useHover`](./src/functions/useHover/stories/useHover.md) \u0026mdash; tracks mouse hover state of a given element.\r\n    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usehover--demo)\r\n  - [`useIdle`](./src/functions/useIdle/stories/useIdle.md) \u0026mdash; tracks whether user is being inactive.\r\n    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-useidle--demo)\r\n  - [`useIntersection`](./src/functions/useIntersection/stories/useIntersection.md) \u0026mdash; tracks intersection of target element with an ancestor element.\r\n    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-useintersection--demo)\r\n    [![Demo](https://img.shields.io/badge/advanced_demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-useintersection--advanced-demo)\r\n  - [`useKey`](./src/functions/useKey/stories/useKey.md) \u0026mdash; executes a handler when a keyboard key is pressed.\r\n    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usekey--demo)\r\n  - [`useLocation`](./src/functions/useLocation/stories/useLocation.md) \u0026mdash; tracks bar navigation location state.\r\n    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-uselocation--demo)\r\n  - [`useMedia`](./src/functions/useMedia/stories/useMedia.md) \u0026mdash; tracks state of a CSS media query.\r\n    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemedia--demo)\r\n    [![Demo](https://img.shields.io/badge/advanced_demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemedia--advanced-demo)\r\n  - [`useMediaDevices`](./src/functions/useMediaDevices/stories/useMediaDevices.md) \u0026mdash; tracks connected hardware devices.\r\n    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemediadevices--demo)\r\n  - [`useMouse`](./src/functions/useMouse/stories/useMouse.md) \u0026mdash; tracks the mouse position.\r\n    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemouse--demo)\r\n    [![Demo](https://img.shields.io/badge/advanced_demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemouse--advanced-demo)\r\n  - [`useMouseElement`](./src/functions/useMouseElement/stories/useMouseElement.md) \u0026mdash; tracks the mouse position relative to given element.\r\n    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemouseelement--demo)\r\n  - [`useMouseLeavePage`](./src/functions/useMouseLeavePage/stories/useMouseLeavePage.md) \u0026mdash; tracks when mouse leaves page boundaries.\r\n    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemouseleavepage--demo)\r\n  - [`useOrientation`](./src/functions/useOrientation/stories/useOrientation.md) \u0026mdash; tracks state of device's screen orientation.\r\n    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-useorientation--demo)\r\n  - [`useSize`](./src/functions/useSize/stories/useSize.md) \u0026mdash; tracks size of an HTML element.\r\n    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usesize--demo)\r\n  - [`useScroll`](./src/functions/useScroll/stories/useScroll.md) \u0026mdash; tracks an HTML element's scroll position.\r\n    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usescroll--demo)\r\n  - [`useScrollbarWidth`](./src/functions/useScrollbarWidth/stories/useScrollbarWidth.md) \u0026mdash; gets current browser's scrollbar width.\r\n    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usescrollbarwidth--demo)\r\n  - [`useSearchParams`](./src/functions/useSearchParams/stories/useSearchParams.md) \u0026mdash; tracks browser's location search params.\r\n    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usesearchparams--demo)\r\n  - [`useWindowSize`](./src/functions/useWindowSize/stories/useWindowSize.md) \u0026mdash; tracks `Window` scroll position.\r\n    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usewindowsize--demo)\r\n- Animations\r\n  - [`useInterval`](./src/functions/useInterval/stories/useInterval.md) \u0026mdash; updates `counter` value repeatedly on a fixed time delay.\r\n    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-useinterval--demo)\r\n  - [`useIntervalFn`](./src/functions/useIntervalFn/stories/useIntervalFn.md) \u0026mdash; calls function repeatedly on a fixed time delay.\r\n    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-useintervalfn--demo)\r\n  - [`useRaf`](./src/functions/useRaf/stories/useRaf.md) \u0026mdash; returns `elapsedTime` with requestAnimationFrame.\r\n    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-useraf--demo)\r\n  - [`useRafFn`](./src/functions/useRafFn/stories/useRafFn.md) \u0026mdash; calls function with requestAnimationFrame.\r\n    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-useraffn--demo)\r\n    [![Demo](https://img.shields.io/badge/advanced_demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-useraffn--advanced-demo)\r\n  - [`useTimeout`](./src/functions/useTimeout/stories/useTimeout.md) \u0026mdash; returns `isReady` true when timer is completed.\r\n    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-usetimeout--demo)\r\n  - [`useTimeoutFn`](./src/functions/useTimeoutFn/stories/useTimeoutFn.md) \u0026mdash; calls function when timer is completed.\r\n    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-usetimeoutfn--demo)\r\n- Side Effects\r\n  - [`useBeforeUnload`](./src/functions/useBeforeUnload/stories/useBeforeUnload.md) \u0026mdash; shows browser alert when user try to reload or close the page.\r\n    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/side-effects-usebeforeunload--demo)\r\n  - [`useCookie`](./src/functions/useCookie/stories/useCookie.md) \u0026mdash; provides way to read, update and delete a cookie.\r\n    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/side-effects-usecookie--demo)\r\n  - [`useFetch`](./src/functions/useFetch/stories/useFetch.md) \u0026mdash; provides a way to fetch resources asynchronously across the network.\r\n    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/side-effects-usefetch--demo)\r\n  - [`useLocalStorage`](./src/functions/useLocalStorage/stories/useLocalStorage.md) \u0026mdash; provides way to read, update and delete a localStorage key.\r\n    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/side-effects-uselocalstorage--demo)\r\n  - [`useSessionStorage`](./src/functions/useSessionStorage/stories/useSessionStorage.md) \u0026mdash; provides way to read, update and delete a sessionStorage key.\r\n    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/side-effects-usesessionstorage--demo)\r\n- UI\r\n  - [`useClickAway`](./src/functions/useClickAway/stories/useClickAway.md) \u0026mdash; triggers callback when user clicks outside target area.\r\n    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/ui-useclickaway--demo)\r\n  - [`useFullscreen`](./src/functions/useFullscreen/stories/useFullscreen.md) \u0026mdash; display an element in full-screen mode\r\n    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/ui-usefullscreen--demo)\r\n- Utils\r\n  - [`getQuery`](./src/functions/getQuery/stories/getQuery.md) \u0026mdash; get a CSS media query string.\r\n    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/utils-getquery--demo)\r\n\r\n## 🎁 Other examples of composition API functions\r\n\r\nSome Vue composition API functions have not been included in this library but\r\ncan be created easily by following the steps below.\r\n\r\n\u003cdetails\u003e\u003csummary\u003euseStore\u003c/summary\u003e\u003cp\u003e\r\n\r\nCreating a useStore function connected to Vuex store is pretty straightforward.\r\nFor example, given the following store:\r\n\r\n```typescript\r\n// @src/mystore.ts\r\nimport Vue from 'vue'\r\nimport Vuex from 'vuex'\r\n\r\nVue.use(Vuex)\r\n\r\nconst store = new Vuex.Store({\r\n  state: { searchTerm: '' },\r\n  mutations: {\r\n    SET_SEARCH(state, newVal) {\r\n      state.searchTerm = newVal\r\n    }\r\n  },\r\n  getters: { searchTerm: state =\u003e state.searchTerm },\r\n  actions: {},\r\n  modules: {}\r\n})\r\n\r\nexport default store\r\n```\r\n\r\nWe can get the store from the `vm` and expose it in our useStore function:\r\n\r\n```typescript\r\n// @src/useStore.ts\r\nimport { getCurrentInstance } from '@vue/composition-api'\r\n\r\nexport function useStore() {\r\n  const vm = getCurrentInstance()\r\n  if (!vm) throw new Error('Vue instance not found!')\r\n  return vm.$store\r\n}\r\n```\r\n\r\nNow we can use useStore inside the setup() method of our component:\r\n\r\n```html\r\n// MyComponent.vue\r\n\u003ctemplate\u003e\r\n  \u003cinput type=\"text\" v-model=\"searchTerm\" placeholder=\"🔎 Search...\" /\u003e\r\n\u003c/template\u003e\r\n\r\n\u003cscript lang=\"ts\"\u003e\r\n  import Vue from 'vue'\r\n  import { ref, watch } from '@src/api'\r\n  import { useStore } from '@src/useStore'\r\n\r\n  export default Vue.extend({\r\n    name: 'UseStoreDemo',\r\n    setup() {\r\n      const { commit, getters } = useStore()\r\n      const searchTerm = ref(getters['searchTerm'])\r\n      watch(searchTerm, newVal =\u003e commit('SET_SEARCH', newVal))\r\n      return { searchTerm }\r\n    }\r\n  })\r\n\u003c/script\u003e\r\n```\r\n\r\n\u003c/p\u003e\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\u003csummary\u003euseRouter\u003c/summary\u003e\u003cp\u003e\r\n\r\nCreating a useRouter function connected to VueRouter is rather simple.\r\nWe can get `$route` and `$router` from the `vm` and expose them in our useRouter function:\r\n\r\n```typescript\r\n// @src/useRouter.ts\r\nimport { getCurrentInstance } from '@vue/composition-api'\r\n\r\nexport function useRouter() {\r\n  const vm = getCurrentInstance()\r\n  if (!vm) throw new Error('Vue instance not found!')\r\n  const route = vm.$route\r\n  const router = vm.$router\r\n  return { route, router }\r\n}\r\n```\r\n\r\nNow we can use useRouter inside the setup() method of our component:\r\n\r\n```html\r\n// MyComponent.vue\r\n\u003ctemplate\u003e\r\n  \u003cdiv\u003e\r\n    Current id: {{ id }}\r\n  \u003c/div\u003e\r\n\u003c/template\u003e\r\n\r\n\u003cscript lang=\"ts\"\u003e\r\n  import Vue from 'vue'\r\n  import { useRouter } from '@src/useRouter'\r\n\r\n  export default Vue.extend({\r\n    name: 'UseRouterDemo',\r\n    setup() {\r\n      const { route } = useRouter()\r\n      return { id: route.params.id }\r\n    }\r\n  })\r\n\u003c/script\u003e\r\n```\r\n\r\n\u003c/p\u003e\u003c/details\u003e\r\n\r\n## Inspiration\r\n\r\n- [react-use 👍](https://github.com/streamich/react-use)\r\n- [vue-hooks](https://github.com/u3u/vue-hooks)\r\n- [vue-use-web](https://github.com/logaretm/vue-use-web)\r\n\r\n## Made with\r\n\r\n- [Vue](https://vuejs.org/)\r\n- [@vue/composition-api](https://github.com/vuejs/composition-api)\r\n- [@vue/test-utils](https://vue-test-utils.vuejs.org/)\r\n- [Jest](https://jestjs.io/)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrocipcip%2Fvue-use-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmicrocipcip%2Fvue-use-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrocipcip%2Fvue-use-kit/lists"}