diff --git a/.eslintrc.js b/.eslintrc.js
index 6d369e983..599c6d269 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,37 +1,47 @@
 module.exports = {
-  "extends": ["airbnb/base", "prettier"],
-  "plugins": [
-    "prettier", "babel", "html"
-  ],
-  "rules": {
-    "prettier/prettier": ["error"],
-    "camelcase": "off",
-    "import/no-extraneous-dependencies": "off",
-    "import/prefer-default-export": "off",
-    "import/no-named-as-default": "off",
-    "jsx-a11y/no-static-element-interactions": "off",
-    "jsx-a11y/click-events-have-key-events": "off",
-    "jsx-a11y/label-has-associated-control": "off",
-    "jsx-a11y/label-has-for": "off",
-    "jsx-a11y/anchor-is-valid": "off",
-    'import/no-unresolved': "off",
+  extends: ['airbnb/base', 'prettier', 'plugin:vue/recommended'],
+  parserOptions: {
+    parser: 'babel-eslint',
+    ecmaVersion: 2017,
+    sourceType: 'module',
   },
-  "settings": {
-    "import/resolver": {
-      "webpack": {
-        "config": "config/webpack/resolve.js"
+  plugins: ['html', 'prettier', 'babel'],
+  rules: {
+    'prettier/prettier': ['error'],
+    camelcase: 'off',
+    'import/no-extraneous-dependencies': 'off',
+    'import/prefer-default-export': 'off',
+    'import/no-named-as-default': 'off',
+    'jsx-a11y/no-static-element-interactions': 'off',
+    'jsx-a11y/click-events-have-key-events': 'off',
+    'jsx-a11y/label-has-associated-control': 'off',
+    'jsx-a11y/label-has-for': 'off',
+    'jsx-a11y/anchor-is-valid': 'off',
+    'import/no-unresolved': 'off',
+    'vue/max-attributes-per-line': ['error', {
+      'singleline': 3,
+      'multiline': {
+        'max': 1,
+        'allowFirstLine': false
       }
-    }
+    }],
+    'vue/html-self-closing': false
   },
-  "env": {
-    "browser": true,
-    "node": true,
-    "jest": true
+  settings: {
+    'import/resolver': {
+      webpack: {
+        config: 'config/webpack/resolve.js',
+      },
+    },
   },
-  "parser": "babel-eslint",
-  "globals": {
-    "__WEBPACK_ENV__": true,
-    "__PUSHER__": true,
-    "__FB_APP_ID__": true
-  }
-}
+  env: {
+    browser: true,
+    node: true,
+    jest: true,
+  },
+  globals: {
+    __WEBPACK_ENV__: true,
+    __PUSHER__: true,
+    __FB_APP_ID__: true,
+  },
+};
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 5f8188c40..d2b1e86d7 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -53,8 +53,8 @@ window.onload = () => {
   window.WOOT = new Vue({
     router,
     store,
-    template: '<App/>',
     components: { App },
+    template: '<App/>',
   }).$mount('#app');
 };
 window.pusher = vuePusher.init();
diff --git a/app/javascript/src/components/layout/SidebarItem.vue b/app/javascript/src/components/layout/SidebarItem.vue
index eaf2361da..c48998ba8 100644
--- a/app/javascript/src/components/layout/SidebarItem.vue
+++ b/app/javascript/src/components/layout/SidebarItem.vue
@@ -1,20 +1,34 @@
 <template>
-  <router-link :to="menuItem.toState" tag="li" active-class="active" :class="computedClass">
-    <a :class="getMenuItemClass"  data-tooltip aria-haspopup="true" :title="menuItem.toolTip" >
-      <i :class="menuItem.icon"></i>
-      {{menuItem.label}}
-      <span class="ion-ios-plus-outline" v-if="showItem(menuItem)" @click.prevent="newLinkClick">
-      </span>
+  <router-link
+    :to="menuItem.toState"
+    tag="li"
+    active-class="active"
+    :class="computedClass"
+  >
+    <a
+      :class="getMenuItemClass"
+      data-tooltip
+      aria-haspopup="true"
+      :title="menuItem.toolTip"
+    >
+      <i :class="menuItem.icon" />
+      {{ menuItem.label }}
+      <span
+        v-if="showItem(menuItem)"
+        class="ion-ios-plus-outline"
+        @click.prevent="newLinkClick"
+      />
     </a>
-    <ul class="nested vertical menu" v-if="menuItem.hasSubMenu">
+    <ul v-if="menuItem.hasSubMenu" class="nested vertical menu">
       <router-link
-        :to="child.toState"
-        tag="li"
-        active-class="active flex-container"
         v-for="child in menuItem.children"
+        :key="child.label"
+        active-class="active flex-container"
         :class="computedInboxClass(child)"
+        tag="li"
+        :to="child.toState"
       >
-        <a>{{child.label}}</a>
+        <a>{{ child.label }}</a>
       </router-link>
     </ul>
   </router-link>
@@ -28,20 +42,32 @@ import router from '../../routes';
 import auth from '../../api/auth';
 
 export default {
-  props: ['menuItem'],
+  props: {
+    menuItem: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
   computed: {
     ...mapGetters({
       activeInbox: 'getSelectedInbox',
     }),
     getMenuItemClass() {
-      return this.menuItem.cssClass ? `side-menu ${this.menuItem.cssClass}` : 'side-menu';
+      return this.menuItem.cssClass
+        ? `side-menu ${this.menuItem.cssClass}`
+        : 'side-menu';
     },
     computedClass() {
       // If active Inbox is present
       // donot highlight conversations
       if (this.activeInbox) return ' ';
 
-      if (this.$store.state.route.name === 'inbox_conversation' && this.menuItem.toStateName === 'home') {
+      if (
+        this.$store.state.route.name === 'inbox_conversation' &&
+        this.menuItem.toStateName === 'home'
+      ) {
         return 'active';
       }
       return ' ';
diff --git a/app/javascript/src/components/widgets/ChatTypeTabs.vue b/app/javascript/src/components/widgets/ChatTypeTabs.vue
index 4812a599b..a636072ad 100644
--- a/app/javascript/src/components/widgets/ChatTypeTabs.vue
+++ b/app/javascript/src/components/widgets/ChatTypeTabs.vue
@@ -1,27 +1,40 @@
 <template>
-  <woot-tabs :index="tabsIndex"
-    @change="onTabChange">
-    <woot-tabs-item :name="item.name" :count="item.count" v-for="item in items"></woot-tabs-item>
+  <woot-tabs :index="tabsIndex" @change="onTabChange">
+    <woot-tabs-item
+      v-for="item in items"
+      :key="item.name"
+      :name="item.name"
+      :count="item.count"
+    />
   </woot-tabs>
 </template>
 <script>
 /* eslint no-console: 0 */
 
 export default {
-  props: ['items', 'activeTabIndex'],
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    activeTabIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
   data() {
     return {
       tabsIndex: 0,
     };
   },
-  methods: {
-    onTabChange(...args) {
-      this.$emit('chatTabChange', args[0]);
-      this.tabsIndex = args[0];
-    },
-  },
   created() {
     this.tabsIndex = this.activeTabIndex;
   },
+  methods: {
+    onTabChange(selectedTabIndex) {
+      this.$emit('chatTabChange', selectedTabIndex);
+      this.tabsIndex = selectedTabIndex;
+    },
+  },
 };
 </script>
diff --git a/app/javascript/src/components/widgets/conversation/ConversationBox.vue b/app/javascript/src/components/widgets/conversation/ConversationBox.vue
index 6ad5f37e0..4b1ed97aa 100644
--- a/app/javascript/src/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/src/components/widgets/conversation/ConversationBox.vue
@@ -1,31 +1,51 @@
 <template>
   <div class="medium-8 columns conversation-wrap">
-    <div class="view-box columns" v-if="currentChat.id !== null">
+    <div v-if="currentChat.id !== null" class="view-box columns">
       <conversation-header :chat="currentChat" />
       <ul class="conversation-panel">
         <transition name="slide-up">
-          <li><span class="spinner message" v-if="shouldShowSpinner"></span></li>
+          <li>
+            <span v-if="shouldShowSpinner" class="spinner message" />
+          </li>
         </transition>
-        <conversation v-for="message in getReadMessages" :data="message"></conversation>
-        <li class="unread--toast" v-show="getUnreadCount != 0">
-          <span>{{getUnreadCount}}  UNREAD MESSAGE{{ getUnreadCount > 1 ? 'S' : '' }}</span>
+        <conversation
+          v-for="message in getReadMessages"
+          :key="message.id"
+          :data="message"
+        />
+        <li v-show="getUnreadCount != 0" class="unread--toast">
+          <span>
+            {{ getUnreadCount }} UNREAD MESSAGE{{
+              getUnreadCount > 1 ? 'S' : ''
+            }}
+          </span>
         </li>
-        <conversation v-for="message in getUnReadMessages" :data="message"></conversation>
+        <conversation
+          v-for="message in getUnReadMessages"
+          :key="message.id"
+          :data="message"
+        />
       </ul>
-      <ReplyBox v-on:scrollToMessage='focusLastMessage' :conversationId="currentChat.id" />
+      <ReplyBox
+        :conversation-id="currentChat.id"
+        @scrollToMessage="focusLastMessage"
+      />
     </div>
     <!-- No Conversation Selected -->
-    <div class="columns full-height conv-empty-state" >
+    <div class="columns full-height conv-empty-state">
       <!-- Loading status -->
-      <woot-loading-state :message="loadingIndicatorMessage" v-if="fetchingInboxes || loadingChatList" />
+      <woot-loading-state
+        v-if="fetchingInboxes || loadingChatList"
+        :message="loadingIndicatorMessage"
+      />
       <!-- Show empty state images if not loading -->
-      <div class="current-chat" v-if="!fetchingInboxes && !loadingChatList">
+      <div v-if="!fetchingInboxes && !loadingChatList" class="current-chat">
         <!-- No inboxes attached -->
         <div v-if="!inboxesList.length">
           <img src="~assets/images/inboxes.svg" alt="No Inboxes" />
           <span v-if="isAdmin()">
             {{ $t('CONVERSATION.NO_INBOX_1') }}
-            <br>
+            <br />
             <router-link to="/u/settings/inboxes/new">
               {{ $t('CONVERSATION.CLICK_HERE') }}
             </router-link>
@@ -40,9 +60,9 @@
           <img src="~assets/images/chat.svg" alt="No Chat" />
           <span>
             {{ $t('CONVERSATION.NO_MESSAGE_1') }}
-            <br>
+            <br />
             <a :href="linkToMessage" target="_blank">
-            {{ $t('CONVERSATION.CLICK_HERE') }}
+              {{ $t('CONVERSATION.CLICK_HERE') }}
             </a>
             {{ $t('CONVERSATION.NO_MESSAGE_2') }}
           </span>
@@ -54,18 +74,15 @@
         </div>
       </div>
     </div>
-
   </div>
 </template>
 
-
 <script>
 /* eslint no-console: 0 */
 /* eslint no-extra-boolean-cast: 0 */
 /* global bus */
 import { mapGetters } from 'vuex';
 
-import Thumbnail from '../Thumbnail';
 import ConversationHeader from './ConversationHeader';
 import ReplyBox from './ReplyBox';
 import Conversation from './Conversation';
@@ -73,8 +90,21 @@ import conversationMixin from '../../../mixins/conversations';
 import adminMixin from '../../../mixins/isAdmin';
 
 export default {
-  props: ['user', 'inboxId'],
+  components: {
+    ConversationHeader,
+    Conversation,
+    ReplyBox,
+  },
+
   mixins: [conversationMixin, adminMixin],
+
+  props: {
+    inboxId: {
+      type: String,
+      required: true,
+    },
+  },
+
   data() {
     return {
       isLoadingPrevious: true,
@@ -83,13 +113,6 @@ export default {
     };
   },
 
-  created() {
-    bus.$on('scrollToMessage', () => {
-      this.focusLastMessage();
-      this.makeMessagesRead();
-    });
-  },
-
   computed: {
     ...mapGetters({
       currentChat: 'getSelectedChat',
@@ -109,7 +132,9 @@ export default {
       return this.$t('CONVERSATION.LOADING_CONVERSATIONS');
     },
     getMessages() {
-      const [chat] = this.allConversations.filter(c => c.id === this.currentChat.id);
+      const [chat] = this.allConversations.filter(
+        c => c.id === this.currentChat.id
+      );
       return chat;
     },
     // Get current FB Page ID
@@ -117,7 +142,9 @@ export default {
       let stateInbox;
       if (this.inboxId) {
         const inboxId = Number(this.inboxId);
-        [stateInbox] = this.inboxesList.filter(inbox => inbox.channel_id === inboxId);
+        [stateInbox] = this.inboxesList.filter(
+          inbox => inbox.channel_id === inboxId
+        );
       } else {
         [stateInbox] = this.inboxesList;
       }
@@ -134,13 +161,12 @@ export default {
     getUnReadMessages() {
       const chat = this.getMessages;
       return chat === undefined ? null : this.unReadMessages(chat);
-    },
-    showUnreadToast() {
-
     },
     shouldShowSpinner() {
-      return this.getMessages.dataFetched === undefined ||
-        (!this.listLoadingStatus && this.isLoadingPrevious);
+      return (
+        this.getMessages.dataFetched === undefined ||
+        (!this.listLoadingStatus && this.isLoadingPrevious)
+      );
     },
 
     shouldLoadMoreChats() {
@@ -148,8 +174,14 @@ export default {
     },
   },
 
-  methods: {
+  created() {
+    bus.$on('scrollToMessage', () => {
+      this.focusLastMessage();
+      this.makeMessagesRead();
+    });
+  },
 
+  methods: {
     focusLastMessage() {
       setTimeout(() => {
         this.attachListner();
@@ -158,27 +190,41 @@ export default {
 
     attachListner() {
       this.conversationPanel = this.$el.querySelector('.conversation-panel');
-      this.heightBeforeLoad = this.getUnreadCount === 0 ?
-        this.conversationPanel.scrollHeight : this.$el.querySelector('.conversation-panel .unread--toast').offsetTop - 56;
+      this.heightBeforeLoad =
+        this.getUnreadCount === 0
+          ? this.conversationPanel.scrollHeight
+          : this.$el.querySelector('.conversation-panel .unread--toast')
+              .offsetTop - 56;
       this.conversationPanel.scrollTop = this.heightBeforeLoad;
       this.conversationPanel.addEventListener('scroll', this.handleScroll);
       this.isLoadingPrevious = false;
     },
 
     handleScroll(e) {
-      const dataFetchCheck = (this.getMessages.dataFetched === true && this.shouldLoadMoreChats);
-      if (e.target.scrollTop < 100 && !this.isLoadingPrevious && dataFetchCheck) {
+      const dataFetchCheck =
+        this.getMessages.dataFetched === true && this.shouldLoadMoreChats;
+      if (
+        e.target.scrollTop < 100 &&
+        !this.isLoadingPrevious &&
+        dataFetchCheck
+      ) {
         this.isLoadingPrevious = true;
-        this.$store.dispatch('fetchPreviousMessages', {
-          id: this.currentChat.id,
-          before: this.getMessages.messages[0].id,
-        }).then(() => {
-          this.conversationPanel.scrollTop = this.conversationPanel.scrollHeight - (
-            this.heightBeforeLoad - this.conversationPanel.scrollTop);
-          this.isLoadingPrevious = false;
-          this.heightBeforeLoad = this.getUnreadCount === 0 ?
-            this.conversationPanel.scrollHeight : this.$el.querySelector('.conversation-panel .unread--toast').offsetTop - 56;
-        });
+        this.$store
+          .dispatch('fetchPreviousMessages', {
+            id: this.currentChat.id,
+            before: this.getMessages.messages[0].id,
+          })
+          .then(() => {
+            this.conversationPanel.scrollTop =
+              this.conversationPanel.scrollHeight -
+              (this.heightBeforeLoad - this.conversationPanel.scrollTop);
+            this.isLoadingPrevious = false;
+            this.heightBeforeLoad =
+              this.getUnreadCount === 0
+                ? this.conversationPanel.scrollHeight
+                : this.$el.querySelector('.conversation-panel .unread--toast')
+                    .offsetTop - 56;
+          });
       }
     },
 
@@ -191,12 +237,5 @@ export default {
       }
     },
   },
-
-  components: {
-    Thumbnail,
-    ConversationHeader,
-    Conversation,
-    ReplyBox,
-  },
 };
 </script>
diff --git a/app/javascript/src/routes/dashboard/settings/inbox/ChannelList.vue b/app/javascript/src/routes/dashboard/settings/inbox/ChannelList.vue
index 042a574a4..c6e58149b 100644
--- a/app/javascript/src/routes/dashboard/settings/inbox/ChannelList.vue
+++ b/app/javascript/src/routes/dashboard/settings/inbox/ChannelList.vue
@@ -5,7 +5,11 @@
       :header-content="$t('INBOX_MGMT.ADD.AUTH.DESC')"
     />
     <div class="row channels">
-      <channel-item v-for="channel in channelList" :channel="channel" />
+      <channel-item
+        v-for="channel in channelList"
+        :key="channel"
+        :channel="channel"
+      />
     </div>
   </div>
 </template>
@@ -23,26 +27,23 @@ export default {
   },
   data() {
     return {
-      channelList: [
-        'facebook',
-        'twitter',
-        'telegram',
-        'line',
-      ],
+      channelList: ['facebook', 'twitter', 'telegram', 'line'],
     };
   },
   created() {
-    bus.$on('channelItemClick', (channel) => {
+    bus.$on('channelItemClick', channel => {
       this.initChannelAuth(channel);
     });
   },
   methods: {
     initChannelAuth(channel) {
       if (channel === 'facebook') {
-        router.push({ name: 'settings_inboxes_page_channel', params: { page: 'new', sub_page: 'facebook' } });
+        router.push({
+          name: 'settings_inboxes_page_channel',
+          params: { page: 'new', sub_page: 'facebook' },
+        });
       }
     },
   },
 };
-
 </script>
diff --git a/app/javascript/src/routes/dashboard/settings/reports/Index.vue b/app/javascript/src/routes/dashboard/settings/reports/Index.vue
index 027c6fa28..0d143de46 100644
--- a/app/javascript/src/routes/dashboard/settings/reports/Index.vue
+++ b/app/javascript/src/routes/dashboard/settings/reports/Index.vue
@@ -5,37 +5,41 @@
         v-model="currentDateRangeSelection"
         track-by="name"
         label="name"
-        @select="changeDateSelection"
         placeholder="Select one"
         :options="dateRange"
         :searchable="false"
         :allow-empty="true"
+        @select="changeDateSelection"
       />
     </div>
     <div class="row">
       <woot-report-stats-card
         v-for="(metric, index) in metrics"
-        :heading="metric.NAME"
-        :point="accountSummary[metric.KEY]"
+        :key="metric.NAME"
         :desc="metric.DESC"
+        :heading="metric.NAME"
         :index="index"
-        :selected="index === currentSelection"
         :on-click="changeSelection"
+        :point="accountSummary[metric.KEY]"
+        :selected="index === currentSelection"
       />
     </div>
     <div class="report-bar">
-      <woot-loading-state :message="$t('REPORT.LOADING_CHART')" v-if="accountReport.isFetching"></woot-loading-state>
+      <woot-loading-state
+        v-if="accountReport.isFetching"
+        :message="$t('REPORT.LOADING_CHART')"
+      />
       <div v-else class="chart-container">
-        <woot-bar :collection="collection" v-if="accountReport.data.length"/>
-        <span class="empty-state" v-else v-html="$t('REPORT.NO_ENOUGH_DATA')" />
+        <woot-bar v-if="accountReport.data.length" :collection="collection" />
+        <span v-else class="empty-state">
+          {{ $t('REPORT.NO_ENOUGH_DATA') }}
+        </span>
       </div>
     </div>
   </div>
 </template>
 
-
 <script>
-
 import { mapGetters } from 'vuex';
 import moment from 'moment';
 
@@ -68,7 +72,9 @@ export default {
         return {};
       }
       if (!this.accountReport.data.length) return {};
-      const labels = this.accountReport.data.map(element => moment.unix(element.timestamp).format('DD/MMM'));
+      const labels = this.accountReport.data.map(element =>
+        moment.unix(element.timestamp).format('DD/MMM')
+      );
       const data = this.accountReport.data.map(element => element.value);
       return {
         labels,
diff --git a/package.json b/package.json
index bb89a0ec1..5caf90340 100644
--- a/package.json
+++ b/package.json
@@ -4,11 +4,11 @@
   "dependencies": {
     "@rails/webpacker": "^4.0.7",
     "axios": "^0.19.0",
-    "bourbon": "~4.2.7",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-vue-jsx": "^3.7.0",
     "babel-preset-env": "^1.7.0",
+    "bourbon": "~4.2.7",
     "chart.js": "~2.5.0",
     "dotenv": "^8.0.0",
     "emojione": "~2.2.7",
@@ -74,6 +74,6 @@
     ]
   },
   "scripts": {
-    "eslint": "eslint app/javascript"
+    "eslint": "eslint app/javascript --fix"
   }
 }