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.
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.
- 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:
~ 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:
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-contentwhich is the HelloWorld component, and name it the one you just renamed. In my case it’s Form
- Change the
importstatement to be like:
import Form from './components/Form'
- We will replace the registered component on the
componentsto be from HelloWorld to
- Delete what’s above the
v-contentand 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.
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
refto refernce it later using the methods for submit and reset buttons.
- For the first text field, we gave it and
rulesto not make it accept an empty field and finally some looks, like
- The same goes for the Email and Phone Number.
- For the text area, what was added is the
- We finally added two buttons; the submit with has a
clickvalue and the same goes for reset.
- To notice, we have a
xs12for 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 `
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.
script tags should look something like this:
- In the
datafunction, we initialized our four variables that we gave
idpreviously to, to empty strings.
- We also wrote rules for our name, phone number, and email.
methods, we used the
v-formto use the
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.