Vue Forms Made Easy - Vue Formulate & Vue Form Generator

In this tutorial, we're going to look at Vue Form creation. In particular, we're going to be looking at 2 packages that make creating forms extremely easy. First, we'll look at Vue Formulate. Next, we'll dive into the Vue Form Generator.
Timestamps
0:00 - Intro
0:21 - Vue Project Setup
1:02 - Installing Vue Formulate
1:35 - Installing Vue Formulate Styles
2:21 - Initializing Vue Formulate in Vue Project
3:05 - Vue Formulate Documentation Overview
4:55 - Coding the Vue Formulate Form
10:03 - Testing Vue Formulate Form Validation
11:05 - Handling Vue Formulate Form Submission
11:50 - Vue Form Generator Overview
12:10 - Vue Form Generator Installation
12:35 - Initializing Vue Form Generator in our Vue Project
13:00 - Vue Form Generator Component
13:28 - Vue Form Generator Schema
14:18 - Vue Form Generator Model
14:36 - Vue Form Generator Options
15:00 - Coding our Form Generator Form
18:52 - Handling Vue Form Generator Form Submission
21:20 - Testing our Vue Form Generator Form
Vue Formulate
vueformulate.com/
Vue Form Generator
vue-generators.gitbook.io/vue...
Git Repo
bitbucket.org/TheDiligentDev/...
#vue #vueFormulate #vueFormGenerator

[@DiligentDev]

Which package did you prefer, Vue Formulate or Vue Form Generator?

[@SharkBait_ZA]

I feel like you do not need Form Generator, as Vue Furmulate is easier to use. Thanx to your video, now I know about it. :-)

[@culturapoliticaycomputador9999]

If you want to create dynamic forms it is better to choose Vue Form Generator, you can create the json data in SQL and call with the api and draw the interface, if something change in the future you only need make a change in sql table to redener without touch your code...

[@andrewboyd8403]

Thanks for taking the time to demo Vue Formulate!

[@DiligentDev]

You’re welcome!

[@DiligentDev]

Oh wow I just realized your one of the main contributor/creators of Formulate. Thank you for creating it. Great stuff!

[@andrewboyd8403]

@@DiligentDev Thanks! It's really awesome to see the adoption picking up within the Vue community around the project. Were you aware that Vue Formulate also supports full form generation from a provided Schema just like Vue Form Generator? vueformulate.com/guide/forms/generating-forms/

[@DiligentDev]

I saw that under new features after I shot the video. I personally like the template approach. But if you were to programmatically generate a form out of json returned from database, I could see this being extremely useful.

[@josephcrispincruz7184]

Thank you for this tutorial sir :) this is the answer in my upcoming project :)

[@rizwanrauf9347]

Awesome Tutorial

[@ahmetgonlum754]

Teşekkürler, tam aradığım şeyi buldum sayenizde.

[@harshanasaparamadu2035]

Great Tutorial, Cheers!

[@DiligentDev]

Glad you enjoyed it!

[@kisoindran6460]

Does vue-form-generator support Vue 3?

[@ianmadrigalmonkey1979]

How would you pull dynamic data for the options dropdown list with using a v-for to loop?

[@DiligentDev]

For Vue Formulate, just set a data prop and add an array to the Vue Formulate options prop with the same object schema its expecting. For Vue Form Generator, set the values prop to your dynamic data.

[@h4nzo692]

👍

[@Zoutzuurtjes]

What's the name of your vscode theme?

[@shahabjoon201]

Hi,
Thanks for sharing these useful tutorials, would you please create a video about "FormKit"? Also if it is possible, please update the courses like "Vuelidate" and "VeeValidate".
Thanks again...
Shahab

[@chanakyakhatri5194]

hi that was a great tutorial, i have a request. Can you please make a shopping cart kind of project on vue , where we can products to the cart and can remove/plus/minus the products accordingly.
Thankyou for all the great tutorial

[@DiligentDev]

That would be a good project. I’ll see what I can do :)

[@chanakyakhatri5194]

@@DiligentDev thankyou

[@yiyasha]

Hi, thanks for the tutorial, but how do i reset my form after submit? i tried //this.$formulate.reset('contactform') // but gives me error // Cannot read property 'hideErrors' of undefined//

[@robings6489]

I really like Formulate but there is one problem I can't figure out. In the example you show a checkbox button you need to check to accept the terms. I'd like to link the terms inside of that label but I don't know how. Could anybody help me out?

[@DiligentDev]

This should do it:

{{ label }}

[@ivanlegranbizarro8102]

I prefer Vue Formulate, basically because it has translations to other languages in the form of a plugin

[@JenuelDevTutorials]

How about dragging and dropping some elements to build a form builder?

[@DiligentDev]

I'll add that to my todo list.

[@JenuelDevTutorials]

@@DiligentDev wow, thanks for the reply.. awesome!

[@JenuelDevTutorials]

do u have a form builder?

[@DiligentDev]

I don’t personally have a form builder.

[@jlayanto]

Both these packages do not support Vue 3 yet. Formvuelate supports Vue 3. Can you do a video comparing Formvuelate with Formulate and Vue Form Generator?

[@DiligentDev]

Thanks for the request! I'll look into it. I've never heard of it before.

[@borotaigor]

Sorry , I got it, just change 'validateAfterChange: true' to 'validateAfterChanged: true', thank you.