Login Application using VueJS, Vuetify and Vue Router

Vue.js is an open-source, progressive Javascript framework for building user interfaces that aim to be incrementally adoptable. The core library of Vue.js is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects.

You can visit the official page to learn more about it.

I’m going to show you exactly how to get up and running with Vue.js 2 in this tutorial that will take you from installing Vue for the first time to creating a register/login and a dashboard page using a material design framework for Vue — Vuetify.

Before you start

This post is suited for intermediate frontend developers and so being conversant with beginner concepts and installation processes is assumed. Here are a few prerequisites you should already have before you start to use Vue CLI through this article.

You will need:

• Node.js 10.x and above installed. You can verify if you do by running node -v in your terminal/command prompt.
• The Node Package Manager (NPM) 6.7 or above also installed.
• A code editor: Visual Studio Code is highly recommended.

Initiating the project

First let’s install Vue cli:

npm install -g @vue/cli

Next, we can use it to start a new Vue project:

vue create vue-project

This will provide you with the following prompt:

Choose Default Vue 2. After it’s finished installing, we can get start with the following commands:

> cd vue-proj
> npm run serve

Then, the project will become accessible at http://localhost:8080/ in your browser!

Open in VS.Code, that’s how the project structure would be like:

Adding Vuetify

Vuetify is a material design component framework. similar to Bootstrap.

Add Vuetify to our application with this command:

vue add vuetify

You will be asked a series of questions. Choose defaults for simplicity. That’s how the application would look like now.

Login Form:

After, create a new file Login.vue in components directory and paste the following code.

Vue component is composed of three things: logic, templating and styling.

• Here in <template> tag all of our html resides including vue interpolation and vue directives.
• In script, we are exporting a default object where name property defines the name of the component. data() here is function that returns the state of the component basically. Every property inside returned object of data() is added to the Vue reactivity system so that if we change that property value then VueJS re-renders the dom with the updated data.
• methods is an object containing the desired methods that we want to add to our component.

Now let’s get to App.vue. Remove all the code in that and now it should look like this:

Here we are importing our Login component in main component App, referenced it under components and use that reference as a custom element tag in templates. Now it will render our Login form.

Adding Registration Form

For registration we can do some amendments in the same login form and make values bit dynamic:

Here we have added a boolean value isRegister and based on that we would toggle fields and text defined in stateObj for registration and login form respectively

Adding Routing:

Now we’ll add routing to our app using vue cli. It will override the code in app.vue and will generate two sample routes.

vue add router

Open up the App.vue file and delete all the code in the template and all the styles. Your App.vue should look like this:

The <router-view> tag here is like a placeholder that will display the current page that you are on. Also replace following code in your router.js file.

Now on http://localhost:8081/ it will show us the login page. Let’s add another route, which would be our dashboard and we’ll navigate the user to the dashboard when logged in successfully.

{
  path: '/dashboard',
  name: 'dashboard',
  component: Dashboard,
  props: {}
}

also add import statement to dashboard, a new component which we’ll create in a while.

import Dashboard from '../components/Dashboard.vue'

Dashboard

Let’s create a dashboard page using vuetify navigation drawers. check more here.

Also now we’ll do some changes to our Login method in Login.vue file so it can navigate user to login page when logged in successfully.

login() {
   const { username } = this;
   this.$router.replace({ name: "dashboard", params:{ username: username} });
}

With that, we have successfully created a registration and login using Vue.js, Vuetify and Vue Router. You should now be able to go ahead and start experimenting with your own VueJS applications. Stay tuned for more.

You can find the files and complete code on Github.