form-builder-prograils v1.0.6

Vue form builder

Simple form builder made by Prograils for our internal project - Formbedly.

Instalation

yarn add form-builder-prograils

1. In your src folder create plugins folder
2. Inside plugins create new file and name it vuetify.js
3. Paste below code inside vuetify.js:

import Vue from "vue";
import Vuetify from "vuetify/lib";
import "@fortawesome/fontawesome-free/css/all.css";

Vue.use(Vuetify);

const opts = {
  theme: {
    light: true
  },
  icons: {
    iconfont: "fa"
  }
};

export default new Vuetify(opts);

4. In your entry js file (where you create new Vue instace), inside src folder, import formbuilder and vuetify:

import formbuilder from 'form-builder-prograils'
import vuetify from './plugins/vuetify'

5. Use formbuilder:

Vue.use(formbuilder)

6. Pass vuetify as an option to Vue instance:

new Vue({
  vuetify,
  render: h => h(App),
}).$mount('#app')

You should get something similar to this:

import Vue from 'vue'
import App from './App.vue'
import formbuilder from 'form-builder-prograils'
import vuetify from './plugins/vuetify'

Vue.config.productionTip = false

Vue.use(formbuilder)

new Vue({
  vuetify,
  render: h => h(App),
}).$mount('#app')

Usage

Simply add <formbuilder /> in your component.

Submiting form

First you must add a button to submit a form. When clicked button emits buttonAction event. It'll give you access to submiting data: <formbuilder @buttonAction="submit" /> and next in your methods:

submit(data) {
  console.log(data;)
}