rohanverma.net/components/ProjectList.vue

<template>
  <div class="sm:flex sm:items-center px-6 py-4">
    <div class="text-center sm:text-left sm:flex-grow">
      <div class="mb-4">
        <p class="text-xl font-bold leading-tight border-b border-2px py-4">Recent Projects</p>
      </div>
      <div>
        <!-- {{posts}} -->
        <div v-for="project in posts" v-bind:key="project.id" @click="redirect_href(project.link)" class="flex group cursor-pointer hover:text-white hover:bg-indigo p-4">
            <p class="flex-1 pl-2 text-lg mb-1 group-hover:text-white " v-html="project.title.rendered"></p>
            <fa-layers full-width class="fa flex-none align-middle ml-2">
              <fa :icon="fas.faArrowCircleRight"/>
            </fa-layers>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { fas } from '@fortawesome/free-solid-svg-icons'

export default {
  mounted() {
    this.fetchPosts()
  },
  methods: {
    async fetchPosts() {
      const posts = await this.$axios.$get('https://blog.rohanverma.net/wp-json/wp/v2/posts?categories=21')
      this.posts = posts
    },
    redirect_href: function (url) {
       window.open(url, '_blank');
    }
  },
  data () {
    return {
      posts: []
    }
  },

  computed: {
    fas () {
        return fas
    },
  }
}
</script>