How do I use Axios with Vue 3's Composition API?

How do I use Axios with Vue 3's Composition API?

You can use Axios in Vue 3's Composition API by importing Axios and using it within the setup function.

Can you show me a code example?

Sure! Here's a simple example:

import { ref } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const data = ref(null);
    const error = ref(null);

    const fetchData = async () => {
      try {
        const response = await axios.get('https://api.example.com/data');
        data.value = response.data;
      } catch (err) {
        error.value = err;
      }
    };

    fetchData();

    return { data, error };
  }
};

What if I want to handle loading states?

You can add a loading state by creating another ref variable. Here's an updated example:

const loading = ref(true);

const fetchData = async () => {
  loading.value = true;
  try {
    const response = await axios.get('https://api.example.com/data');
    data.value = response.data;
  } catch (err) {
    error.value = err;
  } finally {
    loading.value = false;
  }
};