{"id":21938327,"url":"https://github.com/shallinta/vue3-hooks","last_synced_at":"2025-07-06T18:35:59.467Z","repository":{"id":42821540,"uuid":"267477207","full_name":"shallinta/vue3-hooks","owner":"shallinta","description":"Using vue3.x composition api in react-hooks style. Implemented just with composition api.","archived":false,"fork":false,"pushed_at":"2022-03-26T19:21:43.000Z","size":255,"stargazers_count":14,"open_issues_count":9,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-23T18:46:33.878Z","etag":null,"topics":["composition-api","react-hooks","reactive","ref","useeffect","usestate","vue","vue-hooks","vue3","vue3-hooks"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shallinta.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-28T02:46:31.000Z","updated_at":"2023-06-01T10:43:11.000Z","dependencies_parsed_at":"2022-09-19T19:50:11.679Z","dependency_job_id":null,"html_url":"https://github.com/shallinta/vue3-hooks","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/shallinta/vue3-hooks","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shallinta%2Fvue3-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shallinta%2Fvue3-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shallinta%2Fvue3-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shallinta%2Fvue3-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shallinta","download_url":"https://codeload.github.com/shallinta/vue3-hooks/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shallinta%2Fvue3-hooks/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263952491,"owners_count":23534920,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["composition-api","react-hooks","reactive","ref","useeffect","usestate","vue","vue-hooks","vue3","vue3-hooks"],"created_at":"2024-11-29T01:30:06.965Z","updated_at":"2025-07-06T18:35:59.411Z","avatar_url":"https://github.com/shallinta.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Vue3 hooks\n\n[![npm package](https://img.shields.io/npm/v/vue3-hooks.svg)](https://www.npmjs.org/package/vue3-hooks)\n[![npm download](https://img.shields.io/npm/dt/vue3-hooks.svg)](https://www.npmjs.org/package/vue3-hooks)\n[![github license](https://img.shields.io/github/license/shallinta/vue3-hooks.svg)](https://github.com/shallinta/vue3-hooks/blob/master/LICENSE)\n[![github issues open](https://img.shields.io/github/issues/shallinta/vue3-hooks.svg)](https://github.com/shallinta/vue3-hooks/issues?q=is%3Aopen+is%3Aissue)\n[![github issues closed](https://img.shields.io/github/issues-closed/shallinta/vue3-hooks.svg)](https://github.com/shallinta/vue3-hooks/issues?q=is%3Aissue+is%3Aclosed)\n![github language top](https://img.shields.io/github/languages/top/shallinta/vue3-hooks.svg)\n[![github stars](https://img.shields.io/github/stars/shallinta/vue3-hooks.svg?style=social\u0026label=Stars)](https://github.com/shallinta/vue3-hooks)  \n\n[![NPM](https://nodei.co/npm/vue3-hooks.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://www.npmjs.com/package/vue3-hooks)\n\n\u003e Using vue3.x composition api in react-hooks style.\n\nThe react-like vue3 hooks are implemented just with composition api, requiring no any other dependencies but vue3.\n\nIf you are used to react hooks, and new to vue 3, you will try this. In this case, however, I suggest learning original composition api. It's easy :D.\n\n\u003cb\u003e\nWhat `vue3-hooks` really make sense is that so many third-party hooks library based on react can now easily migrate to vue technolegy stack.\n\u003c/b\u003e\nIf you are an author of third-party react hooks, you may consider to use `vue3-hooks` to migrate your library to vue family. Very few code modification is required.\n\n## install\n\n```sh\nnpm install --save vue3-hooks\n```\n\n## features\n\n- [x] useState (use `ref` and `reactive` from vue)\n- [x] useEffect (use `watch` from vue)\n- [ ] *WIP*: more react-like hooks\n\n\u003e `useCallback` is no need because `setup` will only been run once.\n\n## usage\n\n```javascript\nimport { computed } from 'vue';\nimport { useState, useEffect } from 'vue3-hooks';\nimport ajaxFetch from 'ajax-fetch-esm';\n// ...\n\n\u003cp\u003e{{ id }}\u003c/p\u003e\n\u003cp\u003eCounter: {{ count }}\u003c/p\u003e\n\u003cp\u003e{{ data.toString() }}\u003c/p\u003e\n\n// ...\nsetup(props) {\n  // ...\n\n  // all vue apps prefer using counter for example instead of hello world.\n  const [count, setCount] = useState(0);\n  const [data, setData] = useState({});\n\n  // yes, vue3 composition api allow us passing an async function.\n  // normal functions are also ok.\n  // `() =\u003e props.id` means watching a computed vue3 variable.\n  useEffect(async ([nextCount, nextId], [prevCount, prevId]) =\u003e {\n    const timer = setTimeout(() =\u003e {\n      setData(await ajaxFetch.get({ current: nextCount, id: nextId }));\n    }, 500);\n    // clean up\n    return () =\u003e {\n      clearTimeout(timer);\n    };\n  }, [count, () =\u003e props.id]);\n\n  // ...\n  return {\n    // ...\n    count,\n    data,\n    id: computed(() =\u003e props.id),\n    // ...\n  };\n}\n// ...\n\n```\n\n## Recently updated\n\nSee [CHANGELOG](CHANGELOG.md) here.\n\n## LICENSE\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshallinta%2Fvue3-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshallinta%2Fvue3-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshallinta%2Fvue3-hooks/lists"}