Configuring Axios Globally with VueJS

Part 2 of 4 in Your Guide to Using an API with VueJS/NuxtJS and Axios
Dan Pastori avatar
Dan Pastori August 2nd, 2020

In the last tutorial, we went through installing Axios on VueJS and NuxtJS. We also made our first requests with each set up! However, there was one glaring difference between the VueJS and NuxtJS setups that will exponentially grow as you develop. That difference is the global access to Axios within NuxtJS compared to importing it with VueJS.

If you are using NuxtJS, this won’t be of any use to you since global access is already available. I’d move on to the next tutorial where we submit some data!

Why is this a big deal?

Simply put, the less you need to repeat yourself, the better. You don’t want to have to import Axios every time you want to use the library. Let alone, when you need to configure all of your requests to have certain headers, or intercept errors and gracefully handle them, doing this EVERY time adds up.

I’m not for putting every library used in a global set up. As a matter of fact, I’m against it most of the time. However, Axios is an exception. There’s global config and if you are building a Single Page Application, you will be making API requests all the time!

Luckily, this is fairly straight forward, so let’s get started!

Set Up

If you need to still install Axios within VueJS check out Using Axios to Make API Requests With VueJS. If Axios is already installed, let’s find the root javascript file where you set up your VueJS install. For me this is usually in a /resources/js directory and named app.js or index.js. Whatever it’s named, find that file.

In the file, you will simply need to add the following line:

window.axios = require('axios');

That’s really it! What this did was bind the axios variable to the window variable which gives us access to the functionality within any VueJS component! This may look familiar if you have been using VueJS with Laravel. By default, Laravel sets up the VueJS install similarly on the front end to work with their framework.

You now can use axios.get() or from within any component without having to import it every time.

Other Global VueJS Axios Options

Even though that’s my preferred method, there may be other ways you choose to structure your VueJS app. Honestly, this is why I prefer NuxtJS because it’s an opinionated way on how to set up the VueJS ecosystem and extend it with other modules. And it makes a ton of logical sense!

The other options I’d consider are dependent upon what kind of app you are creating. If you will be using lots of request transformations (usually when working with multiple APIs) or working with various authentication methods, I’d add all of this in a separate file. This will make sure your VueJS initial file stays clean and easy to read.

What’s Next?

There’s a lot! It’s nice to have Axios globally, but even that won’t be enough for larger applications. You will not only be re-using axios, but also API requests. I’ll show you have to abstract those requests into nice re-usable modules with VueJS and NuxtJS.

However, next up, we will be going through a quick tutorial on how to send data to your API through a POST/PUT/PATCH request.

Keep Reading
View the course View the Course Your Guide to Using an API with VueJS/NuxtJS and Axios
Up Next → POST, PUT & PATCH Requests with VueJS and Axios

Support future content

The Ultimate Guide to Building APIs and Single-Page Applications with Laravel + VueJS + Capacitor book cover.

Psst... any earnings that we make off of our book is being reinvested to bringing you more content. If you like what you read, consider getting our book or get sweet perks by becoming a sponsor.

Written By Dan

Dan Pastori avatar Dan Pastori

Builder, creator, and maker. Dan Pastori is a Laravel certified developer with over 10 years experience in full stack development. When you aren't finding Dan exploring new techniques in programming, catch him at the beach or hiking in the National Parks.

Like this? Subscribe

We're privacy advocates. We will never spam you and we only want to send you emails that you actually want to receive. One-click unsubscribes are instantly honored.