useFetch and lazy option

Data fetching docs (https://nuxt.com/docs/getting-started/data-fetching#lazy) say:

By default, data fetching composables will wait for the resolution of their asynchronous function before navigating to a new page by using Vue’s Suspense. This feature can be ignored on client-side navigation with the lazy option. In that case, you will have to manually handle loading state using the pending value.

When I use

useFetch

useFetch

like this:

const { pending, data: pizza } = useFetch(
  'https://reqres.in/api/users/1?delay=3',
  {
    lazy: false,
  }
);

const { pending, data: pizza } = useFetch(
  'https://reqres.in/api/users/1?delay=3',
  {
    lazy: false,
  }
);

should I expect a 3 seconds wait before navigation to the page containing this code?
I feel like I'm missing some piece of the puzzle here

I've created a simple example of this behaviours:
https://stackblitz.com/edit/github-7hutqh

Nuxt•2y ago•

17 replies

basic-ph

useFetch and lazy option

Data fetching docs (https://nuxt.com/docs/getting-started/data-fetching#lazy) say:

By default, data fetching composables will wait for the resolution of their asynchronous function before navigating to a new page by using Vue’s Suspense. This feature can be ignored on client-side navigation with the lazy option. In that case, you will have to manually handle loading state using the pending value.

When I use

useFetch

useFetch

like this:

const { pending, data: pizza } = useFetch(
  'https://reqres.in/api/users/1?delay=3',
  {
    lazy: false,
  }
);

const { pending, data: pizza } = useFetch(
  'https://reqres.in/api/users/1?delay=3',
  {
    lazy: false,
  }
);

useFetch and lazy option

Similar Threads

useFetch and lazy option

Similar Threads

Similar Threads

Similar Threads