Fetch with Nuxt.js 3: introducing fetch() hook

Fetch with Nuxt.js 3: introducing fetch() hook
Average rating: 3
(2 votes)

Thanks! You’ve rated this material!

If you already familiar with some neat Vue.js and Nuxt.js packages for 2019 from our blog, it’s time to broaden your horizons by telling you something new. Hmn…how about this? Fetch with Nuxt.js 3: introducing fetch() hook. 

Nuxt.js introduces a new hook called fetch in any Vue components. This kind of functionality was previously achieved using XMLHttpRequest. Fetch also provides a single logical place to define other HTTP-related concepts such as CORS and extensions to HTTP.

Every time you need asynchronous data,  fetch is called on server-side when rendering the route, and on client-side when navigating. It also introduces $isFetching at the component level, so you are able to display a placeholder while fetch is being called on client-side.

The main advantage here is to remove the correlation between pages and asynchronous data. Each component could have its own async data logic. This could also introduce a way for Nuxt modules author to create components to fetch data on particular endpoints.

Users who were dealing with Vue applications before should find the new usage of fetch easier.

  • They have access to this, no need to learn some new Nuxt context
  • They can use beforeMount or mounted hook to call asynchronous data, renaming it to fetchshould just work
  • Pages transitions will be easier since it will quickly switch to new page since fetch is called during beforeMount hook

We know you are curious to know more. So, you can do this by reading this material.

Don’t miss our monthly trending repositories. We like to keep you updates!

Rate this article, if you like it

Thanks! You’ve rated this material!

Got a project? Let's discuss it!

*By submitting this form you agree with our Privacy Policy.

Mailing & Legal Address

Syndicode Inc. 340 S Lemon Ave #3299, Walnut CA, 91789, USA

Visiting & Headquarters address
Kyiv Sofiivska 1/2a, 01001, Kyiv, Ukraine
Dnipro Hlinky 2, of. 1003, 49000, Dnipro, Ukraine
Email info@syndicode.com
Phone (+1) 9035021111