diff --git a/.eslintrc.js b/.eslintrc.js
index 340cc1cf..e0350098 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -50,6 +50,8 @@ module.exports = {
 		// es6 import/export and require
 		'node/no-unpublished-require': ['off'],
 		'node/no-unsupported-features/es-syntax': ['off'],
+		// kebab case components for vuejs
+ 		'vue/component-name-in-template-casing': ['error', 'kebab-case'],
 		// space before self-closing elements
 		'vue/html-closing-bracket-spacing': 'error',
 		// code spacing with attributes
diff --git a/package.json b/package.json
index b01547b7..fb15afea 100644
--- a/package.json
+++ b/package.json
@@ -21,8 +21,8 @@
 		"dev": "webpack --config webpack.dev.js",
 		"watch": "webpack --progress --watch --config webpack.dev.js",
 		"build": "webpack --progress --hide-modules --config webpack.prod.js",
-		"lint": "eslint --ext .js,.vue src tests",
-		"lint:fix": "eslint --ext .js,.vue src tests --fix",
+		"lint": "eslint --ext .js,.vue src",
+		"lint:fix": "eslint --ext .js,.vue src --fix",
 		"test": "jest",
 		"test:coverage": "jest --coverage"
 	},
diff --git a/src/App.vue b/src/App.vue
index 7bfea6ab..f6ec28c1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,11 +5,18 @@
 		</div>
 		<div id="app-content">
 			<div v-if="serverData.isAdmin && !serverData.checks.success" class="setup social__wrapper">
-				<h3 v-if="!serverData.checks.checks.wellknown">{{ t('social', '.well-known/webfinger isn\'t properly set up!') }}</h3>
-				<p v-if="!serverData.checks.checks.wellknown">{{ t('social', 'Social needs the .well-known automatic discovery to be properly set up. If Nextcloud is not installed in the root of the domain, it is often the case that Nextcloud can\'t configure this automatically. To use Social, the admin of this Nextcloud instance needs to manually configure the .well-known redirects: ') }}<a class="external_link" href="https://docs.nextcloud.com/server/15/go.php?to=admin-setup-well-known-URL" target="_blank"
-					rel="noreferrer noopener">{{ t('social', 'Open documentation') }} ↗</a></p>
+				<h3 v-if="!serverData.checks.checks.wellknown">
+					{{ t('social', '.well-known/webfinger isn\'t properly set up!') }}
+				</h3>
+				<p v-if="!serverData.checks.checks.wellknown">
+					{{ t('social', 'Social needs the .well-known automatic discovery to be properly set up. If Nextcloud is not installed in the root of the domain, it is often the case that Nextcloud can\'t configure this automatically. To use Social, the admin of this Nextcloud instance needs to manually configure the .well-known redirects: ') }}<a class="external_link" href="https://docs.nextcloud.com/server/15/go.php?to=admin-setup-well-known-URL" target="_blank"
+						rel="noreferrer noopener"
+					>
+						{{ t('social', 'Open documentation') }} ↗
+					</a>
+				</p>
 			</div>
-			<Search v-if="searchTerm !== ''" :term="searchTerm" />
+			<search v-if="searchTerm !== ''" :term="searchTerm" />
 			<router-view v-if="searchTerm === ''" :key="$route.fullPath" />
 		</div>
 	</div>
@@ -19,15 +26,25 @@
 			<p>{{ t('social', 'ActivityPub requires a fixed URL to make entries unique. Note that this can not be changed later without resetting the Social app.') }}</p>
 			<form @submit.prevent="setCloudAddress">
 				<p>
-					<label class="hidden">{{ t('social', 'ActivityPub URL base') }}</label>
-					<input :placeholder="serverData.cliUrl" v-model="cloudAddress" type="url"
-						required>
+					<label class="hidden">
+						{{ t('social', 'ActivityPub URL base') }}
+					</label>
+					<input v-model="cloudAddress" :placeholder="serverData.cliUrl" type="url"
+						required
+					>
 					<input :value="t('social', 'Finish setup')" type="submit" class="primary">
 				</p>
 				<template v-if="!serverData.checks.success">
-					<h3 v-if="!serverData.checks.checks.wellknown">{{ t('social', '.well-known/webfinger isn\'t properly set up!') }}</h3>
-					<p v-if="!serverData.checks.checks.wellknown">{{ t('social', 'Social needs the .well-known automatic discovery to be properly set up. If Nextcloud is not installed in the root of the domain, it is often the case that Nextcloud can\'t configure this automatically. To use Social, the admin of this Nextcloud instance needs to manually configure the .well-known redirects: ') }}<a class="external_link" href="https://docs.nextcloud.com/server/15/go.php?to=admin-setup-well-known-URL" target="_blank"
-						rel="noreferrer noopener">{{ t('social', 'Open documentation') }} ↗</a></p>
+					<h3 v-if="!serverData.checks.checks.wellknown">
+						{{ t('social', '.well-known/webfinger isn\'t properly set up!') }}
+					</h3>
+					<p v-if="!serverData.checks.checks.wellknown">
+						{{ t('social', 'Social needs the .well-known automatic discovery to be properly set up. If Nextcloud is not installed in the root of the domain, it is often the case that Nextcloud can\'t configure this automatically. To use Social, the admin of this Nextcloud instance needs to manually configure the .well-known redirects: ') }}<a class="external_link" href="https://docs.nextcloud.com/server/15/go.php?to=admin-setup-well-known-URL" target="_blank"
+							rel="noreferrer noopener"
+						>
+							{{ t('social', 'Open documentation') }} ↗
+						</a>
+					</p>
 				</template>
 			</form>
 		</template>
@@ -76,26 +93,16 @@
 
 <script>
 import {
-	PopoverMenu,
-	AppNavigation,
-	Multiselect,
-	Avatar
+	AppNavigation
 } from 'nextcloud-vue'
 import axios from 'nextcloud-axios'
-import TimelineEntry from './components/TimelineEntry'
-import ProfileInfo from './components/ProfileInfo'
 import Search from './components/Search'
 import currentuserMixin from './mixins/currentUserMixin'
 
 export default {
 	name: 'App',
 	components: {
-		PopoverMenu,
 		AppNavigation,
-		TimelineEntry,
-		Multiselect,
-		Avatar,
-		ProfileInfo,
 		Search
 	},
 	mixins: [currentuserMixin],
diff --git a/src/components/Composer.vue b/src/components/Composer.vue
index edc8c785..5c6cc942 100644
--- a/src/components/Composer.vue
+++ b/src/components/Composer.vue
@@ -24,37 +24,49 @@
 	<div class="new-post" data-id="">
 		<div class="new-post-author">
 			<avatar :user="currentUser.uid" :display-name="currentUser.displayName" :disable-tooltip="true"
-				:size="32" />
+				:size="32"
+			/>
 			<div class="post-author">
-				<span class="post-author-name">{{ currentUser.displayName }}</span>
-				<span class="post-author-id">{{ socialId }}</span>
+				<span class="post-author-name">
+					{{ currentUser.displayName }}
+				</span>
+				<span class="post-author-id">
+					{{ socialId }}
+				</span>
 			</div>
 		</div>
 		<form class="new-post-form" @submit.prevent="createPost">
 			<vue-tribute :options="tributeOptions">
 				<!-- eslint-disable-next-line vue/valid-v-model -->
-				<div v-contenteditable:post.dangerousHTML="canType" ref="composerInput" class="message"
-					placeholder="What would you like to share?" @keyup.enter="keyup" />
+				<div ref="composerInput" v-contenteditable:post.dangerousHTML="canType" class="message"
+					placeholder="What would you like to share?" @keyup.enter="keyup"
+				/>
 			</vue-tribute>
 			<emoji-picker ref="emojiPicker" :search="search" class="emoji-picker-wrapper"
-				@emoji="insert">
-				<a v-tooltip="'Insert emoji'" slot="emoji-invoker" slot-scope="{ events }"
+				@emoji="insert"
+			>
+				<a slot="emoji-invoker" v-tooltip="'Insert emoji'" slot-scope="{ events }"
 					class="emoji-invoker" tabindex="0" v-on="events"
-					@keyup.enter="events.click" @keyup.space="events.click" />
-				<div slot="emoji-picker" slot-scope="{ emojis, insert, display }" class="emoji-picker popovermenu">
+					@keyup.enter="events.click" @keyup.space="events.click"
+				/>
+				<!-- eslint-disable-next-line vue/no-template-shadow -->
+				<div slot="emoji-picker" slot-scope="{ emojis, insert }" class="emoji-picker popovermenu">
 					<div>
 						<div>
-							<input v-focus-on-create v-model="search" type="text"
-								@keyup.enter="insert(emojis)">
+							<input v-model="search" v-focus-on-create type="text"
+								@keyup.enter="insert(emojis)"
+							>
 						</div>
 						<div>
 							<div v-for="(emojiGroup, category) in emojis" :key="category">
 								<h5>{{ category }}</h5>
 								<div>
+									<!-- eslint-disable vue/no-v-html -->
 									<span v-for="(emoji, emojiName) in emojiGroup" :key="emojiName" :title="emojiName"
 										tabindex="0"
 										class="emoji" @click="insert(emoji)" @keyup.enter="insert(emoji)"
-										@keyup.space="insert(emoji)" v-html="$twemoji.parse(emoji)" />
+										@keyup.space="insert(emoji)" v-html="$twemoji.parse(emoji)"
+									/>
 								</div>
 							</div>
 						</div>
@@ -64,11 +76,12 @@
 
 			<div class="options">
 				<input :value="currentVisibilityPostLabel" :disabled="post.length < 1" class="submit primary"
-					type="submit" title="" data-original-title="Post">
+					type="submit" title="" data-original-title="Post"
+				>
 				<div v-click-outside="hidePopoverMenu">
 					<button :class="currentVisibilityIconClass" @click.prevent="togglePopoverMenu" />
 					<div :class="{open: menuOpened}" class="popovermenu menu-center">
-						<PopoverMenu :menu="visibilityPopover" />
+						<popover-menu :menu="visibilityPopover" />
 					</div>
 				</div>
 			</div>
diff --git a/src/components/FollowButton.vue b/src/components/FollowButton.vue
index ae90b402..d5ced593 100644
--- a/src/components/FollowButton.vue
+++ b/src/components/FollowButton.vue
@@ -24,10 +24,15 @@
 	<div v-if="!serverData.public && cloudId !== account && actorInfo">
 		<button v-if="isCurrentUserFollowing" :class="{'icon-loading-small': followLoading}"
 			@click="unfollow()"
-			@mouseover="followingText=t('social', 'Unfollow')" @mouseleave="followingText=t('social', 'Following')">
-		<span><span class="icon-checkmark" />{{ followingText }}</span></button>
+			@mouseover="followingText=t('social', 'Unfollow')" @mouseleave="followingText=t('social', 'Following')"
+		>
+			<span><span class="icon-checkmark" />{{ followingText }}</span>
+		</button>
 		<button v-else :class="{'icon-loading-small': followLoading}" class="primary"
-			@click="follow"><span>{{ t('social', 'Follow') }}</span></button>
+			@click="follow"
+		>
+			<span>{{ t('social', 'Follow') }}</span>
+		</button>
 	</div>
 </template>
 
diff --git a/src/components/ProfileInfo.vue b/src/components/ProfileInfo.vue
index d8633306..da78c650 100644
--- a/src/components/ProfileInfo.vue
+++ b/src/components/ProfileInfo.vue
@@ -24,24 +24,36 @@
 	<div v-if="account && accountInfo" class="user-profile">
 		<div class="user-profile--info">
 			<avatar v-if="accountInfo.local" :user="uid" :disable-tooltip="true"
-				:size="128" />
+				:size="128"
+			/>
 			<avatar v-else :url="avatarUrl" :disable-tooltip="true"
-				:size="128" />
+				:size="128"
+			/>
 			<h2>{{ displayName }}</h2>
 			<p>{{ accountInfo.account }}</p>
-			<p v-if="accountInfo.website">Website: <a :href="accountInfo.website.value">{{ accountInfo.website.value }}</a></p>
+			<p v-if="accountInfo.website">
+				Website: <a :href="accountInfo.website.value">
+					{{ accountInfo.website.value }}
+				</a>
+			</p>
 			<follow-button :account="accountInfo.account" />
 		</div>
 		<!-- TODO: we have no details, timeline and follower list for non-local accounts for now -->
 		<ul v-if="accountInfo.details && accountInfo.local" class="user-profile--sections">
 			<li>
-				<router-link :to="{ name: 'profile', params: { account: uid } }" class="icon-category-monitoring">{{ getCount('post') }} {{ t('social', 'posts') }}</router-link>
+				<router-link :to="{ name: 'profile', params: { account: uid } }" class="icon-category-monitoring">
+					{{ getCount('post') }} {{ t('social', 'posts') }}
+				</router-link>
 			</li>
 			<li>
-				<router-link :to="{ name: 'profile.following', params: { account: uid } }" class="icon-category-social">{{ getCount('following') }}  {{ t('social', 'following') }}</router-link>
+				<router-link :to="{ name: 'profile.following', params: { account: uid } }" class="icon-category-social">
+					{{ getCount('following') }}  {{ t('social', 'following') }}
+				</router-link>
 			</li>
 			<li>
-				<router-link :to="{ name: 'profile.followers', params: { account: uid } }" class="icon-category-social">{{ getCount('followers') }}  {{ t('social', 'followers') }}</router-link>
+				<router-link :to="{ name: 'profile.followers', params: { account: uid } }" class="icon-category-social">
+					{{ getCount('followers') }}  {{ t('social', 'followers') }}
+				</router-link>
 			</li>
 		</ul>
 	</div>
diff --git a/src/components/Search.vue b/src/components/Search.vue
index e39e78a6..9dd18d63 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -24,12 +24,16 @@
 	<div class="social__wrapper">
 		<div v-if="allResults.length < 1" id="emptycontent" :class="{'icon-loading': loading || remoteLoading}">
 			<div v-if="!loading" class="icon-search" />
-			<h2 v-if="!loading">{{ t('social', 'No accounts found') }}</h2>
-			<p v-if="!loading">No accounts found for {{ term }}</p>
+			<h2 v-if="!loading">
+				{{ t('social', 'No accounts found') }}
+			</h2>
+			<p v-if="!loading">
+				No accounts found for {{ term }}
+			</p>
 		</div>
 		<div v-if="allResults.length > 0">
 			<h3>{{ t('social', 'Searching for') }} {{ term }}</h3>
-			<UserEntry v-for="result in allResults" :key="result.id" :item="result" />
+			<user-entry v-for="result in allResults" :key="result.id" :item="result" />
 		</div>
 	</div>
 </template>
diff --git a/src/components/TimelineEntry.vue b/src/components/TimelineEntry.vue
index 693c526d..b2027345 100644
--- a/src/components/TimelineEntry.vue
+++ b/src/components/TimelineEntry.vue
@@ -6,21 +6,31 @@
 					:display-name="item.actor_info.account" :disable-tooltip="true"
 				/>
 				<avatar v-else :size="32" :url="avatarUrl"
-					:disable-tooltip="true" />
+					:disable-tooltip="true"
+				/>
 			</div>
 			<div class="post-content">
 				<div class="post-author-wrapper">
 					<router-link v-if="item.actor_info" :to="{ name: 'profile', params: { account: item.local ? item.actor_info.preferredUsername : item.actor_info.account }}">
-						<span class="post-author">{{ userDisplayName(item.actor_info) }}</span>
-						<span class="post-author-id">{{ item.actor_info.account }}</span>
+						<span class="post-author">
+							{{ userDisplayName(item.actor_info) }}
+						</span>
+						<span class="post-author-id">
+							{{ item.actor_info.account }}
+						</span>
 					</router-link>
 					<a v-else :href="item.attributedTo">
-						<span class="post-author-id">{{ item.attributedTo }}</span>
+						<span class="post-author-id">
+							{{ item.attributedTo }}
+						</span>
 					</a>
 				</div>
+				<!-- eslint-disable-next-line vue/no-v-html -->
 				<div class="post-message" v-html="formatedMessage" />
 			</div>
-			<div :data-timestamp="timestamp" class="post-timestamp live-relative-timestamp">{{ relativeTimestamp }}</div>
+			<div :data-timestamp="timestamp" class="post-timestamp live-relative-timestamp">
+				{{ relativeTimestamp }}
+			</div>
 		</div>
 	</div>
 </template>
diff --git a/src/components/TimelineList.vue b/src/components/TimelineList.vue
index 458ec3af..8bc09c50 100644
--- a/src/components/TimelineList.vue
+++ b/src/components/TimelineList.vue
@@ -22,10 +22,14 @@
 
 <template>
 	<div class="social__timeline">
-		<timeline-entry v-for="entry in timeline" :item="entry" :key="entry.id" />
+		<timeline-entry v-for="entry in timeline" :key="entry.id" :item="entry" />
 		<infinite-loading ref="infiniteLoading" @infinite="infiniteHandler">
-			<div slot="spinner"><div class="icon-loading" /></div>
-			<div slot="no-more"><div class="list-end" /></div>
+			<div slot="spinner">
+				<div class="icon-loading" />
+			</div>
+			<div slot="no-more">
+				<div class="list-end" />
+			</div>
 			<div slot="no-results">
 				<empty-content :item="emptyContentData" />
 			</div>
@@ -34,25 +38,15 @@
 </template>
 
 <script>
-import {
-	PopoverMenu,
-	AppNavigation,
-	Multiselect
-} from 'nextcloud-vue'
 import InfiniteLoading from 'vue-infinite-loading'
 import TimelineEntry from './../components/TimelineEntry'
-import Composer from './../components/Composer'
 import CurrentUserMixin from './../mixins/currentUserMixin'
 import EmptyContent from './../components/EmptyContent'
 
 export default {
 	name: 'Timeline',
 	components: {
-		PopoverMenu,
-		AppNavigation,
 		TimelineEntry,
-		Multiselect,
-		Composer,
 		InfiniteLoading,
 		EmptyContent
 	},
diff --git a/src/components/UserEntry.vue b/src/components/UserEntry.vue
index 7aa1fd15..3c67fd33 100644
--- a/src/components/UserEntry.vue
+++ b/src/components/UserEntry.vue
@@ -25,20 +25,30 @@
 		<div class="entry-content">
 			<div class="user-avatar">
 				<avatar v-if="item.local" :size="32" :user="item.preferredUsername"
-					:disable-tooltip="true" />
+					:disable-tooltip="true"
+				/>
 				<avatar v-else :url="avatarUrl" />
 			</div>
 			<div class="user-details">
 				<router-link v-if="!serverData.public" :to="{ name: 'profile', params: { account: item.local ? item.preferredUsername : item.account }}">
-					<span class="post-author">{{ item.name }}</span>
-					<span class="user-description">{{ item.account }}</span>
+					<span class="post-author">
+						{{ item.name }}
+					</span>
+					<span class="user-description">
+						{{ item.account }}
+					</span>
 				</router-link>
 				<a v-else :href="item.id" target="_blank"
-					rel="noreferrer">
-					<span class="post-author">{{ item.name }}</span>
-					<span class="user-description">{{ item.account }}</span>
+					rel="noreferrer"
+				>
+					<span class="post-author">
+						{{ item.name }}
+					</span>
+					<span class="user-description">
+						{{ item.account }}
+					</span>
 				</a>
-				<!-- TODO check where the html is coming from to avoid security issues -->
+				<!-- eslint-disable-next-line vue/no-v-html -->
 				<p v-html="item.summary" />
 			</div>
 			<follow-button :account="item.account" />
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index 8cda5dde..5367244d 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -38,13 +38,6 @@
 </style>
 
 <script>
-import {
-	PopoverMenu,
-	AppNavigation,
-	Multiselect,
-	Avatar
-} from 'nextcloud-vue'
-import TimelineEntry from './../components/TimelineEntry'
 import ProfileInfo from './../components/ProfileInfo'
 import EmptyContent from '../components/EmptyContent'
 import serverData from '../mixins/serverData'
@@ -53,11 +46,6 @@ export default {
 	name: 'Profile',
 	components: {
 		EmptyContent,
-		PopoverMenu,
-		AppNavigation,
-		TimelineEntry,
-		Multiselect,
-		Avatar,
 		ProfileInfo
 	},
 	mixins: [
diff --git a/src/views/ProfileFollowers.vue b/src/views/ProfileFollowers.vue
index ffae8fbe..c0c4dbf7 100644
--- a/src/views/ProfileFollowers.vue
+++ b/src/views/ProfileFollowers.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<div class="social__followers">
-		<user-entry v-for="user in users" :item="user" :key="user.id" />
+		<user-entry v-for="user in users" :key="user.id" :item="user" />
 	</div>
 </template>
 
diff --git a/src/views/Timeline.vue b/src/views/Timeline.vue
index b6c79e43..514da49a 100644
--- a/src/views/Timeline.vue
+++ b/src/views/Timeline.vue
@@ -2,16 +2,23 @@
 	<div class="social__wrapper">
 		<transition name="slide-fade">
 			<div v-if="showInfo" class="social__welcome">
-				<a class="close icon-close" href="#" @click="hideInfo()"><span class="hidden-visually">Close</span></a>
+				<a class="close icon-close" href="#" @click="hideInfo()">
+					<span class="hidden-visually">
+						Close
+					</span>
+				</a>
 				<h2>🎉 {{ t('social', 'Nextcloud becomes part of the federated social networks!') }}</h2>
 				<p>
 					{{ t('social', 'We automatically created a Social account for you. Your Social ID is the same as your federated cloud ID:') }}
-					<span class="social-id">{{ socialId }}</span>
+					<span class="social-id">
+						{{ socialId }}
+					</span>
 				</p>
 				<div v-show="!isFollowingNextcloudAccount" class="follow-nextcloud">
 					<p>{{ t('social', 'Since you are new to Social, start by following the official Nextcloud account so you don\'t miss any news') }}</p>
 					<input :value="t('social', 'Follow Nextcloud on mastodon.xyz')" type="button" class="primary"
-						@click="followNextcloud">
+						@click="followNextcloud"
+					>
 				</div>
 			</div>
 		</transition>
@@ -83,29 +90,15 @@
 </style>
 
 <script>
-import {
-	PopoverMenu,
-	AppNavigation,
-	Multiselect
-} from 'nextcloud-vue'
-import InfiniteLoading from 'vue-infinite-loading'
-import TimelineEntry from './../components/TimelineEntry'
 import Composer from './../components/Composer'
 import CurrentUserMixin from './../mixins/currentUserMixin'
 import follow from './../mixins/follow'
-import EmptyContent from './../components/EmptyContent'
 import TimelineList from './../components/TimelineList'
 
 export default {
 	name: 'Timeline',
 	components: {
-		PopoverMenu,
-		AppNavigation,
-		TimelineEntry,
-		Multiselect,
 		Composer,
-		InfiniteLoading,
-		EmptyContent,
 		TimelineList
 	},
 	mixins: [