/vueuse

🧰 Collection of Composition API utils for Vue 2 and 3

Primary LanguageTypeScriptMIT LicenseMIT

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: Don't 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 through CDN
  • 🎪 Interactive docs & demos: Check out the Storybook!
  • 🔌 Optional Add-ons

🦄 Usage

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

const Component = defineComponent({
  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

🎩 From v4.0, it works for Vue 2 & 3 within a single package by the power of Vue Demi!

npm i @vueuse/core # yarn add @vueuse/core

Vue 3 Demo: Vite, Webpack / Vue 2 Demo: Vue CLI

CDN

<script src="https://unpkg.com/@vueuse/core"></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 stay tuned. (PRs are also welcome!)

Meanwhile, try also vue-composable by @pikax!

🔌 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.

🧱 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. How to Contribute.

Financial Contributors

Become a financial contributor and help us sustain our community. Contribute via Open Collective

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