vueform/builder

Drag and Drop Form Builder for Vueform

Vueform

Vueform is an open-source form framework for Vue.js.

It standardizes the entire form building process, while taking care of everything from rendering to validation and processing:

• 25+ form elements with multi-file uploads, date pickers and rich text editor
• element nesting and repeating
• a complete theming and templating system with Tailwind support
• 50+ validators with async, dependent and custom rules
• conditional logic with and/or condition groups
• built-in form steps support
• translating form contents and global i18n support
• fully accessible
• ... and many more

Get Started

Jump right into the project with ease using one of our boilerplates.

Vite	@vueform/vite-starter
Nuxt	@vueform/nuxt-starter

Manual Installation

To manually install Vueform, use our Installation Wizard. This wizard will guide you through the necessary steps for a hassle-free setup.

Documentation

For a detailed understanding of Vueform, its features, and how to use them, refer to our Documentation.

Examples

Explore real-world applications of Vueform with some of our examples. Whether you're building a simple contact form or a complex multi-step questionnaire, these examples will give you ideas how to leverage Vueform features in your projects.

• Simple form
• Complex form
• Multi-step form
• Inline form builder
• ... more to come

Drag and Drop

Build forms even quicker using our drag and drop form builder tool and export the code as a native Vue component: https://builder.vueform.com/demo

Contribute

We welcome contributors of all levels and backgrounds. Whether you're fixing bugs, enhancing functionality, or updating documentation, your efforts help strengthen Vueform for everyone.

Here are a few ideas how can your contribute:

• Report bugs to help us maintain stability. Please check our reporting bugs guide.
• Share ideas for innovative features or improvements in Ideas.
• Ask questions to clarify doubts in Questions and let others find it later.
• Send pull requests for code enhancements or fixes. Please check our contribution guide.
• Help with translating Vueform to new languages.

Development

For those interested in diving deeper into Vueform's inner workings, you can set up a local development environment. Please follow our guide for setup instructions.

Clone

Clone Vueform into your local environment.

git clone https://github.com/vueform/vueform.git

Setup

Setup Vueform in a test environment and import the source files for Vueform plugin.

import { vueform } from '@vueform/vueform/src'

Now you can make changes in the src directory and you should see their effect in your test environment.

Test

Once you're finished make sure that all the tests are still passing.

npm run test

Build

If everything looks good, run the build script.

npm run build

Follow Us

        

License

MIT

builder's Issues

Table feature inclusion

Describe the feature

Is there a possibility of including a table component in the drag and drop. It would really assist in arranging items and presenting them in an organized manner.

Final checks

• Check existing issues and ideas.
• Check roadmap.

`not_empty` condition does not respect select value `0`

Environment

Reproduction

Describe the bug

not_empty condition does not respect select value 0

Additional context

No response

Logs

No response

No padding on right panel

Environment

Reproduction

Describe the bug

Right panel is missing side paddings when used with the following configuration:

{
  leftPanel: ['elements'],
  rightPanel: ['form'],
}

Additional context

No response

Logs

No response

Radiogroup and checkboxgroup options gets overwritten when clicked after a Select

Environment

@vueform/builder ^1.1.6
@vueform/vueform ^1.6.5

Reproduction

Describe the bug

1. Have 3 fields: Radiogroup with options, Checkboxgroup with options, Select with options.
2. Click on the Select field.
3. Click on either the Radiogroup or the Checkboxgroup.
4. The options from the Select field will transfer/copy to the clicked field.

Additional context

No response

Logs

No response

Condition selector does not work for custom elements

Environment

Reproduction

Describe the bug

Condition selector does not work for custom elements

Additional context

Related to #38

Logs

No response

Can't override container element

Environment

Reproduction

Describe the bug

Additional context

Related discussion:
#41

Logs

No response

Can not disable validation rules for any element

Environment

@vueform/vueform 1.54
@vueform/builder 1.1.5
vue 3.3.4
vite 4.4.5

Reproduction

// builder.config.js

element: {
    props: {
      default: {
        validation: {
          validation: {
            nullable: false
          }
        },
      }
   }
}

Describe the bug

Trying to disable any validation rule will do nothing

Additional context

No response

Logs

No response