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
- They have access to
this, no need to learn some new Nuxt context
- They can use
mountedhook to call asynchronous data, renaming it to
fetchshould just work
- Pages transitions will be easier since it will quickly switch to new page since
fetchis called during
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!