How To Use API In NuxtJs (Nuxt Asyncdata Axios) - CoderMen

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>