<template>
    <article>
        <h1>{{title}}</h1>
        <img :src="coverImg" alt="cover image" v-if="coverImg">
        <div v-html="bodyHtml" class="content"></div>
    </article>
</template>

<script>
export default {
    data: () => ({
        title: '',
        coverImg: '',
        bodyHtml: '',
    }),
    async created(){
        const response = await fetch(`https://dev.to/api/articles/${this.articleId}`)
        const data = await response.json();
        this.title = data.title;
        this.coverImg = data.cover_image;
        this.bodyHtml = data.body_html;
    },
    props: { articleId: String }
}
</script>

.content >>> .highlight {
  background: #29292e;
  color: #f8f8f2;
}