{"id":22485351,"url":"https://github.com/rubnvp/vue-props-validation","last_synced_at":"2025-08-02T18:32:12.564Z","repository":{"id":57396544,"uuid":"347648735","full_name":"rubnvp/vue-props-validation","owner":"rubnvp","description":"Vue props validation logic extracted for nested validation in object and arrays.","archived":false,"fork":false,"pushed_at":"2021-03-20T00:15:12.000Z","size":98,"stargazers_count":21,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-29T11:02:29.661Z","etag":null,"topics":[],"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/rubnvp.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":"2021-03-14T13:46:32.000Z","updated_at":"2024-07-28T20:01:56.000Z","dependencies_parsed_at":"2022-08-27T12:42:08.299Z","dependency_job_id":null,"html_url":"https://github.com/rubnvp/vue-props-validation","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubnvp%2Fvue-props-validation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubnvp%2Fvue-props-validation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubnvp%2Fvue-props-validation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubnvp%2Fvue-props-validation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rubnvp","download_url":"https://codeload.github.com/rubnvp/vue-props-validation/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228499950,"owners_count":17929988,"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":[],"created_at":"2024-12-06T17:12:26.822Z","updated_at":"2024-12-06T17:14:18.847Z","avatar_url":"https://github.com/rubnvp.png","language":"JavaScript","funding_links":[],"categories":["Utilities [🔝](#readme)","JavaScript","Components \u0026 Libraries"],"sub_categories":["Utilities"],"readme":"# vue-props-validation\nVue props validation logic extracted for nested validation in object and arrays.\n\n## Install\n\n```bash\nnpm install vue-props-validation\n```\n\n## Usage\nYou can write validations for object attributes and array elements in the Vue syntax way using the validator attribute. You can also validate any other object or array outside vue props.\n\n### Objects validation\n```js\nimport {objectValidator} from 'vue-props-validation';\n\nprops: {\n  email: String,\n  user: {\n    type: Object,\n    validator: objectValidator({\n      id: Number,\n      firstName: String,\n      lastName: {type: String, required: false},\n      age: Number,\n    }),\n  },\n}\n```\n\n### Arrays validation\n```js\nimport {arrayValidator} from 'vue-props-validation';\n\nprops: {\n  names: {\n    type: Array,\n    validator: arrayValidator(String),\n  },\n  emails: {\n    type: Array,\n    validator: arrayValidator({\n      type: String,\n      validator: email =\u003e email.includes('@'),\n    }),\n  },\n}\n```\n\n### Combined use of both validators\nYou can nest validators as much as you want.\n```js\nimport {arrayValidator, objectValidator} from 'vue-props-validation';\n\nprops: {\n  animals: {\n    type: Array,\n    validator: arrayValidator({\n      type: Object,\n      validator: objectValidator({\n        id: [String, Number],\n        name: String,\n        age: Number,\n        isCat: Boolean,\n        vaccinationDates: {\n          type: Array,\n          required: false,\n          validator: arrayValidator([Date, String, Number]),\n        }\n      }),\n    }),\n  },\n}\n```\n\n### API response validation example\n```js\nimport {arrayValidator, objectValidator} from 'vue-props-validation';\n\nfetch('https://raw.githubusercontent.com/rubnvp/vue-pokedex/master/data/pokemons.json') \n  .then(response =\u003e response.json())\n  .then(pokemons =\u003e {\n      arrayValidator({ // this will return false and log an error to the console if it fails\n        type: Object,\n        validator: objectValidator({\n          id: Number,\n          name: String,\n          types: Array,\n        }),\n      })(pokemons);\n  });\n```\n\n## Config\n### enabled\nYou can enable or disable all validators in order to skip validations in production enviroments and avoid possible performance issues:\n```js\n// at main.js\nimport {setConfig} from 'vue-props-validation';\n\nsetConfig({enabled: process.env.NODE_ENV !== 'production'});\n```\n### logLevel\nAlso you can choose the log level for validation message errors between:\n- `none`: no logs\n- `warn`: logs with console.warn\n- `error`: logs with console.error (by default)\n- `throw`: logs in exceptions\n```js\n// at main.js\nimport {setConfig} from 'vue-props-validation';\n\nsetConfig({logLevel: 'warn'});\n```\n\n## Usage from script tag\nYou can point to unpkg.com. An object called VueProps with the functions will be added to the global scope.\n```html\n\u003cscript src=\"https://unpkg.com/vue-props-validation\"\u003e\u003c/script\u003e\n```\n\n## Notes\n Remember that vue validators are not executed in production enviroments. Like in Vue, the type can be any native or custom constructor: String, Number, Boolean, Array, Object, Date, Function, Symbol, BigInt, etc. The attribute `default` is not supported in order to avoid mutating props.\n\n## Todo roadmap\n- Option for local config to overwrite global config.\n- Include a plugin to avoid imports on every component.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frubnvp%2Fvue-props-validation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frubnvp%2Fvue-props-validation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frubnvp%2Fvue-props-validation/lists"}