{"id":15368868,"url":"https://github.com/fratzinger/vue-router-parse-props","last_synced_at":"2025-07-17T23:11:18.533Z","repository":{"id":43275032,"uuid":"410939500","full_name":"fratzinger/vue-router-parse-props","owner":"fratzinger","description":"Parse vue-router props to params","archived":false,"fork":false,"pushed_at":"2025-03-06T22:14:10.000Z","size":378,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-08T23:55:38.303Z","etag":null,"topics":["parser","props","vue-router"],"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/fratzinger.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-09-27T15:26:24.000Z","updated_at":"2025-03-06T22:14:15.000Z","dependencies_parsed_at":"2025-05-20T14:43:02.888Z","dependency_job_id":"46ced845-3cfc-468a-8413-9708db9c3186","html_url":"https://github.com/fratzinger/vue-router-parse-props","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/fratzinger/vue-router-parse-props","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fratzinger%2Fvue-router-parse-props","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fratzinger%2Fvue-router-parse-props/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fratzinger%2Fvue-router-parse-props/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fratzinger%2Fvue-router-parse-props/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fratzinger","download_url":"https://codeload.github.com/fratzinger/vue-router-parse-props/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fratzinger%2Fvue-router-parse-props/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265677855,"owners_count":23810058,"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":["parser","props","vue-router"],"created_at":"2024-10-01T13:32:38.825Z","updated_at":"2025-07-17T23:11:18.500Z","avatar_url":"https://github.com/fratzinger.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-router-parse-props\n\n[![npm](https://img.shields.io/npm/v/vue-router-parse-props)](https://www.npmjs.com/package/vue-router-parse-props)\n[![GitHub Workflow Status](https://img.shields.io/github/workflow/status/fratzinger/vue-router-parse-props/Node.js%20CI)](https://github.com/fratzinger/vue-router-parse-props/actions?query=branch%3Amain++)\n[![Code Climate maintainability](https://img.shields.io/codeclimate/maintainability/fratzinger/vue-router-parse-props)](https://codeclimate.com/github/fratzinger/vue-router-parse-props)\n[![Code Climate coverage](https://img.shields.io/codeclimate/coverage/fratzinger/vue-router-parse-props)](https://codeclimate.com/github/fratzinger/vue-router-parse-props)\n[![libraries.io](https://img.shields.io/librariesio/release/npm/vue-router-parse-props)](https://libraries.io/npm/vue-router-parse-props)\n[![npm](https://img.shields.io/npm/dm/vue-router-parse-props)](https://www.npmjs.com/package/vue-router-parse-props)\n[![GitHub license](https://img.shields.io/github/license/fratzinger/vue-router-parse-props)](https://github.com/fratzinger/vue-router-parse-props/blob/master/LICENSE)\n\n## Installation\n\n```\nnpm i vue-router-parse-props\n```\n\n## About\n\nParams of vue-router coming from the url are strings. Ids as props (eg. `userId`) commonly are numbers. So you need an easy way to cast string values to number values. That's where `vue-router-parse-props` comes into play.\nThe parser takes an parser-object and returns a function. For more information see: https://router.vuejs.org/guide/essentials/passing-props.html#function-mode\n\n- written in typescript\n- compatible with `vue-router@3` and `vue-router@4`\n- parse to Number/String/Date\n- parse route.params and/or route.query\n\nOriginal idea from: https://stackoverflow.com/a/63897213\n\n## Usage\n\n```ts\n// src/router/index.ts\nimport propsParser from 'vue-router-parse-props'\nimport { parse } from 'date-fns'\n\nconst router = new Router({\n  base: process.env.BASE_URL,\n  mode: useHistory ? 'history' : 'hash',\n  routes: [\n    {\n      path: ':day/:userId',\n      name: 'UserProfile',\n      component: () =\u003e import('@/components/UserProfile.vue'),\n      props: paramsToPropsCaster({ \n        userId: Number,\n        day: (val: string): Date =\u003e parse(val, 'yyyy-MM-dd', new Date()),\n        // keys starting with 'query.${}' look at 'route.query.${}'\n        'query.q': {\n          type: Number,\n          propKey: 'searchId'\n        },\n        // keys starting with 'params.${}' look at 'route.params${}' explicitly\n        'params.ids': {\n          type: (ids) =\u003e ids.map(id =\u003e parseInt(id)),\n          propKey: 'ids'\n        }\n      })\n    }\n  ]\n});\n```\n\n## Testing\n\nSimply run `npm test` and all your tests in the `test/` directory will be run. It has full support for *Visual Studio Code*. You can use the debugger to set breakpoints.\n\n## License\n\nLicensed under the [MIT license](LICENSE).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffratzinger%2Fvue-router-parse-props","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffratzinger%2Fvue-router-parse-props","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffratzinger%2Fvue-router-parse-props/lists"}