Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vueblocks/vue-use-utilities
A collection of vue composition-api utilities.
https://github.com/vueblocks/vue-use-utilities
composition-api hooks utilities vue vue-use-hooks vue2 vue3
Last synced: 3 months ago
JSON representation
A collection of vue composition-api utilities.
- Host: GitHub
- URL: https://github.com/vueblocks/vue-use-utilities
- Owner: vueblocks
- License: mit
- Created: 2020-11-30T16:05:39.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-09-20T20:57:59.000Z (over 1 year ago)
- Last Synced: 2024-03-08T12:53:45.506Z (3 months ago)
- Topics: composition-api, hooks, utilities, vue, vue-use-hooks, vue2, vue3
- Language: TypeScript
- Homepage: https://vueblocks.github.io/vue-use-utilities/
- Size: 2.96 MB
- Stars: 32
- Watchers: 2
- Forks: 7
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Lists
- awesome-vue-3 - vue-use-utilities - 🔧 A collection of Vue Composition API utilities (Packages)
README
Vue Use Utilities
[![NPM][npmBadge]][npmUrl]
[![NPM Download][npmDtBadge]][npmDtUrl]
![support][supportBadge]
[![Minzipped Size][bundlePhobiaBadge]][bundlePhobiaUrl]
[![lerna][lernaBadge]][lernaUrl]
[![OpenBase][openbaseBadge]][openbaseUrl]
[![License][licenseBadge]][licenseUrl]
Vue Use Utilities build on top of vue-demi & @vue/compostion-api. It works both for Vue 2 & 3.
[npmBadge]:https://img.shields.io/npm/v/@vueblocks/vue-use-core.svg?maxAge=2592000
[npmUrl]:https://www.npmjs.com/package/@vueblocks/vue-use-core
[npmDtBadge]:https://img.shields.io/npm/dt/@vueblocks/vue-use-core.svg
[npmDtUrl]:https://www.npmjs.com/package/@vueblocks/vue-use-core
[licenseBadge]:https://img.shields.io/badge/license-MIT-blue.svg
[licenseUrl]:https://raw.githubusercontent.com/vueblocks/vue-use-utilities/master/LICENSE
[openbaseBadge]:https://badges.openbase.io/js/rating/@vueblocks/vue-use-vuex.svg
[openbaseUrl]:https://openbase.io/js/@vueblocks/vue-use-vuex?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge
[supportBadge]:https://img.shields.io/badge/support-2%263-%234FC08D?style=flat&logo=Vue.js
[lernaBadge]:https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg
[lernaUrl]:https://lerna.js.org/
[bundlePhobiaBadge]:https://badgen.net/bundlephobia/minzip/@vueblocks/vue-use-core
[bundlePhobiaUrl]:https://bundlephobia.com/result?p=@vueblocks/vue-use-core
## ✨ Features
* 🛠 Composable Utilities
* 🌳 TreeShakable & SideEffects Free, Check out [Bundle Phobia](https://bundlephobia.com/result?p=@vueblocks/vue-use-core)
* 💪 Fully Typed APIs
* 🤟 Vue 2 and 3 Support
* 🧩 Advanced Integration
## 📦 Installation
```bash
# Vue 2 with @vue/composition-api
yarn add @vue/composition-api @vueblocks/vue-use-core -S
or
npm i @vue/composition-api @vueblocks/vue-use-core -S
# Vue 3
yarn add @vueblocks/vue-use-core -S
or
npm i @vueblocks/vue-use-core -S
```
## 🦄️ Demos
Vue 2 Demo: [Vue CLI 2.x](./examples/vue2-demo/README.md) | Vue 3 Demo: [Vue CLI 3.x](./examples/vue3-demo/README.md)
## 💡 Usage
```html
```
```js
import { useDebouncedRef } from '@vueblocks/vue-use-core'
export default {
...
setup () {
const searchVal = useDebouncedRef('', 500)
// mock use input
searchVal.value = 'x'
searchVal.value = 'xi'
searchVal.value = 'xia'
searchVal.value = 'xiao'
return {
searchVal
}
}
...
}
```
## 📖 Documentation
Check our [documentation](https://vueblocks.github.io/vue-use-utilities/)
## 🧩 Integration
The Integration part provide utilities for commonly used libraries.
### Vuex
`@vueblocks/vue-use-vuex` - Use Vuex With Composition API Easily.
#### useVuex
* `useState` - same as `mapState`
* `useGetters` - same as `mapGetters`
* `useMutations` - same as `mapMutations`
* `useActions` - same as `mapActions`
#### useStore
* `useStore` - same as Vuex 4.x composition api [useStore](https://next.vuex.vuejs.org/guide/composition-api.html)
[Read Docs](./packages/vuex/README.md)
### Axios
`@vueblocks/vue-use-axios` - Use Axios with Compositon API Easily.
* `useAxios` - is a wrapper of axios
[Read Docs](./packages/axios/README.md)
### Thanks
* [vue-composition-toolkit](https://github.com/HcySunYang/vue-composition-toolkit)
* [vueuse](https://github.com/antfu/vueuse)
## 📄 License
MIT [@xiaoluoboding](https://github.com/xiaoluoboding)