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
- Seamless migration ๐ถ Works for both Vue 3.x and 2.x
- Browser compatible ๐ Use it without complex building tools
- Intractive 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 and documentations for more details.
๐ฆ Install
vue-next), demo here
for Vue 3.x (npm i @vueuse/core@vue3
composition-api polyfill
for Vue 2.x withnpm i @vue/composition-api @vueuse/core@vue2
Please register the Composition API Plugin before using APIs.
CDN
<!-- For Vue 3.x -->
<script src="https://unpkg.com/@vueuse/core@vue3"></script>
<!-- For Vue 2.x -->
<script src="https://unpkg.com/@vueuse/core@vue2"></script>
It will be exposed to global variable as window.VueUse
โก Functions
You can checkout the full documents and live demos in Storybook.
-
Animation
-
Browser
-
Misc
-
Sensors
-
State
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.
-
๐ i18n (
@vueuse/i18n
) - Composition wrapper for vue-i18n -
๐ฅ Firebase (
@vueuse/firebase
) - enables realtime bindings for Firebase
๐ฌ Technical Details
The Versioning
For every release, it will release two version of this package. The 3.x.x
is used for Vue 3.x and the 2.x.x
is used for 2.x. We use the major version number to distinguish the different target version will the minor and patch numbers are shared in both packages.
Different between 3.x and 2.x
Since the Composition API will be available in 3.x. Using it in 2.x require you use a polyfill. 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 following awesome projects.
- streamich/react-use
- u3u/vue-hooks
- shuidi-fed/vue-composition-toolkit
- logaretm/vue-use-web
- kripod/react-hooks
Thanks!
๐ License
MIT License ยฉ 2019-2020 Anthony Fu