A schema-based form generator component for Vue.js
It has been inspired by project like vue-form-generator, dynamic-schema-vuelidate or formvuelatte
This project is not a "proof of concept". It's a lib to solve real life problems into real life project.
- reactive forms based on schemas
- group and repeat form elements
- over 20 built-in validators
- use bootstrap-vue components and styles
- Dependency model like in XForms
- Expressions into JSON
- Framework7 version
Full updated documentation is available here
eom-form uses mainly
moreover it uses other components like
we also include open source icon fonts such font awesome 5, ionicons,open iconic, stroke icons 7, linearicons
You can install it via NPM or yarn.
$ npm install eom-form
<template>
<div id="app">
<b-container>
<b-alert :variant="status.variant" dismissible v-model="status.message" v-if="status.message">
{{ status.message }}
</b-alert>
<form class="mb-3" @submit.prevent="handleSubmit" novalidate>
<EomForm
:schema="schema"
v-model="model"
ref="eomForm"
/>
<b-btn variant="success" type="submit">submit</b-btn>
</form>
</b-container>
</div>
</template>
<script>
import Vue from 'vue'
import EomForm from 'eom-form'
import schema from './data/schema.json'
Vue.use(EomForm)
export default {
name: 'App',
data () {
return {
status: {
message: '',
variant: 'success'
},
schema,
model: {},
}
},
methods: {
handleSubmit () {
this.status.message = ''
let valid = this.$refs.eomForm.validate()
if (!valid) {
console.warn('invalid form')
this.status.message = 'invalid_datas'
this.status.variant = 'danger'
return
}
}
}
}
</script>import EomForm from "eom-form";
export default {
components: {
"eom-form": EomForm
}
};This command will start a webpack-dev-server with content of src folder.
npm run serveThis command will build a distributable version in the dist directory.
npm run buildThis command will bundle package for production use
npm run build-bundleWe need hands. Please send pull requests improving the usage and fixing bugs, improving documentation and providing better examples, or providing some testing.
eom-form is available under the GPL v3 license.
Copyright (C) 2020 Eom+