Hi I'm Kei, front-developer. I'll show you how to fetch data with "aynscData" of Nuxt.js.

How to set up Nuxt project on Docker

This article is a continuation of the previous article.So if you want to know how to set up Nuxt.js project on docker, please read the article below.
https://codebox-lib.netlify.app/setup-nuxt-docker

Install axios and set up

You need to confirm if axios is installed. All you have to do is that you see if "@buxtjs/axios....." is in package.json.

  "dependencies": {
    "@nuxtjs/axios": "^5.13.6",

If there is not axios, you need to run the following command.

 > docker-compose run nuxt yarn add @nuxtjs/axios
> docker-compose build
> docker-compose run --rm nuxt yarn install 

And also on "nuxt.config.js", you need to add the contents below.

  modules: [
    '@nuxtjs/axios'
  ],
  axios: {
  },

Start and run docker container.

> docker-compose up -d

OK! Finally, you can use axios.

Fetching data from JSON placeholder

When you start Nuxt project, "index.vue" is automatically generated under "pages" directory. Before you use asyncData, erase all codes on the index.vue and copy & paste the following code.

<template>
  <section class="p-5">
    <div>
      <h1 class="font-bold text-lg mb-5">Let's fetch data from JSON placeholder</h1>
      <div class="mb-5">
        <h2 class="font-bold text-base mb-2">
          All Posts
        </h2>
        <ul>
          <li
            class="flex items-center mb-3 border p-2 rounded-md"
            v-for="(post, index) in posts"
            :key="index"
          >
            <span class="mr-auto">{{ post.title }}</span>
          </li>
        </ul>
      </div>
    </div>
  </section>
</template>


<script>
export default {
  async asyncData({ $axios }) {
    const postResponse = await $axios.$get("https://jsonplaceholder.typicode.com/posts");


    return {
      posts: postResponse
    };
  }
};
</script>


<style></style>

Access "localhost:3000" and see if the images like below is shown.



OK! You successfully fetch data from JSON placeholder.

Using dynamic routing

Next, let's make detail page for each posts that you fetched previous chapter. The detail page is like this.

Make folder "posts" under "pages" folder on your nuxt project. After that, make "_id.vue" file.

├── pages
│   ├── index.vue
│   └── posts
│       ├── _id.vue

Pasete the following contents on "_id.vue".

<template>
  <section class="p-5">
    <div>
      <h1 class="font-bold text-lg mb-5">Dynamic Routing</h1>
      <div class="mb-5">
        <h2 class="font-bold text-base mb-2">
          Detail Page
        </h2>
        <p>ID：{{ post.id }}</p>
        <p>Title：{{ post.title }}</p>
        <p>Content：{{ post.body }}</p>
      </div>
      <nuxt-link to="/">
        <button
          class="bg-black text-white text-xs font-bold px-3 py-2 border rounded-lg"
        >
          Back to home
        </button>
      </nuxt-link>
    </div>
  </section>
</template>


<script>
export default {
  async asyncData({ $axios, route }) {
    const postId = route.params.id;
    const postIdResponse = await $axios.$get(`https://jsonplaceholder.typicode.com/posts/${postId}`);


    return {
      post: postIdResponse
    };
  }
};
</script>


<style></style>

Access "localhost:3000/posts/1" and see if the contents is shown.



OK!! Successfully make dynamic pages.