vueblocks / vue-use-utilities

A collection of vue composition-api utilities.

Home Page:https://vueblocks.github.io/vue-use-utilities/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Vue Use Utilities


NPM NPM Download support Minzipped Size lerna OpenBase License

Vue Use Utilities build on top of vue-demi & @vue/compostion-api. It works both for Vue 2 & 3.


✨ Features

  • πŸ›  Composable Utilities
  • 🌳 TreeShakable & SideEffects Free, Check out Bundle Phobia
  • πŸ’ͺ Fully Typed APIs
  • 🀟 Vue 2 and 3 Support
  • 🧩 Advanced Integration

πŸ“¦ Installation

# 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 | Vue 3 Demo: Vue CLI 3.x

πŸ’‘ Usage

<input v-model="searchVal" />
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

🧩 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

Read Docs

Axios

@vueblocks/vue-use-axios - Use Axios with Compositon API Easily.

  • useAxios - is a wrapper of axios

Read Docs

Thanks

πŸ“„ License

MIT @xiaoluoboding

About

A collection of vue composition-api utilities.

https://vueblocks.github.io/vue-use-utilities/

License:MIT License


Languages

Language:TypeScript 97.6%Language:Shell 1.2%Language:JavaScript 1.2%