DEV Community

Discussion on: Developer blog with as your backend/CMS

gautemeekolsen profile image
Gaute Meek Olsen Author

This is how you can do it with Vue. Just look at how simple this component is:

        <img :src="coverImg" alt="cover image" v-if="coverImg">
        <div v-html="bodyHtml" class="content"></div>

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

If you are using scoped css, remember to use >>> to break scoped css. Like this:

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

This is how I did it hosting my article here as well,