How to use the @ nuxtjs /axios module with Nuxt3?

Step 1: Installation and Configuration

Before using the @nuxtjs/axios module in Nuxt3, you need to install it. Typically, you can install it using npm or yarn:

bash
npm install @nuxtjs/axios
# or
yarn add @nuxtjs/axios

Once installed, add the axios module to your Nuxt configuration file (typically nuxt.config.js), enabling Nuxt to recognize and load it properly:

javascript
// nuxt.config.js
export default {
  buildModules: [
    '@nuxtjs/axios',
  ],
  axios: {
    // Configuration options
    baseURL: 'https://api.example.com' // Your base URL
  }
}

Step 2: Using Axios in Components

After installing and configuring the @nuxtjs/axios module, you can access the axios instance in any Vue component using this.$axios. Here is an example of using axios to make data requests in a Nuxt page component:

javascript
<template>
  <div>
    <h1>User Information</h1>
    <p>{{ userInfo }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: null
    }
  },
  async mounted() {
    try {
      const response = await this.$axios.$get('/users/123');
      this.userInfo = response;
    } catch (error) {
      console.error('Request failed', error);
    }
  }
}
</script>

In this example, we initiate a GET request in the mounted lifecycle hook to fetch user information for user ID 123. After a successful request, we store the response data in the component's data property userInfo, allowing it to be displayed in the template.

Step 3: Handling Errors

Properly handling request errors is crucial when using axios for network requests. In the above example, we use the try...catch structure to capture potential errors and log them to the console. This helps you quickly identify issues during development.

javascript
async mounted() {
  try {
    const response = await this.$axios.$get('/users/123');
    this.userInfo = response;
  } catch (error) {
    console.error('Request failed', error);
  }
}

Summary

By following these steps, you can successfully integrate and use the @nuxtjs/axios module for API requests in your Nuxt3 project. This integration not only simplifies API requests but also effectively manages API base configurations and handles errors globally.