{"id":13937998,"url":"https://github.com/BlackMix/vue-genesis-forms","last_synced_at":"2025-07-20T00:31:38.094Z","repository":{"id":57396045,"uuid":"140072427","full_name":"BlackMix/vue-genesis-forms","owner":"BlackMix","description":"📚 Easily create forms in Vue.js ","archived":true,"fork":false,"pushed_at":"2020-09-01T21:30:22.000Z","size":179,"stargazers_count":60,"open_issues_count":1,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-26T03:18:30.405Z","etag":null,"topics":["forms","genesis","vue"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vue-genesis-forms","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BlackMix.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-07T09:52:39.000Z","updated_at":"2025-02-28T03:02:31.000Z","dependencies_parsed_at":"2022-09-18T12:03:37.328Z","dependency_job_id":null,"html_url":"https://github.com/BlackMix/vue-genesis-forms","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/BlackMix/vue-genesis-forms","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackMix%2Fvue-genesis-forms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackMix%2Fvue-genesis-forms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackMix%2Fvue-genesis-forms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackMix%2Fvue-genesis-forms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BlackMix","download_url":"https://codeload.github.com/BlackMix/vue-genesis-forms/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackMix%2Fvue-genesis-forms/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266048515,"owners_count":23868738,"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":["forms","genesis","vue"],"created_at":"2024-08-07T23:04:09.636Z","updated_at":"2025-07-20T00:31:33.071Z","avatar_url":"https://github.com/BlackMix.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"# 📚 vue-genesis-forms ![](https://scrutinizer-ci.com/g/BlackMix/vue-genesis-forms/badges/build.png?b=master) ![](https://img.shields.io/npm/dm/vue-genesis-forms.svg)\n\n` 🔥 support working: `\n* input, textarea, switch, select, colorpick, datepicker\n\n` 🎨 next `\n* mult select, toggle, radio\n\n# simple Demo\n[Link](https://codesandbox.io/s/j1z40p4k7w)\n\n`example usage:`\nApp.vue\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003capp-form v-bind=\"{fields, data}\" @form~input=\"input\" @form~valid=\"valid\"\u003e\u003c/app-form\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { AppForm, filter, field } from 'vue-genesis-forms'\n\nexport const fields = (scope) =\u003e {\n  return filter(\n    [\n      field('name', 'Name').$text().$scopes(['settings']).$form({width: 12}).$validate('required').$render(),\n      field('email', 'E-mail').$text().$scopes(['settings']).$form({width: 6})\n        .$validate('email', true).$required().$render(),\n      field('color', 'Color Nick').$color('rgba').$scopes(['settings']).$form({width: 3}).$render(),\n      field('date', 'Date').$date().$scopes(['settings']).$form({width: 3}).$render(),\n      field('about', 'About you').$textarea('max', 200).$scopes(['settings']).$form({width: 12, minHeight: '100px'})\n        .$validate('maxLength', 20).$render(),\n      field('things', 'Things').$select(select, false).$scopes(['settings']).$form({width: 3}).$render(),\n      field('notifications', 'Active Messages').$switch(1, 0).$scopes(['settings']).$form({width: 3}).$render(),\n      field('logs', 'Active Logs').$switch(1, 0).$scopes(['settings']).$form({width: 3}).$render(),\n      field('sockets', 'Active Sockets').$switch(1, 0).$scopes(['settings']).$form({width: 3}).$render()\n    ],\n    scope\n  )\n}\n\nexport const select = [\n  {label: 'test 1', value: 'test1'},\n  {label: 'test 2', value: 'test2'}\n]\n\nexport default {\n  name: 'app',\n  components: { AppForm },\n  data: () =\u003e ({\n    fields: fields('settings'), // settings is scope\n    ok: false,\n    errors: {},\n    data: {}\n  }),\n  methods: {\n    input (data) {\n      this.data = data\n    },\n    valid (status, errors) {\n      this.ok = status === true\n      this.errors = errors\n    }\n  },\n  mounted () {\n    this.data = {\n      name: 'Vue.js',\n      email: 'test@test.com',\n      things: 'test2',\n      about: 'I love Vue.js \u003c3',\n      notifications: 1,\n      sockets: 0,\n      logs: 0\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n# Result:\n![image](https://raw.githubusercontent.com/BlackMix/vue-genesis-forms/master/result.jpg)\n\n# Credits:\n*Genesis* [Link](https://github.com/phpzm/genesis)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBlackMix%2Fvue-genesis-forms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBlackMix%2Fvue-genesis-forms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBlackMix%2Fvue-genesis-forms/lists"}