How to use axios in Nuxt 3

What is axios

Axios is a promise-based HTTP client for the browser and node.js. It was born out of frustration with the native Fetch API and has since grown to be one of the most popular and battle-tested HTTP libraries out there. It’s small (2KB), provides intuitive API and supports both callbacks and promises.

The main advantages of using axios are:

• It’s simple to use
• It has a well documented API
• It supports promises, which are very common in modern JavaScript codebases

Using axios is as simple as creating a new instance with a base URL and then chaining a series of .then calls to perform requests, more of this in the next sections.

If you feel you need more training with axios, it is wonderfully described in this awesome vue course*, I learned vue with.

What is fetchAPI?

Fetch API is a Browser API that allows you to make HTTP requests from your browser to a web server. It's currently supported by all browsers except IE and Opera Mini.

It's a modern alternative for XMLHttpRequest (XHR) API which was introduced in 1999. XHR API is widely used for AJAX requests in JavaScript. The main advantage of using fetch API over XHR is that it's compatible with promises, which makes it easier to read and write asynchronous code.

The fetch API has a lot of benefits such as:

• It's easy to use. All you need is just one function called fetch().
• It's widely supported by modern browsers (IE11+). You don't need any polyfills or shims to make it work on older browsers.
• Fetch is built into modern browsers, so it will work out of the box with no setup required.
• It supports the latest HTTP verbs, such as PATCH and DELETE.
• Fetch is seamlessly integrated in Nuxt 3 with the Nuxt hooks: useFetch, useLazyFetch, useAsyncData and useLazyAsyncData

The Nuxt/Axios module

The Nuxt/Axios module, was a convenient way in Nuxt2 to quick and easy integrate axios within Nuxt.js.

Once installed, you simply needed to set the base URL in the axios object in the nuxt.config, and you were ready to go,

Unfortunately, nuxt/axios does not work with nuxt3, and you were also limited to only one axios instance.

To fix this, we are going to directly install axios and build a custom plugin, making our customized axios instance available in our nuxt3 app.

How to install axios?

To install axios run:

npm install axios

That's it.

How to use axios in nuxt3 ?

To use axios in nuxt 3 we need to create a custom plugin.

To do so, let's go to plugins and make a new file and call it axios.ts.

One of the new, amazing features of nuxt3 is auto imports, so we can skip the step of adding this file in the plugins array like it was with nuxt 2.

Next, let's set up a basic axios instance.

We will make nothing fancy here, just the minimum that it works.

import axios from "axios";
export default defineNuxtPlugin((nuxtApp) => {
  const defaultUrl = "<https://localhost:5001>";

  let api = axios.create({
    baseUrl: defaultUrl,
    headers: {
      common: {},
    },
  });
return {
    provide: {
      api: api,
    },
  };
});

The above code creates a new axios instance and initializes it with the defined baseUrl and no headers.

With provide, we are making the axios instance globally accessable to our nuxt app.

Simply call this$.api to use it.

Congrats! You can now use axios to handle all of your API calls in a convenient way!