base on Collection of essential Vue Composition Utilities for Vue 3 <p align="center"> <a href="https://github.com/vueuse/vueuse#gh-light-mode-only"> <img src="https://raw.githubusercontent.com/vueuse/vueuse/main/packages/public/logo-vertical.png#gh-light-mode-only" alt="VueUse - Collection of essential Vue Composition Utilities" width="300"> </a> <a href="https://github.com/vueuse/vueuse#gh-dark-mode-only"> <img src="https://raw.githubusercontent.com/vueuse/vueuse/main/packages/public/logo-vertical-dark.png#gh-dark-mode-only" alt="VueUse - Collection of essential Vue Composition Utilities" width="300"> </a> <br> Collection of essential Vue Composition Utilities </p> <p align="center"> <a href="https://www.npmjs.com/package/@vueuse/core" target="__blank"><img src="https://img.shields.io/npm/v/@vueuse/core?color=a1b858&label=" alt="NPM version"></a> <a href="https://www.npmjs.com/package/@vueuse/core" target="__blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@vueuse/core?color=50a36f&label="></a> <a href="https://app.codecov.io/gh/vueuse/vueuse"><img alt="Codecov" src="https://img.shields.io/codecov/c/github/vueuse/vueuse?color=42b883&labelColor=354a5e"></a> <a href="https://vueuse.org" target="__blank"><img src="https://img.shields.io/static/v1?label=&message=docs%20%26%20demos&color=1e8a7a" alt="Docs & Demos"></a> <img alt="Function Count" src="https://vueuse.org/badge-function-count.svg"> <br> <a href="https://github.com/vueuse/vueuse" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/vueuse/vueuse?style=social"></a> </p> <p align="center"> <a href="https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg"> <img src='https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg'> </a> </p> ## 🚀 Features - 🎪 [**Interactive docs & demos**](https://vueuse.org) - ⚡ **Fully tree shakeable**: Only take what you want, [bundle size](https://vueuse.org/export-size) - 🦾 **Type Strong**: Written in [TypeScript](https://www.typescriptlang.org/), with [TS Docs](https://github.com/microsoft/tsdoc) - 🔋 **SSR Friendly** - 🌎 **No bundler required**: Usable via CDN - 🔩 **Flexible**: Configurable event filters and targets - 🔌 **Optional [Add-ons](https://vueuse.org/add-ons)**: Router, Firebase, RxJS, etc. ## 🦄 Usage ```ts import { useLocalStorage, useMouse, usePreferredDark } from '@vueuse/core' const { x, y } = useMouse() // if user prefers dark theme const isDark = usePreferredDark() // persist state in localStorage const store = useLocalStorage( 'my-storage', { name: 'Apple', color: 'red', }, ) ``` Refer to [functions list](https://vueuse.org/functions) or [documentations](https://vueuse.org/) for more details. ## 📦 Install > From v14.0, VueUse requires Vue v3.5+ > From v13.0, VueUse requires Vue v3.3+ > From v12.0, VueUse no longer supports Vue 2. Please use v11.x for Vue 2 support. ```bash npm i @vueuse/core ``` [Add ons](https://vueuse.org/add-ons.html) | [Nuxt Module](https://vueuse.org/guide/index.html#nuxt) ###### Demos - [Vite + Vue 3](https://github.com/vueuse/vueuse-vite-starter) - [Nuxt 3 + Vue 3](https://github.com/antfu/vitesse-nuxt3) - [Webpack + Vue 3](https://github.com/vueuse/vueuse-vue3-example) ### CDN ```vue <script src="https://unpkg.com/@vueuse/shared"></script> <script src="https://unpkg.com/@vueuse/core"></script> ``` It will be exposed to global as `window.VueUse` ## 🪴 Project Activity  ## 🧱 Contribute See the [**Contributing Guide**](https://vueuse.org/contributing) ## 🌸 Thanks This project is heavily inspired by the following awesome projects. - [streamich/react-use](https://github.com/streamich/react-use) - [u3u/vue-hooks](https://github.com/u3u/vue-hooks) - [logaretm/vue-use-web](https://github.com/logaretm/vue-use-web) - [kripod/react-hooks](https://github.com/kripod/react-hooks) And thanks to [all the contributors on GitHub](https://github.com/vueuse/vueuse/graphs/contributors)! ## 👨‍🚀 Contributors ### Financial Contributors on Open Collective <a href="https://opencollective.com/vueuse"><img src="https://opencollective.com/vueuse/individuals.svg?width=890"></a> ## 📄 License [MIT License](https://github.com/vueuse/vueuse/blob/main/LICENSE) © 2019-PRESENT [Anthony Fu](https://github.com/antfu) ", Assign "at most 3 tags" to the expected json: {"id":"3248","tags":[]} "only from the tags list I provide: []" returns me the "expected json"