vueblocks/vue-use-utilities

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.

✨ 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
    }
  }
  ...
}