=> Live demo <=

vue-duckform

Render a JS Object as a Form. Compatible with Laravel Duckform API.

How to install

npm install vue-duckform

Register on component, or register for global usage

import Vue from 'vue'
import Duckform from 'vue-duckform'

Vue.component('Duckform', Duckform)

Usage with JS data (check demo site for formData format)

<duckform :form-data="formData" v-model="form"></duckform>

const formData = {
  title: 'Form title',
  description: 'Form description',
  sections: [
    {
      title: 'Section title',
      description: 'Section description',
      questions: [
        {
          type: 'free_text', //free_text, single_select, multiselect, scale, date, integer
          required: true,
          text: "What's your name?",
          possible_answers: [{id: 'possible_answer_1'}]
        },
        ...
    },
    ...
  ]
}

Usage with API endpoints (Laravel Duckform package recommended)

<duckform :form-data-endpoint="/api/duckforms/myform" v-model="form"></duckform>

Props

Name	Type's	Default	Description
formData	Object	{}	Form data, check demo site for format
submitData	Object	{}	Form Submit data, this is data of a partially filled up form. Will be merged by vue-duckform to formData.
formDataEndpoint	string	null	Endpoint to GET form data (Laravel duckform package recommended).
submitId	Number/String	null	ID of a Form Submit to GET/PATCH/POST from "/submits/" before populating the form. This is used to retrieve a partially filled form stored in database (Laravel duckform package recommended).
disabled	boolean	false	Form inputs disabled
value	Object	{}	Form object to bind to.

Slots

Name	Description
loading	Content when API request is in progress
errorLoading	Content after a non 2xx response from any API endpoint.
completed	Content after form is completed.

Events

Name	Parameters	Description
input	form	Fires after user input on any question.
save	form	Fires after user clicks on 'Continue' or 'Submit' buttons.