vue-use-utilities

vue-use-utilities copied to clipboard

Vue Use Utilities

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

• vue-composition-toolkit
• vueuse

📄 License

MIT @xiaoluoboding