https://github.com/formio/vue

Javascript Powered forms and JSON form builder for Vue.js
https://github.com/formio/vue

vue vuejs

Last synced: about 2 months ago
JSON representation

Javascript Powered forms and JSON form builder for Vue.js

• Host: GitHub
• URL: https://github.com/formio/vue
• Owner: formio
• License: mit
• Created: 2017-05-30T19:46:07.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-04-03T18:50:40.000Z (6 months ago)
• Last Synced: 2024-05-17T04:04:37.429Z (4 months ago)
• Topics: vue, vuejs
• Language: TypeScript
• Homepage:
• Size: 246 KB
• Stars: 116
• Watchers: 25
• Forks: 64
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: Changelog.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-starred - formio/vue - Javascript Powered forms and JSON form builder for Vue.js (vuejs)

README

        
# vue-formio

A [Vue.js](http://vue.js/) component for rendering out forms based on the [Form.io](https://www.form.io) platform.

## Install

### npm

`Vue Formio` can be used on the server, or bundled for the client using an

npm-compatible packaging system such as [Browserify](http://browserify.org/) or

[webpack](http://webpack.github.io/).

```

npm install vue-formio --save

```

## Basic Usage

HTML inside of Vue template file:

```

  


    

  


```

Javascript inside of Vue template file.

```

  import { Form } from 'vue-formio';

  export default {

      name: 'app',

      components: { formio: Form },

  }

```

## Props

### `src` : `string`

The form API source from [form.io](https://www.form.io) or your custom formio server.

See the [Creating a form](http://help.form.io/userguide/#new-form)

for where to set the API Path for your form.

You can also pass in the submission url as the `src` and the form will render with the data populated from the submission.

### `url` : `string`

If you pass in the form and submission directly, some components such as resources, files and forms need to know the url of the form on the server. Pass it in with the url option. 

### `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 with the formio.js options that is passed through. See [Form.io Options](https://github.com/formio/formio.js/wiki/Form-Renderer#options).

## Events

All events triggered from the form are available via the v-on property. See [Form.io Events](https://github.com/formio/formio.js/wiki/Form-Renderer#events) for all the available events.

Then on the form set ``

## FormBuilder

HTML inside of Vue template file:

```

  


    

  


```

Javascript inside of Vue template file.

```

  import { FormBuilder } from 'vue-formio';

  export default {

      name: 'app',

      components: { FormBuilder },

  }

```

## Form Actions

Get access to the form instance

```

  


    

  


```

Run a method

```

this.$refs.formioForm.formio.submit()

```

All methods are available here https://help.form.io/developers/form-renderer#form-methods 

## License

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