Vue-duckform NPM

vue-duckform

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

Demo

Live demo here.

How to install

npm install vue-duckform

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.