How To Use API In NuxtJs (Nuxt Asyncdata Axios)

In this blog post, we learn how to use API in NuxtJs. Here we use Asyncdata Axios, this method fetch data and render it on the server-side.

The benefits of the Asyncdata method in method fetch data and render it on the server-side. this method makes SEO friendly NuxtJs app. there are many methods to use asyncData in Nuxt, but we use the easiest one. So let’s start.

Step: 1 Create a new NuxtJs App

Run a simple command to create a NuxtApp.

npx create-nuxt-app nuxtapp

During creating this app, it’s asking some app details such as styling framework, project name, and many others. After successfully create a new project move to your project by CMD, using flowing this command.

cd nuxtapp 

Step: 2 Run NuxtJs App

Run the Nuxt application using the following command.

npm run dev

By default, its NuxtJs app runs on //localhost:3000/ 

Step: 3 Install Axios

Before using Axios, we need to install Axios first. Axios is a great HTTP client library and it is fetching data during server-side rendering. To install Axios use the flowing command.

npm install @nuxtjs/axios

After successfully add Axios into nuxt.config.js

  modules: [
    // Doc: //bootstrap-vue.js.org
    'bootstrap-vue/nuxt',
    '@nuxtjs/axios'
  ],

Step: 4 Edit Index.vue file 

After That update, your index.vue file with this flowing code.

<template>
 <div>
   <b-container >
   <b-row>
    <b-col>
     <div v-for="blog in blogs" :key="blog.id">
      <div >
        <n-link :to="`/posts/${blog.id}`"><h1>{{blog.title}}</h1></n-link>
      </div>
     </div>
    </b-col>
   </b-row>
  </b-container>
 </div>
</template>
<script>
import axios from 'axios'
 
export default {
 data () {
  return {
   blogs: [],
   
  }
 },
 asyncData ({ $axios }, callback) {
  $axios.get('//jsonplaceholder.typicode.com/posts')
  .then((res) => {
   callback(null, { blogs: res.data })
  })
 }
}
</script>

The result will be to show something like this. on //localhost:3000/

Now create a new file in blogs/_id.vue. and add this flowing code to open a single blog post.

<template>
 <div>
   <b-container >
   <b-row>
    <b-col>
     <div >
      <div >
       <h1>{{posts.title}}</h1>
       <p>{{posts.body}}</p>
      </div>
     </div>
    </b-col>
   </b-row>
  </b-container>
 </div>
</template>


<script>
import axios from 'axios'
export default {
 
 data () {
  return {
   posts: [],
  }
 },
 asyncData ({ $axios ,route }, callback) {
  // $axios.get(`/api/blog/${route.params.id}/${route.params.slug}`)
  $axios.get(`//jsonplaceholder.typicode.com/posts/${route.params.id}`)
  .then((res) => {
   callback(null, { posts: res.data ,loading: false })
  })
 }
}

</script>

Visit on //localhost:3000/posts/1

So, here we completed the blog post on How To Use API In NuxtJs (Nuxt Asyncdata Axios). hope it help you.