vue-wp/vue-theme/src/components/featured-image.vue

<template lang="pug">
.featured-or-hero-image
    img(v-if="featured" :src="featured" alt="post thumbnail")
    img(v-else-if="hero && hero.url" :src="getThumbnailFromYt(hero.url)" alt="post thumbnail from YouTube")
    
    //- Errors
    p(v-else-if="hero && !hero.url") ERROR: hero url undefined
    p(v-else) ERROR: no featured image or hero
</template>

<script>
import { ytThumbnail } from '@/utils/helpers'

export default {
    props: {
        post: { required: true }
    },
    computed: {
        featured() {
            return this.post.featured ? this.post.featured : null
        },
        hero() {
            return this.post.hero && JSON.parse(this.post.hero) ? JSON.parse(this.post.hero) : null
        }
    },
    methods: {
        getThumbnailFromYt(url) {
            return ytThumbnail(url, 'medium')
        }
    },
    created() {
        console.log(this.post)
    }
}
</script>