A Vue.js Plugin for Formio
npm install --save formio-vue
Install all the components:
import Vue from 'vue'
import FormioVue from 'formio-vue'
Vue.use(FormioVue)
Use specific components:
import Vue from 'vue'
import { Test } from 'formio-vue'
Vue.component('test', Test)
Install all the components:
import 'formio-vue/dist/formio-vue.css'
import FormioVue from 'formio-vue/dist/formio-vue.common'
Vue.use(FormioVue)
Use specific components:
import 'formio-vue/dist/formio-vue.css'
import { Test } from 'formio-vue/dist/formio-vue.common'
Vue.component('test', Test)
<link rel="stylesheet" href="formio-vue/dist/formio-vue.css"/>
<script src="vue.js"></script>
<script src="formio-vue/dist/formio-vue.browser.js"></script>
The plugin should be auto-installed. If not, you can install it manually with the instructions below.
Install all the components:
Vue.use(FormioVue)
Use specific components:
Vue.component('test', FormioVue.Test)
Install all the components:
import Vue from 'vue'
import FormioVue from 'formio-vue/src'
Vue.use(FormioVue)
Use specific components:
import Vue from 'vue'
import { Test } from 'formio-vue/src'
Vue.component('test', Test)
.vue
files. More info in the official documentation.
The form API source from form.io or your custom formio server.
See the Creating a 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.
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.
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 with the formio.js options that is passed through. See Form.io Options.
All events triggered from the form are available via the v-on property. See Form.io Events for all the available events.
Then on the form set <formio src="myform" v-on:submit="doSomething" />
TODO
The first time you create or clone your plugin, you need to install the default dependencies:
npm install
This will run webpack in watching mode and output the compiled files in the dist
folder.
npm run dev
While developping, you can follow the install instructions of your plugin and link it into the project that uses it.
In the plugin folder:
npm link
In the other project folder:
npm link formio-vue
This will install it in the dependencies as a symlink, so that it gets any modifications made to the plugin.
You may have to login to npm before, with npm adduser
. The plugin will be built in production mode before getting published on npm.
npm publish
This will build the plugin into the dist
folder in production mode.
npm run build