base on Collection of essential Vue Composition Utilities for Vue 2 and 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://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' export default { setup() { // tracks mouse position 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', }, ) return { x, y, isDark, store } }, } ``` Refer to [functions list](https://vueuse.org/functions) or [documentations](https://vueuse.org/) for more details. ## 📦 Install > 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: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"