markdown display of email body

src/components/MailView.vue

@@ -1,13 +1,20 @@
 <template>
-  <div>
-    From: {{email.from}}<br>
-    Subject: <strong>{{email.subject}}</strong>
-    <p>{{email.body}}</p>
+  <div class="email">
+    <div>From: {{email.from}}</div>
+    <div>Subject: <strong>{{email.subject}}</strong></div>
+    <div v-html="emailMarkdown" />
   </div>
 </template>
 
 <script>
+  import marked from 'marked';
   export default {
+    setup({email}) {
+      let emailMarkdown = marked(email.body);
+      return {
+        emailMarkdown
+      }
+    },
     props: {
       email: {
         type: Object
@@ -17,4 +24,7 @@
 </script>
 
 <style scoped>
+.email {
+  text-align: left;
+}
 </style>