So I have a really, really simple app set up here. You saw a preview of it just over here. What we're doing is making a request to the JSON placeholder API which is just basically fake data and we're just getting a list of posts and listing them out on the page.

So as long as with any changes that we make we still see that data we can be sure that we haven't broken anything. So the first thing that you might be doing and certainly something I did for a while is maybe creating some kind of config JavaScript file and exporting an object with maybe a API URL variable in here. And that's absolutely fine. You can do that.

So let's go ahead and grab this base URL here and pop that inside of our config. And let's import this from here. So let's go ahead and import say config from and let's just say at slash config just to make things simpler. And then you might want to go ahead and use backticks to pop in config dot base URL or API URL and get exactly the same result.

Now that's absolutely fine but a couple of problems with this. One, you are pulling in your config every single time you want to make an Axios request which can be a little bit annoying. Of course you can still use your config and then use the methods that we're going to discuss to actually pull it in from here. So it's good to have some kind of config file and even better use something like the EMV package to do this.

But we won't discuss that now. We'll just discuss how we can basically get this to the point where we have just making a request to post which makes a lot more sense to me. I'm going to go ahead and get rid of the config import here. In fact, let's get rid of the entire config file just for now. And let's look at the first method of doing this.

So let's come over to main.js and let's go ahead and import Axios in here from Axios. And the first thing that we could do is actually override the default globally. So we can set the base URL. Be really careful with the capitalization of URL here.

I often do this and wonder why it doesn't work. It has to be all caps. And you can just go ahead and set that inside of here. So let's go back over to app and let's actually get the URL that we're making a request to here.

And let's basically just grab this and pop this in here. Now I'm just going to comment this out for now just so we can see that this isn't working. So let's head back over to here. And, of course, we get Axios is defined but never used over here.

So let's comment that out as well. And there we go. Of course, we see no content. So as long as we import Axios in our kind of main JavaScript file, and I'm working with view here,

and then you go ahead and override the base URL, that's then going to work for you. So that's one way of doing it. Now some people don't like this method because if you are setting lots of different defaults over on Axios, you're going to end up with a long list of things here that you're setting.

For example, if you need base headers, all that kind of information is just going to be lumped into your main.js file. So most people prefer not to do this. Now I'm going to go ahead and cut this out here. I'm going to get rid of this, and we're going to look at the second method, which is not necessarily my preferred method.

It depends on the context of how I'm working, but certainly a very good method for maybe larger apps. So what I'm going to do is create a new folder inside of the base directory here called Axios. And inside of here, I'm going to create an index.js file. Now inside of here, what we're going to do is we're going to import Axios from Axios.

And we're not going to go ahead and set that like we just did. Instead, what we're going to do is we're going to export a new Axios instance. And what that means is that with this new Axios instance, the first argument allows us to just pass in any default headers, base URL, whatever you want to add inside of here.

Of course, all of that's over on the documentation. But we can just set the base URL from here. And if, of course, what you were doing earlier, as in importing your config, is the case, then you can go ahead and set it from your config or use environment variables to do this,

which would be the preferred way of doing it rather than hard coding this in, because your base URL for your API is probably going to change from development to production or staging or testing environments. So now that we've done that, what we can do is over in our component here, which is erroring at the moment, instead of importing Axios from the actual Axios module itself,

we can pull this in from our own Axios implementation or our own Axios instance that we've created. So if we come back over now and just get rid of that, you can see that this is still working. So I'd say for larger projects, this is good. Or if you just really like keeping things nice and tidy, this is a really nice method of doing it.

You're just creating an instance manually rather than importing it and starting to use it. And you're setting all of this information inside of here, exporting that, and kind of just including this in as you normally would the module anyway. And this will just work.

So they are two methods. There are other ways that you can do this, but these are the two general methods that you might want to use to set a base URL and, in fact, any other settings for Axios, either by setting this inside of main.js, by importing and overriding the defaults, or, of course, creating your own instance,

returning this and including this rather than the module. So hopefully that's helped you. And hopefully this will help to keep your Axios requests within your components or anywhere that you're using Axios, in fact, nice and tidy.