How to get axios baseUrl in nuxt?

In Nuxt.js, configuring and using axios is highly flexible and powerful. If you need to retrieve the baseUrl of axios in your Nuxt project, several approaches are available. Below are detailed explanations and examples of these methods:

Method 1: Configuration via nuxt.config.js

Configuring Axios in a Nuxt.js project is typically done through the nuxt.config.js file. You can set the default baseUrl here.

javascript
export default {
  axios: {
    baseURL: 'https://api.example.com'
  }
}

Method 2: Using $axios in Components or Pages

In Nuxt.js components or pages, you can access the axios instance via this.$axios. To retrieve the baseUrl from the configuration, use the following approach:

javascript
export default {
  mounted() {
    console.log(this.$axios.defaults.baseURL); // Log the baseURL
  }
}

Method 3: Accessing axios via Plugins

When you need to use axios across multiple locations with custom logic, plugins are recommended. First, create a plugin file to access the axios instance.

In plugins/axios.js:

javascript
export default ({ $axios }) => {
  console.log($axios.defaults.baseURL); // Log the baseURL
}

Then register this plugin in nuxt.config.js:

javascript
export default {
  plugins: [
    '~/plugins/axios'
  ]
}

Method 4: Using Environment Variables

For different environments (development, testing, production), you may need distinct baseUrl values. Nuxt.js and Axios support environment variables. Configure this in nuxt.config.js as follows:

javascript
export default {
  axios: {
    baseURL: process.env.BASE_URL || 'https://api.default.com'
  }
}

Ensure you set the BASE_URL environment variable before running your Nuxt application.

Summary

These methods provide flexible ways to configure and access the baseUrl of axios. Choose the approach that best fits your project's requirements and environment. In practice, it's generally recommended to configure via nuxt.config.js and access the instance through this.$axios in components, which maintains centralized configuration and clean code structure.