@vueform/vueform

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.

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 2	@vueform/nuxt2-starter
Nuxt 3	@vueform/nuxt3-starter
VueCLI (Vue 2)	@vueform/vuecli2-starter
VueCLI (Vue 3)	@vueform/vuecli3-starter
Laravel (Vue 2)	@vueform/laravel-vue2-starter
Laravel (Vue 3)	@vueform/laravel-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.

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:

• Rendering Forms
• Styles and Layout
• Handling Form Data
• Validating Elements
• Conditional Rendering
• Subscribing to Events
• Breaking Forms into Steps
• I18n
• Plugins
• Creating Elements

API Docs

Dig deeper into Vueform API using our API Reference.

Examples

• Simple form
• Complex form
• Multi-step form
• Inline form builder

More examples coming soon.

Support

Join our Discord or open an issue.

---

Vueform Builder

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