Vue.js Developers
Published in

Vue.js Developers

Seven In One: “My Form” WebApp using VueJS+Vuetify+Firebase Hosting PART II

In PART I, we made our environment and workspace ready for creating the Vue web app.

Let’s Build Something Great — PART II

In today’s article, we will be building the interface. We will be building that using Vuetify Framework, which is a Vue UI Library with beautifully handcrafted Material Components. No design skills required — everything you need to create amazing applications is at your fingertips.

We will be configuring the template auto-generated by Vuetfiy on the VueJS app as well as the whole layout.

But hey! Why Vuetify?

Vuetify is the #1 component library for Vue.js and has been in active development since 2016.

It has:

  • Vibrant Community
  • Continuous Updates — Compared to other UI Frameworks
  • Professional Support

First of all, we need to understand what are we going to edit, so take a look at what your Vue structure should look like. Look at the photo below or use to open the side drawer:

ctrl+b
We will be editing ‘HelloWorld.vue’ & ‘App.vue’ components

~ Just make sure that you are in the right folder in your directory.

So, open the “HelloWorld.vue” component, and DELETE what’s in between the ‘template’ tag, ONLY what’s in between the tag, which makes it like this:

<template></template><script>...

Now, right click on the HelloWorld component and rename it to the name you’d like to; I named mine ‘Form’, with a capital ‘F’

Open the “App.vue” and change the following:

  • What’s in between the v-content which is the HelloWorld component, and name it the one you just renamed. In my case it’s Form
  • Change the import statement to be like:
import Form from './components/Form'
  • We will replace the registered component on the components to be from HelloWorld to Form
  • Delete what’s above the v-content and replace it with the following:

Now, let’s change the “Form” component and build our own form UI Layout.

As we did previously, we will DELETE what’s in between the ‘template’ tags and make it empty.

Now, use the v-form to build a form.

Inside the v-form , we need 3 text fields and a text area for long messages.

Besides the text fields and the text area, we need two buttons for “submit” and “reset”.

With a bit of change, we will have what’s in between the ‘template’ tags as follows; I will list the core things we just did:

WHAT DID JUST HAPPENED?

  • For the form , we gave it a ref to refernce it later using the methods for submit and reset buttons.
  • For the first text field, we gave it and id, v-model , rulesto not make it accept an empty field and finally some looks, like clearable, color, icon etc
  • The same goes for the Email and Phone Number.
  • For the text area, what was added is the autogrow and counter .
  • We finally added two buttons; the submit with has a click value and the same goes for reset.
  • To notice, we have a v-container , v-layout , and v-flex with a xs12 for small devices layout.

You should now be able to see the fields and interact with them, but with no fruitful results.

Now, let’s build the logic for the form, which will be in the `script` tag

We will initialize four variables and three rules for name, email, and phone number to make them required to be filled. We will use auto-generated required rules for the three.

As for the submit and reset button, we will use two methods, validate to submit and rest to reset the whole fields to empty.

The script tags should look something like this:

  • In the data function, we initialized our four variables that we gave id previously to, to empty strings.
  • We also wrote rules for our name, phone number, and email.
  • In methods , we used the $ref in the v-form to use the validate and reset functions.

So combining both the template first and script tags as second, we will have our layout built.

Next article, we will be building the backend using the four Google Technologies as well as a fifth one, which is the Google Chrome Dev Tools.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabil Mohammed

Nabil Mohammed

#Developer Advocate | #Tech Savvy | #Writer/#Blogger | #Podcaster | #Musicophile | #Cinephilia.