{"id":21879023,"url":"https://github.com/tato30/vue-query-param","last_synced_at":"2026-04-16T19:02:46.112Z","repository":{"id":223061671,"uuid":"758755663","full_name":"TaTo30/vue-query-param","owner":"TaTo30","description":"Vue directive for bind a model with a URL's query param","archived":false,"fork":false,"pushed_at":"2024-03-26T21:37:32.000Z","size":81,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-24T17:55:16.558Z","etag":null,"topics":["directive","query-param","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TaTo30.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-02-17T02:01:51.000Z","updated_at":"2025-02-28T09:24:21.000Z","dependencies_parsed_at":"2024-02-18T02:22:37.270Z","dependency_job_id":"5cecce6c-b13f-47eb-91e7-c5613e1d458f","html_url":"https://github.com/TaTo30/vue-query-param","commit_stats":null,"previous_names":["tato30/vue-query-param"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/TaTo30/vue-query-param","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TaTo30%2Fvue-query-param","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TaTo30%2Fvue-query-param/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TaTo30%2Fvue-query-param/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TaTo30%2Fvue-query-param/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TaTo30","download_url":"https://codeload.github.com/TaTo30/vue-query-param/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TaTo30%2Fvue-query-param/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31899986,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T18:22:33.417Z","status":"ssl_error","status_checked_at":"2026-04-16T18:21:47.142Z","response_time":69,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["directive","query-param","vue"],"created_at":"2024-11-28T08:14:34.706Z","updated_at":"2026-04-16T19:02:46.092Z","avatar_url":"https://github.com/TaTo30.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-query-param\n\n## Introduction\n\n`vue-query-param` is a vue directive that binds and syncs a `ref` model to the URL's query paramaters.\n\n![vue-query-param(2)](https://github.com/TaTo30/vue-query-param/assets/57086025/28d9babc-90c0-4dad-a858-9c6c32345887)\n\n\n## Installation\n\n```console\nnpm i vue-query-param\n```\n\n```console\nyarn add vue-query-param\n```\n\n## Basic Usage\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { vQueryParam } from \"vue-query-param\";\n\nconst filter = ref(\"\")\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cinput v-model=\"filter\" v-query-param:filter=\"filter\" /\u003e\n\u003c/template\u003e\n```\n\n## Hook Arguments\n\n### Directive argument\n\n`arg` must be the *key* of the model in the URL, for example, this code:\n```vue\n\u003cinput v-model=\"search\" v-query-param:q=\"search\" /\u003e\n\u003cinput v-model=\"filter\" v-query-param:filter=\"filter\" /\u003e\n```\nWill produce this URL `https://\u003cdomain\u003e/\u003csubpath\u003e/?q=\u003cvalue\u003e\u0026filter=\u003cvalue\u003e`\n\n### Directive value\n\nIn the most basic cases you only need to use a `ref` directly in the directive value but for more complex cases you can use an object with the following options:\n\n```js\n{\n    model: ref_property,\n    format: (val) =\u003e val.toString(),\n    callback: (val) =\u003e ref_property = val\n}\n```\n\n#### model\n\nThe `ref` field that `v-query-param` will bind on the URL.\n\n#### format\n\nA `function` to format the model value, useful when the value is not a primitive type or just masking the value when is set in the URL.\n\n#### callback\n\nA `function` that is called during the `created` hook, use this if you want to set at your `ref` field the current URL value before mounting the template.\n\n## Examples \n\nA common use case could be a search input, usually you want to store in URL the user's input, so when the page is reloaded you still have the user's input.\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { vQueryParam } from \"vue-query-param\";\n\nconst search = ref(\"\")\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cinput v-model=\"search\" v-query-param:q=\"search\" /\u003e\n\u003c/template\u003e\n```\n\nFor complex types as dates, you can use the `format` and `callback` options so you can store in URL the date in a specific format and retrieve it again during the `created` hook by parsing the formatted value.\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { vQueryParam } from \"vue-query-param\";\n\nconst date = ref()\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cVueDatePicker v-query-param:datefrom=\"{\n      model: date,\n      format: (val: Date) =\u003e val.toLocaleDateString(),\n      callback: (val: string) =\u003e date = new Date(val)\n    }\" v-model=\"date\"/\u003e \n  \u003c/div\u003e\n\u003c/template\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftato30%2Fvue-query-param","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftato30%2Fvue-query-param","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftato30%2Fvue-query-param/lists"}