Repository files navigation

Implementing handcrafted forms can be:

1. Costly
2. Time-consuming

Especially if you need to create a very large form, in which the inputs are similar to each other, and they change frequently to meet rapidly changing business and regulatory requirements.

So, wouldn't it be more economical to create the forms dynamically? Based on metadata that describes the business object model?

That'sVue Dynamic Forms.

This is the Vue3.x.x compatible version. Out of the boxTypescript support, tree shakeable, improved accessibility and lighter in size. For Vue2.x.x please use the library tags2.x.

Complete documentation and examples available at

• Documentation
• Demos or if you prefer onlinehere
• Stackblitz
• Code Sandbox
• Migration Guide

• Become a Sponsor on GitHub
• One-time donation via PayPal

$ npm install @asigloo/vue-dynamic-forms

or if you prefer yarn

$ yarn add @asigloo/vue-dynamic-forms

The installation and usage has change to align with new Vue 3 plugin installation.

To create a newDynamic Form instance, use thecreateDynamicForms function;

import{createApp}from'vue'import{createDynamicForms}from'@asigloo/vue-dynamic-forms'constVueDynamicForms=createDynamicForms()exportconstapp=createApp(App)app.use(VueDynamicForms)

In your component:

<template><dynamic-form :form="form" @change="valueChanged"/></template><scriptlang="ts">import{computed,defineComponent,reactive} from 'vue';import{CheckboxField,TextField,SelectField,} from '@asigloo/vue-dynamic-forms';export default defineComponent({name:'BasicDemo',setup(){    constform=ref({id:'basic-demo',fields:{username:TextField({label:'Username',}),games:SelectField({label:'Games',options:[{value:'the-last-of-us',label:'The Last of Us II',},{value:'death-stranding',label:'Death Stranding',},{value:'nier-automata',label:'Nier Automata',},],}),checkIfAwesome:CheckboxField({label:'Remember Me',}),},});functionvalueChanged(values){console.log('Values',values);}return{form,valueChanged,};},});</script>

We've prepared some demos to show different use cases of the library and how to use each type of input field.

To check them just run the command bellow which run the app athttp://localhost:3000/

yarn run serve

• General Form
• Text Fields
• Number Fields
• Select Fields
• Textarea Fields
• Radio Fields
• Login
• Custom Fields
• Axios form (Retrieve form structure from an API)
• TailwindCSS styling

yarn install

yarn run serve

yarn run build

yarn run build:dts

yarn run lint

yarn run test

yarn run test

If you find this library useful and you want to help improve it, maintain it or just want a new feature, feel free to contact me, or feel free to do a PR 😁.

• Update docs

This project is licensed under the MIT License - see theLICENSE.md file for details.