Search code examples
fetchnuxt.jsnuxt3.js

Nuxt 3 HTTP request on demand after rendering: a client-side fetch

Nuxt 3 has those amazing data fetching functions (ex.: useFetch), but I come out on a situation that I need to make request after the rendering time (ex.: calling from a button and send a search term).

As I far know, useFetch are not working on client-side, here is what I have trying to do

<template>

<button @click="goSearch()">Search</button>

</template>


setup() {
        const goSearch = async () => {
            const { data } = await useFetch('search', () => $fetch('/api/search'));
            console.log(data.value);
        };

        return { goSearch };
    },
}

Does nuxt3 offers a built in function to make http request on demand (client-side official http axios like)?

Solution

  • $fetch should work. The problem were a small bug that is now fixed. If you are experiencing this bug, just upgrade nuxt/ohmyfetch lib

    npx nuxi upgrade --force

    More here: https://github.com/nuxt/framework/issues/2502#issuecomment-999783226