A trend that has increased in recent years is the use of CSS libraries and frameworks for the development of websites and systems in a faster and optimized way. It is very likely that you have heard of or even worked with frameworks like Bootstrap, Materialize, or Bulma. They are evidence of this trend and also show how such frameworks can greatly assist us in terms of productivity.
There are also many libraries that have the same goal, but are aimed at JavaScript frameworks. One example of this is Vuetify. It was created in 2016 with the aim of providing a series of styled components for Vue JS applications, based on Material Design.
In this article, we will learn how to install this library in a Vue project, as well as create our first code with Vuetify, which will be a login screen in an administrative system.
Starting a New Project
Vuetify needs to be added to a Vue project. Therefore, we will start a new project from scratch using vue-cli.
To begin, let's install the Vue CLI tool using the command below:
npm install -g @vue/cli
With this command-line tool installed, we can start a new project in Vue. We will create a project called hcode-admin by executing the following command in the Terminal:
vue create hcode-admin
When we execute this command, the creation process will begin, and we will need to answer a few questions. The first question is whether we want to use a more stable connection for a faster installation. We will type “Y” and press Enter:
Next, we will select which version of Vue we will use, as well as the tools we will use for compiling the project. We will choose version 2 because, as of the date of this article, Vuetify does not work with Vue 3. So, just press Enter:
With that, the creation of our project will begin:
After a few seconds, we will see the success message below:
It states that the project creation was successful, and now we are ready to start its development.
Adding Vuetify to the Project
Now we will add Vuetify to our project. First, we will access the project folder with the command cd hcode-admin.
Next, we will execute the command below:
vue add vuetify
A new installation process will begin, and we will need to answer some new questions.
The first question will be whether we want to perform the installation without first adding our files to Git. We will choose “y” and press Enter:
Next, we need to choose what the preset for our Vuetify will be. We will choose the default preset. So, just press Enter:
The download and addition of Vuetify to the project will begin. After a few seconds, we will see the message below:
This message indicates that the installation of Vuetify was successful!
We can now start the server for our project. To do this, simply execute the following command:
npm run serve
When we access the address http://localhost:8080/ in our browser, we will see the following result:
We can see that Vuetify is already being recognized in our project. Quite simple, don't you think?
Now let's start developing the structure of our login form using this library.
Getting to Know Vuetify's First Components
The first thing we will do is delete the component file called HelloWorld.vue, located in src/components.
Next, we will create a file called AdminForm.vue in this same directory. This name follows the recommendation of Vue itself to provide compound names for our components.
Moreover, it is important to remember that a Vue application uses the structure of a Single File Component. This means that the HTML, CSS, and JavaScript of the component are all in the same file.
The HTML structure of this component will initially be as follows:
<template>
<v-container class="grey lighten-3" id="login-page">
<v-row class="d-flex justify-center">
<v-col
cols="6"
>
<v-img src="../assets/hcode.svg" id="hcode-image"></v-img>
</v-col>
</v-row>
</v-container>
</template>
Explaining: is the tag used by Vue to start the HTML of the component. The
The
We also use the
Before we conduct our test, let's just add some styles to our elements using the