Adding a wp: featured image to loop when using a headless CMS via the Wordpress API and Vue.js

Question

Would like to know how to implement the Wordpress Featured Image to multiple vue.js/nuxt.js based headless-CMS approaches using the Wordpress restful API.

Initially, I followed this immensely helpful tutorial headless-cms with nuxt and created a headless CMS via the wordpress api, and of course applied it to my use-case (here is a link to a live version nuxt-headless-cms-webapp. Unfortunately, I have been unable to figure out how to include a post's featured image as it is not covered in this particular tutorial. I then did a bit of research and ended up piecing together another project (vue.js), in which I was able to implement featured images. That being said I would like guidance with regard to implementing my working code in terms of the wp-featured image, to the original tutorial's project (as nuxt provides better routing and SEO options from my understanding. Thank you in advanced for any help!

First, here is the axios http request syntax found in the original tutorial (nuxt) project's index.js:

const siteURL = "https://indvillage.com"

export const state = () => ({
  posts: [],
  tags: []
})

export const mutations = {
  updatePosts: (state, posts) => {
    state.posts = posts
  },
  updateTags: (state, tags) => {
    state.tags = tags
  }
}

export const actions = {
  async getPosts({ state, commit, dispatch }) {
    if (state.posts.length) return
    

    try {
      let posts = await fetch(
        `${siteURL}/wp-json/wp/v2/posts?_embed`
      ).then(res => res.json())

      posts = posts
        .filter(el => el.status === "publish")
        .map(({ id, slug, title, excerpt, date, tags, content }) => ({
          id,
          slug,
          title,
          excerpt,
          date,
          tags,
          content
        }))

      commit("updatePosts", posts)
    } catch (err) {
      console.log(err)
    }
  },

  async getMedia({ state, commit }) {
    if (state.media.length) return
    

    try {
      let media= await fetch(
        `${siteURL}/wp-json/wp/v2/media?_embed`
      ).then(res => res.json())


      commit("updatePosts", media)
    } catch (err) {
      console.log(err)
    }
  },

  async getTags({ state, commit }) {
    if (state.tags.length) return

    let allTags = state.posts.reduce((acc, item) => {
      return acc.concat(item.tags)
    }, [])
    allTags = allTags.join()

    try {
      let tags = await fetch(
        `${siteURL}/wp-json/wp/v2/tags?page=1&per_page=40&include=${allTags}`
      ).then(res => res.json())

      tags = tags.map(({ id, name }) => ({
        id,
        name
      }))

      commit("updateTags", tags)
    } catch (err) {
      console.log(err)
    }
  }
}

Next, we have the index.vue page where the above logic is implemented.

template>
  <div>
    <app-masthead></app-masthead>
    <div class="posts">
      <main>
        <div class="post" v-for="post in sortedPosts" :key="post.id">
          <h3>
            <a :href="`blog/${post.slug}`">{{ post.title.rendered }}</a>
          </h3>
          <small>{{ post.date | dateformat }}</small>
          <div v-html="post.excerpt.rendered"></div>
          <a :href="`blog/${post.slug}`" class="readmore slide">Read more ⟶</a>
        </div>
      </main>
      <!--<aside>
        <h2 class="tags-title">Tags</h2>
        <div class="tags-list">
          <ul>
            <li
              @click="updateTag(tag)"
              v-for="tag in tags"
              :key="tag.id"
              :class="[tag.id === selectedTag ? activeClass : '']"
            >
              <a>{{ tag.name }}</a>
              <span v-if="tag.id === selectedTag">✕</span>
            </li>
          </ul>
        </div>
      </aside>-->
    </div>
  </div>
</template>

<script>
import AppMasthead from "@/components/AppMasthead.vue";

export default {
  components: {
    AppMasthead
  },
  data() {
    return {
      selectedTag: null,
      activeClass: "active"
    };
  },
  computed: {
    posts() {
      return this.$store.state.posts;
      _embed = true;
    },
    tags() {
      return this.$store.state.tags;
    },
    sortedPosts() {
      if (!this.selectedTag) return this.posts;
      return this.posts.filter(el => el.tags.includes(this.selectedTag));
    }
  },
  created() {
    this.$store.dispatch("getPosts");
  },
  methods: {
    updateTag(tag) {
      if (!this.selectedTag) {
        this.selectedTag = tag.id;
      } else {
        this.selectedTag = null;
      }
    }
  }
};

Here is a link to my project with working wordpress featured images! https://indvillage.netlify.app/ And here is the logic associated with the axious http request I used. The question is how, do I include my logic in terms of the wp featured image to the initial nuxt tutorial without breaking things:

export default {
 data() {
   return {
     postsUrl: "https://indvillage.com/wp-json/wp/v2/posts",
     queryOptions: {
       per_page: 6,
       page: 1,
       _embed: true     
     },`
     
     posts: []
     
   };
 },
 methods: {
   // Get recent posts from wp
   getRecentMessages() {
     axios
       .get(this.postsUrl, { params: this.queryOptions })
       .then(response => {
         this.posts = response.data;
         console.log("Posts retrieved!");
     
         })
         
         //document.getElementById("test").id = "testing";
       
       .catch(error => {
         console.log(error);
       });
   },
   getPostDate(date) {
     return moment(date).format("111");
   },
   

 },
 mounted() {
   this.getRecentMessages();
 }
}

Next, here is the App.vue template that displays the parsed information:

<template id="app">
  <body>
    <div class="row container">
      
  <!-- looping through and displaying the array bound posts in HTML -->
      
      <div class="col s4 m4" v-for="(post, index) in posts" :key="index" :id="'post'+index">
        <div class="card" id="test">
          <div class="card-image">
            
  <!-- rendering the post's wp:featuredmedia in the image portion of the html/css card -->
          
          <img
              v-if="post._embedded['wp:featuredmedia']"
              :src="post._embedded['wp:featuredmedia'][0].source_url"
            />
          </div>
          
    <!-- rendering the post.excerpt to the html/css card container --> 

          <div class="card-content" v-html="post.excerpt.rendered"></div>
          <div class="card-action">
    
    <!-- rendering the post title to the action portion of the html/css card -->

            <a href="#">{{ post.title.rendered }}</a>
          </div>
        </div>
      </div>
  </body>
</template>

Please let me know if anyone has any suggestions with regard to implementing wp:featuredmedia to the code derived from the first project/tutorial (nuxt.js)

---

Thanks again! Feel free to email with further questions

Answer 1

A bit of a cheat answers is to install the jetpack plugin, this adds 'jetpack_featured_media_url' to the rest api and can be called in your example like the below:

<img
          v-if="post.jetpack_featured_media_url"
          :src="post.jetpack_featured_media_url"
        />