vformio - Formio.js wrapper for Vue

This package is heavily influenced by the official vue-formio package. Kudos to the formio team.

Installation

npm i vformio --save

or with yarn:

yarn add vformio

Usage

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>

Available props

src: string

The form API source from form.io or your custom formio server.

form : object

An object representing the form. Use this instead of src for custom forms. Note: src will override this property if used.

submission: Object

An object representing the default data for the form. Note: src will override this if a submission url is entered.

options: object

An object which represents formio.js options. See Form.io Options.

language: string

Default language for the form.

Events

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.

FormBuilder

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>

License

Released under the MIT License.