Building Front-End App in Vue with Vuetify – Part 2

We have been building Currency Converter using Vue.js. In the part-1 we built the basic layout of the app with navbar. In this tutorial we will setup a form with validation.

The code for this is here. Please note that the code has been committed under commits matching with Parts. So for complete code for this tutorial, please refer to commit branch “part-2”.

For validation, we will use vee-validate. There is some validation baked into Vuetify v-form (will talk about it shortly) itself but it will be nice to use a dedicated library for validation since it offers more avenues for customization.

so, in the console, say:
npm install vee-validate --save

Ok, so now we create a brand new component Content.vue. So create this file in src/components. Lets add some dummy code in it so we can wire it up in the Home.vue view.

Now wire it up in the Home.vue like so:

You can fire up the development server to see if everything is hooked up correctly.

Now lets start fleshing out the form in Content.vue.

We need a place to put the form. Hence v-card. The form in vuetify is called v-form. It goes in the v-card-text part. The submit button will go in the v-card-actions part.

Since the forms fields sit in a grid, we have the v-container holding the grid of v-row and v-col.

We then also add vee-validate validation around form fields. Important point to remember, v-slot is fed an object. Here we call it “v”. You can call it whatever. This object holds the errors object that will contain all the validation errors. Note that the errors object is an array (v.errors[0]). This is because a form field can have multiple validations on it, like here we have both required and positive. So the validation errors are more than one (two in this case, one for required and another for positive). We can show all validation errors for a form field in one go (with a v-for) or, as in this case, we show one by one using v.errors[0].

Thats it. Here’s how the final code looks like.

I have put a button for debugging. Very standard javascript stuff. It will be removed in the production code.

No Comments

You can leave the first : )

Leave a Reply

Your email address will not be published. Required fields are marked *