Configuring Axios Globally with VueJS

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 axios.post() 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.