21st Jan 2022

Vue JS with Axios & Vuex

Web

Written By, Jay Parmar

Hello guys,

Hope you’re doing well.

So before we move towards creating the registration, login, and logout
functionality with Vue JS using Axios & Vuex, I would like you to
take a small note as a prerequisite.

Prerequisite

  • Developers must have knowledge of javascript.
  • Developers must have knowledge of Vue JS basics. (Including props, components, methods, etc)
  • Developers should have knowledge of calling APIs. (at least with POSTMAN)

Rest assured my friends 🙂

Don’t worry if you’re not too familiar with Vue. If you’re just starting your career with this amazing JS framework. I would like you to pay attention to each step, especially if you’re a beginner.

Let’s start playing with Vue.

Installation of Vue CLI

Here we’re going to make a demo for the registration, login, and logout functionality with Vue 2. But don’t worry If you want to use Vue 3, because the same things will apply for Vue 3 as well with slight changes.

So here I am hoping that you guys have installed Vue CLI in your system. If not, then you can follow the below steps to install the same.

You can paste the below-given line to your terminal (If mac / Linux) or command prompt (If windows)

npm install -g @vue/cli

Thus, you would be able to install the Vue CLI to your system, here -g means global. So you can run the “vue” command from any path of your system.

To check the Vue CLI version, simply type the following command,

vue –version

Create a new project/application

Let’s move towards the installation of a new project. To create a new project using Vue CLI, you can simply type the following command.

vue create {project_name}

So in our case, the command would be,

vue create vue-auth-app

Now you may be asked to choose an installation.

Vue 2 (default)
Vue 3 (default)
Manual

In this example, we’re going to choose Vue 2 (default).

Run the project/application

Once your installation process is finished, you’ll have to switch to your project in the terminal/command prompt.

Now to start, run the below-given command,

npm run serve

After the process, you’ll be given a URL something like the added screenshot,

laravel_vuejs_blog

Now simply open the local URL in your browser and here you go. You’ve completely installed and run your first vue project.

Install vue-router

As we know we’re going to create a register, login, and logout example over here. So it is mandatory to have routes for the switching purpose, from one page to another.

Now we have already installed Vue CLI, so let’s do it with Vue CLI. Hit the following command to install vue-router and related stuff into the project.

vue add router

Let’s start playing with code:-

Edit default navigations

Now the vue-router has been added to your project you would be able to see 2 navigation options.

=> Home
=> About

Now let’s create one component called “Nav.vue” under the “components” folder,

Now, we’ve to import this in our App.vue file.

Let’s make a login form

To create a login form we need to create one file inside the “view” folder called Login.vue

Let’s make a registration form

To create a registration form we need to create one file inside the “view” folder called Register.vue

Add router

In your router/index.js file, you’ll have to add a new router for the login and registration. So that whenever we click on the login menu or register menu the appropriate view can open.

Let’s copy the Home router and make it similar for the login and register. Do not forget to import the view file for the same.

Link routers

Now we have to link those routers with our navigation bar because currently, we’ve not attached anything to “a” tag, also if you’ve attached the links to “href” and will click on login or register. You’ll notice that the page gets refreshed all the time. So we would handle this by replacing an “a” tag with “router-link”. It would look something like this in your Nav.vue file,

Install Axios

To install an Axios, please use the following command,

npm install axios

Let’s call an APIs

Now let’s register the user by calling an API using Axios.

Open the Register.Vue file, Make the changes according to the following code,

The same way we’ll call an API for the login. So open the Login.vue file and make the changes as per the following code,

Now let’s call the logout API,

NOTE : You’ll have to create a button or one menu beside the login and registration menu. You can render it conditionally based on whether the user is logged in or not. I’ve created as shown below,

Redirection after login

To redirect after login we’ll just write the below-given line on the successful response of login API.

Let’s open the Home.vue file and call an API to fetch the logged-in user. Once the API call succeeded we will set the logged-in user detail to Home.vue as well as Nav.vue file. Because based on the user’s login status we’ll switch the menus (login & register or logout)
So here in both files, we’ll have to write the same code to display user-related data and have to render the menu conditionally. So we will call an API for that in the App.vue file instead of Home.vue & Nav.vue (We’ll cover that code after the vuex installation)

So here we bring the vuex because it may happen after calling the login API, when you redirect to the “/” URL, the created() calls an API to fetch the logged-in user data. But it may not reflect and for that, you have to refresh the page to see the login user details.

So let’s install vuex.

Install vuex

You can use the following command to install vuex to the project,

npm install vuex

Here in this example we’re not going in deep for vuex.

Setup vuex file

Let’s create a file in src directory called “vuex.js”

Don’t forget to import the store in the “main.js” file. So your main.js file would look like,

Now we’ve to use the vuex so that we can have the instant effect of the data once its state changes.

So here we go for the App.vue file code. Which will call an API to fetch the logged-in user and set the user state using vuex.

After that, keep the following line in your “Login.vue” file before you redirect to “/” URL.

Now you’ll have to add a computed property and import the mapGetters to fetch the current user value for Home.vue and Nav.vue file.

Also when you call the logout API, please add the following line before you redirect the user to the login page.

So that the user value is set to the default value “null”.

Hope this example makes sense. Please comment if you’re stuck somewhere in the middle of any error while implementing the same.

Here you can grab the actual code of this vue application,
Here is the link for the GIT repository
vue-auth-app

Quick recap

  • We’ve created a vue project.
  • We’ve installed vue-router in the project.
  • We’ve made a “Nav.vue” file and added our html for the login and registration menu.
  • We’ve made register and login view files.
  • We’ve called an API to register new users and log in.
  • We’ve installed the vuex in the project.
  • We’ve made a “vuex.js” file in the /src directory.
  • We’ve called an API to fetch the current user in App.vue
  • We’ve added user detail to render conditionally.
  • We’ve called the logout API.
  • We’ve added the dispatch store code of vuex.

Written By,

Web Developer at Yudiz Solutions Pvt. Ltd