https://github.com/mirzap/vformio

https://github.com/mirzap/vformio

form formio forms javascript vue

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/mirzap/vformio
• Owner: mirzap
• License: mit
• Created: 2018-05-31T11:16:07.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-08-05T18:41:09.000Z (over 6 years ago)
• Last Synced: 2024-11-16T11:18:27.258Z (2 months ago)
• Topics: form, formio, forms, javascript, vue
• Language: JavaScript
• Size: 337 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vformio - Formio.js wrapper for Vue

This package is heavily influenced by the official [vue-formio](https://github.com/formio/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:

```vue

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

    }

  }

}

```

then you can use it in `template` section of your Vue component:

```vue

   

```

## Available props

### `src`: `string`

The form API source from [form.io](https://www.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](https://github.com/formio/formio.js/wiki/Form-Renderer#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). 

```vue

 

```

See [Form.io Events](https://github.com/formio/formio.js/wiki/Form-Renderer#events) for all the available events.

# FormBuilder

Register the component:

```vue

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:

```vue

  


    

  


```

# License

Released under the [MIT License](http://www.opensource.org/licenses/MIT).