My Travel Blog

CodeHat

Fetch and API requests in Nuxt

How to deal API requests in Nuxt app

Sat Jun 19 2021

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

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

Comments