# vue-form-generator-mnm

> A schema-based form generator component for Vue.js

Latest version **2.0.3-beta4** (published 2017-01-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-form-generator-mnm
pnpm add vue-form-generator-mnm
yarn add vue-form-generator-mnm
bun add vue-form-generator-mnm
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.3-beta4 |
| Published | 2017-01-30 |
| First published | 2017-01-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Icebob |
| Maintainers | jallewa |
| Keywords | vue, vuejs, form, generator, schema, json |

## Links

- npm: https://www.npmjs.com/package/vue-form-generator-mnm
- Repository: https://github.com/MerifondNewMarkets/vue-form-generator
- Issues: https://github.com/MerifondNewMarkets/vue-form-generator/issues
- npm.io page: https://npm.io/package/vue-form-generator-mnm

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) 2.1.3
- [babel-runtime](https://npm.io/package/babel-runtime.md) 6.11.6

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 2.0.3-beta4 (latest) — 2017-01-30
- 2.0.2-beta4 — 2017-01-30
- 2.0.1-beta4 — 2017-01-25
- 2.0.1-beta3 — 2017-01-25
- 2.0.1-beta2 — 2017-01-25
- 2.0.1-beta1 — 2017-01-25
- 2.0.0-beta1 — 2017-01-25
- 0.6.1 — 2017-01-25

## README

# vue-form-generator [![NPM version](https://img.shields.io/npm/v/vue-form-generator.svg)](https://www.npmjs.com/package/vue-form-generator)
A schema-based form generator component for Vue.js v1.x.x

[![Codacy Badge](https://api.codacy.com/project/badge/Grade/912039aa815e40de8315032519aa7e6c)](https://www.codacy.com/app/mereg-norbert/vue-form-generator?utm_source=github.com&utm_medium=referral&utm_content=icebob/vue-form-generator&utm_campaign=Badge_Grade)
[![Build Status](https://travis-ci.org/icebob/vue-form-generator.svg?branch=master)](https://travis-ci.org/icebob/vue-form-generator)
[![Coverage Status](https://coveralls.io/repos/github/icebob/vue-form-generator/badge.svg?branch=master)](https://coveralls.io/github/icebob/vue-form-generator?branch=master)
[![NPMS.io score](https://badges.npms.io/vue-form-generator.svg)]()
[![Package Quality](http://npm.packagequality.com/shield/vue-form-generator.svg)](http://packagequality.com/#?package=vue-form-generator)

[![Dependency Status](https://david-dm.org/icebob/vue-form-generator.svg)](https://david-dm.org/icebob/vue-form-generator)
[![devDependency Status](https://david-dm.org/icebob/vue-form-generator/dev-status.svg)](https://david-dm.org/icebob/vue-form-generator#info=devDependencies)
[![Downloads](https://img.shields.io/npm/dt/vue-form-generator.svg)](https://www.npmjs.com/package/vue-form-generator)

**Vue v2.x support is under development!**

## Demo
[JSFiddle simple example](https://jsfiddle.net/icebob/0mg1v81e/)

[![Screenshot](https://icebob.gitbooks.io/vueformgenerator/content/assets/vfg-example1.png)](https://jsfiddle.net/icebob/0mg1v81e/)

## Features
- multiple objects editing
- 27 field types
- built-in validators
- Bootstrap friendly templates
- customizable styles
- ...etc

## Documentation
[Online documentation on Gitbook](https://icebob.gitbooks.io/vueformgenerator/content/)

## Dependencies
vue-form-generator use [Moment.js](http://momentjs.com/) and [lodash](https://lodash.com/) internally.

While built-in fields don't need external dependencies, optional fields may need other libraries.  
These dependency fall in two camp: jQuery or Vanilla. You can find almost the same functionality in both flavor.  
That way, it's your choice to depend on jQuery or not.

You can find details about dependencies in [documentation](https://icebob.gitbooks.io/vueformgenerator/content/).

## Installation
### NPM
You can install it via [NPM](http://npmjs.org/).
```
$ npm install vue-form-generator
```
### Manual
Download zip package and unpack and add the `vue-form-generator.css` and `vue-form-generator.js` file to your project from dist folder.
```
https://github.com/icebob/vue-form-generator/archive/master.zip
```

## Usage
```html
<template>
  <div class="panel-body">
    <vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
  </div>
</template>

<script>
import VueFormGenerator from "vue-form-generator";

Vue.use(VueFormGenerator);

export default {
  data: {
  
    model: {             
      id: 1,
      name: "John Doe",
      password: "J0hnD03!x4",
      skills: ["Javascript", "VueJS"],
      email: "john.doe@gmail.com",
      status: true
    },
  
    schema: {
      fields: [{
        type: "text",
        label: "ID (disabled text field)",
        model: "id",
        readonly: true,         
        disabled: true
      },{
        type: "text",
        label: "Name",
        model: "name",
        placeholder: "Your name",
        featured: true,
        required: true
      },{
        type: "password",
        label: "Password",
        model: "password",
        min: 6,
        required: true,
        hint: "Minimum 6 characters",
        validator: validators.string
      },{
        type: "select",
        label: "skills",
        model: "type",      
        values: ["Javascript", "VueJS", "CSS3", "HTML5"]
      },{
        type: "email",
        label: "E-mail",
        model: "email",
        placeholder: "User's e-mail address"
      },{
        type: "checkbox",
        label: "Status",
        model: "status",
        default: true
      }]
    },

    formOptions: {
      validateAfterLoad: true,
      validateAfterChanged: true
    }
  }
}
</script>
```

## Development
This command will start a `webpack-dev-server` with content of `dev` folder.
```bash
npm run dev
```

## Build
This command will build a distributable version in the `dist` directory.
```bash
npm run build
```

## Test
```bash
npm test
```

See: https://github.com/icebob/vue-form-generator/projects/1

## Contribution
Please send pull requests improving the usage and fixing bugs, improving documentation and providing better examples, or providing some testing, because these things are important.

## License
vue-form-generator is available under the [MIT license](https://tldrlegal.com/license/mit-license).

## Contact

Copyright (C) 2016 Icebob

[![@icebob](https://img.shields.io/badge/github-icebob-green.svg)](https://github.com/icebob) [![@icebob](https://img.shields.io/badge/twitter-Icebobcsi-blue.svg)](https://twitter.com/Icebobcsi)

---
_Source: https://npm.io/package/vue-form-generator-mnm · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._