vue-instant-form
Advanced tools
Vue form generator based on JSON schema
# yarn
yarn add vue-instant-form
# npm
npm install --save vue-instant-form
import VueInstantForm from 'vue-instant-form';
const app = new Vue({
el: '#app',
components: {
'vue-instant-form': VueInstantForm
},
data: function () {
return {
data: ...,
schema: ...,
actions: ...,
options: ...
}
}
});
<head>
<!-- vue-instant-form dependencies -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="/static/lib/jquery-3.1.1.min.js"></script>
<script src="/static/lib/bootstrap.min.js"></script>
<script src="/static/lib/moment.min.js"></script>
<!-- for specific field dependencies, we recommend you to check out the /static/lib folder -->
</head>
<body>
<div id="app">
<vue-instant-form v-model="data"
:form-schema="schema"
:form-actions="actions"
:form-options="options"
ref="InstantForm">
</vue-instant-form>
</div>
</body>
There are three standard actions wrapped by buttons: submit, reset, and cancel.
actions: {
submit: {
name: 'submit', label: 'Submit', icon: 'fa fa-check', class: 'btn btn-primary',
handler: function (data) {
console.info('onSubmit', data);
}
},
reset: {
name: 'reset', label: 'Reset', icon: 'fa fa-check', class: 'btn btn-sm btn-info',
handler: function () {
vm.$refs.InstantForm.reset();
}
},
cancel: {
name: 'cancel', label: 'Cancel', icon: 'fa fa-remove', class: 'btn btn-sm btn-warning',
handler: function () {
// close container modal, or do other things
}
}
}
data: {
name: 'Steve Job'
},
schema: {
name: {
type: 'text',
label: 'Name',
placeholder: 'Your full name',
help: 'Please type your full name',
onChanged: function (val) {
console.log('onChanged', val);
}
}
}
data: {
height: 170
},
schema: {
height: {
type: 'number',
label: 'Height',
min: 0, //optional
max: 0, //optional
step: 0.01 //optional
}
}
data: {
email: 170
},
schema: {
email: {
type: 'email',
label: 'Email'
}
}
data: {
price: 1000.00
},
schema: {
price: {
type: 'currency',
label: 'Price',
default: 0, //optional
min: 0, //optional
max: 1000000 //optional
}
}
Note: currency field supports only Indonesian Rupiah (Rp.) at the moment and highly utilizes jquery!
data: {
phone: 1000.00
},
schema: {
phone: {
type: 'phone-number',
label: 'Phone Number',
delimiter: '-' //optional
}
}
Select field may return two kind of value: optionValue, and Object.
Return optionValue:
data: {
gender: 2
},
schema: {
gender: {
type: 'select',
label: 'Gender',
options: [
{ id: 1, label: 'Male' },
{ id: 2, label: 'Female' }
],
optionValue: 'id', // optional, default is 'id'
optionLabel: 'label', // optional, default is 'label'
}
}
Return object:
data: {
gender: { id: 1, label: 'Male' }
},
schema: {
gender: {
type: 'select',
label: 'Gender',
options: [
{ id: 1, label: 'Male' },
{ id: 2, label: 'Female' }
],
trackby: 'id',
optionLabel: 'label', // optional, default is 'label'
}
}
Custom label:
data: {
gender: 2
},
schema: {
gender: {
type: 'select',
label: 'Gender',
options: [
{ id: 1, label: 'Male' },
{ id: 2, label: 'Female' }
],
optionCustomLabel: function (option) {
return option.label + ' - ' + option.id;
}
}
}
Dependencies: select2 (Get it here: http://select2.github.io)
Include select2 both js and css files:
<link rel="stylesheet" href="/static/lib/select2/css/select2.min.css">
<script src="/path/to/select2/js/select2.min.js"></script>
Schema definition (similiar with common select field):
data: {
gender: 2
},
schema: {
gender: {
type: 'select2',
label: 'Gender',
options: [
{ id: 1, label: 'Male' },
{ id: 2, label: 'Female' }
],
optionCustomLabel: function (option) {
return option.label + ' - ' + option.id;
}
}
}
Select2 may return object as common select field do.
Dependencies: jquery autocomplete (Get it here: https://www.devbridge.com/sourcery/components/jquery-autocomplete)
Include jquery autocomplete js files:
<script src="/path/to/jquery.autocomplete.min.js"></script>
Schema definition:
data: {
country: 'Indonesia'
},
schema: {
country: {
type: 'autocomplete',
label: 'Country',
options: [ 'Indonesia', 'Japan' ]
}
}
Dependencies: bootstrap-datetimepicker, developed by Malot (Get it here: http://www.malot.fr/bootstrap-datetimepicker)
Include both js and css files:
<link rel="stylesheet" href="/static/lib/bootstrap-datetimepicker.min.css">
<script src="/static/lib/bootstrap-datetimepicker.min.js"></script>
Schema definition:
data: {
birthday: new Date()
},
schema: {
birthday: {
type: 'datetimepicker',
label: 'Birth Day',
mode: 'datepicker', // optional, default is 'datepicker'
}
}
Datetimepicker component provides three modes: datepicker, datetimepicker, and timepicker.
Dependencies: fine-uploader (Get it here: http://fineuploader.com)
Include both js and css files:
<link rel="stylesheet" href="/static/lib/fine-uploader/fine-uploader-gallery.min.css">
<script src="/static/lib/fine-uploader/fine-uploader.min.js"></script>
Write qq-template which is required by fine-uploader. There are three available template types provided by fine-uploader. If you aren't satisfied and need more UIs, please refer to http://docs.fineuploader.com/branch/master/features/styling.html for more styling options.
<!-- gallery style template provided by fine-uploader as default -->
<script type="text/template" id="qq-template">
<div class="qq-uploader-selector qq-uploader qq-gallery" qq-drop-area-text="Drop files here">
<div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
</div>
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
<span class="qq-upload-drop-area-text-selector"></span>
</div>
<div class="qq-upload-button-selector qq-upload-button">
<div>Upload a file</div>
</div>
<span class="qq-drop-processing-selector qq-drop-processing">
<span>Processing dropped files...</span>
<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
</span>
<ul class="qq-upload-list-selector qq-upload-list" role="region" aria-live="polite" aria-relevant="additions removals">
<li>
<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
<div class="qq-progress-bar-container-selector qq-progress-bar-container">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<div class="qq-thumbnail-wrapper">
<img class="qq-thumbnail-selector" qq-max-size="120" qq-server-scale>
</div>
<button type="button" class="qq-upload-cancel-selector qq-upload-cancel">X</button>
<button type="button" class="qq-upload-retry-selector qq-upload-retry">
<span class="qq-btn qq-retry-icon" aria-label="Retry"></span>
Retry
</button>
<div class="qq-file-info">
<div class="qq-file-name">
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-edit-filename-icon-selector qq-btn qq-edit-filename-icon" aria-label="Edit filename"></span>
</div>
<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
<span class="qq-upload-size-selector qq-upload-size"></span>
<button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">
<span class="qq-btn qq-delete-icon" aria-label="Delete"></span>
</button>
<button type="button" class="qq-btn qq-upload-pause-selector qq-upload-pause">
<span class="qq-btn qq-pause-icon" aria-label="Pause"></span>
</button>
<button type="button" class="qq-btn qq-upload-continue-selector qq-upload-continue">
<span class="qq-btn qq-continue-icon" aria-label="Continue"></span>
</button>
</div>
</li>
</ul>
<dialog class="qq-alert-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Close</button>
</div>
</dialog>
<dialog class="qq-confirm-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">No</button>
<button type="button" class="qq-ok-button-selector">Yes</button>
</div>
</dialog>
<dialog class="qq-prompt-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<input type="text">
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Cancel</button>
<button type="button" class="qq-ok-button-selector">Ok</button>
</div>
</dialog>
</div>
</script>
Schema definition:
data: {
files: [
{
id: 1,
filename: 'avatar_c80a99bd5fd4_128.png',
uuid: '226a8e3a-2f52-4322-a2d5-a7be28cf50ec',
filetype: 'image/png'
}
]
},
schema: {
files: {
type: 'file-upload',
label: 'Upload file',
withDelete: true,
endpoint: 'http://localhost/fine_uploader',
itemLimit: 1, // optional, default is unlimited
help: 'This is help block' //optional
}
}
File upload field requires server endpoint which receive data as POST and DELETE request. For the details please refers to http://docs.fineuploader.com/branch/master/endpoint_handlers/traditional.html. However, vue-instant-form already comes with Laravel endpoint example, please check LaravelController.php. Laravel endpoint highly utilize migration and model to realize database table uploaded_files which track all uploaded file, so you can add relation to other object at the back end.
Complete Laravel package (https://github.com/inimedia/foundation) can be installed by running:
composer require inimedia/foundation
data: {
description: 'Lorem ipsum dolor sit amet...'
},
schema: {
description: {
type: 'textarea',
label: 'Description',
rows: '5',
default: '',
placeholder: 'Please enter your description here',
onChanged: function (val) {
console.log('onChanged', val);
}
}
}
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# run unit tests
npm run unit
# run e2e tests
npm run e2e
# run all tests
npm test
For detailed explanation on how things work, checkout the guide and docs for vue-loader.
FAQs
Vue form generator based on JSON schema
We found that vue-instant-form demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.