How do I configure Axios in Vue 3?

How do I configure Axios in Vue 3?

To configure Axios in Vue 3, you can create an Axios instance and set it up in your main.js file.

Can you show me an example of creating an Axios instance?

Sure! You can create an instance like this:

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
});

export default axiosInstance;

How do I use this instance in my components?

You can import the instance in your components like this:

import axiosInstance from '@/path/to/axiosInstance';

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

What if I need to add headers to my requests?

You can add headers when creating the Axios instance:

const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  headers: {'Authorization': 'Bearer token'},
});