https://github.com/tpenaranda/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 (https://github.com/tpenaranda/duckform).
https://github.com/tpenaranda/vue-duckform
duckform form laravel survey typeform vuejs
Last synced: about 1 month ago
JSON representation
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 (https://github.com/tpenaranda/duckform).
- Host: GitHub
- URL: https://github.com/tpenaranda/vue-duckform
- Owner: tpenaranda
- Created: 2020-01-15T01:50:55.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:28:51.000Z (over 3 years ago)
- Last Synced: 2025-08-09T18:44:31.445Z (11 months ago)
- Topics: duckform, form, laravel, survey, typeform, vuejs
- Language: Vue
- Homepage: https://vue-duckform-demo.tpenaranda.com/
- Size: 985 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# => [Live demo](https://vue-duckform-demo.tpenaranda.com) <=
## vue-duckform
Render a JS Object as a Form. Compatible with Laravel Duckform API.
### How to install
```bash
npm install vue-duckform
```
Register on component, or register for global usage
```js
import Vue from 'vue'
import Duckform from 'vue-duckform'
Vue.component('Duckform', Duckform)
```
### Usage with JS data (check demo site for formData format)
```js
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](https://github.com/tpenaranda/duckform) recommended)
```js
```
### 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.