vueuse

by antfu

antfu /vueuse

🧰 Collection of Composition API utils for Vue 2 and 3

1.5K Stars 70 Forks Last release: 3 months ago (v4.0.0) MIT License 382 Commits 53 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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


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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.