{"id":16439145,"url":"https://github.com/posva/vue-coerce-props","last_synced_at":"2025-05-07T04:10:33.527Z","repository":{"id":46745749,"uuid":"130079260","full_name":"posva/vue-coerce-props","owner":"posva","description":"Coerce props to whatever you want","archived":false,"fork":false,"pushed_at":"2021-09-27T22:21:12.000Z","size":3203,"stargazers_count":72,"open_issues_count":14,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-21T01:49:34.436Z","etag":null,"topics":["coerce","props","utility","vue"],"latest_commit_sha":null,"homepage":null,"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/posva.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":".github/funding.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"posva","custom":"https://www.paypal.me/posva"}},"created_at":"2018-04-18T14:58:13.000Z","updated_at":"2024-01-19T20:26:57.000Z","dependencies_parsed_at":"2022-08-30T04:21:37.395Z","dependency_job_id":null,"html_url":"https://github.com/posva/vue-coerce-props","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Fvue-coerce-props","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Fvue-coerce-props/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Fvue-coerce-props/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Fvue-coerce-props/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/posva","download_url":"https://codeload.github.com/posva/vue-coerce-props/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252810273,"owners_count":21807759,"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":["coerce","props","utility","vue"],"created_at":"2024-10-11T09:08:09.808Z","updated_at":"2025-05-07T04:10:33.479Z","avatar_url":"https://github.com/posva.png","language":"JavaScript","funding_links":["https://github.com/sponsors/posva","https://www.paypal.me/posva"],"categories":[],"sub_categories":[],"readme":"# VueCoerceProps [![Build Status](https://img.shields.io/circleci/project/posva/vue-coerce-props/master.svg)](https://circleci.com/gh/posva/vue-coerce-props) [![npm package](https://img.shields.io/npm/v/vue-coerce-props.svg)](https://www.npmjs.com/package/vue-coerce-props) [![coverage](https://img.shields.io/codecov/c/github/posva/vue-coerce-props.svg)](https://codecov.io/github/posva/vue-coerce-props) [![thanks](https://img.shields.io/badge/thanks-%E2%99%A5-ff69b4.svg)](https://github.com/posva/thanks)\n\n\u003e Transform/Coerce props values to whatever you want\n\n## Installation\n\n```sh\nnpm install vue-coerce-props\n```\n\nInstall the mixin globally or locally:\n\n```js\n// main.js\nimport CoercePropsMixin from 'vue-coerce-props'\n\nVue.mixin(CoercePropsMixin)\n```\n\n```js\n// MyComponent.vue\nimport CoercePropsMixin from 'vue-coerce-props'\n\nexport default {\n  // other options\n  mixins: [CoercePropsMixin],\n}\n```\n\n## Usage\n\nTo coerce a prop, add a `coerce` function to any prop:\n\n```js\nconst SpaceTrimmer = {\n  props: {\n    text: {\n      type: String,\n      // this function is called by VueCoerceProps\n      coerce: text =\u003e text.trim(),\n    },\n    style: {\n      type: String,\n      coerce(style) {\n        // you can access the context as in a computed property\n        // NEVER use this.$coerced here as it would create an infinite loop\n        // if you use things coming from data, you may consider using\n        // a computed property instead\n        return this.possibleValues.includes(style) ? style : 'default'\n      },\n    },\n  },\n}\n```\n\nVueCoerceProps will inject a computed property named `$coerced` containing every single coerced prop:\n\n```html\n\u003cp\u003e\n  \u003cspan\u003eOriginal value: {{ text }}\u003c/span\u003e\n  \u003cspan\u003eCoerced value: {{ $coerced.text }}\u003c/span\u003e\n\u003c/p\u003e\n```\n\n## FAQ\n\n* Q: Why not passing component props as second argument?\n  A: That would make every coerce value depend on every prop. At the end `$coerced` is just a computed property\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposva%2Fvue-coerce-props","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fposva%2Fvue-coerce-props","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposva%2Fvue-coerce-props/lists"}