We're a place where coders share, stay up-to-date and grow their careers.
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-...
This is how you can do it with Vue. Just look at how simple this component is:
If you are using scoped css, remember to use >>> to break scoped css. Like this:
This is how I did it hosting my article here as well, gaute.dev/dev-blog/developer-blog-...