How to have list + details pages based on API fetched content

Question

I am facing a issue in my nuxt projct.

when i route the page by using nuxt-link, it doesn't render component in my page, i guess this is not making fetch call.

but when i use normal a href link, my page is working fine. everything is in place.

here is the link in a blog listing page component

// blog listing page snippet

<template>
  <div>
    <div v-for="blog in blogs.response.posts" :key="blog.id" class="col-md-3">
      <nuxt-link :to="`/blogs/${blog.id}`" class="theme-blog-item-link"> Click to View Blog </nuxt-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      blogs: [],
    }
  },
  async fetch() {
    this.blogs = await fetch('https://www.happyvoyaging.com/api/blog/list?limit=4').then((res) => res.json())
  },
}
</script>

but this works fine with if i replace nuxt-link with a href tag

<a :href="`/blogs/${blog.id}`" class="theme-blog-item-link">
  Click to View Details
</a>

By click to that link, i want to view the detail of the blog by given id. that is _id.vue, code for that page is below.

//This is Specific Blog Details page code

<template>
  <div class="theme-blog-post">
    <div v-html="blogs.response.description" class="blogdesc"></div>  
  </div>
</template>

<script>
 export default {
   data(){
    return {
      blogs: []
    }
  },
  async fetch() {
    const blogid = this.$route.params.id
    this.blogs = await fetch('https://www.happyvoyaging.com/api/blog/detail?id='+blogid+'').then((res) => res.json())
  },
}
</script>

problem is on blogdetails page, where routing through nuxt-link not rendering the components but by normal a href link, it works fine

I am getting this error in console

 vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <PageNotFound> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

    ---> <Error> at layouts/error.vue
           <Nuxt>
             <Layouts/default.vue> at layouts/default.vue
               <Root>

Answer 1

Since your API requires some CORS configuration, here is a simple solution with the JSONplaceholder API of a index + details list collection.

test.vue, pretty much the blog listing in your case

<template>
  <div>
    <div v-if="$fetchState.pending">Fetching data...</div>
    <div v-else>
      <div v-for="item in items" :key="item.id">
        <nuxt-link :to="`/details/${item.id}`"> View item #{{ item.id }}</nuxt-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
    }
  },
  async fetch() {
    const response = await fetch('https://jsonplaceholder.typicode.com/users')
    this.items = await response.json()
  },
}
</script>

details.vue, this one needs to be into a pages/details/_id.vue file to work

<template>
  <div>
    <button @click="$router.push('/test')">Go back to list</button>
    <br />
    <br />

    <div v-if="$fetchState.pending">Fetching details...</div>
    <div v-else>{{ details.email }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      details: {},
    }
  },
  async fetch() {
    const response = await fetch(`https://jsonplaceholder.typicode.com/users/${this.$route.params.id}`)
    this.details = await response.json()
  },
}
</script>

As you can see, I do only use async/await here and no then for consistency and clarity.

Try this example, then see for fixing the CORS issue. The latter is backend only and not anyhow related to Nuxt. A quick google search may give you plenty of results depending of your backend.