DEV Community

DEV Community is a community of 552,031 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create new account Log in
loading...

Discussion on: Developer blog with dev.to as your backend/CMS

View post Full discussion
Collapse
gautemeekolsen profile image
Gaute Meek Olsen Author •

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

<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>

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, gaute.dev/dev-blog/developer-blog-...