How do I configure Axios in a Vue.js application?

How do I configure Axios in a Vue.js application?

To configure Axios in a Vue.js application, you can create an Axios instance with default settings. Would you like a code example?

Yes, please provide a code example.

Here's a simple example:

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

export default instance;

This creates an Axios instance with a base URL and custom headers.

How can I use this instance in my Vue components?

You can import the Axios instance in your Vue components like this:

import axios from '@/path/to/your/axios-instance';

export default {
  methods: {
    fetchData() {
      axios.get('/data')
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};