diff --git a/website/client/src/components/admin-panel/user-support/index.vue b/website/client/src/components/admin-panel/user-support/index.vue
index 91be09e8b6..0573ea9896 100644
--- a/website/client/src/components/admin-panel/user-support/index.vue
+++ b/website/client/src/components/admin-panel/user-support/index.vue
@@ -119,6 +119,10 @@ export default {
     SubscriptionAndPerks,
   },
   mixins: [userStateMixin],
+  beforeRouteUpdate (to, from, next) {
+    this.userIdentifier = to.params.userIdentifier;
+    next();
+  },
   data () {
     return {
       userIdentifier: '',
@@ -184,9 +188,5 @@ export default {
       this.resetCounter += 1; // tell child components to reinstantiate from scratch
     },
   },
-  beforeRouteUpdate (to, from, next) {
-    this.userIdentifier = to.params.userIdentifier;
-    next();
-  },
 };
 </script>
diff --git a/website/client/src/components/admin-panel/user-support/subscriptionAndPerks.vue b/website/client/src/components/admin-panel/user-support/subscriptionAndPerks.vue
index 5c5e3e8a43..8ed67e85ad 100644
--- a/website/client/src/components/admin-panel/user-support/subscriptionAndPerks.vue
+++ b/website/client/src/components/admin-panel/user-support/subscriptionAndPerks.vue
@@ -57,13 +57,13 @@
         <div class="form-inline">
           Perk month count:
           <input
-              v-model="hero.purchased.plan.perkMonthCount"
-              class="form-control"
-              type="number"
-              min="0"
-              max="2"
-              step="1"
-            >
+            v-model="hero.purchased.plan.perkMonthCount"
+            class="form-control"
+            type="number"
+            min="0"
+            max="2"
+            step="1"
+          >
         </div>
         <div>
           Next Mystic Hourglass:
diff --git a/website/client/src/components/avatar.vue b/website/client/src/components/avatar.vue
index cf28966c02..2e1798d671 100644
--- a/website/client/src/components/avatar.vue
+++ b/website/client/src/components/avatar.vue
@@ -136,10 +136,10 @@ import foolPet from '../mixins/foolPet';
 import ClassBadge from '@/components/members/classBadge';
 
 export default {
-  mixins: [foolPet],
   components: {
     ClassBadge,
   },
+  mixins: [foolPet],
   props: {
     member: {
       type: Object,
diff --git a/website/client/src/components/bugReportModal.vue b/website/client/src/components/bugReportModal.vue
index 8cf60c768c..68e261d3cf 100644
--- a/website/client/src/components/bugReportModal.vue
+++ b/website/client/src/components/bugReportModal.vue
@@ -65,7 +65,7 @@
           rows="5"
           :required="true"
           :placeholder="question ? $t('questionPlaceholder') : $t('reportDescriptionPlaceholder')"
-          :class="{'input-invalid': messageInvalid && this.message.length === 0}"
+          :class="{'input-invalid': messageInvalid && message.length === 0}"
         >
 
         </textarea>
diff --git a/website/client/src/components/challenges/challengeDetail.vue b/website/client/src/components/challenges/challengeDetail.vue
index 67c437c390..23027db3f8 100644
--- a/website/client/src/components/challenges/challengeDetail.vue
+++ b/website/client/src/components/challenges/challengeDetail.vue
@@ -413,6 +413,11 @@ export default {
     groupLink,
   },
   mixins: [challengeMemberSearchMixin, externalLinks, userStateMixin],
+  async beforeRouteUpdate (to, from, next) {
+    this.searchId = to.params.challengeId;
+    await this.loadChallenge();
+    next();
+  },
   props: ['challengeId'],
   data () {
     return {
@@ -487,11 +492,6 @@ export default {
   updated () {
     this.handleExternalLinks();
   },
-  async beforeRouteUpdate (to, from, next) {
-    this.searchId = to.params.challengeId;
-    await this.loadChallenge();
-    next();
-  },
   methods: {
     cleanUpTask (task) {
       const cleansedTask = omit(task, TASK_KEYS_TO_REMOVE);
diff --git a/website/client/src/components/challenges/findChallenges.vue b/website/client/src/components/challenges/findChallenges.vue
index 6093b405f8..cdadffab47 100644
--- a/website/client/src/components/challenges/findChallenges.vue
+++ b/website/client/src/components/challenges/findChallenges.vue
@@ -32,7 +32,7 @@
       <div class="row">
         <div
           v-if="!loading &&
-            this.filteredChallenges.length === 0"
+            filteredChallenges.length === 0"
           class="no-challenges text-center col-md-6 offset-3"
         >
           <h2 v-once>
@@ -42,7 +42,7 @@
       </div>
       <div class="row">
         <div
-          v-for="challenge in this.filteredChallenges"
+          v-for="challenge in filteredChallenges"
           :key="challenge._id"
           class="col-12 col-md-6"
         >
diff --git a/website/client/src/components/challenges/myChallenges.vue b/website/client/src/components/challenges/myChallenges.vue
index c37c3d2416..e778f82dce 100644
--- a/website/client/src/components/challenges/myChallenges.vue
+++ b/website/client/src/components/challenges/myChallenges.vue
@@ -51,7 +51,7 @@
       </div>
       <div class="row">
         <div
-          v-if="!loading && challenges.length > 0 && this.filteredChallenges.length === 0"
+          v-if="!loading && challenges.length > 0 && filteredChallenges.length === 0"
           class="no-challenges text-center col-md-6 offset-3"
         >
           <h2 v-once>
@@ -61,7 +61,7 @@
       </div>
       <div class="row">
         <div
-          v-for="challenge in this.filteredChallenges"
+          v-for="challenge in filteredChallenges"
           :key="challenge._id"
           class="col-12 col-md-6"
         >
diff --git a/website/client/src/components/creatorIntro.vue b/website/client/src/components/creatorIntro.vue
index 07ef7c34d4..0e49b81e80 100644
--- a/website/client/src/components/creatorIntro.vue
+++ b/website/client/src/components/creatorIntro.vue
@@ -182,8 +182,8 @@
           </div>
           <div
             v-for="bg in backgroundShopSets[0].items"
-            :key="bg.key"
             :id="bg.key"
+            :key="bg.key"
             class="col-2"
             @click="unlock('background.' + bg.key)"
           >
@@ -215,8 +215,8 @@
           >
             <div
               v-for="bg in backgroundShopSets[2].items"
-              :key="bg.key"
               :id="bg.key"
+              :key="bg.key"
               class="col-4 text-center customize-option background-button"
               @click="unlock('background.' + bg.key)"
             >
@@ -245,8 +245,8 @@
           >
             <div
               v-for="bg in backgroundShopSets[1].items"
-              :key="bg.key"
               :id="bg.key"
+              :key="bg.key"
               class="col-4 text-center customize-option background-button"
               @click="!user.purchased.background[bg.key]
                 ? backgroundSelected(bg) : unlock('background.' + bg.key)"
@@ -316,8 +316,8 @@
             </div>
             <div
               v-for="bg in set.items"
-              :key="bg.key"
               :id="bg.key"
+              :key="bg.key"
               class="col-4 text-center customize-option background-button"
               @click="!user.purchased.background[bg.key]
                 ? backgroundSelected(bg) : unlock('background.' + bg.key)"
@@ -377,8 +377,8 @@
         >
           <div
             v-for="(bg) in ownedBackgrounds"
-            :key="bg.key"
             :id="bg.key"
+            :key="bg.key"
             class="col-4 text-center customize-option background-button"
             @click="unlock('background.' + bg.key)"
           >
diff --git a/website/client/src/components/group-plans/groupPlansUpdateModal.vue b/website/client/src/components/group-plans/groupPlansUpdateModal.vue
index 30205a0576..9ec18dfcfe 100644
--- a/website/client/src/components/group-plans/groupPlansUpdateModal.vue
+++ b/website/client/src/components/group-plans/groupPlansUpdateModal.vue
@@ -13,8 +13,8 @@
       class="w-100 d-flex pt-2 justify-content-center"
     >
       <h2
-        class="mx-auto mt-4"
         v-once
+        class="mx-auto mt-4"
       >
         {{ $t('newGroupsWelcome') }}
       </h2>
@@ -43,8 +43,8 @@
         >
         </div>
         <h3
-          class="my-auto"
           v-once
+          class="my-auto"
         >
           {{ $t('newGroupsWhatsNew') }}
         </h3>
@@ -66,7 +66,8 @@
         <li>{{ $t('newGroupsBullet07') }}</li>
         <li>{{ $t('newGroupsBullet08') }}</li>
         <li>{{ $t('newGroupsBullet09') }}</li>
-        <li>{{ $t('newGroupsBullet10') }}
+        <li>
+          {{ $t('newGroupsBullet10') }}
           <ul class="p-0">
             <li v-html="$t('newGroupsBullet10a')"></li>
             <li v-html="$t('newGroupsBullet10b')"></li>
@@ -83,13 +84,13 @@
       >
         {{ $t('newGroupsEnjoy') }}
       </div>
-    <button
-      class="btn btn-primary mt-4 mb-1 mx-auto"
-      @click="close()"
-      @keypress.enter="close()"
-    >
-      {{ $t('getStarted') }}
-    </button>
+      <button
+        class="btn btn-primary mt-4 mb-1 mx-auto"
+        @click="close()"
+        @keypress.enter="close()"
+      >
+        {{ $t('getStarted') }}
+      </button>
     </div>
   </b-modal>
 </template>
diff --git a/website/client/src/components/group-plans/taskInformation.vue b/website/client/src/components/group-plans/taskInformation.vue
index a77b09f5d0..c48c919ef9 100644
--- a/website/client/src/components/group-plans/taskInformation.vue
+++ b/website/client/src/components/group-plans/taskInformation.vue
@@ -47,19 +47,21 @@
         </div>
         <div class="create-task-area ml-2">
           <button
-            id="create-task-btn"
             v-if="canCreateTasks"
+            id="create-task-btn"
             class="btn btn-primary create-btn d-flex align-items-center"
             :class="{open: openCreateBtn}"
+            tabindex="0"
             @click.stop.prevent="openCreateBtn = !openCreateBtn"
             @keypress.enter="openCreateBtn = !openCreateBtn"
-            tabindex="0"
           >
             <div
               class="svg-icon icon-10 color"
               v-html="icons.positive"
             ></div>
-            <div class="ml-75 mr-1"> {{ $t('addTask') }} </div>
+            <div class="ml-75 mr-1">
+              {{ $t('addTask') }}
+            </div>
           </button>
           <div
             v-if="openCreateBtn"
@@ -68,8 +70,8 @@
             <div
               v-for="type in columns"
               :key="type"
-              @click="createTask(type)"
               class="dropdown-item d-flex px-2 py-1"
+              @click="createTask(type)"
             >
               <div class="d-flex align-items-center justify-content-center task-icon">
                 <div
diff --git a/website/client/src/components/groups/groupPlan.vue b/website/client/src/components/groups/groupPlan.vue
index 6d84aecfc5..4839b83d5f 100644
--- a/website/client/src/components/groups/groupPlan.vue
+++ b/website/client/src/components/groups/groupPlan.vue
@@ -4,12 +4,18 @@
     <group-plan-creation-modal />
     <div>
       <div class="header">
-        <h1 v-once class="text-center">
+        <h1
+          v-once
+          class="text-center"
+        >
           {{ $t('groupPlanTitle') }}
         </h1>
         <div class="row">
           <div class="col-8 offset-2 text-center">
-            <h2 v-once class="sub-text">
+            <h2
+              v-once
+              class="sub-text"
+            >
               {{ $t('groupBenefitsDescription') }}
             </h2>
           </div>
@@ -24,8 +30,12 @@
                 src="~@/assets/images/group-plans/group-14@3x.png"
               >
               <hr>
-              <h2 v-once> {{ $t('teamBasedTasks') }} </h2>
-              <p v-once> {{ $t('teamBasedTasksListDesc') }} </p>
+              <h2 v-once>
+                {{ $t('teamBasedTasks') }}
+              </h2>
+              <p v-once>
+                {{ $t('teamBasedTasksListDesc') }}
+              </p>
             </div>
           </div>
           <div class="col-4">
@@ -35,8 +45,12 @@
                 src="~@/assets/images/group-plans/group-12@3x.png"
               >
               <hr>
-              <h2 v-once> {{ $t('groupManagementControls') }} </h2>
-              <p v-once> {{ $t('groupManagementControlsDesc') }} </p>
+              <h2 v-once>
+                {{ $t('groupManagementControls') }}
+              </h2>
+              <p v-once>
+                {{ $t('groupManagementControlsDesc') }}
+              </p>
             </div>
           </div>
           <div class="col-4">
@@ -46,8 +60,12 @@
                 src="~@/assets/images/group-plans/group-13@3x.png"
               >
               <hr>
-              <h2 v-once> {{ $t('inGameBenefits') }} </h2>
-              <p v-once> {{ $t('inGameBenefitsDesc') }} </p>
+              <h2 v-once>
+                {{ $t('inGameBenefits') }}
+              </h2>
+              <p v-once>
+                {{ $t('inGameBenefitsDesc') }}
+              </p>
             </div>
           </div>
         </div>
diff --git a/website/client/src/components/groups/lookingForParty.vue b/website/client/src/components/groups/lookingForParty.vue
index c6db90671b..416445a1d0 100644
--- a/website/client/src/components/groups/lookingForParty.vue
+++ b/website/client/src/components/groups/lookingForParty.vue
@@ -6,13 +6,23 @@
         class="fit-content mx-auto mt-4"
       >
         <div class="d-flex align-items-center">
-          <h1 v-once class="my-auto mr-auto"> {{ $t('findPartyMembers') }}</h1>
+          <h1
+            v-once
+            class="my-auto mr-auto"
+          >
+            {{ $t('findPartyMembers') }}
+          </h1>
           <div
             class="btn btn-secondary btn-sync ml-auto my-auto pl-2 pr-3 d-flex"
             @click="refreshList()"
           >
-            <div class="svg-icon icon-16 color my-auto mr-2" v-html="icons.sync"></div>
-            <div class="ml-auto"> {{ $t('refreshList') }} </div>
+            <div
+              class="svg-icon icon-16 color my-auto mr-2"
+              v-html="icons.sync"
+            ></div>
+            <div class="ml-auto">
+              {{ $t('refreshList') }}
+            </div>
           </div>
         </div>
         <div class="d-flex flex-wrap seeker-list">
@@ -24,9 +34,9 @@
             <div class="d-flex">
               <avatar
                 :member="seeker"
-                :hideClassBadge="true"
-                @click.native="showMemberModal(seeker._id)"
+                :hide-class-badge="true"
                 class="mr-3 mb-2"
+                @click.native="showMemberModal(seeker._id)"
               />
               <div class="card-data">
                 <user-link
@@ -54,26 +64,32 @@
                   </strong>
                 </div>
                 <div>
-                  <strong v-once class="mr-2"> {{ $t('checkinsLabel') }} </strong>
+                  <strong
+                    v-once
+                    class="mr-2"
+                  > {{ $t('checkinsLabel') }} </strong>
                   {{ seeker.loginIncentives }}
                 </div>
                 <div>
-                  <strong v-once class="mr-2"> {{ $t('languageLabel') }} </strong>
+                  <strong
+                    v-once
+                    class="mr-2"
+                  > {{ $t('languageLabel') }} </strong>
                   {{ displayLanguage(seeker.preferences.language) }}
                 </div>
               </div>
             </div>
             <strong
               v-if="!seeker.invited"
-              @click="inviteUser(seeker._id, index)"
               class="btn btn-primary w-100"
+              @click="inviteUser(seeker._id, index)"
             >
               {{ $t('inviteToParty') }}
             </strong>
             <div
               v-else
-              @click="rescindInvite(seeker._id, index)"
               class="btn btn-success w-100"
+              @click="rescindInvite(seeker._id, index)"
               v-html="$t('invitedToYourParty')"
             >
             </div>
@@ -95,7 +111,6 @@
             class="svg-icon icon-32 color m-auto"
             v-html="icons.users"
           >
-
           </div>
         </div>
         <strong class="mb-1"> {{ $t('findMorePartyMembers') }} </strong>
diff --git a/website/client/src/components/groups/membersModal.vue b/website/client/src/components/groups/membersModal.vue
index 939925d0ec..d0010cec4b 100644
--- a/website/client/src/components/groups/membersModal.vue
+++ b/website/client/src/components/groups/membersModal.vue
@@ -49,7 +49,7 @@
               key-prop="value"
               @select="changeSortOption($event)"
             >
-              <template v-slot:item="{ item }">
+              <template #item="{ item }">
                 <span
                   v-if="item"
                   class="label"
@@ -64,7 +64,7 @@
               key-prop="value"
               @select="changeSortDirection($event)"
             >
-              <template v-slot:item="{ item }">
+              <template #item="{ item }">
                 <span
                   v-if="item"
                   class="label"
diff --git a/website/client/src/components/groups/rightSidebar.vue b/website/client/src/components/groups/rightSidebar.vue
index cab95cea2e..70d3f4f6bb 100644
--- a/website/client/src/components/groups/rightSidebar.vue
+++ b/website/client/src/components/groups/rightSidebar.vue
@@ -23,7 +23,7 @@
             class="ml-2"
             :no-caret="true"
           >
-            <template v-slot:button-content>
+            <template #button-content>
               <span
                 v-once
                 class="svg-icon inline menuIcon"
diff --git a/website/client/src/components/header/banners/chatBanner.vue b/website/client/src/components/header/banners/chatBanner.vue
index 24f9477b7f..723da36f5f 100644
--- a/website/client/src/components/header/banners/chatBanner.vue
+++ b/website/client/src/components/header/banners/chatBanner.vue
@@ -1,10 +1,10 @@
 <template>
   <base-banner
+    v-if="showChatWarning"
     banner-id="chat-warning"
     banner-class="chat-banner"
     class="chat-banner"
     height="3rem"
-    v-if="showChatWarning"
     :class="{faq: faqPage}"
   >
     <div
diff --git a/website/client/src/components/inventory/equipment/index.vue b/website/client/src/components/inventory/equipment/index.vue
index 4a171f367b..223a554989 100644
--- a/website/client/src/components/inventory/equipment/index.vue
+++ b/website/client/src/components/inventory/equipment/index.vue
@@ -68,7 +68,7 @@
             :inline-dropdown="false"
             @select="groupBy = $event"
           >
-            <template v-slot:item="{ item }">
+            <template #item="{ item }">
               <span class="label">{{ groupByLabel(item) }}</span>
             </template>
           </select-list>
diff --git a/website/client/src/components/inventory/equipment/unequipDropdown.vue b/website/client/src/components/inventory/equipment/unequipDropdown.vue
index 49285c1687..07674ed9db 100644
--- a/website/client/src/components/inventory/equipment/unequipDropdown.vue
+++ b/website/client/src/components/inventory/equipment/unequipDropdown.vue
@@ -4,7 +4,7 @@
     right="right"
     toggle-class="with-icon"
   >
-    <template v-slot:button-content>
+    <template #button-content>
       <span
         class="svg-icon inline color"
         v-html="icons.unequipIcon"
diff --git a/website/client/src/components/memberDetails.vue b/website/client/src/components/memberDetails.vue
index e8f81ef2a1..8025f578c7 100644
--- a/website/client/src/components/memberDetails.vue
+++ b/website/client/src/components/memberDetails.vue
@@ -33,7 +33,7 @@
                 :name="member.profile.name"
                 :backer="member.backer"
                 :contributor="member.contributor"
-                :showBuffed="isBuffed"
+                :show-buffed="isBuffed"
                 :context="'profile'"
               />
             </span>
diff --git a/website/client/src/components/members/reportMemberModal.vue b/website/client/src/components/members/reportMemberModal.vue
index b029966cdb..e908dcf891 100644
--- a/website/client/src/components/members/reportMemberModal.vue
+++ b/website/client/src/components/members/reportMemberModal.vue
@@ -6,7 +6,9 @@
     size="md"
   >
     <div slot="modal-header">
-      <h2 class="mt-2 mb-0"> {{ $t('reportPlayer') }} </h2>
+      <h2 class="mt-2 mb-0">
+        {{ $t('reportPlayer') }}
+      </h2>
       <close-x
         @close="close()"
       />
@@ -14,7 +16,9 @@
     <div>
       <blockquote>
         <strong> {{ displayName }} </strong>
-        <p class="mb-0"> {{ username }} </p>
+        <p class="mb-0">
+          {{ username }}
+        </p>
       </blockquote>
       <div>
         <strong>{{ $t('whyReportingPlayer') }}</strong>
@@ -26,7 +30,8 @@
       </div>
       <p
         class="mb-2"
-        v-html="$t('playerReportModalBody', abuseFlagModalBody)">
+        v-html="$t('playerReportModalBody', abuseFlagModalBody)"
+      >
       </p>
     </div>
     <div class="footer text-center d-flex flex-column">
diff --git a/website/client/src/components/messages/messageCard.vue b/website/client/src/components/messages/messageCard.vue
index 4cbd92e15d..a1f1855944 100644
--- a/website/client/src/components/messages/messageCard.vue
+++ b/website/client/src/components/messages/messageCard.vue
@@ -152,12 +152,12 @@ export default {
   components: {
     userLink,
   },
-  mixins: [externalLinks],
   filters: {
     timeAgo (value) {
       return moment(value).fromNow();
     },
   },
+  mixins: [externalLinks],
   props: {
     msg: {},
   },
diff --git a/website/client/src/components/payments/buyGemsModal.vue b/website/client/src/components/payments/buyGemsModal.vue
index 92d3898e3c..bf695de8c0 100644
--- a/website/client/src/components/payments/buyGemsModal.vue
+++ b/website/client/src/components/payments/buyGemsModal.vue
@@ -165,11 +165,15 @@
           v-if="eventName === 'fall_extra_gems' || eventName === 'spooky_extra_gems'"
           class="d-flex flex-column justify-content-center"
         >
-          <h4 class="mt-3 mx-auto"> {{ $t('howItWorks') }}</h4>
+          <h4 class="mt-3 mx-auto">
+            {{ $t('howItWorks') }}
+          </h4>
           <small class="text-center">
             {{ $t('gemSaleHow', { eventStartMonth, eventStartOrdinal, eventEndOrdinal }) }}
           </small>
-          <h4 class="mt-3 mx-auto"> {{ $t('limitations') }}</h4>
+          <h4 class="mt-3 mx-auto">
+            {{ $t('limitations') }}
+          </h4>
           <small class="text-center">
             {{ $t('gemSaleLimitations', {
               eventStartMonth,
diff --git a/website/client/src/components/payments/sendGiftModal.vue b/website/client/src/components/payments/sendGiftModal.vue
index 04e28c254a..86a0431b58 100644
--- a/website/client/src/components/payments/sendGiftModal.vue
+++ b/website/client/src/components/payments/sendGiftModal.vue
@@ -31,7 +31,7 @@
       >
         <avatar
           :member="userReceivingGift"
-          :hideClassBadge="true"
+          :hide-class-badge="true"
           class="d-flex flex-column mx-auto align-items-center"
         />
         <div class="avatar-spacer"></div>
@@ -74,8 +74,8 @@
       <subscription-options
         v-show="selectedPage === 'subscription'"
         class="subscribe-option"
-        :userReceivingGift="userReceivingGift"
-        :receiverName="receiverName"
+        :user-receiving-gift="userReceivingGift"
+        :receiver-name="receiverName"
       />
 
       <!-- gem block -->
diff --git a/website/client/src/components/settings/subscription.vue b/website/client/src/components/settings/subscription.vue
index f8840f2a0a..fec8566840 100644
--- a/website/client/src/components/settings/subscription.vue
+++ b/website/client/src/components/settings/subscription.vue
@@ -279,7 +279,10 @@
             </div>
           </div>
 
-          <div class="mt-4 nextHourglassDescription" v-once>
+          <div
+            v-once
+            class="mt-4 nextHourglassDescription"
+          >
             *{{ $t('nextHourglassDescription') }}
           </div>
         </div>
diff --git a/website/client/src/components/snackbars/notification.vue b/website/client/src/components/snackbars/notification.vue
index 4f9ab6dce8..0c9a70bb06 100644
--- a/website/client/src/components/snackbars/notification.vue
+++ b/website/client/src/components/snackbars/notification.vue
@@ -246,11 +246,6 @@ export default {
       }),
     };
   },
-  mounted () {
-    if (this.notification.type === 'drop' && this.notification.emptied) {
-      this.$root.$emit('bv::show::modal', 'armoire-empty');
-    }
-  },
   computed: {
     message () {
       if (this.notification.flavorMessage) {
@@ -275,6 +270,11 @@ export default {
       return `${this.notification.type} ${this.negative}`;
     },
   },
+  mounted () {
+    if (this.notification.type === 'drop' && this.notification.emptied) {
+      this.$root.$emit('bv::show::modal', 'armoire-empty');
+    }
+  },
   methods: {
     handleOnClick () {
       if (typeof this.notification.onClick === 'function') {
diff --git a/website/client/src/components/static/chatSunsetFaq.vue b/website/client/src/components/static/chatSunsetFaq.vue
index 0fa4cb9750..c7cd1f6089 100644
--- a/website/client/src/components/static/chatSunsetFaq.vue
+++ b/website/client/src/components/static/chatSunsetFaq.vue
@@ -153,7 +153,6 @@
       <div class="body-text">
         <p v-html="$t('sunsetFaqPara20')"></p>
       </div>
-
     </div>
 
     <!-- sidebar -->
diff --git a/website/client/src/components/static/header.vue b/website/client/src/components/static/header.vue
index c1324807b0..1482fb92d4 100644
--- a/website/client/src/components/static/header.vue
+++ b/website/client/src/components/static/header.vue
@@ -6,7 +6,7 @@
         :to="!isUserLoggedIn ? '/static/home' : '/'"
       >
         <div
-          v-if="this.$route.name === 'plans'"
+          v-if="$route.name === 'plans'"
           class="logo svg-icon"
           v-html="icons.purpleLogo"
         ></div>
diff --git a/website/client/src/components/static/staticWrapper.vue b/website/client/src/components/static/staticWrapper.vue
index a7993ac5a4..165947026d 100644
--- a/website/client/src/components/static/staticWrapper.vue
+++ b/website/client/src/components/static/staticWrapper.vue
@@ -2,11 +2,11 @@
   <div>
     <chat-banner />
     <static-header
-    v-if="showContentWrap"
-    :class="{
-      'home-header': ['home', 'front'].indexOf($route.name) !== -1,
-      'white-header': this.$route.name === 'plans'
-    }"
+      v-if="showContentWrap"
+      :class="{
+        'home-header': ['home', 'front'].indexOf($route.name) !== -1,
+        'white-header': $route.name === 'plans'
+      }"
     />
     <div class="static-wrapper">
       <router-view />
diff --git a/website/client/src/components/tasks/approvalFooter.vue b/website/client/src/components/tasks/approvalFooter.vue
index 4d738a6c01..05edc7c413 100644
--- a/website/client/src/components/tasks/approvalFooter.vue
+++ b/website/client/src/components/tasks/approvalFooter.vue
@@ -31,7 +31,7 @@
             <strong> @{{ completion.userName }} </strong>
           </div>
           <div
-            v-if='completion.completedDate'
+            v-if="completion.completedDate"
             :class="{'green-10': completion.completed}"
           >
             {{ completion.completedDateString }}
@@ -54,16 +54,16 @@
         v-html="message"
       ></div>
       <div
-        class="d-flex ml-auto mr-1 my-auto"
         v-if="task.group.assignedUsers && ['daily','todo'].indexOf(task.type) !== -1"
+        class="d-flex ml-auto mr-1 my-auto"
       >
         <span
           v-if="assignedUsersCount > 1"
           class="d-flex mr-1 my-auto"
         >
           <span
-            class="small-check"
             v-if="!showStatus && completionsCount"
+            class="small-check"
           >
             <div
               class="svg-icon color"
@@ -73,9 +73,9 @@
             </div>
           </span>
           <span
+            v-if="!showStatus && completionsCount"
             class="ml-1 mr-2 my-auto"
             :class="{'green-10': completionsCount === assignedUsersCount}"
-            v-if="!showStatus && completionsCount"
           >
             {{ completionsCount }}/{{ assignedUsersCount }}
           </span>
@@ -98,10 +98,10 @@
           class="mr-1 d-inline-flex"
         >
           <span
-            v-html="icons.lastComplete"
             v-b-tooltip.hover.bottom="$t('lastCompleted')"
             class="svg-icon color last-completed mr-1 my-auto"
             :class="{'gray-200': completionsCount !== assignedUsersCount}"
+            v-html="icons.lastComplete"
           >
           </span>
           <span
diff --git a/website/client/src/components/tasks/modal-controls/checklist.vue b/website/client/src/components/tasks/modal-controls/checklist.vue
index da2a394405..bc5c6c783f 100644
--- a/website/client/src/components/tasks/modal-controls/checklist.vue
+++ b/website/client/src/components/tasks/modal-controls/checklist.vue
@@ -10,8 +10,8 @@
       <div
         class="svg-icon icon-16 my-auto ml-auto pointer"
         :class="{'chevron-flip': showChecklist}"
-        v-html="icons.chevron"
         @click="showChecklist = !showChecklist"
+        v-html="icons.chevron"
       >
       </div>
     </div>
diff --git a/website/client/src/components/tasks/modal-controls/selectMulti.vue b/website/client/src/components/tasks/modal-controls/selectMulti.vue
index 44cb6c6c45..727d45c878 100644
--- a/website/client/src/components/tasks/modal-controls/selectMulti.vue
+++ b/website/client/src/components/tasks/modal-controls/selectMulti.vue
@@ -27,7 +27,7 @@
           @remove-item="removeItem($event)"
         />
       </b-dropdown-header>
-      <template v-slot:button-content>
+      <template #button-content>
         <multi-list
           class="d-flex flex-wrap"
           :items="selectedItemsAsObjects"
diff --git a/website/client/src/components/tasks/modal-controls/selectSingle.vue b/website/client/src/components/tasks/modal-controls/selectSingle.vue
index 5563874a4a..4ff34072c4 100644
--- a/website/client/src/components/tasks/modal-controls/selectSingle.vue
+++ b/website/client/src/components/tasks/modal-controls/selectSingle.vue
@@ -19,14 +19,14 @@
           />
         </div>
       </b-dropdown-header>
-      <template v-slot:button-content>
+      <template #button-content>
         <div
-          class="mr-1 d-inline-flex align-items-center"
-          @click.stop="selectItem({id: selectedItem})"
           v-markdown="
             allItemsMap[selectedItem] ? `@${allItemsMap[selectedItem].name}`
             : emptyMessage
           "
+          class="mr-1 d-inline-flex align-items-center"
+          @click.stop="selectItem({id: selectedItem})"
         >
         </div>
       </template>
diff --git a/website/client/src/components/tasks/modal-controls/selectTranslatedArray.vue b/website/client/src/components/tasks/modal-controls/selectTranslatedArray.vue
index 21e0cad24f..8a15aaa6bc 100644
--- a/website/client/src/components/tasks/modal-controls/selectTranslatedArray.vue
+++ b/website/client/src/components/tasks/modal-controls/selectTranslatedArray.vue
@@ -12,7 +12,7 @@
       :placeholder="placeholder"
       @select="selectItem($event)"
     >
-      <template v-slot:item="{ item }">
+      <template #item="{ item }">
         <span class="label">{{ $t(item) }}</span>
       </template>
     </select-list>
diff --git a/website/client/src/components/tasks/spells.vue b/website/client/src/components/tasks/spells.vue
index 94f5640b0f..11020b1898 100755
--- a/website/client/src/components/tasks/spells.vue
+++ b/website/client/src/components/tasks/spells.vue
@@ -69,7 +69,7 @@
               <div
                 class="spell-border"
                 :class="{ disabled: spellDisabled(key) || user.stats.lvl < skill.lvl,
-                 'insufficient-mana': user.stats.mp < skill.mana }"
+                          'insufficient-mana': user.stats.mp < skill.mana }"
               >
                 <div
                   class="spell"
diff --git a/website/client/src/components/tasks/task.vue b/website/client/src/components/tasks/task.vue
index e101155c06..812393c6bc 100644
--- a/website/client/src/components/tasks/task.vue
+++ b/website/client/src/components/tasks/task.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="task-wrapper" draggable>
+  <div
+    class="task-wrapper"
+    draggable
+  >
     <div
       class="task transition"
       :class="[{
diff --git a/website/client/src/components/tasks/taskSummary.vue b/website/client/src/components/tasks/taskSummary.vue
index 109d343c73..d10efc0d25 100644
--- a/website/client/src/components/tasks/taskSummary.vue
+++ b/website/client/src/components/tasks/taskSummary.vue
@@ -43,7 +43,7 @@
       </div>
       <div class="summary-block">
         <h3> {{ $t('description') }} </h3>
-        <p v-html="summarySentence" ></p>
+        <p v-html="summarySentence"></p>
       </div>
       <div
         v-if="task.checklist && task.checklist.length > 0"
@@ -51,13 +51,13 @@
       >
         <checklist
           :items.sync="task.checklist"
-          :disableDrag="true"
-          :disableEdit="true"
+          :disable-drag="true"
+          :disable-edit="true"
         />
       </div>
       <div
-        class="summary-block"
         v-if="assignedUsernames.length > 0"
+        class="summary-block"
       >
         <h3> {{ $t('assignedTo') }} </h3>
         <div
diff --git a/website/client/src/components/tasks/user.vue b/website/client/src/components/tasks/user.vue
index 8acef03946..d3c2508dfe 100644
--- a/website/client/src/components/tasks/user.vue
+++ b/website/client/src/components/tasks/user.vue
@@ -173,15 +173,17 @@
             id="create-task-btn"
             class="btn btn-primary create-btn d-flex align-items-center"
             :class="{open: openCreateBtn}"
+            tabindex="0"
             @click.stop.prevent="openCreateBtn = !openCreateBtn"
             @keypress.enter="openCreateBtn = !openCreateBtn"
-            tabindex="0"
           >
             <div
               class="svg-icon icon-10 color"
               v-html="icons.positive"
             ></div>
-            <div class="ml-75 mr-1"> {{ $t('addTask') }} </div>
+            <div class="ml-75 mr-1">
+              {{ $t('addTask') }}
+            </div>
           </div>
           <div
             v-if="openCreateBtn"
@@ -190,8 +192,8 @@
             <div
               v-for="type in columns"
               :key="type"
-              @click="createTask(type)"
               class="dropdown-item d-flex px-2 py-1"
+              @click="createTask(type)"
             >
               <div class="d-flex align-items-center justify-content-center task-icon">
                 <div
diff --git a/website/client/src/components/ui/filterDropdown.vue b/website/client/src/components/ui/filterDropdown.vue
index bbb254a0a9..345b530824 100644
--- a/website/client/src/components/ui/filterDropdown.vue
+++ b/website/client/src/components/ui/filterDropdown.vue
@@ -10,7 +10,7 @@
       :inline-dropdown="false"
       @select="selectItem($event)"
     >
-      <template v-slot:item="{ item }">
+      <template #item="{ item }">
         <span :class="{'dropdown-icon-item': withIcon}">
           <slot
             name="item"
diff --git a/website/client/src/components/ui/purchaseHistoryTable.vue b/website/client/src/components/ui/purchaseHistoryTable.vue
index a8a863c613..07ae88ded7 100644
--- a/website/client/src/components/ui/purchaseHistoryTable.vue
+++ b/website/client/src/components/ui/purchaseHistoryTable.vue
@@ -20,23 +20,38 @@
     </div>
 
     <div class="row">
-      <div class="col-12" v-if="selectedTab === 'gems'">
+      <div
+        v-if="selectedTab === 'gems'"
+        class="col-12"
+      >
         <span v-if="gemTransactions.length === 0">
           {{ $t('noGemTransactions') }}
         </span>
         <table class="table">
           <tr>
-            <th v-once class="timestamp-column">
-              {{ $t('timestamp')}}
+            <th
+              v-once
+              class="timestamp-column"
+            >
+              {{ $t('timestamp') }}
             </th>
-            <th v-once class="amount-column">
-              {{ $t('amount')}}
+            <th
+              v-once
+              class="amount-column"
+            >
+              {{ $t('amount') }}
             </th>
-            <th v-once class="action-column">
-              {{ $t('action')}}
+            <th
+              v-once
+              class="action-column"
+            >
+              {{ $t('action') }}
             </th>
-            <th v-once class="note-column">
-              {{ $t('note')}}
+            <th
+              v-once
+              class="note-column"
+            >
+              {{ $t('note') }}
             </th>
           </tr>
           <tr
@@ -49,7 +64,10 @@
               >{{ entry.createdAt | timeAgo }}</span>
             </td>
             <td>
-              <div class="amount-with-icon" :id="entry.id">
+              <div
+                :id="entry.id"
+                class="amount-with-icon"
+              >
                 <span
                   class="svg-icon inline icon-16 my-1"
                   aria-hidden="true"
@@ -95,39 +113,58 @@
               </span>
               <span v-else-if="transactionTypes.challenges.includes(entry.transactionType)">
                 <router-link
-                    class="challenge-link"
-                    :to="{ name: 'challenge', params: { challengeId: entry.reference } }">
+                  class="challenge-link"
+                  :to="{ name: 'challenge', params: { challengeId: entry.reference } }"
+                >
                   <span
                     v-markdown="entry.referenceText"
                   ></span>
                 </router-link>
               </span>
-              <span v-else v-html="entryReferenceText(entry)"></span>
+              <span
+                v-else
+                v-html="entryReferenceText(entry)"
+              ></span>
 
               <span v-if="entry.reference">
-                ({{entry.reference}})
+                ({{ entry.reference }})
               </span>
             </td>
           </tr>
         </table>
       </div>
-      <div class="col-12" v-if="selectedTab === 'hourglass'">
+      <div
+        v-if="selectedTab === 'hourglass'"
+        class="col-12"
+      >
         <span v-if="hourglassTransactions.length === 0">
           {{ $t('noHourglassTransactions') }}
         </span>
         <table class="table">
           <tr>
-            <th v-once class="timestamp-column">
-              {{ $t('timestamp')}}
+            <th
+              v-once
+              class="timestamp-column"
+            >
+              {{ $t('timestamp') }}
             </th>
-            <th v-once class="amount-column">
-              {{ $t('amount')}}
+            <th
+              v-once
+              class="amount-column"
+            >
+              {{ $t('amount') }}
             </th>
-            <th v-once class="action-column">
-              {{ $t('action')}}
+            <th
+              v-once
+              class="action-column"
+            >
+              {{ $t('action') }}
             </th>
-            <th v-once class="note-column">
-              {{ $t('note')}}
+            <th
+              v-once
+              class="note-column"
+            >
+              {{ $t('note') }}
             </th>
           </tr>
           <tr
@@ -140,7 +177,10 @@
               >{{ entry.createdAt | timeAgo }}</span>
             </td>
             <td>
-              <div class="amount-with-icon" :id="entry.id">
+              <div
+                :id="entry.id"
+                class="amount-with-icon"
+              >
                 <span
                   class="svg-icon inline icon-16 my-1"
                   aria-hidden="true"
diff --git a/website/client/src/components/userMenu/profile.vue b/website/client/src/components/userMenu/profile.vue
index 726f927ef1..a3120e67cc 100644
--- a/website/client/src/components/userMenu/profile.vue
+++ b/website/client/src/components/userMenu/profile.vue
@@ -139,7 +139,7 @@
                 class="mx-auto"
                 :no-caret="true"
               >
-                <template v-slot:button-content>
+                <template #button-content>
                   <span
                     v-once
                     class="svg-icon dots-icon with-icon"
diff --git a/website/client/src/components/userMenu/stats.vue b/website/client/src/components/userMenu/stats.vue
index 823918db0b..0ca70ecc51 100644
--- a/website/client/src/components/userMenu/stats.vue
+++ b/website/client/src/components/userMenu/stats.vue
@@ -147,10 +147,10 @@
           class="row"
         >
           <div
-            class="col-4"
             :id="statInfo.title"
+            class="col-4"
           >
-            <strong> {{ $t(statInfo.title)}} </strong>
+            <strong> {{ $t(statInfo.title) }} </strong>
             <strong>: {{ statsComputed[stat] }}</strong>
             <b-popover
               :target="statInfo.title"
diff --git a/website/client/src/pages/private-messages.vue b/website/client/src/pages/private-messages.vue
index e179e81452..581970297b 100644
--- a/website/client/src/pages/private-messages.vue
+++ b/website/client/src/pages/private-messages.vue
@@ -47,7 +47,7 @@
         <div class="disable-background">
           <toggle-switch
             :label="optTextSet.switchDescription"
-            :checked="this.user.inbox.optOut"
+            :checked="user.inbox.optOut"
             :hover-text="optTextSet.popoverText"
             @change="toggleOpt()"
           />
@@ -588,6 +588,23 @@ export default {
     },
   },
   mixins: [styleHelper],
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      const data = vm.$store.state.privateMessageOptions;
+
+      if ((!data || (data && !data.userIdToMessage)) && vm.$route.query && vm.$route.query.uuid) {
+        vm.$store.dispatch('user:userLookup', { uuid: vm.$route.query.uuid }).then(res => {
+          if (res && res.data && res.data.data) {
+            vm.$store.dispatch('user:newPrivateMessageTo', {
+              member: res.data.data,
+            });
+          }
+        });
+      } else {
+        vm.hasPrivateMessageOptionsOnPageLoad = true;
+      }
+    });
+  },
   data () {
     return {
       icons: Object.freeze({
@@ -612,23 +629,6 @@ export default {
       MAX_MESSAGE_LENGTH: MAX_MESSAGE_LENGTH.toString(),
     };
   },
-  beforeRouteEnter (to, from, next) {
-    next(vm => {
-      const data = vm.$store.state.privateMessageOptions;
-
-      if ((!data || (data && !data.userIdToMessage)) && vm.$route.query && vm.$route.query.uuid) {
-        vm.$store.dispatch('user:userLookup', { uuid: vm.$route.query.uuid }).then(res => {
-          if (res && res.data && res.data.data) {
-            vm.$store.dispatch('user:newPrivateMessageTo', {
-              member: res.data.data,
-            });
-          }
-        });
-      } else {
-        vm.hasPrivateMessageOptionsOnPageLoad = true;
-      }
-    });
-  },
   computed: {
     ...mapState({ user: 'user.data' }),
     canLoadMore () {