{"id":19736510,"url":"https://github.com/soc221b/vue-route-props","last_synced_at":"2025-04-30T04:32:07.282Z","repository":{"id":40793825,"uuid":"245803175","full_name":"soc221b/vue-route-props","owner":"soc221b","description":"A plugin that can automatically bind Vue-router query to Vue instance.","archived":true,"fork":false,"pushed_at":"2024-06-16T04:19:01.000Z","size":859,"stargazers_count":1,"open_issues_count":15,"forks_count":1,"subscribers_count":1,"default_branch":"develop","last_synced_at":"2025-04-04T22:29:10.821Z","etag":null,"topics":["props","query","route","stateful-route","validation","vue","vue-router"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/vue-route-props-vbuj1?fontsize=14\u0026hidenavigation=1\u0026theme=dark","language":"JavaScript","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/soc221b.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":"2020-03-08T11:38:12.000Z","updated_at":"2025-01-18T12:23:27.000Z","dependencies_parsed_at":"2023-02-03T22:46:42.519Z","dependency_job_id":null,"html_url":"https://github.com/soc221b/vue-route-props","commit_stats":null,"previous_names":["soc221b/vue-route-props","iendeavor/vue-route-props"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soc221b%2Fvue-route-props","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soc221b%2Fvue-route-props/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soc221b%2Fvue-route-props/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soc221b%2Fvue-route-props/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/soc221b","download_url":"https://codeload.github.com/soc221b/vue-route-props/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250640541,"owners_count":21463722,"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":["props","query","route","stateful-route","validation","vue","vue-router"],"created_at":"2024-11-12T01:07:21.583Z","updated_at":"2025-04-30T04:32:07.022Z","avatar_url":"https://github.com/soc221b.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-route-props\n\nAutomatically bind vue-router query to vm, APIs are mostly same as the Vue props.\n\n[![npm version](https://img.shields.io/npm/v/vue-route-props)](https://www.npmjs.com/package/vue-route-props)\n[![CI](https://github.com/iendeavor/vue-route-props/workflows/CI/badge.svg?branch=develop)](https://github.com/iendeavor/vue-route-props/actions?query=branch%3Adevelop)\n[![codecov](https://codecov.io/gh/iendeavor/vue-route-props/branch/develop/graph/badge.svg)](https://codecov.io/gh/iendeavor/vue-route-props)\n![visitors](https://visitor-badge.glitch.me/badge?page_id=iendeavor.vue-route-props)\n\n## Install\n\n```bash\nnpm install vue-route-props\nyarn add vue-route-props\n```\n\n## Why\n\nIn order to make route `stateful`(e.g, let user to copy one route, and paste in another tab), in this way you need to pass `query` instead of [params](https://router.vuejs.org/guide/essentials/passing-props.html#boolean-mode). vue-route-props is implemented it which is much of the same in [vue props](https://vuejs.org/v2/guide/components-props.html).\n\n## Usage\n\n[![Edit vue-route-props](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-route-props-vbuj1?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n```javascript\nimport Vue from \"vue\";\nimport VueRouter from \"vue-router\";\nimport * as VueRouteProps from \"vue-route-props\";\n\nVue.use(VueRouter);\nVue.use(VueRouteProps);\n\nnew Vue({\n  routeProps: {\n    optional: {\n      type: String,\n      default: \"an optional routeProp with default value\",\n    },\n    required: {\n      required: true,\n      type: String,\n    },\n    multiple: {\n      type: [String, Array, Object],\n    },\n    validator: {\n      validator(value) {\n        return value === \"with custom validator\";\n      },\n    },\n  },\n});\n```\n\n## API\n\n### vm\n\n#### Prop Types\n\nIn order to keep values' type, you need to **ALWAYS** use `JSON.stringify` to insert query:\n\n```javascript\nthis.$router.push({\n  query: {\n    willBeString: 0, // wrong, there will be an error occurs\n    willBeNumber: JSON.stringify(0), // expected, the willBeNumber is bind with 0 now\n  },\n});\n```\n\n### Options\n\n#### Inspect mode\n\nSince we bind routeProps to vm's root instead of data/computed, and so on, You cannot use the vue-dev-tools to inspect what value it is.\n\nIn order to inspect routeProps, you can enable inspect mode. we will log all routeProps when it is updated.\n\n```javascript\nVue.use(VueRouteProps, {\n  inspect: true,\n});\n```\n\n```javascript\nnew Vue({\n  routeProps: {\n    prop: {\n      type: String,\n      default: \"a default value\",\n    },\n  },\n});\n\n/*\nconsole:\n\n[VueRouteProps info]: {\n  prop: \"a default value\"\n}\n*/\n```\n\n### Debug mode\n\nIn general, we log errors while environment is not in production mode. you can override it with debug mode.\n\n```javascript\nVue.use(VueRouteProps, {\n  debug: true,\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoc221b%2Fvue-route-props","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsoc221b%2Fvue-route-props","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoc221b%2Fvue-route-props/lists"}