CODEWITHSUNDEEP
nuxt3.js
Hugo Lassiège
Hugo Lassiège

Reputation: 1056

What is the difference between axios and useFetch (nuxt 3)?

I'm slowly starting to migrate from nuxt 2 to nuxt 3. Previously I used to use axios.

In Nuxt3, it is recommended to use useFetch

However the behavior is quite weird with useFetch. Calls are not made systematically.

For example in this piece of code :

async mounted() {
        const store = useAuth();
        let response = await axios.get('http://dev.test.fr/api/secured/admin', {headers : store.authHeader() });

        this.sensibleInformation  = response.data;
    },

With Axios, every time I open this page, the call is made and the sensibleInformation is up to date.

With useFetch, the syntax is similar

    async mounted() {
        const store = useAuth();
        let response = await useFetch('http://dev.malt.fr/api/secured/admin' , {method : 'get', headers : store.authHeader() });
        this.sensibleInformation  = response.data;
    },

But the call to the server is done... sometimes. So, the sensibleInformation is most of the time empty. And I don't find any explanation in the documentation.

Maybe there is something I miss here.

I'm using nuxt 3.0.0-rc.6

Upvotes: 9

Views: 10801

Answers (3)

cyril
cyril

Reputation: 1017

As it is explained in nuxtJS3 useFetch
useFetch is a wrapper for $fetch(come from here ohmyfetch)

  1. you don't need to import this lib it is include in vuejs3 and lastly axios was not compatible with vuejs3 explained here why use $fetch

  2. what is really great is that body is automatically parsed in JSON, so no need to parse or stringify anything. Also header for content type is automatically added.

So no need to import any library, automatic parsing, automatic header detected etc...

Upvotes: 4

TimC
TimC

Reputation: 29

The major difference between useFetch and Axios is that useFetch is a wrapper around useAsyncData (and native $fetch) and so works with both SSR and Static modes of Nuxt.

If using it in the onMounted hook you will probably get more expected results if you set the server option to false so it runs only in the client (more like how Axios runs in the mounted hook). I have predominantly used it in <script setup> for SSR set ups.

More info here: https://v3.nuxtjs.org/api/composables/use-fetch

Upvotes: 2

PierreMeriau
PierreMeriau

Reputation: 1

Not sure about this one, but I think the "useFetch" helper is designed to be used with the Vue composition API, so :

  • within the "setup" function
  • directly in your script tag if you're using the "<script setup>" synthax

The issue you are dealing with maybe due to the fact that you're using "useFetch" within the "mounted" hook of Vue.js options API.

But once again, not sure about this one :)

Upvotes: 0

Related Questions