Fetch and API requests in Nuxt

Devmnj • Sat Jun 19 2021

0 min read

Nuxtjs is a framework which simplifying the development of the Vue project.

Using async fetch property we can fetch data from an API end point. There is another method called asyncData

fetch v/s asyncData

The fetch can be placed on any component while the asyncData can be used only with page component directly, that is only with in the route.

fetching API

The fetch can be used to get data from an API , an Ideal API call will look like the following

Source code

data(){
return {
   dataHolder= \[\]
}
},
async fetch() {
    const url='https://api.nuxtjs.dev/posts';
    this.Trending = await fetch(url).then(res =>
      res.json()
    )
  },
  // call fetch only on client-side
  fetchOnServer: false

fetch can be configure for either client or server using the fetchOnServer property