{"id":20008115,"url":"https://github.com/chantouch/vue-vlidator","last_synced_at":"2025-05-04T19:34:30.731Z","repository":{"id":38258570,"uuid":"271192885","full_name":"Chantouch/vue-vlidator","owner":"Chantouch","description":"To integrate with client and server-side validation logical with VueJS.","archived":false,"fork":false,"pushed_at":"2022-12-13T03:18:10.000Z","size":6921,"stargazers_count":6,"open_issues_count":18,"forks_count":1,"subscribers_count":2,"default_branch":"develop","last_synced_at":"2025-04-20T19:16:31.899Z","etag":null,"topics":["client-side","laravel","proxy","ruby","server-side","validator","vue-components","vuejs"],"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/Chantouch.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-06-10T06:05:38.000Z","updated_at":"2022-01-03T02:19:27.000Z","dependencies_parsed_at":"2023-01-28T05:45:56.584Z","dependency_job_id":null,"html_url":"https://github.com/Chantouch/vue-vlidator","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chantouch%2Fvue-vlidator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chantouch%2Fvue-vlidator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chantouch%2Fvue-vlidator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chantouch%2Fvue-vlidator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Chantouch","download_url":"https://codeload.github.com/Chantouch/vue-vlidator/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252389936,"owners_count":21740233,"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":["client-side","laravel","proxy","ruby","server-side","validator","vue-components","vuejs"],"created_at":"2024-11-13T07:08:30.112Z","updated_at":"2025-05-04T19:34:30.340Z","avatar_url":"https://github.com/Chantouch.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Vlidator\n\n[![Latest Version on NPM](https://img.shields.io/npm/v/vue-vlidator.svg?style=flat-square)](https://npmjs.com/package/vue-vlidator)\n[![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE.md)\n[![npm](https://img.shields.io/npm/dt/vue-vlidator.svg?style=flat-square)](https://npmjs.com/package/vue-vlidator)\n[![npm](https://img.shields.io/npm/dm/vue-vlidator.svg?style=flat-square)](https://npmjs.com/package/vue-vlidator)\n\n## Installation\n\n### Using npm\n\n```npm\nnpm install vue-vlidator\n```\n\n### Using yarn\n\n```yarn\nyarn add vue-vlidator\n```\n\n## Use with NuxtJS\n\nPut it on top of `nuxt-i18n`\n\n``nuxt.config.js``\n```js\n  export default {\n    modules: [\n        'vue-vlidator/nuxt',\n        'nuxt-i18n',\n      ],\n    vlidator: {}\n  }\n```\n\n### Vue plugins\n\n```js\nimport Vue from 'vue';\nimport Validator from 'vue-vlidator';\n\nconst options = { locale: 'km', customAttributes: {}, customMessages: {} }\n\nVue.use(Validator, options);\n```\n\n#### Available options\n1. locale {string}\n2. customMessages {Object}\n3. customAttributes {Object}\n\n#### Example in Vue component\n```vue\n\u003ctemplate\u003e\n    \u003cb-form @submit.prevent=\"onSubmit\"\u003e\n        \u003cb-form-group\n                id=\"fieldset-1\"\n                description=\"Let us know your name.\"\n                label=\"Enter your name\"\n                label-for=\"input-1\"\n                :state=\"$vlidator.errors.has('form.name')\"\n                :invalid-feedback=\"$vlidator.errors.first('form.name')\"\n        \u003e\n            \u003cb-form-input\n                    id=\"input-1\"\n                    v-model=\"form.name\"\n                    :state=\"!$vlidator.errors.has('form.name')\"\n                    trim\n            /\u003e\n        \u003c/b-form-group\u003e\n        \u003cb-form-group\n                id=\"fieldset-2\"\n                description=\"Let us know your email.\"\n                label=\"Enter your email\"\n                label-for=\"input-2\"\n                :state=\"$vlidator.errors.has('form.email')\"\n                :invalid-feedback=\"$vlidator.errors.first('form.email')\"\n        \u003e\n            \u003cb-form-input\n                    id=\"input-2\"\n                    v-model=\"form.email\"\n                    :state=\"!$vlidator.errors.has('form.email')\"\n                    type=\"email\"\n                    trim\n            /\u003e\n        \u003c/b-form-group\u003e\n        \u003cb-form-group\n                id=\"fieldset-3\"\n                description=\"Let us know your age.\"\n                label=\"Enter your age\"\n                label-for=\"input-3\"\n                :state=\"$vlidator.errors.has('form.age')\"\n                :invalid-feedback=\"$vlidator.errors.first('form.age')\"\n        \u003e\n            \u003cb-form-input\n                    id=\"input-3\"\n                    v-model.number=\"form.age\"\n                    :state=\"!$vlidator.errors.has('form.age')\"\n                    type=\"number\"\n                    trim\n            /\u003e\n        \u003c/b-form-group\u003e\n        \u003cb-button type=\"submit\" variant=\"primary\" :disabled=\"$vlidator.errors.any()\"\u003e\n            Submit\n        \u003c/b-button\u003e\n    \u003c/b-form\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    name: \"HomePage\",\n    data () {\n      return {\n        form: {\n          name: 'John',\n          email: 'johndoe@gmail.com',\n          age: 18\n        }\n      }\n    },\n    vlidator: {\n      rules: {\n        form: {\n          name: 'required|min:4',\n          email: 'required|email',\n          age: 'required|numeric|min:18|max:50'\n        }\n      }\n    },\n    methods: {\n      onSubmit () {\n        if (!this.validate()) return\n        alert(JSON.stringify(this.form))\n      }\n    },\n  }\n\u003c/script\u003e\n```\n\n---\n\n### License\n\nCopyright \u0026copy; 2020 Chantouch Sek\n\nReleased under the MIT license\n\n### Credits\n\nvue-vlidator re-write by Chantouch Sek\n\nE-Mail: [chantouchsek.cs83@gmail.com](mailto:chantouchsek.cs93@gmail.com)\n\nTwitter [@DevidCs83](https://twitter.com/DevidCs83)\n\nWebsite: [chantouch.me](https://chantouch.me)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchantouch%2Fvue-vlidator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchantouch%2Fvue-vlidator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchantouch%2Fvue-vlidator/lists"}