How to use @nuxtjs/axios with @nuxtjs/composition-api and nuxt 2

I want to use https://www.npmjs.com/package/@nuxtjs/axios with nuxt 2.17 and the plugin https://composition-api.nuxtjs.org/ (@nuxtjs/composition-api).

Now the usage of this.$axios does not work of course. I thought I might could inject it somehow, but was not successful so far.

I see this solution: https://stackoverflow.com/a/73237334/1121268
but it seems to be a bit clumsy to use getCurrentInstance of Vue.

Thanks for any hint how to use the $axios with the composition api.

You could do that using the Nuxt Composition-API's useContext. I've added a working simple code and link below.

To access Nuxt's context using the composition API useContext as explained on @nuxtjs/composition-api doc,
you need to import the useContext.

e.g. import { useContext } from '@nuxtjs/composition-api'

This way you can access all Nuxt context and in this case, you can access $axios module too.

<!-- language: lang-js -->

import { ref, defineComponent, useContext } from "@nuxtjs/composition-api";

export default defineComponent({
  setup() {
    const todo = ref([]);
    const fetching = ref(false);
    const { $axios } = useContext();

    const fetchPosts = async () => {
      try {
        fetching.value = true;
        const response = await $axios.get(
          "https://jsonplaceholder.typicode.com/todos/1"
        );
        todo.value = response.data;
      } catch (error) {
        // Handle the error here
        console.error("Error fetching todo:", error);
      } finally {
        fetching.value = false;
      }
    };

    return {
      todo,
      fetchPosts,
      fetching,
    };
  },
});

<!-- language: lang-html -->

  <div>
    <h1>TODOs</h1>
    <button @click="fetchPosts">Fecth Tasks</button>

    <p v-if="fetching">Fetching...</p>
    <pre v-else>
      {{ JSON.stringify(todo, null, 3) }}
    </pre>
  </div>

<!-- end snippet -->`

Here is the link to the codesandbox - https://codesandbox.io/s/nuxt-2-composition-api-and-axios-integration-pmzxq8