Easy to learn, extensible and supports Tailwind CSS. Available in 19 languages.
![](https://github.com/vueform/vueform/raw/main/assets/elements.png)
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.
Create even the most complex forms with high performing, production-ready quality. |
Vueform support Vue.js 2 & 3 as long as Vue.js supports them. |
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. |
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. |
Always felt like other libraries missing something? Group and nest elements on any levels or repeat certain element groups. |
If you are working on a project which displays content in multiple languages you'll love this feature! See how to translate element content. |
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. |
Using |
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. |
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. |
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. |
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. |
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. |
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. |
Get started with Vueform in an instant using one of our boilerplates.
If you don't want to use a starter kit you might set it up in your project manually.
It's recommended to use are environment-aware installation wizard to get started with Vueform.
For those who like cutting through the bush themselves.
- Install Vueform package:
npm install @vueform/vueform
- 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
}
- Add style to main CSS:
/* your main CSS file */
@import "{PATH_TO}/node_modules/@vueform/vueform/themes/vueform/css/index.min.css";
- 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')
- Test your installation:
<template>
<Vueform>
<TextElement
name="hello_world"
label="Hello"
placeholder="World"
/>
</Vueform>
</template>
If you are experiencing any issues during installation head to out Troubleshooting page or join our Discord.
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
Dig deeper into Vueform API using our API Reference.
More examples coming soon.
Join our Discord or open an issue.
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/
Vueform Builder is available for licensing to other applications like SAAS products, intranets, etc. More information: https://vueform.com/builder