Introducing Vue Formulate – The easiest way to build forms in Vue

Vue Formulate

TLDR: https://vueformulate.com

Why

There are so many great Vue packages out there, a lot of them are even focused on forms, but as someone who is constantly building new projects in Vue, I wanted a solution that provided a higher level API and made creating high quality forms much much faster.

What

So — I built Vue Formulate! It uses a single element to handle all possible input types so that you don’t have to learn a whole slew of new components. Vue Formulate does a lot of heavy lifting for you – validation, form re-hydration, single-object model binding for an entire form, provisions for error handling — even the simple things like labels and help text.

How

The syntax is intentionally as similar to standard HTML as possible just with more horsepower under the hood:

<FormulateInput
  type="email"
  name="email"
  label="What is your email address"
  help="Where should we contact you?"
  validation="required|email"
/>

There’s a lot more that it can do and one of our goals for launch was to have comprehensive documentation from day one (a lesson we learned from Vue itself). I’d love to know what people think!

https://vueformulate.com

Well-considered file uploads

4 Likes

Just scan through the documentation, I particularly like the upload progress animation, great work. Thanks.

Know that you want standard HTML as possible, I think certain percentage of people like semantic tags, e.g.

<vf-file .... />
<vf-textarea .... /> 

We can skip the type attribute and tell the meaning from tag name itself, insignificantly save few chars… :stuck_out_tongue_closed_eyes:

It makes me wonder if there is any facility that we can quickly alias a tag with default setting to another tag. e.g.

 <FormulateInput
    type="file" />
to
<vf-file />

Just causal thought.

1 Like

@hkp Hmmm, interesting idea. My initial thought was to dismiss it because one of my little (very little) gripes about other ui toolkits was having to remember all the component names which aren’t always a 1-1 with what we all already know (html)…but your point that it saves a few keystrokes is actually a really good argument in my books.

I want Vue Formulate to have the best possible developer experience, and for high quality end-user forms to be a byproduct of that good experience.

Since the library does it’s own component registration, it could easily register component alias names. I think maybe it’s still an opt-in behavior, but I could definitely see this being a supported feature.

Vue.use(VueFormulate, {
  shortTags: true
})
...
<VFFile ... /> // SFC
<vf-file ... /> // DOM

// aliased to
<FormulateInput
  type="file"
  ...
/>

Good suggestion :thinking: :+1:

1 Like

I also agree with @hkp, but nonetheless, this looks like great work. Working with form data in general can be a pain! I’m creating a medium-scale administration-type app that will be very form heavy so I’m going to give this a try a little down the road. I’ve bookmarked the site and will send you some feedback once I’ve dug into it.

~ Brad

Looks very nice. I like it
Theming docs are a little sad but overall very nice and promising
will bookmark and share :slightly_smiling_face:

Thanks Brad!

As you get rolling on your project feel free to submit bug/feature requests and/or PRs.

1 Like

Yeah those could be improved — the sample scss is probably the best thing to go on, or looking at the snow theme. I’m hoping to come out with other themes too, and maybe a theme “builder” tool.

The underlying concept though is that the markup should be consistent and be pretty easy to style with css only.

If you do give it a whirl though, I’d love to see other people’s implementations of themes and how the core could be improved.

I needed this in january :slight_smile:

1 Like

Hey all! Just a quick heads up that we shipped version 2.3.0 of Vue Formulate today and it includes a number of user-requested features. In fact, it’s our biggest release since the 2.0 rewrite!

What’s new in 2.3? :tada:

  • Grouped Fields: Logically group fields to easily create structured data from your v-modeled forms and inputs. Validate an entire group of fields with a single validation rule.
  • Repeatable Grouped Fields: Need a user to supply one-or-many inputs with the same structure? Just add repeatable=“true” to your group and you’re done!
  • Slots: Sometimes it’s necessary to override the markup or structure of Vue Formulate’s inputs. Now you can with fully documented Scoped Slot support. You can even change the default slot value for all inputs of a certain type.
  • Stopping Validation: Vue Formulate now supplies a bail validation rule that will stop a field’s validation if any rules fail after it. You can also apply a modifier ^ to any rule name (eg. ^required) to stop a field’s validation if that specific rule fails, while still allowing all others to run in parallel.
  • Errors on Submit: Vue Formulate has a new error-behavior type of submit to only show errors when a form is submitted.
  • New Named Form Methods: Vue Formulate has new named form methods of reset, resetValidation, and setValues to assist with programatic control of your forms.

All this and more! The full changelog is available on the documentation site.

We’d love to hear what you think!