vue-duckform

VueJS package to render a JS Object as a Form (Radio buttons, Checkboxes, Text Input, Scale Slider and Calendar input). Compatible with Laravel Duckform API.


Keywords
duckform, form, laravel, survey, typeform, vue, vuejs
License
AFL-2.0
Install
npm install vue-duckform@1.1.9

Documentation

=> 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.