Build your forms 10x faster with the most powerful form builder for Vue.js 2 & 3.

Overview



Build your forms 10x faster with the most powerful form builder for Vue.js 2 & 3.
Easy to learn, extensible and supports Tailwind CSS. Available in 19 languages.

npm Discord


Vueform

Vueform is a form development tool that eliminates the manual work of coding forms in Vue.js environment. It outputs high-performance, high quality production ready forms. It comes with the most advanced features & and it's easy to learn.

Highlighted features

⚡️ High performance

Create even the most complex forms with high performing, production-ready quality.

🤩 Supports Vue.js 2 & 3

Vueform support Vue.js 2 & 3 as long as Vue.js supports them.

✨ 26 high-quality elements

No need to hunt down custom elements on your own anymore. Use eg. multi-file upload, rich text editor, tags input or a slider out of the box. If you want, create your own element.

✅ 54 built-in validators

Most of your validation use cases are covered out of the box. You might use conditional, dependent, async or even multilingual validators. Missing something? Create a custom rule.

🗂️ Groupped & repeatable elements

Always felt like other libraries missing something? Group and nest elements on any levels or repeat certain element groups.

🌐 Translatable elements

If you are working on a project which displays content in multiple languages you'll love this feature! See how to translate element content.

➡️ Form steps

Everybody hates filling in long forms. They might not even get started if all they see is an endless list of fields. Vueform makes it easy to break forms into steps to guarantee the best UX.

🔗 Conditional rendering

Using v-if to render certain elements conditionally is no magic. Handling that on a data level is a different thing. Vueform removes all the struggle of creating conditions.

🎨 Advanced theming

One of the most carefully designed part of Vueform is handling styles. Vueform comes with 3 different sizes, alternative views, replacable classes, presets, use of CSS vars and some predefined themes. Also, it supports Tailwind CSS.

🔌 Plugin system

A great thing about Vueform is that it'll never limit your work. If the built in customization options are not enough for you you can go ahead and replace, overwrite or extend any features in Vueform using our Plugin system.

⚒️ JSON forms

Everything in Vueform, including elements, validation rules or steps and be stored as a JSON string. This enables rendering dynamic forms and storing even complex forms in databases.

📚 Extensive docs

Vueform comes with a carefully crafter Guide for beginners and advanced users and an extensive API Reference. Our API docs comes with tons of examples and everything explained to the very detail.

😍 DX focus

Since the first character of Vueform's code was typed we always kept one thing in mind: we only create stuff that we would to love use. That spirit followed us along the way and still the most important one. Hope you feel the love while using our tool.

🤓 Supported by 6 000+ unit tests

Not the most interesting part of the project, but yeah, it's still important. We're planning for long-term so we had to settle solid basics. We plan to keep this up with each of our new features so you can sleep better knowing Vueform will always stay a reliable tool.

Starter Kits

Get started with Vueform in an instant using one of our boilerplates.

Vite

@vueform/vite-starter

Nuxt

@vueform/nuxt-starter

VueCLI

@vueform/vuecli3-starter

VueCLI (Vue 2)

@vueform/vuecli2-starter

Laravel

@vueform/laravel-starter

Laravel (Vue 2)

@vueform/laravel-vue2-starter

Installation

If you don't want to use a starter kit you might set it up in your project manually.

Installation wizard (recommended)

It's recommended to use are environment-aware installation wizard to get started with Vueform.

Installation wizard

Manual installation

For those who like cutting through the bush themselves.

  1. Install Vueform package:
npm install @vueform/vueform
  1. Create vueform.config.js in project root:
// vueform.config.js

import en from '@vueform/vueform/locales/en'
import vueform from '@vueform/vueform/themes/vueform'

export default {
  theme: bootstrap,
  locales: { en },
  locale: 'en',
  apiKey: 'YOUR-API-KEY-HERE' // https://vueform.com/docs/1.x/installation#api-key
}
  1. Add style to main CSS:
/* your main CSS file */

@import "{PATH_TO}/node_modules/@vueform/vueform/themes/vueform/css/index.min.css";
  1. Import Vueform in your main JS:
// your main JS file

import { createApp } from 'vue'
import App from './App.vue'
import Vueform from '@vueform/vueform/plugin'
import vueformConfig from '{PATH_TO}/vueform.config'

const app = createApp(App)

app.use(Vueform, vueformConfig)

app.mount('#app')
  1. Test your installation:
">
<template>
  <Vueform>
    <TextElement
      name="hello_world"
      label="Hello"
      placeholder="World"
    />
  Vueform>
template>

Troubleshooting

If you are experiencing any issues during installation head to out Troubleshooting page or join our Discord.

Learning Guide

To start learning about Vueform head to our Essentials guide.

Main chapters:

Go to Guide

API Docs

Dig deeper into Vueform API using our API Reference.

Go to API Docs

Examples

More examples coming soon.

Go to Examples

Support

Join our Discord or open an issue.


Vueform Builder

/assets/builder.png

Try out our drag and drop form builder!

Instead of going through hundreds of pages of docs you just put together stuff, hit export and 💥 - you have a working form in your project.

Sounds great? Give it a try: https://builder.vueform.com/

Licensing

Vueform Builder is available for licensing to other applications like SAAS products, intranets, etc. More information: https://vueform.com/builder

You might also like...
Form builder library using VueJS 2 Virtual Dom

vue-form-builder Form builder library using VueJS 2 Virtual Dom Features This is still currently in development as an early build. Build a full form u

A set of Vue components to rapidly build forms with Tailwind CSS v2.0. It supports validation, model binding, includes default vendor styling and is fully customizable!

A set of Vue components to rapidly build forms with Tailwind CSS v2.0. It supports validation, model binding, includes default vendor styling and is fully customizable!

🍻 ncform, a very nice configuration generation way to develop forms ( vue, json-schema, form, generator )
🍻 ncform, a very nice configuration generation way to develop forms ( vue, json-schema, form, generator )

ncform 中文版 ncform, a nice form development way that generates form UIs and their interactions with just configuration. Comes with standard components

Build forms with textfield, options, checkboxes, datatables and ... by defining a schema in json

WorkInProgress Vuetify FormJSON Demos: Example: Showcase Example: 2 way binding Example: FormSchema builder Example: Full features Example: Datatable

Module for build forms from schemes

Vue Form Builder This package in development and not yet stable. Storybook demo Install npm i @tptshk/vue-form-builder Install dependencies npm insta

Easy to use AJAX forms written to handle symfony form errors

vue-symfony-form Easy to use AJAX forms written to handle symfony form errors. Set Up Enable symfony-form plugin and add connector: import symfonyForm

Cheetah Forms - An Json Based Form Generator for Vuetify
Cheetah Forms - An Json Based Form Generator for Vuetify

Cheetah Forms is a simple JSON form builder for generating a Vuetify Form with just a JSON

A powerful online form designer for Vue.
A powerful online form designer for Vue.

Variant Form 一款高效的Vue表单,可视化设计,一键生成源码,享受更多摸鱼时间。 文档官网:http://www.vform666.com/ 在线演示:http://demo.vform666.com/ VS Code插件:http://www.vform666.com/pages/pl

Vue-form-generator: A schema-based form generator component for Vue.js
Vue-form-generator: A schema-based form generator component for Vue.js

vue-form-generator A schema-based form generator component for Vue.js. Demo JSFiddle simple example Features reactive forms based on schemas multiple

Releases(1.2.15)
  • 1.2.15(Nov 21, 2022)

    🎉 Feature

    • Z-index optimization thought the whole library. New rule is that everything has z-index 999 that intended to be brought to top (eg. tooltip, dropdown) and everything else got the lowest possible (1) z-index where relative z-indexing was needed.
    • Added clearMessage method to clear all messages manually added to messageBag.
    • Refactored tabs & steps CSS.
    • Form steps are now using v-if instead of v-show.
    • Added isLast, isFirst, last$ props steps & tabs.
    • Finish step now also recognizes next label (for ease of configuration).
    • Focus first element on next step if stepped with keyboard.
    • A11y improvements.

    🐞 Bug Fixes

    • Multifile object gallery rendered images in rows.
    • Remove query param from uploaded filename.
    • Pressing enter in certain elements caused removing or adding list elements.
    • Datepicker was aligned to right in tailwind theme.
    Source code(tar.gz)
    Source code(zip)
  • 1.2.14(Oct 28, 2022)

    🎉 Feature

    • Added current Vueform version to $vueform.version.
    • Added rules & related options to GroupElement & ObjectElement.
    • Added reinitValidation() method to elements.
    • Added tree & flatTree props to <Vueform>.

    🐞 Bug Fixes

    • Submit steps on Finish in FFX broke in some versions.
    • List first instance didn't display instantly when a prototype got defined on the flight if list was in a group.
    • Aria didn't display for certain elements eg. Group, Object.
    • Element's container class is now added to inline layout's container.
    • Multifile resort images in stage 2 refresh fix.
    • Axios now works with an instance provided to config.
    • Refresh order fields in object lists when storeOrder changes or reseted.
    • Reset list children when directly resetting lists.
    Source code(tar.gz)
    Source code(zip)
  • 1.2.13(Oct 7, 2022)

  • 1.2.12(Oct 7, 2022)

  • 1.2.11(Sep 16, 2022)

    🐞 Bug Fixes

    • Removed unused import from tailwind.js.

    🎉 Feature

    • Added updateColumns API method.
    • Multifile inherits file props.
    • Errors and messages can now display HTML.
    Source code(tar.gz)
    Source code(zip)
  • 1.2.10(Aug 19, 2022)

    🐞 Bug Fixes

    • Added datepicker locales.
    • Mobile datepicker fix.
    • Removed font-sans from select elements' search input in Tailwind.
    • Tailwind 3 lg input floating label positioning fix.
    • GroupElement can now be placed in an ObjectElement.
    Source code(tar.gz)
    Source code(zip)
  • 1.2.9(Aug 8, 2022)

    🎉 Feature

    • Allow false value for FileElement's url option.
    • If a filename contains url only the filename is displayed.
    • Can pass an axios instance to axios option in vueform.config.js.

    🐞 Bug Fixes

    • Select endpoint will add search param with & if it already contains ?.
    Source code(tar.gz)
    Source code(zip)
  • 1.2.8(Jul 19, 2022)

    🐞 Bug Fixes

    • Added regeneratorRuntime to validator export.
    • API Key validation url fixed.
    • Nested global form element styles under form tag.
    Source code(tar.gz)
    Source code(zip)
  • 1.2.7(Jul 19, 2022)

    🎉 Feature

    • Added API Key validation.
    • Removed Composition API dependency. Use Vue.js 2.7+ instead.

    🐞 Bug Fixes

    • Added components to element creator.
    • Locales export module.exports -> export default.
    • Fixed clean() for Vueform and ListElement.
    • Added prefix to component styles.
    Source code(tar.gz)
    Source code(zip)
Super Form Builder built on top of Vue with Drag & Drop functionality, savable-form-schema and easy to maintain/upgrade your form.

agape-form-builder forked by vue-form-builder A simple builder to help you generate a super form for your features/modules/sites,... Easy to use, crea

Ágape Consultoria 0 Apr 5, 2021
Vue Form Components - Clean & minimal vue form elements and form builder with validation

Vue Form Components - Clean & minimal vue form elements and form builder with validation

null 0 Nov 5, 2019
A simple form-builder with drag & drop to help you deal your own form

A simple form-builder with drag & drop to help you deal your own form. Less code in development and your site will be more generic, configurable.

Vasyl Dmytruk 0 Nov 30, 2018
Build powerful vue form with JSON schema and composition api.

Vue Form Builder Build powerful vue form with JSON schema and composition api. Any custom input components and popular ui frameworks such as Element U

FE Next 374 Nov 23, 2022
Build powerful vue form with JSON schema and composition api.

Vue Form Builder Build powerful vue form with JSON schema and composition api. Any custom input components and popular ui frameworks such as Element U

FE Next 374 Nov 23, 2022
Reactive Form Builder for Vue.js with Laravel Support

Dynamic Form Builder for Laravel with Vue.js Create even the most complex forms with ease, using two-sided validation, eloquent, nested elements, cond

Laraform 339 Nov 30, 2022
A sample drag & drop form builder project that made with Vue.js and Element UI

Vue Form Builder A sample drag & drop form builder project that made with Vue.js and Element UI (View Live Demo) Build Setup # install dependencies np

Jia Meei 147 Nov 21, 2022
A Bootstrap themeable Vue.js form builder

vue-formation A Bootstrap themeable Vue.js form builder Note: This project is still under initial development and provides limited support/documentati

vue-formation 16 Jul 20, 2022
Dashibase Insert - Notion-like form builder powered by Vue, Tailwind and Supabase

Dashibase Insert Notion-esque form-builder for Supabase users. Build your form now ?? Design your next form with a beautiful Notion-esque UI, integrat

Dashibase 105 Nov 26, 2022
Form Builder application built with quasar2, vue3 and vite

Form Builder Application (quasar-form-builder) This is a form builder application built with Vue3, TypeScript, Vite and Quasar Install the dependencie

Taylor Lawrence 1 Jun 4, 2022