Skip to content
🧰 Collection of essential Vue Composition API utils for Vue 2 and 3
TypeScript JavaScript CSS HTML
Branch: master
Clone or download

README.md

logo

NPM version Storybook Demos Deploys by Netlify NPM Downloads GitHub last commit GitHub issues GitHub stars

Collection of essential Vue Composition API (inspired by react-use)

πŸš€ Features

  • ⚑ 0 dependencies: No worry about your bundle size
  • 🌴 Fully tree shakable: Only take what you want
  • 🦾 Type Strong: Written in Typescript
  • πŸ•Ά Seamless migration: Works for both Vue 3 and 2
  • 🌎 Browser compatible: Use it though CDN
  • πŸŽͺ Interactive docs & demos: Check out the Storybook!
  • πŸ”Œ Optional Add-ons: Firebase, vue-i18n, etc

πŸ¦„ Usage

import { useMouse, usePreferredDark, useLocalStorage } from '@vueuse/core'

new Vue({
  setup() {
    // tracks mouse position
    const { x, y } = useMouse()

    // is user prefers dark theme
    const isDark = usePreferredDark()

    // persist state in localStorage
    const state = useLocalStorage(
      'my-storage', 
      {
        name: 'Apple',
        color: 'red',
      },
    )

    return { x, y, isDark, state }
  }
})

Refer to functions list or documentations for more details.

πŸ“¦ Install

for Vue 3 (vue-next), (Demo: Vite, Webpack)

npm i @vueuse/core@vue3

for Vue 2 with composition-api polyfill

npm i @vueuse/core@vue2 @vue/composition-api 

Please register the Composition API Plugin before using APIs.

CDN

<!-- For Vue 3 -->
<script src="https://unpkg.com/@vueuse/core@vue3"></script> 

<!-- For Vue 2 -->
<script src="https://unpkg.com/@vueuse/core@vue2"></script>

It will be exposed to global as window.VueUse

⚑ Functions

You can check out the full documents and live demos in Storybook.

More functions to be added. Please keep turned. (PRs are also welcome!)

πŸ”Œ Add-ons

The core package aims to be lightweight and dependence free. While the add-ons are wrapping popular packages into the consistent API style.

πŸ”¬ Technical Details

The Versioning

For every release, it will release two versions of this package. The 3.x.x is used for Vue 3 and the 2.x.x is used for Vue 2. We use the major version number to distinguish the different target versions will the minor and patch numbers are shared in both packages.

Different between 3.x and 2.x

For 3.x build, we use the API from @vue/runtime-dom, and for 2.x, it's @vue/composition-api. All the functions exported in this package behaves the same.

// 3.x build
import { ref } from '@vue/runtime-dom'

// 2.x build
import { ref } from '@vue/composition-api'

🧱 Contribute

See the Contributing Guide

🌸 Thanks

This project is heavily inspired by the following awesome projects.

Thanks!

πŸ‘¨β€πŸš€ Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

πŸ“„ License

MIT License Β© 2019-2020 Anthony Fu

You can’t perform that action at this time.