{"id":28391387,"url":"https://github.com/wearebraid/vue-formulate-legacy","last_synced_at":"2025-07-22T13:03:55.789Z","repository":{"id":41820782,"uuid":"119129454","full_name":"wearebraid/vue-formulate-legacy","owner":"wearebraid","description":"The easiest way to build forms in Vue with validation and vuex support.","archived":false,"fork":false,"pushed_at":"2022-12-09T04:53:47.000Z","size":1021,"stargazers_count":7,"open_issues_count":14,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-25T21:39:01.385Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/wearebraid.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-27T03:39:29.000Z","updated_at":"2020-03-05T19:43:57.000Z","dependencies_parsed_at":"2023-01-25T10:45:40.834Z","dependency_job_id":null,"html_url":"https://github.com/wearebraid/vue-formulate-legacy","commit_stats":null,"previous_names":[],"tags_count":50,"template":false,"template_full_name":null,"purl":"pkg:github/wearebraid/vue-formulate-legacy","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wearebraid%2Fvue-formulate-legacy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wearebraid%2Fvue-formulate-legacy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wearebraid%2Fvue-formulate-legacy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wearebraid%2Fvue-formulate-legacy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wearebraid","download_url":"https://codeload.github.com/wearebraid/vue-formulate-legacy/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wearebraid%2Fvue-formulate-legacy/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266499015,"owners_count":23938771,"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","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":"2025-05-31T09:11:53.900Z","updated_at":"2025-07-22T13:03:55.780Z","avatar_url":"https://github.com/wearebraid.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Formulate\n---------------\n[![Build Status](https://travis-ci.org/wearebraid/vue-formulate.svg?branch=master)](https://travis-ci.org/wearebraid/vue-formulate)\n[![Current Version](https://img.shields.io/npm/v/vue-formulate.svg)](https://www.npmjs.com/package/vue-formulate)\n[![License](https://img.shields.io/github/license/wearebraid/vue-formulate.svg)](https://github.com/wearebraid/vue-formulate/blob/master/LICENSE.txt)\n\n\n\u003e Vue Formulate has been re-written in version 2! This version will no longer be maintained, please use [@braid/vue-formulate](https://www.npmjs.com/package/@braid/vue-formulate) instead.\n\n--------------------------------------------------------------------------------\n\n### What is it?\n\nVue Formulate is a [Vue](https://vuejs.org/) plugin that exposes an elegant\nmechanism for building and validating forms with a centralized data store.\n\n### Show and tell\n\nYou'll find an easy to use example, in [the example directory](https://github.com/wearebraid/vue-formulate/tree/master/example)\nas well as a live demo available at: [demo.vueformulate.com](https://demo.vueformulate.com).\n\n### Get Started\n\n#### Download\nFirst download the `vue-formulate` package from npm:\n\n```sh\nnpm install vue-formulate\n```\n\nIf you want to use ES6 features in your project\n(and this readme assumes you do), then you'll also\nneed Babel:\n\n```sh\nbabel-preset-env\nbabel-preset-stage-2\n```\n\nMany Vue/Vuex projects require Babel’s `stage-2` preset.\nBest practice is to include a `.babelrc` in the project\nroot:\n\n```sh\n{\n  \"presets\": [\n    [\"env\", { \"modules\": false }],\n    \"stage-2\"\n  ]\n}\n```\n\n\n#### Installation\n\nInstall `vue-formulate` like any other vue plugin:\n\n```js\nimport Vue from 'vue'\nimport formulate from 'vue-formulate'\n\nVue.use(formulate)\n```\n#### Vuex\n`vue-formulate` needs to be linked to your vuex store. Vuex can be\nconfigured as a single root store, or as namespaced modules and `vue-formualte`\ncan work with either setup.\n\n**Vuex Module**\n\n```js\nimport {formulateModule} from 'vue-formulate'\n\nexport default formulateModule('namespace')\n```\n\nUsing a namespaced vuex module is the recommended installation method. Just be\nsure to replace `'namespace'` with the namespace of your vuex module.\n\nAdditionally, when using a vuex namespace, you _must_ also pass the namespace\nin the Vue plugin installation call:\n\n```js\nVue.use(formulate, {vuexModule: 'namespace'})\n```\n\nAlternatively, you can install `vue-formulate`'s store elements to your vuex\nroot store:\n\n**Root Store**\n\n```js\nimport Vue from 'vue'\nimport Vuex from 'vuex'\nimport {formulateState, formulateGetters, formulateMutations} from 'vue-formulate'\n\nVue.use(Vuex)\n\nconst state = () =\u003e ({\n  // your own state data can live next to vue-formulate's data\n  // Note: formulateState is a curried function.\n  your: 'data',\n  ...formulateState()()\n})\n\nconst getters = {\n  // Your own getters can live next to vue-formulate's getters\n  yourGetter (state) {\n    return state.your\n  },\n  ...formulateGetters()\n}\n\nconst mutations = {\n  // Your own mutations can live next to vue-formulate's mutations\n  setYour (state, payload) {\n    state.your = payload\n  },\n  ...formulateMutations()\n}\n\nexport default new Vuex.Store({\n  state,\n  getters,\n  mutations\n})\n```\n\n### Usage\n\n`vue-formulate` automatically registers two components `formulate` and\n`formulate-element`. These two elements are able to address most of your form\nbuilding needs. Here's a simple example:\n\n```html\n\u003cformulate name=\"registration\"\u003e\n  \u003cformulate-element\n    name=\"email\"\n    type=\"email\"\n  /\u003e\n  ...more formulate-elements\n\u003c/formulate\u003e\n```\n\nYou can think of `\u003cformulate\u003e` elements a little bit like traditional\n`\u003cform\u003e` tags. You _must_ wrap your `formulate-element` components\nin a `\u003cformulate\u003e` component. The `formulate` component has a single\nrequired prop `name` which creates the form’s key in the vuex store.\n\nAll `formulate-element` components nested inside a `\u003cformulate\u003e`\ncomponent will automatically commit mutations directly to the\nstore. The store becomes a live representation of all your form’s\nvalues.\n\nThe `formulate-element` component is a powerful component which handles field\ngeneration.\n\n### Validation Rules\n\nThere are several built-in validation methods and you can easily add your own as well.\n\nRule      |  Arguments\n----------|---------------\nrequired  | *none*\nemail     | *none*\nconfirmed | confirmation field\nnumber    | *none*\n\nYou can add as many validation rules as you want to each `formulate-element`,\nsimply chain your rules with pipes `|'. Additional arguments can be passed to\nvalidation rules by using parenthesis after the rule name:\n\n```\nvalidation=\"required|confirmed(confirmation_field)\"\n```\n\nThe field label used in built-in validation methods is the `validation-label`\nattribute on your `formulate-element`. If no `validation-label` is found then\nthe `label` attribute is used, and if no `label` attribute is found it will\nfall back to the field’s `name` attribute (which is required).\n\n#### Custom Validation Rules\n\nValidation rules are easy to write! They're just simple functions that are\nalways passed at least one argument, an object containing the `field` name,\n`value` of the field, validation `label`, `error` function to generate an error\nmessage, and an object containing all the `values` for the entire form.\n\nAdditionally, validation rules can pass an unlimited number of extra arguments.\nThese arguments are passed as the 2nd-nth arguments to the validation rule.\nTheir values are parsed from the optional parenthesis in the validation\nattribute on the `formulate-element`.\n\n```html\n\u003cformulate-element\n  type=\"password\"\n  name=\"password\"\n  label=\"Password\"\n  validation=\"confirmed(password_confirmation_field)\"\n/\u003e\n```\n\nValidation rules should return an error message string if they failed, or\n`false` if the input data is valid.\n\nAdding your own validation rules is easy. Just pass an additional object\nof rule functions in the plugin’s installation call:\n\n```js\nVue.use(formulate, {\n  rules: {\n    isPizza ({field, value, error, values, label}) {\n      return value === 'pizza' ? false : `label is not pizza.`\n    }\n  }\n})\n```\n\n### Styling\n\nAbsolutely zero styles are included so feel free to write your own! The\n`form-element` components have a wrapper `div` that receives the following\nclasses:\n\n```\nformulate-element\nformulate-element--has-value\nformulate-element--has-errors\n```\n\n### Full Documentation\n\nThere are many more options available, more documentation coming soon.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwearebraid%2Fvue-formulate-legacy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwearebraid%2Fvue-formulate-legacy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwearebraid%2Fvue-formulate-legacy/lists"}