diff --git a/webapp/components/Category.vue b/webapp/components/Category.vue
index aa4eee877..af602d4d0 100644
--- a/webapp/components/Category.vue
+++ b/webapp/components/Category.vue
@@ -1,16 +1,19 @@
 <template>
   <ds-tag>
-    <ds-icon size="large" :name="icon"/>
+    <ds-icon
+      size="large"
+      :name="icon"
+    />
     {{ name }}
   </ds-tag>
 </template>
 
 <script>
 export default {
-  name: 'hc-category',
+  name: 'HcCategory',
   props: {
-    icon: { type: String },
-    name: { type: String }
+    icon: { type: String, required: true },
+    name: { type: String, required: true }
   }
 }
 </script>
diff --git a/webapp/components/RelativeDateTime.vue b/webapp/components/RelativeDateTime.vue
index da5737d1d..67589e0a0 100644
--- a/webapp/components/RelativeDateTime.vue
+++ b/webapp/components/RelativeDateTime.vue
@@ -6,10 +6,11 @@
 import moment from 'moment'
 
 export default {
-  name: 'hc-relative-date-time',
+  name: 'HcRelativeDateTime',
   props: {
     dateTime: {
-      type: [Date, String]
+      type: [Date, String],
+      required: true
     }
   },
   data() {
@@ -33,6 +34,15 @@ export default {
       this.calcRelativeDateTime()
     }
   },
+  created() {
+    this.calcRelativeDateTime()
+  },
+  mounted() {
+    this.calcRelativeDateTime()
+  },
+  destroyed() {
+    clearTimeout(this.timeout)
+  },
   methods: {
     calcRelativeDateTime() {
       clearTimeout(this.timeout)
@@ -58,15 +68,6 @@ export default {
         this.calcRelativeDateTime()
       }, this.interval)
     }
-  },
-  created() {
-    this.calcRelativeDateTime()
-  },
-  mounted() {
-    this.calcRelativeDateTime()
-  },
-  destroyed() {
-    clearTimeout(this.timeout)
   }
 }
 </script>
diff --git a/webapp/components/Tag.vue b/webapp/components/Tag.vue
index af2985b5f..70e1cf2a2 100644
--- a/webapp/components/Tag.vue
+++ b/webapp/components/Tag.vue
@@ -1,15 +1,15 @@
 <template>
   <ds-tag>
-    <ds-icon name="tag"/>
+    <ds-icon name="tag" />
     {{ name }}
   </ds-tag>
 </template>
 
 <script>
 export default {
-  name: 'hc-tag',
+  name: 'HcTag',
   props: {
-    name: { type: String }
+    name: { type: String, required: true }
   }
 }
 </script>
diff --git a/webapp/components/User.vue b/webapp/components/User.vue
index bd9189a06..4347c73fc 100644
--- a/webapp/components/User.vue
+++ b/webapp/components/User.vue
@@ -3,16 +3,36 @@
     <div
       style="display: inline-block; float: left; margin-right: 4px;  height: 100%; vertical-align: middle;"
     >
-      <ds-avatar style="display: inline-block; vertical-align: middle;" size="32px"/>
+      <ds-avatar
+        style="display: inline-block; vertical-align: middle;"
+        size="32px"
+      />
     </div>
     <div style="display: inline-block; height: 100%; vertical-align: middle;">
-      <b class="username" style="vertical-align: middle;">Anonymus</b>
+      <b
+        class="username"
+        style="vertical-align: middle;"
+      >Anonymus</b>
     </div>
   </div>
-  <dropdown v-else :class="{'disabled-content': user.disabled}" placement="top-start" offset="0">
-    <template slot="default" slot-scope="{openMenu, closeMenu, isOpen}">
-      <nuxt-link :to="userLink" :class="['user', isOpen && 'active']">
-        <div @mouseover="openMenu(true)" @mouseleave="closeMenu(true)">
+  <dropdown
+    v-else
+    :class="{'disabled-content': user.disabled}"
+    placement="top-start"
+    offset="0"
+  >
+    <template
+      slot="default"
+      slot-scope="{openMenu, closeMenu, isOpen}"
+    >
+      <nuxt-link
+        :to="userLink"
+        :class="['user', isOpen && 'active']"
+      >
+        <div
+          @mouseover="openMenu(true)"
+          @mouseleave="closeMenu(true)"
+        >
           <div
             style="display: inline-block; float: left; margin-right: 4px;  height: 100%; vertical-align: middle;"
           >
@@ -30,10 +50,17 @@
             >{{ user.name | truncate(trunc, 18) }}</b>
           </div>
           <!-- Time -->
-          <div v-if="dateTime" style="display: inline;">
-            <ds-text align="right" size="small" color="soft">
-              <ds-icon name="clock"/>&nbsp;
-              <hc-relative-date-time :dateTime="dateTime"/>
+          <div
+            v-if="dateTime"
+            style="display: inline;"
+          >
+            <ds-text
+              align="right"
+              size="small"
+              color="soft"
+            >
+              <ds-icon name="clock" />&nbsp;
+              <hc-relative-date-time :date-time="dateTime" />
             </ds-text>
           </div>
         </div>
@@ -41,7 +68,10 @@
     </template>
     <template slot="popover">
       <div style="min-width: 250px">
-        <hc-badges v-if="user.badges && user.badges.length" :badges="user.badges"/>
+        <hc-badges
+          v-if="user.badges && user.badges.length"
+          :badges="user.badges"
+        />
         <ds-text
           v-if="user.location"
           align="center"
@@ -50,13 +80,17 @@
           style="margin-top: 5px"
           bold
         >
-          <ds-icon name="map-marker"/>
+          <ds-icon name="map-marker" />
           {{ user.location.name }}
         </ds-text>
         <ds-flex style="margin-top: -10px">
           <ds-flex-item class="ds-tab-nav-item">
             <ds-space margin="small">
-              <ds-number :count="fanCount" :label="$t('profile.followers')" size="x-large"/>
+              <ds-number
+                :count="fanCount"
+                :label="$t('profile.followers')"
+                size="x-large"
+              />
             </ds-space>
           </ds-flex-item>
           <ds-flex-item class="ds-tab-nav-item ds-tab-nav-item-active">
@@ -76,7 +110,11 @@
             </ds-space>
           </ds-flex-item>
         </ds-flex>
-        <ds-flex v-if="!itsMe" gutter="x-small" style="margin-bottom: 0;">
+        <ds-flex
+          v-if="!itsMe"
+          gutter="x-small"
+          style="margin-bottom: 0;"
+        >
           <ds-flex-item :width="{base: 3}">
             <hc-follow-button
               :follow-id="user.id"
@@ -87,7 +125,7 @@
           </ds-flex-item>
           <ds-flex-item :width="{base: 1}">
             <ds-button fullwidth>
-              <ds-icon name="user-times"/>
+              <ds-icon name="user-times" />
             </ds-button>
           </ds-flex-item>
         </ds-flex>
diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
index 6ac443187..a763230ef 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@@ -1,12 +1,18 @@
 <template>
-  <transition name="fade" appear>
+  <transition
+    name="fade"
+    appear
+  >
     <ds-card
       v-if="post && ready"
       :image="post.image"
       :class="{'post-card': true, 'disabled-content': post.disabled}"
     >
-      <ds-space margin-bottom="small"/>
-      <hc-user :user="post.author" :dateTime="post.createdAt"/>
+      <ds-space margin-bottom="small" />
+      <hc-user
+        :user="post.author"
+        :date-time="post.createdAt"
+      />
       <no-ssr>
         <content-menu
           placement="bottom-end"
@@ -15,31 +21,46 @@
           :is-owner="isAuthor(post.author.id)"
         />
       </no-ssr>
-      <ds-space margin-bottom="small"/>
-      <ds-heading tag="h3" no-margin>{{ post.title }}</ds-heading>
-      <ds-space margin-bottom="small"/>
+      <ds-space margin-bottom="small" />
+      <ds-heading
+        tag="h3"
+        no-margin
+      >
+        {{ post.title }}
+      </ds-heading>
+      <ds-space margin-bottom="small" />
       <!-- Content -->
       <!-- eslint-disable vue/no-v-html -->
       <!-- TODO: replace editor content with tiptap render view -->
-      <div class="content hc-editor-content" v-html="post.content"/>
+      <div
+        class="content hc-editor-content"
+        v-html="post.content"
+      />
       <!-- eslint-enable vue/no-v-html -->
-      <ds-space margin="xx-large"/>
+      <ds-space margin="xx-large" />
       <!-- Categories -->
       <div class="categories">
-        <ds-space margin="xx-small"/>
+        <ds-space margin="xx-small" />
         <hc-category
           v-for="category in post.categories"
-          v-tooltip="{content: category.name, placement: 'top-start', delay: { show: 300 }}"
           :key="category.id"
+          v-tooltip="{content: category.name, placement: 'top-start', delay: { show: 300 }}"
           :icon="category.icon"
           :name="category.name"
         />
       </div>
-      <ds-space margin-bottom="small"/>
+      <ds-space margin-bottom="small" />
       <!-- Tags -->
-      <div class="tags" v-if="post.tags && post.tags.length">
-        <ds-space margin="xx-small"/>
-        <hc-tag v-for="tag in post.tags" :key="tag.id" :name="tag.name"/>
+      <div
+        v-if="post.tags && post.tags.length"
+        class="tags"
+      >
+        <ds-space margin="xx-small" />
+        <hc-tag
+          v-for="tag in post.tags"
+          :key="tag.id"
+          :name="tag.name"
+        />
       </div>
       <!-- Shout Button -->
       <hc-shout-button
@@ -49,12 +70,12 @@
         :is-shouted="post.shoutedByCurrentUser"
         :post-id="post.id"
       />
-      <ds-space margin="small"/>
+      <ds-space margin="small" />
       <!-- Comments -->
       <ds-section slot="footer">
         <h3 style="margin-top: 0;">
           <span>
-            <ds-icon name="comments"/>
+            <ds-icon name="comments" />
             <ds-tag
               v-if="post.comments"
               style="margin-top: -4px; margin-left: -12px; position: absolute;"
@@ -64,11 +85,22 @@
             >{{ post.commentsCount }}</ds-tag>&nbsp; Comments
           </span>
         </h3>
-        <ds-space margin-bottom="large"/>
-        <div v-if="post.comments" id="comments" class="comments">
-          <comment v-for="comment in post.comments" :key="comment.id" :comment="comment"/>
+        <ds-space margin-bottom="large" />
+        <div
+          v-if="post.comments"
+          id="comments"
+          class="comments"
+        >
+          <comment
+            v-for="comment in post.comments"
+            :key="comment.id"
+            :comment="comment"
+          />
         </div>
-        <hc-empty v-else icon="messages"/>
+        <hc-empty
+          v-else
+          icon="messages"
+        />
       </ds-section>
     </ds-card>
   </transition>