This package is heavily influenced by the official vue-formio package. Kudos to the formio team.
npm i vformio --save
or with yarn
:
yarn add vformio
First you have to import and register the Form
component:
<script>
import { Form } from 'vformio'
export default {
name: 'MyApp',
components: { 'MyForm': Form },
data () {
return {
form: {
// your form
},
options: {
// some options
i18n: {
en: {},
de: {},
fr: {}
}
},
lang: 'de'
}
},
methods: {
onSubmit () {
// handle form submissions
}
}
}
</script>
then you can use it in template
section of your Vue component:
<template>
<MyForm :form="form" :options="options" :language="lang" @submit="onSubmit"/>
</template>
The form API source from form.io or your custom formio server.
An object representing the form. Use this instead of src for custom forms.
Note: src
will override this property if used.
An object representing the default data for the form.
Note: src
will override this if a submission url is entered.
An object which represents formio.js options. See Form.io Options.
Default language for the form.
Vue instance has an access to all events triggered from the form. You can set event handlers using v-on
property (or using @
shorthand).
<MyForm :form="form" @submit="onSubmit"/>
See Form.io Events for all the available events.
Register the component:
import { FormBuilder } from 'vformio';
export default {
name: 'app',
components: { FormBuilder },
data () {
return {
form: { display: 'form' }
}
},
computed: {
options: {
builder: {
advanced: false,
data: false,
basic: true
}
}
},
methods: {
onChange (schema) { console.log(schema) },
}
}
now when you have registered FormBuilder
component you can use it inside the template
section:
<template>
<div id="app">
<FormBuilder :form="form" :options="options" @change="onChange"></FormBuilder>
</div>
</template>
Released under the MIT License.