Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/microcipcip/vue-use-kit
🛠️Useful collection of Vue composition API functions https://microcipcip.github.io/vue-use-kit/
https://github.com/microcipcip/vue-use-kit
vue vue-composition-api vue-function-api vue-hooks vue-use vue-use-hooks
Last synced: 2 months ago
JSON representation
🛠️Useful collection of Vue composition API functions https://microcipcip.github.io/vue-use-kit/
- Host: GitHub
- URL: https://github.com/microcipcip/vue-use-kit
- Owner: microcipcip
- License: mit
- Created: 2020-02-08T09:19:09.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-05-07T23:33:09.000Z (over 1 year ago)
- Last Synced: 2024-08-10T09:13:21.544Z (5 months ago)
- Topics: vue, vue-composition-api, vue-function-api, vue-hooks, vue-use, vue-use-hooks
- Language: TypeScript
- Homepage:
- Size: 17.7 MB
- Stars: 46
- Watchers: 2
- Forks: 2
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: code-of-conduct.md
Awesome Lists containing this project
- awesome-vue-3 - vue-use-kit - 🛠️ Useful collection of Vue composition API functions (Packages)
README
[](https://www.npmjs.com/package/vue-use-kit) [](https://www.npmjs.com/package/vue-use-kit) [](https://travis-ci.org/microcipcip/vue-use-kit) [](https://github.com/microcipcip/vue-use-kit/blob/master/LICENSE)
[](https://microcipcip.github.io/vue-use-kit/)
> 🛠️ Vue kit of useful [Vue Composition API](https://vue-composition-api-rfc.netlify.com) functions.
## Install
```shell script
npm install vue-use-kit
```
Since 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.
```shell script
npm install @vue/composition-api
```
## Setup
```js
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
```
## Usage
```html
isDesktop: {{ isDesktop ? 'Yes' : 'No' }}
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 }
}
})
```
## APIs
- Sensors
- [`useGeolocation`](./src/functions/useGeolocation/stories/useGeolocation.md) — tracks geolocation state of user's device.
[](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usegeolocation--demo)
- [`useHover`](./src/functions/useHover/stories/useHover.md) — tracks mouse hover state of a given element.
[](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usehover--demo)
- [`useIdle`](./src/functions/useIdle/stories/useIdle.md) — tracks whether user is being inactive.
[](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-useidle--demo)
- [`useIntersection`](./src/functions/useIntersection/stories/useIntersection.md) — tracks intersection of target element with an ancestor element.
[](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-useintersection--demo)
[](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-useintersection--advanced-demo)
- [`useKey`](./src/functions/useKey/stories/useKey.md) — executes a handler when a keyboard key is pressed.
[](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usekey--demo)
- [`useLocation`](./src/functions/useLocation/stories/useLocation.md) — tracks bar navigation location state.
[](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-uselocation--demo)
- [`useMedia`](./src/functions/useMedia/stories/useMedia.md) — tracks state of a CSS media query.
[](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemedia--demo)
[](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemedia--advanced-demo)
- [`useMediaDevices`](./src/functions/useMediaDevices/stories/useMediaDevices.md) — tracks connected hardware devices.
[](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemediadevices--demo)
- [`useMouse`](./src/functions/useMouse/stories/useMouse.md) — tracks the mouse position.
[](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemouse--demo)
[](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemouse--advanced-demo)
- [`useMouseElement`](./src/functions/useMouseElement/stories/useMouseElement.md) — tracks the mouse position relative to given element.
[](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemouseelement--demo)
- [`useMouseLeavePage`](./src/functions/useMouseLeavePage/stories/useMouseLeavePage.md) — tracks when mouse leaves page boundaries.
[](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemouseleavepage--demo)
- [`useOrientation`](./src/functions/useOrientation/stories/useOrientation.md) — tracks state of device's screen orientation.
[](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-useorientation--demo)
- [`useSize`](./src/functions/useSize/stories/useSize.md) — tracks size of an HTML element.
[](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usesize--demo)
- [`useScroll`](./src/functions/useScroll/stories/useScroll.md) — tracks an HTML element's scroll position.
[](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usescroll--demo)
- [`useScrollbarWidth`](./src/functions/useScrollbarWidth/stories/useScrollbarWidth.md) — gets current browser's scrollbar width.
[](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usescrollbarwidth--demo)
- [`useSearchParams`](./src/functions/useSearchParams/stories/useSearchParams.md) — tracks browser's location search params.
[](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usesearchparams--demo)
- [`useWindowSize`](./src/functions/useWindowSize/stories/useWindowSize.md) — tracks `Window` scroll position.
[](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usewindowsize--demo)
- Animations
- [`useInterval`](./src/functions/useInterval/stories/useInterval.md) — updates `counter` value repeatedly on a fixed time delay.
[](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-useinterval--demo)
- [`useIntervalFn`](./src/functions/useIntervalFn/stories/useIntervalFn.md) — calls function repeatedly on a fixed time delay.
[](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-useintervalfn--demo)
- [`useRaf`](./src/functions/useRaf/stories/useRaf.md) — returns `elapsedTime` with requestAnimationFrame.
[](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-useraf--demo)
- [`useRafFn`](./src/functions/useRafFn/stories/useRafFn.md) — calls function with requestAnimationFrame.
[](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-useraffn--demo)
[](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-useraffn--advanced-demo)
- [`useTimeout`](./src/functions/useTimeout/stories/useTimeout.md) — returns `isReady` true when timer is completed.
[](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-usetimeout--demo)
- [`useTimeoutFn`](./src/functions/useTimeoutFn/stories/useTimeoutFn.md) — calls function when timer is completed.
[](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-usetimeoutfn--demo)
- Side Effects
- [`useBeforeUnload`](./src/functions/useBeforeUnload/stories/useBeforeUnload.md) — shows browser alert when user try to reload or close the page.
[](https://microcipcip.github.io/vue-use-kit/?path=/story/side-effects-usebeforeunload--demo)
- [`useCookie`](./src/functions/useCookie/stories/useCookie.md) — provides way to read, update and delete a cookie.
[](https://microcipcip.github.io/vue-use-kit/?path=/story/side-effects-usecookie--demo)
- [`useFetch`](./src/functions/useFetch/stories/useFetch.md) — provides a way to fetch resources asynchronously across the network.
[](https://microcipcip.github.io/vue-use-kit/?path=/story/side-effects-usefetch--demo)
- [`useLocalStorage`](./src/functions/useLocalStorage/stories/useLocalStorage.md) — provides way to read, update and delete a localStorage key.
[](https://microcipcip.github.io/vue-use-kit/?path=/story/side-effects-uselocalstorage--demo)
- [`useSessionStorage`](./src/functions/useSessionStorage/stories/useSessionStorage.md) — provides way to read, update and delete a sessionStorage key.
[](https://microcipcip.github.io/vue-use-kit/?path=/story/side-effects-usesessionstorage--demo)
- UI
- [`useClickAway`](./src/functions/useClickAway/stories/useClickAway.md) — triggers callback when user clicks outside target area.
[](https://microcipcip.github.io/vue-use-kit/?path=/story/ui-useclickaway--demo)
- [`useFullscreen`](./src/functions/useFullscreen/stories/useFullscreen.md) — display an element in full-screen mode
[](https://microcipcip.github.io/vue-use-kit/?path=/story/ui-usefullscreen--demo)
- Utils
- [`getQuery`](./src/functions/getQuery/stories/getQuery.md) — get a CSS media query string.
[](https://microcipcip.github.io/vue-use-kit/?path=/story/utils-getquery--demo)
## 🎁 Other examples of composition API functions
Some Vue composition API functions have not been included in this library but
can be created easily by following the steps below.
useStore
Creating a useStore function connected to Vuex store is pretty straightforward.
For example, given the following store:
```typescript
// @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
```
We can get the store from the `vm` and expose it in our useStore function:
```typescript
// @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
}
```
Now we can use useStore inside the setup() method of our component:
```html
// MyComponent.vue
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 }
}
})
```
useRouter
Creating a useRouter function connected to VueRouter is rather simple.
We can get `$route` and `$router` from the `vm` and expose them in our useRouter function:
```typescript
// @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 }
}
```
Now we can use useRouter inside the setup() method of our component:
```html
// MyComponent.vue
Current id: {{ id }}
import Vue from 'vue'
import { useRouter } from '@src/useRouter'
export default Vue.extend({
name: 'UseRouterDemo',
setup() {
const { route } = useRouter()
return { id: route.params.id }
}
})
```
## Inspiration
- [react-use 👍](https://github.com/streamich/react-use)
- [vue-hooks](https://github.com/u3u/vue-hooks)
- [vue-use-web](https://github.com/logaretm/vue-use-web)
## Made with
- [Vue](https://vuejs.org/)
- [@vue/composition-api](https://github.com/vuejs/composition-api)
- [@vue/test-utils](https://vue-test-utils.vuejs.org/)
- [Jest](https://jestjs.io/)