{"id":22087761,"url":"https://github.com/rainxh11/vue-useurl","last_synced_at":"2025-07-24T18:33:17.371Z","repository":{"id":57676177,"uuid":"486754649","full_name":"rainxh11/vue-useurl","owner":"rainxh11","description":"Vue.js Reactive URL Composable","archived":false,"fork":false,"pushed_at":"2024-02-16T21:05:15.000Z","size":584,"stargazers_count":8,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-25T04:11:21.549Z","etag":null,"topics":["composable","compostion-api","hook","hooks","url-builder","vue","vue-hooks"],"latest_commit_sha":null,"homepage":"","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/rainxh11.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2022-04-28T21:34:26.000Z","updated_at":"2025-05-28T04:29:08.000Z","dependencies_parsed_at":"2022-09-02T23:21:54.723Z","dependency_job_id":null,"html_url":"https://github.com/rainxh11/vue-useurl","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/rainxh11/vue-useurl","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rainxh11%2Fvue-useurl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rainxh11%2Fvue-useurl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rainxh11%2Fvue-useurl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rainxh11%2Fvue-useurl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rainxh11","download_url":"https://codeload.github.com/rainxh11/vue-useurl/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rainxh11%2Fvue-useurl/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266886751,"owners_count":24001061,"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","status":"online","status_checked_at":"2025-07-24T02:00:09.469Z","response_time":99,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["composable","compostion-api","hook","hooks","url-builder","vue","vue-hooks"],"created_at":"2024-12-01T02:06:35.048Z","updated_at":"2025-07-24T18:33:16.999Z","avatar_url":"https://github.com/rainxh11.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"https://raw.githubusercontent.com/rainxh11/vue-useurl/master/assets/logo.svg\" width=\"300\"\u003e\n\n# 🔗 Vue-useUrl\n\n## Reactive Url Builder Vue Composable for Vue 2 \u0026 Vue 3\n\n[![NPM version](https://img.shields.io/npm/v/vue-useurl.svg)](https://www.npmjs.com/package/vue-useurl)\n\nA library for building URL using ***(Query Parameters, Path Variables, Hash, Path)*** while being reactive and ready to\nuse as Vue Composition API Composable\n\n## Installation\n\nTo install with npm:\n\n```\nnpm install vue-useurl --save\n```\n\n## Usage\n\n```ts\nimport { useUrl } from 'vue-useurl'\n\nconst params = {\n\tsearch: 'ahmed',\n\tlimit: 50,\n\tpage: 12,\n\tsort: 'CreatedOn',\n\ttypes: ['Cancelled', 'OnGoing']\n}\n\nconst { url, queryParams, pathVariables, hash, path, disableCSV } = useUrl({\n\t\tpath: '/api/v1/users/:id/search',\n\t\tpathVariables: {\n\t\t\tid: 451\n\t\t},\n\t\tqueryParams: {\n\t\t\t...params\n\t\t},\n\t\thash: 'someHash',\n\t\tarraySerializer: (v) =\u003e v.join(',')\n\t},\n\t'http://api.com')\n```\n\n## Options\n\nThe `userUrl` function accepts two arguments. The first is 'options' of type IUrlOptions e.g:\n\n```ts\nimport { useUrl } from 'vue-useurl'\n\nconst { url, queryParams, pathVariables, hash, path, disableCSV } = useUrl(\n\t{\n\t\tpath: '/path/path1', // URL Path\n\t\tpathVariables:\n\t\t\t{\n\t\t\t\tid: 451\n\t\t\t}\n\t\t, // Path variables e.g: /:id/\n\t\tqueryParams: {\n\t\t\tlimit: 10,\n\t\t\tsortBy:\n\t\t\t\t'property',\n\t\t\tpage:\n\t\t\t\t1\n\t\t}\n\t\t, // Query parameters\n\t\thash: 'someHash', // Hash\n\t})\n```\n\nThe second is 'baseUrl' that will be appended to Url path\n\n```ts\nuseUrl({\n\t\tpath: '/about',\n\t\tqueryParams: {\n\t\t\tfoo: 'bar',\n\t\t\tfizz: 'baz'\n\t\t},\n\t\thash: 'contact',\n\t},\n\t'http://api.com')\n\n// returns http://api.com/about?foo=bar\u0026bar=baz#contact\n```\n\nVariables returned by `useUrl()` are all reactive objects, changing any\nof: `path` `queryParams` `pathVariables` `hash` `arraySerializer` will rebuild `url`\n\n```ts\nconst { url, queryParams, pathVariables, hash, path, disableCSV } = useUrl(/*..*/)\n```\n\n## Usage with VueUse 'useFetch()'\n\nThis library is compatible with VueUse `useFetch()`, and `url` returned from `useUrl()` can easily be used to trigger\nauto-reftech if option `{ refetch: true }` is passed to `useFetch()` which make for intuitive and easy way to work with\nurl parametes and variables without the need to modify url string directly\n\n```ts\nimport { useFetch } from \"@vueuse/core\"\nimport { useUrl } from 'vue-useurl'\n\nconst { url, queryParams, pathVariables, hash, path, disableCSV } = useUrl({\n\t\tpath: '/api/v1/users/:id/search',\n\t\tpathVariables: {\n\t\t\tid: 451\n\t\t},\n\t\tqueryParams: {\n\t\t\tsearch: 'ahmed',\n\t\t\tlimit: 50,\n\t\t\tpage: 12,\n\t\t\tsort: 'CreatedOn',\n\t\t\ttypes: ['Cancelled', 'OnGoing']\n\t\t},\n\t\thash: 'hashtag',\n\t},\n\t'http://api.com')\n\nconst { isFetching, error, data } = useFetch(url, { initialData: { results: [] }, refetch: true })\n\t.get()\n\t.json()\n```\n\n## How to use debouncing, throttling and other reactive backpressures with useUrl():\n\n```ts\nimport { useFetch, useDebounce } from \"@vueuse/core\"\nimport { useUrl } from 'vue-useurl'\nimport { ref } from 'vue-demi'\n\nexport function useApi()\n{\n\tconst search = ref('query') //\n\tconst filters = ref(['filter1', 'filter2', 'filter3']) // declare reactive varibales \n\n\tconst { url, queryParams, pathVariables, hash, path, disableCSV } = useUrl({\n\t\t\tpath: '/api/v1/users/:id/search',\n\t\t\tpathVariables: {\n\t\t\t\tid: 451\n\t\t\t},\n\t\t\tqueryParams: {\n\t\t\t\tsearch: useDebounce(search, 500), // \n\t\t\t\tlimit: 50,\n\t\t\t\tpage: 12,\n\t\t\t\tsort: 'CreatedOn',\n\t\t\t\ttypes: useDebounce(filters, 3500) // then pass their reactive backpressure objects instead\n\t\t\t},\n\t\t\thash: 'hashtag',\n\t\t\tdisableCSV: false\n\t\t},\n\t\t'http://api.com')\n\n\tconst { isFetching, error, data } = useFetch(\n\t\turl,\n\t\t{ initialData: { results: [] }, refetch: true })\n\t\t.get()\n\t\t.json()\n\n\treturn {\n\t\tdata,\n\t\tsearch, //\n\t\tfilters,// changing this now will trigger the url re-build\n\t\tqueryParams,\n\t\tpathVariables,\n\t\thash,\n\t\tpath,\n\t\turl\n\t}\n}\n\n```\n\n## License\n\nThis is licensed under an MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frainxh11%2Fvue-useurl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frainxh11%2Fvue-useurl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frainxh11%2Fvue-useurl/lists"}