Update linting packages to use latest

- 99% of changes were small syntax changes that were changed by the
lint command. There were a couple of small manual changes to meet the
property order patterns established as part of the vue:recommended
guidelines.

There are rules that were set from errors to warnings and new stories
are being opened to address those issues.

Testing:
- Successfully ran npm run serve
- Successfully ran npm run lint
- Verified functionality works as expected, e.g. success and failure use cases
- Resolved any JavaScript errors thrown to the console

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ie082f31c73ccbe8a60afa8f88a9ef6dbf33d9fd2

44 files changed, 783 insertions, 794 deletions

diff --git a/src/views/AccessControl/Ldap/Ldap.vue b/src/views/AccessControl/Ldap/Ldap.vue
index 40164a5a..27172019 100644
--- a/src/views/AccessControl/Ldap/Ldap.vue
+++ b/src/views/AccessControl/Ldap/Ldap.vue
@@ -96,7 +96,7 @@
                   <b-row>
                     <b-col sm="6" xl="4">
                       <b-form-group label-for="server-uri">
-                        <template v-slot:label>
+                        <template #label>
                           {{ $t('pageLdap.form.serverUri') }}
                           <info-tooltip
                             :title="$t('pageLdap.form.serverUriTooltip')"
@@ -174,7 +174,7 @@
                     </b-col>
                     <b-col sm="6" xl="4">
                       <b-form-group label-for="user-id-attribute">
-                        <template v-slot:label>
+                        <template #label>
                           {{ $t('pageLdap.form.userIdAttribute') }} -
                           <span class="form-text d-inline">
                             {{ $t('global.form.optional') }}
@@ -190,7 +190,7 @@
                     </b-col>
                     <b-col sm="6" xl="4">
                       <b-form-group label-for="group-id-attribute">
-                        <template v-slot:label>
+                        <template #label>
                           {{ $t('pageLdap.form.groupIdAttribute') }} -
                           <span class="form-text d-inline">
                             {{ $t('global.form.optional') }}
@@ -252,9 +252,13 @@ export default {
     InputPasswordToggle,
     PageTitle,
     PageSection,
-    TableRoleGroups
+    TableRoleGroups,
   },
   mixins: [BVToastMixin, VuelidateMixin, LoadingBarMixin],
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
+  },
   data() {
     return {
       form: {
@@ -268,8 +272,8 @@ export default {
         bindPassword: '',
         baseDn: '',
         userIdAttribute: '',
-        groupIdAttribute: ''
-      }
+        groupIdAttribute: '',
+      },
     };
   },
   computed: {
@@ -277,70 +281,70 @@ export default {
       'isServiceEnabled',
       'isActiveDirectoryEnabled',
       'ldap',
-      'activeDirectory'
+      'activeDirectory',
     ]),
     sslCertificates() {
       return this.$store.getters['sslCertificates/allCertificates'];
     },
     caCertificateExpiration() {
       const caCertificate = find(this.sslCertificates, {
-        type: 'TrustStore Certificate'
+        type: 'TrustStore Certificate',
       });
       if (caCertificate === undefined) return null;
       return caCertificate.validUntil;
     },
     ldapCertificateExpiration() {
       const ldapCertificate = find(this.sslCertificates, {
-        type: 'LDAP Certificate'
+        type: 'LDAP Certificate',
       });
       if (ldapCertificate === undefined) return null;
       return ldapCertificate.validUntil;
     },
     ldapProtocol() {
       return this.form.secureLdapEnabled ? 'ldaps://' : 'ldap://';
-    }
+    },
   },
   watch: {
-    isServiceEnabled: function(value) {
+    isServiceEnabled: function (value) {
       this.form.ldapAuthenticationEnabled = value;
     },
-    isActiveDirectoryEnabled: function(value) {
+    isActiveDirectoryEnabled: function (value) {
       this.form.activeDirectoryEnabled = value;
       this.setFormValues();
-    }
+    },
   },
   validations: {
     form: {
       ldapAuthenticationEnabled: {},
       secureLdapEnabled: {},
       activeDirectoryEnabled: {
-        required: requiredIf(function() {
+        required: requiredIf(function () {
           return this.form.ldapAuthenticationEnabled;
-        })
+        }),
       },
       serverUri: {
-        required: requiredIf(function() {
+        required: requiredIf(function () {
           return this.form.ldapAuthenticationEnabled;
-        })
+        }),
       },
       bindDn: {
-        required: requiredIf(function() {
+        required: requiredIf(function () {
           return this.form.ldapAuthenticationEnabled;
-        })
+        }),
       },
       bindPassword: {
-        required: requiredIf(function() {
+        required: requiredIf(function () {
           return this.form.ldapAuthenticationEnabled;
-        })
+        }),
       },
       baseDn: {
-        required: requiredIf(function() {
+        required: requiredIf(function () {
           return this.form.ldapAuthenticationEnabled;
-        })
+        }),
       },
       userIdAttribute: {},
-      groupIdAttribute: {}
-    }
+      groupIdAttribute: {},
+    },
   },
   created() {
     this.startLoader();
@@ -350,10 +354,6 @@ export default {
     this.$store.dispatch('sslCertificates/getCertificates');
     this.setFormValues();
   },
-  beforeRouteLeave(to, from, next) {
-    this.hideLoader();
-    next();
-  },
   methods: {
     setFormValues(serviceType) {
       if (!serviceType) {
@@ -366,7 +366,7 @@ export default {
         bindDn = '',
         baseDn = '',
         userAttribute = '',
-        groupsAttribute = ''
+        groupsAttribute = '',
       } = serviceType;
       const secureLdap =
         serviceAddress && serviceAddress.includes('ldaps://') ? true : false;
@@ -392,12 +392,12 @@ export default {
         bindPassword: this.form.bindPassword,
         baseDn: this.form.baseDn,
         userIdAttribute: this.form.userIdAttribute,
-        groupIdAttribute: this.form.groupIdAttribute
+        groupIdAttribute: this.form.groupIdAttribute,
       };
       this.startLoader();
       this.$store
         .dispatch('ldap/saveAccountSettings', data)
-        .then(success => {
+        .then((success) => {
           this.successToast(success);
           this.$v.form.$reset();
         })
@@ -426,7 +426,7 @@ export default {
         // disables the service.
         this.setFormValues();
       }
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/AccessControl/Ldap/ModalAddRoleGroup.vue b/src/views/AccessControl/Ldap/ModalAddRoleGroup.vue
index e2da1eb1..b9b1f5aa 100644
--- a/src/views/AccessControl/Ldap/ModalAddRoleGroup.vue
+++ b/src/views/AccessControl/Ldap/ModalAddRoleGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <b-modal id="modal-role-group" ref="modal" @ok="onOk" @hidden="resetForm">
-    <template v-slot:modal-title>
+    <template #modal-title>
       <template v-if="roleGroup">
         {{ $t('pageLdap.modal.editRoleGroup') }}
       </template>
@@ -49,7 +49,7 @@
                 :state="getValidationState($v.form.groupPrivilege)"
                 @input="$v.form.groupPrivilege.$touch()"
               >
-                <template v-if="!roleGroup" v-slot:first>
+                <template v-if="!roleGroup" #first>
                   <b-form-select-option :value="null" disabled>
                     {{ $t('global.form.selectAnOption') }}
                   </b-form-select-option>
@@ -63,7 +63,7 @@
         </b-col>
       </b-row>
     </b-container>
-    <template v-slot:modal-footer="{ ok, cancel }">
+    <template #modal-footer="{ ok, cancel }">
       <b-button variant="secondary" @click="cancel()">
         {{ $t('global.action.cancel') }}
       </b-button>
@@ -89,47 +89,47 @@ export default {
     roleGroup: {
       type: Object,
       default: null,
-      validator: prop => {
+      validator: (prop) => {
         if (prop === null) return true;
         return (
           prop.hasOwnProperty('groupName') &&
           prop.hasOwnProperty('groupPrivilege')
         );
-      }
-    }
+      },
+    },
   },
   data() {
     return {
       form: {
         groupName: null,
-        groupPrivilege: null
-      }
+        groupPrivilege: null,
+      },
     };
   },
   computed: {
     accountRoles() {
       return this.$store.getters['localUsers/accountRoles'];
-    }
+    },
   },
   watch: {
-    roleGroup: function(value) {
+    roleGroup: function (value) {
       if (value === null) return;
       this.form.groupName = value.groupName;
       this.form.groupPrivilege = value.groupPrivilege;
-    }
+    },
   },
   validations() {
     return {
       form: {
         groupName: {
-          required: requiredIf(function() {
+          required: requiredIf(function () {
             return !this.roleGroup;
-          })
+          }),
         },
         groupPrivilege: {
-          required
-        }
-      }
+          required,
+        },
+      },
     };
   },
   methods: {
@@ -139,7 +139,7 @@ export default {
       this.$emit('ok', {
         addNew: !this.roleGroup,
         groupName: this.form.groupName,
-        groupPrivilege: this.form.groupPrivilege
+        groupPrivilege: this.form.groupPrivilege,
       });
       this.closeModal();
     },
@@ -158,7 +158,7 @@ export default {
       // prevent modal close
       bvModalEvt.preventDefault();
       this.handleSubmit();
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/AccessControl/Ldap/TableRoleGroups.vue b/src/views/AccessControl/Ldap/TableRoleGroups.vue
index 9daf1fd7..ef300ea5 100644
--- a/src/views/AccessControl/Ldap/TableRoleGroups.vue
+++ b/src/views/AccessControl/Ldap/TableRoleGroups.vue
@@ -43,7 +43,7 @@
           @row-selected="onRowSelected($event, tableItems.length)"
         >
           <!-- Checkbox column -->
-          <template v-slot:head(checkbox)>
+          <template #head(checkbox)>
             <b-form-checkbox
               v-model="tableHeaderCheckboxModel"
               :indeterminate="tableHeaderCheckboxIndeterminate"
@@ -51,7 +51,7 @@
               @change="onChangeHeaderCheckbox($refs.table)"
             />
           </template>
-          <template v-slot:cell(checkbox)="row">
+          <template #cell(checkbox)="row">
             <b-form-checkbox
               v-model="row.rowSelected"
               :disabled="!isServiceEnabled"
@@ -60,7 +60,7 @@
           </template>
 
           <!-- table actions column -->
-          <template v-slot:cell(actions)="{ item }">
+          <template #cell(actions)="{ item }">
             <table-row-action
               v-for="(action, index) in item.actions"
               :key="index"
@@ -69,7 +69,7 @@
               :title="action.title"
               @click:tableAction="onTableRowAction($event, item)"
             >
-              <template v-slot:icon>
+              <template #icon>
                 <icon-edit v-if="action.value === 'edit'" />
                 <icon-trashcan v-if="action.value === 'delete'" />
               </template>
@@ -108,7 +108,7 @@ export default {
     IconTrashcan,
     ModalAddRoleGroup,
     TableRowAction,
-    TableToolbar
+    TableToolbar,
   },
   mixins: [BVTableSelectableMixin, BVToastMixin, LoadingBarMixin],
   data() {
@@ -117,31 +117,31 @@ export default {
       fields: [
         {
           key: 'checkbox',
-          sortable: false
+          sortable: false,
         },
         {
           key: 'groupName',
           sortable: true,
-          label: this.$t('pageLdap.tableRoleGroups.groupName')
+          label: this.$t('pageLdap.tableRoleGroups.groupName'),
         },
         {
           key: 'groupPrivilege',
           sortable: true,
-          label: this.$t('pageLdap.tableRoleGroups.groupPrivilege')
+          label: this.$t('pageLdap.tableRoleGroups.groupPrivilege'),
         },
         {
           key: 'actions',
           sortable: false,
           label: '',
-          tdClass: 'text-right'
-        }
+          tdClass: 'text-right',
+        },
       ],
       batchActions: [
         {
           value: 'delete',
-          label: this.$t('global.action.delete')
-        }
-      ]
+          label: this.$t('global.action.delete'),
+        },
+      ],
     };
   },
   computed: {
@@ -155,17 +155,17 @@ export default {
             {
               value: 'edit',
               title: this.$t('global.action.edit'),
-              enabled: this.isServiceEnabled
+              enabled: this.isServiceEnabled,
             },
             {
               value: 'delete',
               title: this.$t('global.action.delete'),
-              enabled: this.isServiceEnabled
-            }
-          ]
+              enabled: this.isServiceEnabled,
+            },
+          ],
         };
       });
-    }
+    },
   },
   created() {
     this.$store.dispatch('localUsers/getAccountRoles');
@@ -180,17 +180,17 @@ export default {
           ),
           {
             title: this.$t('pageLdap.modal.deleteRoleGroup'),
-            okTitle: this.$t('global.action.delete')
+            okTitle: this.$t('global.action.delete'),
           }
         )
-        .then(deleteConfirmed => {
+        .then((deleteConfirmed) => {
           if (deleteConfirmed) {
             this.startLoader();
             this.$store
               .dispatch('ldap/deleteRoleGroup', {
-                roleGroups: this.selectedRows
+                roleGroups: this.selectedRows,
               })
-              .then(success => this.successToast(success))
+              .then((success) => this.successToast(success))
               .catch(({ message }) => this.errorToast(message))
               .finally(() => this.endLoader());
           }
@@ -205,19 +205,19 @@ export default {
           this.$bvModal
             .msgBoxConfirm(
               this.$t('pageLdap.modal.deleteRoleGroupConfirmMessage', {
-                groupName: row.groupName
+                groupName: row.groupName,
               }),
               {
                 title: this.$t('pageLdap.modal.deleteRoleGroup'),
-                okTitle: this.$t('global.action.delete')
+                okTitle: this.$t('global.action.delete'),
               }
             )
-            .then(deleteConfirmed => {
+            .then((deleteConfirmed) => {
               if (deleteConfirmed) {
                 this.startLoader();
                 this.$store
                   .dispatch('ldap/deleteRoleGroup', { roleGroups: [row] })
-                  .then(success => this.successToast(success))
+                  .then((success) => this.successToast(success))
                   .catch(({ message }) => this.errorToast(message))
                   .finally(() => this.endLoader());
               }
@@ -236,17 +236,17 @@ export default {
       if (addNew) {
         this.$store
           .dispatch('ldap/addNewRoleGroup', data)
-          .then(success => this.successToast(success))
+          .then((success) => this.successToast(success))
           .catch(({ message }) => this.errorToast(message))
           .finally(() => this.endLoader());
       } else {
         this.$store
           .dispatch('ldap/saveRoleGroup', data)
-          .then(success => this.successToast(success))
+          .then((success) => this.successToast(success))
           .catch(({ message }) => this.errorToast(message))
           .finally(() => this.endLoader());
       }
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
index 9978f4a7..5c2d7f1b 100644
--- a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
+++ b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
@@ -39,7 +39,7 @@
           @row-selected="onRowSelected($event, tableItems.length)"
         >
           <!-- Checkbox column -->
-          <template v-slot:head(checkbox)>
+          <template #head(checkbox)>
             <b-form-checkbox
               v-model="tableHeaderCheckboxModel"
               data-test-id="localUserManagement-checkbox-tableHeaderCheckbox"
@@ -47,7 +47,7 @@
               @change="onChangeHeaderCheckbox($refs.table)"
             />
           </template>
-          <template v-slot:cell(checkbox)="row">
+          <template #cell(checkbox)="row">
             <b-form-checkbox
               v-model="row.rowSelected"
               data-test-id="localUserManagement-checkbox-toggleSelectRow"
@@ -56,7 +56,7 @@
           </template>
 
           <!-- table actions column -->
-          <template v-slot:cell(actions)="{ item }">
+          <template #cell(actions)="{ item }">
             <table-row-action
               v-for="(action, index) in item.actions"
               :key="index"
@@ -65,18 +65,14 @@
               :title="action.title"
               @click:tableAction="onTableRowAction($event, item)"
             >
-              <template v-slot:icon>
+              <template #icon>
                 <icon-edit
                   v-if="action.value === 'edit'"
-                  :data-test-id="
-                    `localUserManagement-tableRowAction-edit-${index}`
-                  "
+                  :data-test-id="`localUserManagement-tableRowAction-edit-${index}`"
                 />
                 <icon-trashcan
                   v-if="action.value === 'delete'"
-                  :data-test-id="
-                    `localUserManagement-tableRowAction-delete-${index}`
-                  "
+                  :data-test-id="`localUserManagement-tableRowAction-delete-${index}`"
                 />
               </template>
             </table-row-action>
@@ -142,48 +138,52 @@ export default {
     PageTitle,
     TableRoles,
     TableRowAction,
-    TableToolbar
+    TableToolbar,
   },
   mixins: [BVTableSelectableMixin, BVToastMixin, LoadingBarMixin],
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
+  },
   data() {
     return {
       activeUser: null,
       fields: [
         {
-          key: 'checkbox'
+          key: 'checkbox',
         },
         {
           key: 'username',
-          label: this.$t('pageLocalUserManagement.table.username')
+          label: this.$t('pageLocalUserManagement.table.username'),
         },
         {
           key: 'privilege',
-          label: this.$t('pageLocalUserManagement.table.privilege')
+          label: this.$t('pageLocalUserManagement.table.privilege'),
         },
         {
           key: 'status',
-          label: this.$t('pageLocalUserManagement.table.status')
+          label: this.$t('pageLocalUserManagement.table.status'),
         },
         {
           key: 'actions',
           label: '',
-          tdClass: 'text-right text-nowrap'
-        }
+          tdClass: 'text-right text-nowrap',
+        },
       ],
       tableToolbarActions: [
         {
           value: 'delete',
-          label: this.$t('global.action.delete')
+          label: this.$t('global.action.delete'),
         },
         {
           value: 'enable',
-          label: this.$t('global.action.enable')
+          label: this.$t('global.action.enable'),
         },
         {
           value: 'disable',
-          label: this.$t('global.action.disable')
-        }
-      ]
+          label: this.$t('global.action.disable'),
+        },
+      ],
     };
   },
   computed: {
@@ -192,7 +192,7 @@ export default {
     },
     tableItems() {
       // transform user data to table data
-      return this.allUsers.map(user => {
+      return this.allUsers.map((user) => {
         return {
           username: user.UserName,
           privilege: user.RoleId,
@@ -205,15 +205,15 @@ export default {
             {
               value: 'edit',
               enabled: true,
-              title: this.$t('pageLocalUserManagement.editUser')
+              title: this.$t('pageLocalUserManagement.editUser'),
             },
             {
               value: 'delete',
               enabled: user.UserName === 'root' ? false : true,
-              title: this.$tc('pageLocalUserManagement.deleteUser')
-            }
+              title: this.$tc('pageLocalUserManagement.deleteUser'),
+            },
           ],
-          ...user
+          ...user,
         };
       });
     },
@@ -222,7 +222,7 @@ export default {
     },
     passwordRequirements() {
       return this.$store.getters['localUsers/accountPasswordRequirements'];
-    }
+    },
   },
   created() {
     this.startLoader();
@@ -230,10 +230,6 @@ export default {
     this.$store.dispatch('localUsers/getAccountSettings');
     this.$store.dispatch('localUsers/getAccountRoles');
   },
-  beforeRouteLeave(to, from, next) {
-    this.hideLoader();
-    next();
-  },
   methods: {
     initModalUser(user) {
       this.activeUser = user;
@@ -243,14 +239,14 @@ export default {
       this.$bvModal
         .msgBoxConfirm(
           this.$t('pageLocalUserManagement.modal.deleteConfirmMessage', {
-            user: user.username
+            user: user.username,
           }),
           {
             title: this.$tc('pageLocalUserManagement.deleteUser'),
-            okTitle: this.$tc('pageLocalUserManagement.deleteUser')
+            okTitle: this.$tc('pageLocalUserManagement.deleteUser'),
           }
         )
-        .then(deleteConfirmed => {
+        .then((deleteConfirmed) => {
           if (deleteConfirmed) {
             this.deleteUser(user);
           }
@@ -264,13 +260,13 @@ export default {
       if (isNewUser) {
         this.$store
           .dispatch('localUsers/createUser', userData)
-          .then(success => this.successToast(success))
+          .then((success) => this.successToast(success))
           .catch(({ message }) => this.errorToast(message))
           .finally(() => this.endLoader());
       } else {
         this.$store
           .dispatch('localUsers/updateUser', userData)
-          .then(success => this.successToast(success))
+          .then((success) => this.successToast(success))
           .catch(({ message }) => this.errorToast(message))
           .finally(() => this.endLoader());
       }
@@ -279,7 +275,7 @@ export default {
       this.startLoader();
       this.$store
         .dispatch('localUsers/deleteUser', username)
-        .then(success => this.successToast(success))
+        .then((success) => this.successToast(success))
         .catch(({ message }) => this.errorToast(message))
         .finally(() => this.endLoader());
     },
@@ -300,15 +296,15 @@ export default {
                 okTitle: this.$tc(
                   'pageLocalUserManagement.deleteUser',
                   this.selectedRows.length
-                )
+                ),
               }
             )
-            .then(deleteConfirmed => {
+            .then((deleteConfirmed) => {
               if (deleteConfirmed) {
                 this.startLoader();
                 this.$store
                   .dispatch('localUsers/deleteUsers', this.selectedRows)
-                  .then(messages => {
+                  .then((messages) => {
                     messages.forEach(({ type, message }) => {
                       if (type === 'success') this.successToast(message);
                       if (type === 'error') this.errorToast(message);
@@ -322,7 +318,7 @@ export default {
           this.startLoader();
           this.$store
             .dispatch('localUsers/enableUsers', this.selectedRows)
-            .then(messages => {
+            .then((messages) => {
               messages.forEach(({ type, message }) => {
                 if (type === 'success') this.successToast(message);
                 if (type === 'error') this.errorToast(message);
@@ -334,7 +330,7 @@ export default {
           this.startLoader();
           this.$store
             .dispatch('localUsers/disableUsers', this.selectedRows)
-            .then(messages => {
+            .then((messages) => {
               messages.forEach(({ type, message }) => {
                 if (type === 'success') this.successToast(message);
                 if (type === 'error') this.errorToast(message);
@@ -360,11 +356,11 @@ export default {
       this.startLoader();
       this.$store
         .dispatch('localUsers/saveAccountSettings', settings)
-        .then(message => this.successToast(message))
+        .then((message) => this.successToast(message))
         .catch(({ message }) => this.errorToast(message))
         .finally(() => this.endLoader());
-    }
-  }
+    },
+  },
 };
 </script>
 
diff --git a/src/views/AccessControl/LocalUserManagement/ModalSettings.vue b/src/views/AccessControl/LocalUserManagement/ModalSettings.vue
index a611c590..89a1ebca 100644
--- a/src/views/AccessControl/LocalUserManagement/ModalSettings.vue
+++ b/src/views/AccessControl/LocalUserManagement/ModalSettings.vue
@@ -19,7 +19,7 @@
                 {{
                   $t('global.form.valueMustBeBetween', {
                     min: 0,
-                    max: 65535
+                    max: 65535,
                   })
                 }}
               </b-form-text>
@@ -39,13 +39,13 @@
                 <template
                   v-if="
                     !$v.form.lockoutThreshold.minLength ||
-                      !$v.form.lockoutThreshold.maxLength
+                    !$v.form.lockoutThreshold.maxLength
                   "
                 >
                   {{
                     $t('global.form.valueMustBeBetween', {
                       min: 0,
-                      max: 65535
+                      max: 65535,
                     })
                   }}
                 </template>
@@ -104,7 +104,7 @@
         </b-row>
       </b-container>
     </b-form>
-    <template v-slot:modal-footer="{ ok, cancel }">
+    <template #modal-footer="{ ok, cancel }">
       <b-button
         variant="secondary"
         data-test-id="localUserManagement-button-cancel"
@@ -131,7 +131,7 @@ import {
   required,
   requiredIf,
   minValue,
-  maxValue
+  maxValue,
 } from 'vuelidate/lib/validators';
 
 export default {
@@ -139,42 +139,42 @@ export default {
   props: {
     settings: {
       type: Object,
-      required: true
-    }
+      required: true,
+    },
   },
   data() {
     return {
       form: {
         lockoutThreshold: 0,
         unlockMethod: 0,
-        lockoutDuration: null
-      }
+        lockoutDuration: null,
+      },
     };
   },
   watch: {
-    settings: function({ lockoutThreshold, lockoutDuration }) {
+    settings: function ({ lockoutThreshold, lockoutDuration }) {
       this.form.lockoutThreshold = lockoutThreshold;
       this.form.unlockMethod = lockoutDuration ? 1 : 0;
       this.form.lockoutDuration = lockoutDuration ? lockoutDuration : null;
-    }
+    },
   },
   validations: {
     form: {
       lockoutThreshold: {
         minValue: minValue(0),
         maxValue: maxValue(65535),
-        required
+        required,
       },
       unlockMethod: { required },
       lockoutDuration: {
-        minValue: function(value) {
+        minValue: function (value) {
           return this.form.unlockMethod === 0 || value > 0;
         },
-        required: requiredIf(function() {
+        required: requiredIf(function () {
           return this.form.unlockMethod === 1;
-        })
-      }
-    }
+        }),
+      },
+    },
   },
   methods: {
     handleSubmit() {
@@ -213,7 +213,7 @@ export default {
         ? this.settings.lockoutDuration
         : null;
       this.$v.$reset(); // clear validations
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/AccessControl/LocalUserManagement/ModalUser.vue b/src/views/AccessControl/LocalUserManagement/ModalUser.vue
index 0fec8944..962718b9 100644
--- a/src/views/AccessControl/LocalUserManagement/ModalUser.vue
+++ b/src/views/AccessControl/LocalUserManagement/ModalUser.vue
@@ -1,6 +1,6 @@
 <template>
   <b-modal id="modal-user" ref="modal" @hidden="resetForm">
-    <template v-slot:modal-title>
+    <template #modal-title>
       <template v-if="newUser">
         {{ $t('pageLocalUserManagement.addUser') }}
       </template>
@@ -131,7 +131,7 @@
                 {{
                   $t('pageLocalUserManagement.modal.passwordMustBeBetween', {
                     min: passwordRequirements.minLength,
-                    max: passwordRequirements.maxLength
+                    max: passwordRequirements.maxLength,
                   })
                 }}
               </b-form-text>
@@ -160,7 +160,7 @@
                         'pageLocalUserManagement.modal.passwordMustBeBetween',
                         {
                           min: passwordRequirements.minLength,
-                          max: passwordRequirements.maxLength
+                          max: passwordRequirements.maxLength,
                         }
                       )
                     }}
@@ -200,7 +200,7 @@
         </b-row>
       </b-container>
     </b-form>
-    <template v-slot:modal-footer="{ ok, cancel }">
+    <template #modal-footer="{ ok, cancel }">
       <b-button
         variant="secondary"
         data-test-id="localUserManagement-button-cancel"
@@ -233,7 +233,7 @@ import {
   minLength,
   sameAs,
   helpers,
-  requiredIf
+  requiredIf,
 } from 'vuelidate/lib/validators';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
 import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
@@ -245,12 +245,12 @@ export default {
   props: {
     user: {
       type: Object,
-      default: null
+      default: null,
     },
     passwordRequirements: {
       type: Object,
-      required: true
-    }
+      required: true,
+    },
   },
   data() {
     return {
@@ -261,8 +261,8 @@ export default {
         privilege: '',
         password: '',
         passwordConfirmation: '',
-        manualUnlock: false
-      }
+        manualUnlock: false,
+      },
     };
   },
   computed: {
@@ -277,46 +277,46 @@ export default {
     },
     privilegeTypes() {
       return this.$store.getters['localUsers/accountRoles'];
-    }
+    },
   },
   watch: {
-    user: function(value) {
+    user: function (value) {
       if (value === null) return;
       this.originalUsername = value.username;
       this.form.username = value.username;
       this.form.status = value.Enabled;
       this.form.privilege = value.privilege;
-    }
+    },
   },
   validations() {
     return {
       form: {
         status: {
-          required
+          required,
         },
         username: {
           required,
           maxLength: maxLength(16),
-          pattern: helpers.regex('pattern', /^([a-zA-Z_][a-zA-Z0-9_]*)/)
+          pattern: helpers.regex('pattern', /^([a-zA-Z_][a-zA-Z0-9_]*)/),
         },
         privilege: {
-          required
+          required,
         },
         password: {
-          required: requiredIf(function() {
+          required: requiredIf(function () {
             return this.requirePassword();
           }),
           minLength: minLength(this.passwordRequirements.minLength),
-          maxLength: maxLength(this.passwordRequirements.maxLength)
+          maxLength: maxLength(this.passwordRequirements.maxLength),
         },
         passwordConfirmation: {
-          required: requiredIf(function() {
+          required: requiredIf(function () {
             return this.requirePassword();
           }),
-          sameAsPassword: sameAs('password')
+          sameAsPassword: sameAs('password'),
         },
-        manualUnlock: {}
-      }
+        manualUnlock: {},
+      },
     };
   },
   methods: {
@@ -384,7 +384,7 @@ export default {
       // prevent modal close
       bvModalEvt.preventDefault();
       this.handleSubmit();
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/AccessControl/LocalUserManagement/TableRoles.vue b/src/views/AccessControl/LocalUserManagement/TableRoles.vue
index bf300f50..9c2e5fe5 100644
--- a/src/views/AccessControl/LocalUserManagement/TableRoles.vue
+++ b/src/views/AccessControl/LocalUserManagement/TableRoles.vue
@@ -1,21 +1,21 @@
 <template>
   <b-table stacked="sm" hover small :items="items" :fields="fields">
-    <template v-slot:cell(administrator)="data">
+    <template #cell(administrator)="data">
       <template v-if="data.value">
         <checkmark20 />
       </template>
     </template>
-    <template v-slot:cell(operator)="data">
+    <template #cell(operator)="data">
       <template v-if="data.value">
         <checkmark20 />
       </template>
     </template>
-    <template v-slot:cell(readonly)="data">
+    <template #cell(readonly)="data">
       <template v-if="data.value">
         <checkmark20 />
       </template>
     </template>
-    <template v-slot:cell(noaccess)="data">
+    <template #cell(noaccess)="data">
       <template v-if="data.value">
         <checkmark20 />
       </template>
@@ -28,7 +28,7 @@ import Checkmark20 from '@carbon/icons-vue/es/checkmark/20';
 
 export default {
   components: {
-    Checkmark20
+    Checkmark20,
   },
   data() {
     return {
@@ -40,7 +40,7 @@ export default {
           administrator: true,
           operator: false,
           readonly: false,
-          noaccess: false
+          noaccess: false,
         },
         {
           description: this.$t(
@@ -49,7 +49,7 @@ export default {
           administrator: true,
           operator: false,
           readonly: false,
-          noaccess: false
+          noaccess: false,
         },
         {
           description: this.$t(
@@ -58,7 +58,7 @@ export default {
           administrator: true,
           operator: true,
           readonly: true,
-          noaccess: false
+          noaccess: false,
         },
         {
           description: this.$t(
@@ -67,7 +67,7 @@ export default {
           administrator: true,
           operator: false,
           readonly: false,
-          noaccess: false
+          noaccess: false,
         },
         {
           description: this.$t(
@@ -76,7 +76,7 @@ export default {
           administrator: true,
           operator: true,
           readonly: true,
-          noaccess: false
+          noaccess: false,
         },
         {
           description: this.$t(
@@ -85,7 +85,7 @@ export default {
           administrator: true,
           operator: true,
           readonly: true,
-          noaccess: false
+          noaccess: false,
         },
         {
           description: this.$t(
@@ -94,7 +94,7 @@ export default {
           administrator: true,
           operator: true,
           readonly: true,
-          noaccess: false
+          noaccess: false,
         },
         {
           description: this.$t(
@@ -103,7 +103,7 @@ export default {
           administrator: true,
           operator: false,
           readonly: false,
-          noaccess: false
+          noaccess: false,
         },
         {
           description: this.$t(
@@ -112,17 +112,17 @@ export default {
           administrator: true,
           operator: true,
           readonly: true,
-          noaccess: false
-        }
+          noaccess: false,
+        },
       ],
       fields: [
         { key: 'description', label: 'Privilege' },
         { key: 'administrator', label: 'Administrator', class: 'text-center' },
         { key: 'operator', label: 'Operator', class: 'text-center' },
         { key: 'readonly', label: 'ReadOnly', class: 'text-center' },
-        { key: 'noaccess', label: 'NoAccess', class: 'text-center' }
-      ]
+        { key: 'noaccess', label: 'NoAccess', class: 'text-center' },
+      ],
     };
-  }
+  },
 };
 </script>
diff --git a/src/views/AccessControl/SslCertificates/CsrCountryCodes.js b/src/views/AccessControl/SslCertificates/CsrCountryCodes.js
index 59e724b7..a2d70007 100644
--- a/src/views/AccessControl/SslCertificates/CsrCountryCodes.js
+++ b/src/views/AccessControl/SslCertificates/CsrCountryCodes.js
@@ -30,12 +30,12 @@ export const COUNTRY_LIST = [
   {
     name: 'Bonaire, Sint Eustatius and Saba',
     code: 'BQ',
-    label: i18n.t('countries.BQ')
+    label: i18n.t('countries.BQ'),
   },
   {
     name: 'Bosnia and Herzegovina ',
     code: 'BA',
-    label: i18n.t('countries.BA')
+    label: i18n.t('countries.BA'),
   },
   { name: 'Bostwana', code: 'BW', label: i18n.t('countries.BW') },
   { name: 'Bouvet Island', code: 'BV', label: i18n.t('countries.BV') },
@@ -43,7 +43,7 @@ export const COUNTRY_LIST = [
   {
     name: 'British Indian Ocean Territory',
     code: 'IO',
-    label: i18n.t('countries.IO')
+    label: i18n.t('countries.IO'),
   },
   { name: 'Brunei Darussalam ', code: 'BN', label: i18n.t('countries.BN') },
   { name: 'Bulgaria', code: 'BG', label: i18n.t('countries.BG') },
@@ -57,7 +57,7 @@ export const COUNTRY_LIST = [
   {
     name: 'Central African Republic',
     code: 'CF',
-    label: i18n.t('countries.CF')
+    label: i18n.t('countries.CF'),
   },
   { name: 'Chad', code: 'TD', label: i18n.t('countries.TD') },
   { name: 'Chile', code: 'CL', label: i18n.t('countries.CL') },
@@ -69,7 +69,7 @@ export const COUNTRY_LIST = [
   {
     name: 'Congo, The Democratic Republic of the',
     code: 'CD',
-    label: i18n.t('countries.CD')
+    label: i18n.t('countries.CD'),
   },
   { name: 'Congo', code: 'CG', label: i18n.t('countries.CG') },
   { name: 'Cook Islands', code: 'CK', label: i18n.t('countries.CK') },
@@ -95,7 +95,7 @@ export const COUNTRY_LIST = [
   {
     name: 'Falkland Islands (Malvinas)',
     code: 'FK',
-    label: i18n.t('countries.FK')
+    label: i18n.t('countries.FK'),
   },
   { name: 'Faroe Islands', code: 'FO', label: i18n.t('countries.FO') },
   { name: 'Fiji', code: 'FJ', label: i18n.t('countries.FJ') },
@@ -106,7 +106,7 @@ export const COUNTRY_LIST = [
   {
     name: 'French Southern Territories',
     code: 'TF',
-    label: i18n.t('countries.TF')
+    label: i18n.t('countries.TF'),
   },
   { name: 'Gabon', code: 'GA', label: i18n.t('countries.GA') },
   { name: 'Gambia, The', code: 'GM', label: i18n.t('countries.GM') },
@@ -128,7 +128,7 @@ export const COUNTRY_LIST = [
   {
     name: 'Heard Island and McDonald Islands',
     code: 'HM',
-    label: i18n.t('countries.HM')
+    label: i18n.t('countries.HM'),
   },
   { name: 'Holy See', code: 'VA', label: i18n.t('countries.VA') },
   { name: 'Honduras', code: 'HN', label: i18n.t('countries.HN') },
@@ -140,7 +140,7 @@ export const COUNTRY_LIST = [
   {
     name: 'Iran, Islamic Republic of',
     code: 'IR',
-    label: i18n.t('countries.IR')
+    label: i18n.t('countries.IR'),
   },
   { name: 'Iraq', code: 'IQ', label: i18n.t('countries.IQ') },
   { name: 'Ireland', code: 'IE', label: i18n.t('countries.IE') },
@@ -158,14 +158,14 @@ export const COUNTRY_LIST = [
   {
     name: "Korea, Democratic People's Republic of",
     code: 'KP',
-    label: i18n.t('countries.KP')
+    label: i18n.t('countries.KP'),
   },
   { name: 'Kuwait', code: 'KW', label: i18n.t('countries.KW') },
   { name: 'Kyrgyzstan', code: 'KG', label: i18n.t('countries.KG') },
   {
     name: "Lao People's Democratic Republic",
     code: 'LA',
-    label: i18n.t('countries.LA')
+    label: i18n.t('countries.LA'),
   },
   { name: 'Latvia', code: 'LV', label: i18n.t('countries.LV') },
   { name: 'Lebanon', code: 'LB', label: i18n.t('countries.LB') },
@@ -179,7 +179,7 @@ export const COUNTRY_LIST = [
   {
     name: 'Macedonia, The Former Yugoslav Republic of',
     code: 'MK',
-    label: i18n.t('countries.MK')
+    label: i18n.t('countries.MK'),
   },
   { name: 'Madagascar', code: 'MG', label: i18n.t('countries.MG') },
   { name: 'Malawi', code: 'MW', label: i18n.t('countries.MW') },
@@ -196,7 +196,7 @@ export const COUNTRY_LIST = [
   {
     name: 'Micronesia, Federated States of',
     code: 'FM',
-    label: i18n.t('countries.FM')
+    label: i18n.t('countries.FM'),
   },
   { name: 'Moldova, Republic of', code: 'MD', label: i18n.t('countries.MD') },
   { name: 'Monaco', code: 'MC', label: i18n.t('countries.MC') },
@@ -220,7 +220,7 @@ export const COUNTRY_LIST = [
   {
     name: 'Northern Mariana Islands',
     code: 'MP',
-    label: i18n.t('countries.MP')
+    label: i18n.t('countries.MP'),
   },
   { name: 'Norway', code: 'NO', label: i18n.t('countries.NO') },
   { name: 'Oman', code: 'OM', label: i18n.t('countries.OM') },
@@ -245,7 +245,7 @@ export const COUNTRY_LIST = [
   {
     name: 'Saint Helena, Ascension and Tristan da Cunha',
     code: 'SH',
-    label: i18n.t('countries.SH')
+    label: i18n.t('countries.SH'),
   },
   { name: 'Saint Kitts and Nevis ', code: 'KN', label: i18n.t('countries.KN') },
   { name: 'Saint Lucia', code: 'LC', label: i18n.t('countries.LC') },
@@ -253,12 +253,12 @@ export const COUNTRY_LIST = [
   {
     name: 'Saint Pierre and Miquelon',
     code: 'PM',
-    label: i18n.t('countries.PM')
+    label: i18n.t('countries.PM'),
   },
   {
     name: 'Saint Vincent and the Grenadines',
     code: 'VC',
-    label: i18n.t('countries.VC')
+    label: i18n.t('countries.VC'),
   },
   { name: 'Samoa', code: 'WS', label: i18n.t('countries.WS') },
   { name: 'San Marino ', code: 'SM', label: i18n.t('countries.SM') },
@@ -278,7 +278,7 @@ export const COUNTRY_LIST = [
   {
     name: 'South Georgia and the South Sandwich Islands',
     code: 'GS',
-    label: i18n.t('countries.GS')
+    label: i18n.t('countries.GS'),
   },
   { name: 'South Sudan', code: 'SS', label: i18n.t('countries.SS') },
   { name: 'Spain', code: 'ES', label: i18n.t('countries.ES') },
@@ -294,7 +294,7 @@ export const COUNTRY_LIST = [
   {
     name: 'Tanzania, United Republic of',
     code: 'TZ',
-    label: i18n.t('countries.TZ')
+    label: i18n.t('countries.TZ'),
   },
   { name: 'Thailand', code: 'TH', label: i18n.t('countries.TH') },
   { name: 'Timor-Leste', code: 'TL', label: i18n.t('countries.TL') },
@@ -308,7 +308,7 @@ export const COUNTRY_LIST = [
   {
     name: 'Turks and Caicos Islands',
     code: 'TC',
-    label: i18n.t('countries.TC')
+    label: i18n.t('countries.TC'),
   },
   { name: 'Tuvalu', code: 'TV', label: i18n.t('countries.TV') },
   { name: 'Uganda', code: 'UG', label: i18n.t('countries.UG') },
@@ -318,12 +318,12 @@ export const COUNTRY_LIST = [
   {
     name: 'United States Minor Outlying Islands',
     code: 'UM',
-    label: i18n.t('countries.UM')
+    label: i18n.t('countries.UM'),
   },
   {
     name: 'United States of America',
     code: 'US',
-    label: i18n.t('countries.US')
+    label: i18n.t('countries.US'),
   },
   { name: 'Uruguay', code: 'UY', label: i18n.t('countries.UY') },
   { name: 'Uzbekistan', code: 'UZ', label: i18n.t('countries.UZ') },
@@ -333,7 +333,7 @@ export const COUNTRY_LIST = [
   {
     name: 'Virgin Islands, British',
     code: 'VG',
-    label: i18n.t('countries.VG')
+    label: i18n.t('countries.VG'),
   },
   { name: 'Virgin Islands, U.S', code: 'VI', label: i18n.t('countries.VI') },
   { name: 'Wallis and Futuna', code: 'WF', label: i18n.t('countries.WF') },
@@ -341,5 +341,5 @@ export const COUNTRY_LIST = [
   { name: 'Yemen', code: 'YE', label: i18n.t('countries.YE') },
   { name: 'Zambia', code: 'ZM', label: i18n.t('countries.ZM') },
   { name: 'Zimbabwe', code: 'ZW', label: i18n.t('countries.ZW') },
-  { name: 'Åland Islands', code: 'AX', label: i18n.t('countries.AX') }
+  { name: 'Åland Islands', code: 'AX', label: i18n.t('countries.AX') },
 ];
diff --git a/src/views/AccessControl/SslCertificates/ModalGenerateCsr.vue b/src/views/AccessControl/SslCertificates/ModalGenerateCsr.vue
index 84f14c3b..da6b457c 100644
--- a/src/views/AccessControl/SslCertificates/ModalGenerateCsr.vue
+++ b/src/views/AccessControl/SslCertificates/ModalGenerateCsr.vue
@@ -30,7 +30,7 @@
                       :state="getValidationState($v.form.certificateType)"
                       @input="$v.form.certificateType.$touch()"
                     >
-                      <template v-slot:first>
+                      <template #first>
                         <b-form-select-option :value="null" disabled>
                           {{ $t('global.form.selectAnOption') }}
                         </b-form-select-option>
@@ -54,7 +54,7 @@
                       :state="getValidationState($v.form.country)"
                       @input="$v.form.country.$touch()"
                     >
-                      <template v-slot:first>
+                      <template #first>
                         <b-form-select-option :value="null" disabled>
                           {{ $t('global.form.selectAnOption') }}
                         </b-form-select-option>
@@ -158,7 +158,7 @@
                 </b-col>
                 <b-col lg="6">
                   <b-form-group label-for="challenge-password">
-                    <template v-slot:label>
+                    <template #label>
                       {{ $t('pageSslCertificates.modal.challengePassword') }} -
                       <span class="form-text d-inline">
                         {{ $t('global.form.optional') }}
@@ -176,7 +176,7 @@
               <b-row>
                 <b-col lg="6">
                   <b-form-group label-for="contact-person">
-                    <template v-slot:label>
+                    <template #label>
                       {{ $t('pageSslCertificates.modal.contactPerson') }} -
                       <span class="form-text d-inline">
                         {{ $t('global.form.optional') }}
@@ -192,7 +192,7 @@
                 </b-col>
                 <b-col lg="6">
                   <b-form-group label-for="email-address">
-                    <template v-slot:label>
+                    <template #label>
                       {{ $t('pageSslCertificates.modal.emailAddress') }} -
                       <span class="form-text d-inline">
                         {{ $t('global.form.optional') }}
@@ -210,7 +210,7 @@
               <b-row>
                 <b-col lg="12">
                   <b-form-group label-for="alternate-name">
-                    <template v-slot:label>
+                    <template #label>
                       {{ $t('pageSslCertificates.modal.alternateName') }} -
                       <span class="form-text d-inline">
                         {{ $t('global.form.optional') }}
@@ -229,14 +229,14 @@
                       size="lg"
                       separator=" "
                       :input-attrs="{
-                        'aria-describedby': 'alternate-name-help-block'
+                        'aria-describedby': 'alternate-name-help-block',
                       }"
                       :duplicate-tag-text="
                         $t('pageSslCertificates.modal.duplicateAlternateName')
                       "
                       placeholder=""
                     >
-                      <template v-slot:add-button-text>
+                      <template #add-button-text>
                         {{ $t('global.action.add') }} <icon-add />
                       </template>
                     </b-form-tags>
@@ -262,7 +262,7 @@
                       :state="getValidationState($v.form.keyPairAlgorithm)"
                       @input="$v.form.keyPairAlgorithm.$touch()"
                     >
-                      <template v-slot:first>
+                      <template #first>
                         <b-form-select-option :value="null" disabled>
                           {{ $t('global.form.selectAnOption') }}
                         </b-form-select-option>
@@ -289,7 +289,7 @@
                         :state="getValidationState($v.form.keyCurveId)"
                         @input="$v.form.keyCurveId.$touch()"
                       >
-                        <template v-slot:first>
+                        <template #first>
                           <b-form-select-option :value="null" disabled>
                             {{ $t('global.form.selectAnOption') }}
                           </b-form-select-option>
@@ -313,7 +313,7 @@
                         :state="getValidationState($v.form.keyBitLength)"
                         @input="$v.form.keyBitLength.$touch()"
                       >
-                        <template v-slot:first>
+                        <template #first>
                           <b-form-select-option :value="null" disabled>
                             {{ $t('global.form.selectAnOption') }}
                           </b-form-select-option>
@@ -330,7 +330,7 @@
           </b-row>
         </b-container>
       </b-form>
-      <template v-slot:modal-footer="{ ok, cancel }">
+      <template #modal-footer="{ ok, cancel }">
         <b-button variant="secondary" @click="cancel()">
           {{ $t('global.action.cancel') }}
         </b-button>
@@ -353,7 +353,7 @@
       @hidden="onHiddenCsrStringModal"
     >
       {{ csrString }}
-      <template v-slot:modal-footer>
+      <template #modal-footer>
         <b-btn variant="secondary" @click="copyCsrString">
           <template v-if="csrStringCopied">
             <icon-checkmark />
@@ -406,25 +406,25 @@ export default {
         alternateName: [],
         keyPairAlgorithm: null,
         keyCurveId: null,
-        keyBitLength: null
+        keyBitLength: null,
       },
       certificateOptions: CERTIFICATE_TYPES.reduce((arr, cert) => {
         if (cert.type === 'TrustStore Certificate') return arr;
         arr.push({
           text: cert.label,
-          value: cert.type
+          value: cert.type,
         });
         return arr;
       }, []),
-      countryOptions: COUNTRY_LIST.map(country => ({
+      countryOptions: COUNTRY_LIST.map((country) => ({
         text: country.label,
-        value: country.code
+        value: country.code,
       })),
       keyPairAlgorithmOptions: ['EC', 'RSA'],
       keyCurveIdOptions: ['prime256v1', 'secp521r1', 'secp384r1'],
       keyBitLengthOptions: [2048],
       csrString: '',
-      csrStringCopied: false
+      csrStringCopied: false,
     };
   },
   validations: {
@@ -442,16 +442,16 @@ export default {
       alternateName: {},
       keyPairAlgorithm: { required },
       keyCurveId: {
-        reuired: requiredIf(function(form) {
+        reuired: requiredIf(function (form) {
           return form.keyPairAlgorithm === 'EC';
-        })
+        }),
       },
       keyBitLength: {
-        reuired: requiredIf(function(form) {
+        reuired: requiredIf(function (form) {
           return form.keyPairAlgorithm === 'RSA';
-        })
-      }
-    }
+        }),
+      },
+    },
   },
   methods: {
     handleSubmit() {
@@ -493,7 +493,7 @@ export default {
           this.csrStringCopied = false;
         }, 5000 /*5 seconds*/);
       });
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/AccessControl/SslCertificates/ModalUploadCertificate.vue b/src/views/AccessControl/SslCertificates/ModalUploadCertificate.vue
index 63c3b4e8..070dd0dc 100644
--- a/src/views/AccessControl/SslCertificates/ModalUploadCertificate.vue
+++ b/src/views/AccessControl/SslCertificates/ModalUploadCertificate.vue
@@ -1,6 +1,6 @@
 <template>
   <b-modal id="upload-certificate" ref="modal" @ok="onOk" @hidden="resetForm">
-    <template v-slot:modal-title>
+    <template #modal-title>
       <template v-if="certificate">
         {{ $t('pageSslCertificates.replaceCertificate') }}
       </template>
@@ -59,7 +59,7 @@
         </b-form-invalid-feedback>
       </b-form-group>
     </b-form>
-    <template v-slot:modal-ok>
+    <template #modal-ok>
       <template v-if="certificate">
         {{ $t('global.action.replace') }}
       </template>
@@ -80,20 +80,20 @@ export default {
     certificate: {
       type: Object,
       default: null,
-      validator: prop => {
+      validator: (prop) => {
         if (prop === null) return true;
         return (
           prop.hasOwnProperty('type') && prop.hasOwnProperty('certificate')
         );
-      }
-    }
+      },
+    },
   },
   data() {
     return {
       form: {
         certificateType: null,
-        file: null
-      }
+        file: null,
+      },
     };
   },
   computed: {
@@ -104,30 +104,30 @@ export default {
       return this.certificateTypes.map(({ type, label }) => {
         return {
           text: label,
-          value: type
+          value: type,
         };
       });
-    }
+    },
   },
   watch: {
-    certificateOptions: function(options) {
+    certificateOptions: function (options) {
       if (options.length) {
         this.form.certificateType = options[0].value;
       }
-    }
+    },
   },
   validations() {
     return {
       form: {
         certificateType: {
-          required: requiredIf(function() {
+          required: requiredIf(function () {
             return !this.certificate;
-          })
+          }),
         },
         file: {
-          required
-        }
-      }
+          required,
+        },
+      },
     };
   },
   methods: {
@@ -140,7 +140,7 @@ export default {
         location: this.certificate ? this.certificate.location : null,
         type: this.certificate
           ? this.certificate.type
-          : this.form.certificateType
+          : this.form.certificateType,
       });
       this.closeModal();
     },
@@ -160,7 +160,7 @@ export default {
       // prevent modal close
       bvModalEvt.preventDefault();
       this.handleSubmit();
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/AccessControl/SslCertificates/SslCertificates.vue b/src/views/AccessControl/SslCertificates/SslCertificates.vue
index bce50d72..fe63bd99 100644
--- a/src/views/AccessControl/SslCertificates/SslCertificates.vue
+++ b/src/views/AccessControl/SslCertificates/SslCertificates.vue
@@ -11,7 +11,7 @@
           <template v-else>
             {{
               $t('pageSslCertificates.alert.certificateExpiredMessage', {
-                certificate: expiredCertificateTypes[0]
+                certificate: expiredCertificateTypes[0],
               })
             }}
           </template>
@@ -24,7 +24,7 @@
           <template v-else>
             {{
               $t('pageSslCertificates.alert.certificateExpiringMessage', {
-                certificate: expiringCertificateTypes[0]
+                certificate: expiringCertificateTypes[0],
               })
             }}
           </template>
@@ -61,11 +61,11 @@
           :items="tableItems"
           :empty-text="$t('global.table.emptyMessage')"
         >
-          <template v-slot:cell(validFrom)="{ value }">
+          <template #cell(validFrom)="{ value }">
             {{ value | formatDate }}
           </template>
 
-          <template v-slot:cell(validUntil)="{ value }">
+          <template #cell(validUntil)="{ value }">
             <status-icon
               v-if="getDaysUntilExpired(value) < 31"
               :status="getIconStatus(value)"
@@ -73,7 +73,7 @@
             {{ value | formatDate }}
           </template>
 
-          <template v-slot:cell(actions)="{ value, item }">
+          <template #cell(actions)="{ value, item }">
             <table-row-action
               v-for="(action, index) in value"
               :key="index"
@@ -82,7 +82,7 @@
               :enabled="action.enabled"
               @click:tableAction="onTableRowAction($event, item)"
             >
-              <template v-slot:icon>
+              <template #icon>
                 <icon-replace v-if="action.value === 'replace'" />
                 <icon-trashcan v-if="action.value === 'delete'" />
               </template>
@@ -124,39 +124,43 @@ export default {
     ModalUploadCertificate,
     PageTitle,
     StatusIcon,
-    TableRowAction
+    TableRowAction,
   },
   mixins: [BVToastMixin, LoadingBarMixin],
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
+  },
   data() {
     return {
       modalCertificate: null,
       fields: [
         {
           key: 'certificate',
-          label: this.$t('pageSslCertificates.table.certificate')
+          label: this.$t('pageSslCertificates.table.certificate'),
         },
         {
           key: 'issuedBy',
-          label: this.$t('pageSslCertificates.table.issuedBy')
+          label: this.$t('pageSslCertificates.table.issuedBy'),
         },
         {
           key: 'issuedTo',
-          label: this.$t('pageSslCertificates.table.issuedTo')
+          label: this.$t('pageSslCertificates.table.issuedTo'),
         },
         {
           key: 'validFrom',
-          label: this.$t('pageSslCertificates.table.validFrom')
+          label: this.$t('pageSslCertificates.table.validFrom'),
         },
         {
           key: 'validUntil',
-          label: this.$t('pageSslCertificates.table.validUntil')
+          label: this.$t('pageSslCertificates.table.validUntil'),
         },
         {
           key: 'actions',
           label: '',
-          tdClass: 'text-right text-nowrap'
-        }
-      ]
+          tdClass: 'text-right text-nowrap',
+        },
+      ],
     };
   },
   computed: {
@@ -164,21 +168,21 @@ export default {
       return this.$store.getters['sslCertificates/allCertificates'];
     },
     tableItems() {
-      return this.certificates.map(certificate => {
+      return this.certificates.map((certificate) => {
         return {
           ...certificate,
           actions: [
             {
               value: 'replace',
-              title: this.$t('pageSslCertificates.replaceCertificate')
+              title: this.$t('pageSslCertificates.replaceCertificate'),
             },
             {
               value: 'delete',
               title: this.$t('pageSslCertificates.deleteCertificate'),
               enabled:
-                certificate.type === 'TrustStore Certificate' ? true : false
-            }
-          ]
+                certificate.type === 'TrustStore Certificate' ? true : false,
+            },
+          ],
         };
       });
     },
@@ -205,7 +209,7 @@ export default {
         }
         return acc;
       }, []);
-    }
+    },
   },
   async created() {
     this.startLoader();
@@ -214,10 +218,6 @@ export default {
       .dispatch('sslCertificates/getCertificates')
       .finally(() => this.endLoader());
   },
-  beforeRouteLeave(to, from, next) {
-    this.hideLoader();
-    next();
-  },
   methods: {
     onTableRowAction(event, rowItem) {
       switch (event) {
@@ -240,14 +240,14 @@ export default {
         .msgBoxConfirm(
           this.$t('pageSslCertificates.modal.deleteConfirmMessage', {
             issuedBy: certificate.issuedBy,
-            certificate: certificate.certificate
+            certificate: certificate.certificate,
           }),
           {
             title: this.$t('pageSslCertificates.deleteCertificate'),
-            okTitle: this.$t('global.action.delete')
+            okTitle: this.$t('global.action.delete'),
           }
         )
-        .then(deleteConfirmed => {
+        .then((deleteConfirmed) => {
           if (deleteConfirmed) this.deleteCertificate(certificate);
         });
     },
@@ -264,7 +264,7 @@ export default {
       this.startLoader();
       this.$store
         .dispatch('sslCertificates/addNewCertificate', { file, type })
-        .then(success => this.successToast(success))
+        .then((success) => this.successToast(success))
         .catch(({ message }) => this.errorToast(message))
         .finally(() => this.endLoader());
     },
@@ -272,15 +272,15 @@ export default {
       this.startLoader();
       const reader = new FileReader();
       reader.readAsBinaryString(file);
-      reader.onloadend = event => {
+      reader.onloadend = (event) => {
         const certificateString = event.target.result;
         this.$store
           .dispatch('sslCertificates/replaceCertificate', {
             certificateString,
             type,
-            location
+            location,
           })
-          .then(success => this.successToast(success))
+          .then((success) => this.successToast(success))
           .catch(({ message }) => this.errorToast(message))
           .finally(() => this.endLoader());
       };
@@ -290,9 +290,9 @@ export default {
       this.$store
         .dispatch('sslCertificates/deleteCertificate', {
           type,
-          location
+          location,
         })
-        .then(success => this.successToast(success))
+        .then((success) => this.successToast(success))
         .catch(({ message }) => this.errorToast(message))
         .finally(() => this.endLoader());
     },
@@ -312,7 +312,7 @@ export default {
       } else if (daysUntilExpired < 31) {
         return 'warning';
       }
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/ChangePassword/ChangePassword.vue b/src/views/ChangePassword/ChangePassword.vue
index fbf95d9d..039dd0b6 100644
--- a/src/views/ChangePassword/ChangePassword.vue
+++ b/src/views/ChangePassword/ChangePassword.vue
@@ -84,10 +84,10 @@ export default {
     return {
       form: {
         password: null,
-        passwordConfirm: null
+        passwordConfirm: null,
       },
       username: this.$store.getters['global/username'],
-      changePasswordError: false
+      changePasswordError: false,
     };
   },
   validations() {
@@ -96,9 +96,9 @@ export default {
         password: { required },
         passwordConfirm: {
           required,
-          sameAsPassword: sameAs('password')
-        }
-      }
+          sameAsPassword: sameAs('password'),
+        },
+      },
     };
   },
   methods: {
@@ -111,15 +111,15 @@ export default {
       if (this.$v.$invalid) return;
       let data = {
         originalUsername: this.username,
-        password: this.form.password
+        password: this.form.password,
       };
 
       this.$store
         .dispatch('localUsers/updateUser', data)
         .then(() => this.$router.push('/'))
         .catch(() => (this.changePasswordError = true));
-    }
-  }
+    },
+  },
 };
 </script>
 
diff --git a/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue b/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue
index 33e097c4..79cdbc1e 100644
--- a/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue
+++ b/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue
@@ -84,7 +84,7 @@
                     button-variant="link"
                     aria-controls="input-manual-date"
                   >
-                    <template v-slot:button-content>
+                    <template #button-content>
                       <icon-calendar
                         :title="$t('global.calendar.openDatePicker')"
                         aria-hidden="true"
@@ -227,8 +227,12 @@ export default {
     BVToastMixin,
     LoadingBarMixin,
     LocalTimezoneLabelMixin,
-    VuelidateMixin
+    VuelidateMixin,
   ],
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
+  },
   data() {
     return {
       locale: this.$store.getters['global/languagePreference'],
@@ -236,10 +240,10 @@ export default {
         configurationSelected: '',
         manual: {
           date: '',
-          time: ''
+          time: '',
         },
-        ntp: { firstAddress: '', secondAddress: '', thirdAddress: '' }
-      }
+        ntp: { firstAddress: '', secondAddress: '', thirdAddress: '' },
+      },
     };
   },
   validations() {
@@ -247,28 +251,28 @@ export default {
       form: {
         manual: {
           date: {
-            required: requiredIf(function() {
+            required: requiredIf(function () {
               return this.form.configurationSelected === 'manual';
             }),
-            pattern: helpers.regex('pattern', isoDateRegex)
+            pattern: helpers.regex('pattern', isoDateRegex),
           },
           time: {
-            required: requiredIf(function() {
+            required: requiredIf(function () {
               return this.form.configurationSelected === 'manual';
             }),
-            pattern: helpers.regex('pattern', isoTimeRegex)
-          }
+            pattern: helpers.regex('pattern', isoTimeRegex),
+          },
         },
         ntp: {
           firstAddress: {
-            required: requiredIf(function() {
+            required: requiredIf(function () {
               return this.form.configurationSelected === 'ntp';
-            })
+            }),
           },
           secondAddress: {},
-          thirdAddress: {}
-        }
-      }
+          thirdAddress: {},
+        },
+      },
     };
   },
   computed: {
@@ -284,7 +288,7 @@ export default {
         return 'UTC';
       }
       return this.localOffset();
-    }
+    },
   },
   watch: {
     ntpServers() {
@@ -300,25 +304,21 @@ export default {
       this.form.manual.time = this.$options.filters
         .formatTime(this.$store.getters['global/bmcTime'])
         .slice(0, 5);
-    }
+    },
   },
   created() {
     this.startLoader();
     Promise.all([
       this.$store.dispatch('global/getBmcTime'),
-      this.$store.dispatch('dateTime/getNtpData')
+      this.$store.dispatch('dateTime/getNtpData'),
     ]).finally(() => this.endLoader());
   },
-  beforeRouteLeave(to, from, next) {
-    this.hideLoader();
-    next();
-  },
   methods: {
     emitChange() {
       if (this.$v.$invalid) return;
       this.$v.$reset(); //reset to re-validate on blur
       this.$emit('change', {
-        manualDate: this.manualDate ? new Date(this.manualDate) : null
+        manualDate: this.manualDate ? new Date(this.manualDate) : null,
       });
     },
     setNtpValues() {
@@ -367,13 +367,13 @@ export default {
         dateTimeForm.ntpServersArray = [
           ntpFirstAddress,
           ntpSecondAddress,
-          ntpThirdAddress
+          ntpThirdAddress,
         ];
       }
 
       this.$store
         .dispatch('dateTime/updateDateTimeSettings', dateTimeForm)
-        .then(success => {
+        .then((success) => {
           this.successToast(success);
           if (!isNTPEnabled) return;
           // Shift address up if second address is empty
@@ -407,7 +407,7 @@ export default {
         timeArray[1] // User input minute
       );
       return new Date(utcDate);
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/Configuration/Firmware/Firmware.vue b/src/views/Configuration/Firmware/Firmware.vue
index e1f97c4e..48c29ebc 100644
--- a/src/views/Configuration/Firmware/Firmware.vue
+++ b/src/views/Configuration/Firmware/Firmware.vue
@@ -8,7 +8,7 @@
           <b-card-group deck>
             <!-- Current FW -->
             <b-card header-bg-variant="success">
-              <template v-slot:header>
+              <template #header>
                 <dl class="mb-0">
                   <dt>{{ $t('pageFirmware.current') }}</dt>
                   <dd class="mb-0">{{ bmcFirmwareCurrentVersion }}</dd>
@@ -18,12 +18,12 @@
                 <dt>{{ $t('pageFirmware.state') }}:</dt>
                 <dd>{{ bmcFirmwareCurrentState }}</dd>
               </dl>
-              <template v-slot:footer></template>
+              <template #footer></template>
             </b-card>
 
             <!-- Backup FW -->
             <b-card footer-class="p-0">
-              <template v-slot:header>
+              <template #header>
                 <dl class="mb-0">
                   <dt>{{ $t('pageFirmware.backup') }}</dt>
                   <dd class="mb-0">{{ bmcFirmwareBackupVersion }}</dd>
@@ -33,7 +33,7 @@
                 <dt>{{ $t('pageFirmware.state') }}:</dt>
                 <dd>{{ bmcFirmwareBackupState }}</dd>
               </dl>
-              <template v-slot:footer>
+              <template #footer>
                 <b-btn
                   v-b-modal.modal-reboot-backup-bmc
                   :disabled="!bmcFirmwareBackupVersion"
@@ -53,7 +53,7 @@
           <b-card-group deck>
             <!-- Current FW -->
             <b-card header-bg-variant="success">
-              <template v-slot:header>
+              <template #header>
                 <dl class="mb-0">
                   <dt>{{ $t('pageFirmware.current') }}</dt>
                   <dd class="mb-0">{{ hostFirmwareCurrentVersion }}</dd>
@@ -68,7 +68,7 @@
 
             <!-- Backup FW -->
             <b-card>
-              <template v-slot:header>
+              <template #header>
                 <dl class="mb-0">
                   <dt>{{ $t('pageFirmware.backup') }}</dt>
                   <dd class="mb-0">{{ hostFirmwareBackupVersion }}</dd>
@@ -212,16 +212,21 @@ export default {
     ModalRebootBackupBmc,
     ModalUpload,
     PageSection,
-    PageTitle
+    PageTitle,
   },
   mixins: [BVToastMixin, LoadingBarMixin, VuelidateMixin],
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    this.clearRebootTimeout();
+    next();
+  },
   data() {
     return {
       isWorkstationSelected: true,
       file: null,
       tftpIpAddress: null,
       tftpFileName: null,
-      timeoutId: null
+      timeoutId: null,
     };
   },
   computed: {
@@ -233,16 +238,16 @@ export default {
       'hostFirmwareCurrentVersion',
       'hostFirmwareCurrentState',
       'hostFirmwareBackupVersion',
-      'hostFirmwareBackupState'
-    ])
+      'hostFirmwareBackupState',
+    ]),
   },
   watch: {
-    isWorkstationSelected: function() {
+    isWorkstationSelected: function () {
       this.$v.$reset();
       this.file = null;
       this.tftpIpAddress = null;
       this.tftpFileName = null;
-    }
+    },
   },
   created() {
     this.startLoader();
@@ -251,28 +256,23 @@ export default {
       .dispatch('firmware/getFirmwareInformation')
       .finally(() => this.endLoader());
   },
-  beforeRouteLeave(to, from, next) {
-    this.hideLoader();
-    this.clearRebootTimeout();
-    next();
-  },
   validations() {
     return {
       file: {
-        required: requiredIf(function() {
+        required: requiredIf(function () {
           return this.isWorkstationSelected;
-        })
+        }),
       },
       tftpIpAddress: {
-        required: requiredIf(function() {
+        required: requiredIf(function () {
           return !this.isWorkstationSelected;
-        })
+        }),
       },
       tftpFileName: {
-        required: requiredIf(function() {
+        required: requiredIf(function () {
           return !this.isWorkstationSelected;
-        })
-      }
+        }),
+      },
     };
   },
   methods: {
@@ -292,7 +292,7 @@ export default {
     dispatchWorkstationUpload() {
       this.$store
         .dispatch('firmware/uploadFirmware', this.file)
-        .then(success =>
+        .then((success) =>
           this.infoToast(
             success,
             this.$t('pageFirmware.toast.successUploadTitle')
@@ -306,11 +306,11 @@ export default {
     dispatchTftpUpload() {
       const data = {
         address: this.tftpIpAddress,
-        filename: this.tftpFileName
+        filename: this.tftpFileName,
       };
       this.$store
         .dispatch('firmware/uploadFirmwareTFTP', data)
-        .then(success =>
+        .then((success) =>
           this.infoToast(
             success,
             this.$t('pageFirmware.toast.successUploadTitle')
@@ -325,7 +325,7 @@ export default {
       this.setRebootTimeout();
       this.$store
         .dispatch('firmware/switchBmcFirmware')
-        .then(success =>
+        .then((success) =>
           this.infoToast(success, this.$t('global.status.success'))
         )
         .catch(({ message }) => {
@@ -355,8 +355,8 @@ export default {
       this.$v.$touch();
       if (this.$v.$invalid) return;
       this.$bvModal.show('modal-upload');
-    }
-  }
+    },
+  },
 };
 </script>
 
diff --git a/src/views/Configuration/Firmware/FirmwareModalRebootBackupBmc.vue b/src/views/Configuration/Firmware/FirmwareModalRebootBackupBmc.vue
index 06ab65d9..8f9a8f8c 100644
--- a/src/views/Configuration/Firmware/FirmwareModalRebootBackupBmc.vue
+++ b/src/views/Configuration/Firmware/FirmwareModalRebootBackupBmc.vue
@@ -22,12 +22,12 @@ export default {
   props: {
     current: {
       type: String,
-      required: true
+      required: true,
     },
     backup: {
       type: String,
-      required: true
-    }
-  }
+      required: true,
+    },
+  },
 };
 </script>
diff --git a/src/views/Configuration/NetworkSettings/NetworkSettings.vue b/src/views/Configuration/NetworkSettings/NetworkSettings.vue
index 4a181fd8..303077c5 100644
--- a/src/views/Configuration/NetworkSettings/NetworkSettings.vue
+++ b/src/views/Configuration/NetworkSettings/NetworkSettings.vue
@@ -109,14 +109,14 @@
                 :items="form.ipv4StaticTableItems"
                 class="mb-0"
               >
-                <template v-slot:cell(Address)="{ item, index }">
+                <template #cell(Address)="{ item, index }">
                   <b-form-input
                     v-model.trim="item.Address"
                     :data-test-id="`networkSettings-input-staticIpv4-${index}`"
                     :aria-label="
                       $t('pageNetworkSettings.ariaLabel.staticIpv4AddressRow') +
-                        ' ' +
-                        (index + 1)
+                      ' ' +
+                      (index + 1)
                     "
                     :readonly="dhcpEnabled"
                     :state="
@@ -149,14 +149,14 @@
                     </div>
                   </b-form-invalid-feedback>
                 </template>
-                <template v-slot:cell(SubnetMask)="{ item, index }">
+                <template #cell(SubnetMask)="{ item, index }">
                   <b-form-input
                     v-model.trim="item.SubnetMask"
                     :data-test-id="`networkSettings-input-subnetMask-${index}`"
                     :aria-label="
                       $t('pageNetworkSettings.ariaLabel.staticIpv4SubnetRow') +
-                        ' ' +
-                        (index + 1)
+                      ' ' +
+                      (index + 1)
                     "
                     :readonly="dhcpEnabled"
                     :state="
@@ -190,7 +190,7 @@
                     </div>
                   </b-form-invalid-feedback>
                 </template>
-                <template v-slot:cell(actions)="{ item, index }">
+                <template #cell(actions)="{ item, index }">
                   <table-row-action
                     v-for="(action, actionIndex) in item.actions"
                     :key="actionIndex"
@@ -200,7 +200,7 @@
                       onDeleteIpv4StaticTableRow($event, index)
                     "
                   >
-                    <template v-slot:icon>
+                    <template #icon>
                       <icon-trashcan v-if="action.value === 'delete'" />
                     </template>
                   </table-row-action>
@@ -223,14 +223,14 @@
                 :items="form.dnsStaticTableItems"
                 class="mb-0"
               >
-                <template v-slot:cell(address)="{ item, index }">
+                <template #cell(address)="{ item, index }">
                   <b-form-input
                     v-model.trim="item.address"
                     :data-test-id="`networkSettings-input-dnsAddress-${index}`"
                     :aria-label="
                       $t('pageNetworkSettings.ariaLabel.staticDnsRow') +
-                        ' ' +
-                        (index + 1)
+                      ' ' +
+                      (index + 1)
                     "
                     :readonly="dhcpEnabled"
                     :state="
@@ -263,7 +263,7 @@
                     </div>
                   </b-form-invalid-feedback>
                 </template>
-                <template v-slot:cell(actions)="{ item, index }">
+                <template #cell(actions)="{ item, index }">
                   <table-row-action
                     v-for="(action, actionIndex) in item.actions"
                     :key="actionIndex"
@@ -271,7 +271,7 @@
                     :title="action.title"
                     @click:tableAction="onDeleteDnsTableRow($event, index)"
                   >
-                    <template v-slot:icon>
+                    <template #icon>
                       <icon-trashcan v-if="action.value === 'delete'" />
                     </template>
                   </table-row-action>
@@ -327,9 +327,13 @@ export default {
     PageSection,
     TableRowAction,
     IconTrashcan,
-    IconAdd
+    IconAdd,
   },
   mixins: [BVToastMixin, VuelidateMixin, LoadingBarMixin],
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
+  },
   data() {
     return {
       dhcpEnabled: null,
@@ -337,20 +341,20 @@ export default {
       ipv4StaticTableFields: [
         {
           key: 'Address',
-          label: this.$t('pageNetworkSettings.table.ipAddress')
+          label: this.$t('pageNetworkSettings.table.ipAddress'),
         },
         {
           key: 'SubnetMask',
-          label: this.$t('pageNetworkSettings.table.subnet')
+          label: this.$t('pageNetworkSettings.table.subnet'),
         },
-        { key: 'actions', label: '', tdClass: 'text-right' }
+        { key: 'actions', label: '', tdClass: 'text-right' },
       ],
       dnsTableFields: [
         {
           key: 'address',
-          label: this.$t('pageNetworkSettings.table.ipAddress')
+          label: this.$t('pageNetworkSettings.table.ipAddress'),
         },
-        { key: 'actions', label: '', tdClass: 'text-right' }
+        { key: 'actions', label: '', tdClass: 'text-right' },
       ],
       selectedInterfaceIndex: 0,
       selectedInterface: {},
@@ -359,8 +363,8 @@ export default {
         hostname: '',
         macAddress: '',
         ipv4StaticTableItems: [],
-        dnsStaticTableItems: []
-      }
+        dnsStaticTableItems: [],
+      },
     };
   },
   validations() {
@@ -372,45 +376,45 @@ export default {
           $each: {
             Address: {
               required,
-              validateAddress
+              validateAddress,
             },
             SubnetMask: {
               required,
-              validateAddress
-            }
-          }
+              validateAddress,
+            },
+          },
         },
         macAddress: { required, validateMacAddress },
         dnsStaticTableItems: {
           $each: {
             address: {
               required,
-              validateAddress
-            }
-          }
-        }
-      }
+              validateAddress,
+            },
+          },
+        },
+      },
     };
   },
   computed: {
     ...mapState('networkSettings', [
       'ethernetData',
       'interfaceOptions',
-      'defaultGateway'
+      'defaultGateway',
     ]),
     interfaceSelectOptions() {
       return this.interfaceOptions.map((option, index) => {
         return {
           text: option,
-          value: index
+          value: index,
         };
       });
-    }
+    },
   },
   watch: {
-    ethernetData: function() {
+    ethernetData: function () {
       this.selectInterface();
-    }
+    },
   },
   created() {
     this.startLoader();
@@ -418,10 +422,6 @@ export default {
       .dispatch('networkSettings/getEthernetData')
       .finally(() => this.endLoader());
   },
-  beforeRouteLeave(to, from, next) {
-    this.hideLoader();
-    next();
-  },
   methods: {
     selectInterface() {
       this.selectedInterface = this.ethernetData[this.selectedInterfaceIndex];
@@ -437,16 +437,16 @@ export default {
     },
     getDnsStaticTableItems() {
       const dns = this.selectedInterface.StaticNameServers || [];
-      this.form.dnsStaticTableItems = dns.map(server => {
+      this.form.dnsStaticTableItems = dns.map((server) => {
         return {
           address: server,
           actions: [
             {
               value: 'delete',
               enabled: this.dhcpEnabled,
-              title: this.$t('pageNetworkSettings.table.deleteDns')
-            }
-          ]
+              title: this.$t('pageNetworkSettings.table.deleteDns'),
+            },
+          ],
         };
       });
     },
@@ -458,9 +458,9 @@ export default {
           {
             value: 'delete',
             enabled: this.dhcpEnabled,
-            title: this.$t('pageNetworkSettings.table.deleteDns')
-          }
-        ]
+            title: this.$t('pageNetworkSettings.table.deleteDns'),
+          },
+        ],
       });
     },
     deleteDnsTableRow(index) {
@@ -472,7 +472,7 @@ export default {
     },
     getIpv4StaticTableItems() {
       const addresses = this.selectedInterface.IPv4StaticAddresses || [];
-      this.form.ipv4StaticTableItems = addresses.map(ipv4 => {
+      this.form.ipv4StaticTableItems = addresses.map((ipv4) => {
         return {
           Address: ipv4.Address,
           SubnetMask: ipv4.SubnetMask,
@@ -480,9 +480,9 @@ export default {
             {
               value: 'delete',
               enabled: this.dhcpEnabled,
-              title: this.$t('pageNetworkSettings.table.deleteStaticIpv4')
-            }
-          ]
+              title: this.$t('pageNetworkSettings.table.deleteStaticIpv4'),
+            },
+          ],
         };
       });
     },
@@ -495,9 +495,9 @@ export default {
           {
             value: 'delete',
             enabled: this.dhcpEnabled,
-            title: this.$t('pageNetworkSettings.table.deleteStaticIpv4')
-          }
-        ]
+            title: this.$t('pageNetworkSettings.table.deleteStaticIpv4'),
+          },
+        ],
       });
     },
     deleteIpv4StaticTableRow(index) {
@@ -522,17 +522,17 @@ export default {
         hostname,
         macAddress,
         selectedInterfaceIndex,
-        isDhcpEnabled
+        isDhcpEnabled,
       };
       networkSettingsForm.staticIpv4 = this.form.ipv4StaticTableItems.map(
-        updateIpv4 => {
+        (updateIpv4) => {
           delete updateIpv4.actions;
           updateIpv4.Gateway = this.form.gateway;
           return updateIpv4;
         }
       );
       networkSettingsForm.staticNameServers = this.form.dnsStaticTableItems.map(
-        updateDns => {
+        (updateDns) => {
           return updateDns.address;
         }
       );
@@ -541,7 +541,7 @@ export default {
           'networkSettings/updateInterfaceSettings',
           networkSettingsForm
         )
-        .then(success => {
+        .then((success) => {
           this.successToast(success);
         })
         .catch(({ message }) => this.errorToast(message))
@@ -549,7 +549,7 @@ export default {
           this.$v.form.$reset();
           this.endLoader();
         });
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/Control/Kvm/Kvm.vue b/src/views/Control/Kvm/Kvm.vue
index 66b2e5f7..10322bde 100644
--- a/src/views/Control/Kvm/Kvm.vue
+++ b/src/views/Control/Kvm/Kvm.vue
@@ -13,7 +13,7 @@ import KvmConsole from './KvmConsole';
 
 export default {
   name: 'Kvm',
-  components: { PageTitle, KvmConsole }
+  components: { PageTitle, KvmConsole },
 };
 </script>
 
diff --git a/src/views/Control/Kvm/KvmConsole.vue b/src/views/Control/Kvm/KvmConsole.vue
index 8438b35c..43dc7271 100644
--- a/src/views/Control/Kvm/KvmConsole.vue
+++ b/src/views/Control/Kvm/KvmConsole.vue
@@ -60,8 +60,8 @@ export default {
   props: {
     isFullWindow: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
   },
   data() {
     return {
@@ -70,7 +70,7 @@ export default {
       terminalClass: this.isFullWindow ? 'full-window' : '',
       marginClass: this.isFullWindow ? 'margin-left-full-window' : '',
       status: Connecting,
-      convasRef: null
+      convasRef: null,
     };
   },
   computed: {
@@ -89,7 +89,7 @@ export default {
         return this.$t('pageKvm.disconnected');
       }
       return this.$t('pageKvm.connecting');
-    }
+    },
   },
   mounted() {
     this.openTerminal();
@@ -141,8 +141,8 @@ export default {
         '_blank',
         'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=700,height=550'
       );
-    }
-  }
+    },
+  },
 };
 </script>
 
diff --git a/src/views/Control/ManagePowerUsage/ManagePowerUsage.vue b/src/views/Control/ManagePowerUsage/ManagePowerUsage.vue
index 5a7eed08..5fcf938b 100644
--- a/src/views/Control/ManagePowerUsage/ManagePowerUsage.vue
+++ b/src/views/Control/ManagePowerUsage/ManagePowerUsage.vue
@@ -46,7 +46,7 @@
                 {{
                   $t('pageManagePowerUsage.powerCapLabelTextInfo', {
                     min: 1,
-                    max: 10000
+                    max: 10000,
                   })
                 }}
               </b-form-text>
@@ -97,9 +97,13 @@ export default {
   name: 'ManagePowerUsage',
   components: { PageTitle },
   mixins: [VuelidateMixin, BVToastMixin, LoadingBarMixin],
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
+  },
   computed: {
     ...mapGetters({
-      powerConsumptionValue: 'powerControl/powerConsumptionValue'
+      powerConsumptionValue: 'powerControl/powerConsumptionValue',
     }),
 
     /**
@@ -114,7 +118,7 @@ export default {
         let newValue = value ? '' : null;
         this.$v.$reset();
         this.$store.dispatch('powerControl/setPowerCapUpdatedValue', newValue);
-      }
+      },
     },
     powerCapValue: {
       get() {
@@ -123,8 +127,8 @@ export default {
       set(value) {
         this.$v.$touch();
         this.$store.dispatch('powerControl/setPowerCapUpdatedValue', value);
-      }
-    }
+      },
+    },
   },
   created() {
     this.startLoader();
@@ -132,17 +136,13 @@ export default {
       .dispatch('powerControl/getPowerControl')
       .finally(() => this.endLoader());
   },
-  beforeRouteLeave(to, from, next) {
-    this.hideLoader();
-    next();
-  },
   validations: {
     powerCapValue: {
       between: between(1, 10000),
-      required: requiredIf(function() {
+      required: requiredIf(function () {
         return this.isPowerCapFieldEnabled;
-      })
-    }
+      }),
+    },
   },
   methods: {
     submitForm() {
@@ -151,10 +151,10 @@ export default {
       this.startLoader();
       this.$store
         .dispatch('powerControl/setPowerControl', this.powerCapValue)
-        .then(message => this.successToast(message))
+        .then((message) => this.successToast(message))
         .catch(({ message }) => this.errorToast(message))
         .finally(() => this.endLoader());
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/Control/RebootBmc/RebootBmc.vue b/src/views/Control/RebootBmc/RebootBmc.vue
index 29932535..03880b38 100644
--- a/src/views/Control/RebootBmc/RebootBmc.vue
+++ b/src/views/Control/RebootBmc/RebootBmc.vue
@@ -43,10 +43,14 @@ export default {
   name: 'RebootBmc',
   components: { PageTitle, PageSection },
   mixins: [BVToastMixin, LoadingBarMixin],
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
+  },
   computed: {
     lastBmcRebootTime() {
       return this.$store.getters['controls/lastBmcRebootTime'];
-    }
+    },
   },
   created() {
     this.startLoader();
@@ -54,28 +58,24 @@ export default {
       .dispatch('controls/getLastBmcRebootTime')
       .finally(() => this.endLoader());
   },
-  beforeRouteLeave(to, from, next) {
-    this.hideLoader();
-    next();
-  },
   methods: {
     onClick() {
       this.$bvModal
         .msgBoxConfirm(this.$t('pageRebootBmc.modal.confirmMessage'), {
           title: this.$t('pageRebootBmc.modal.confirmTitle'),
-          okTitle: this.$t('global.action.confirm')
+          okTitle: this.$t('global.action.confirm'),
         })
-        .then(confirmed => {
+        .then((confirmed) => {
           if (confirmed) this.rebootBmc();
         });
     },
     rebootBmc() {
       this.$store
         .dispatch('controls/rebootBmc')
-        .then(message => this.successToast(message))
+        .then((message) => this.successToast(message))
         .catch(({ message }) => this.errorToast(message));
-    }
-  }
+    },
+  },
 };
 </script>
 
diff --git a/src/views/Control/SerialOverLan/SerialOverLan.vue b/src/views/Control/SerialOverLan/SerialOverLan.vue
index 037a4963..48a68345 100644
--- a/src/views/Control/SerialOverLan/SerialOverLan.vue
+++ b/src/views/Control/SerialOverLan/SerialOverLan.vue
@@ -18,7 +18,7 @@ export default {
   components: {
     PageSection,
     PageTitle,
-    SerialOverLanConsole
-  }
+    SerialOverLanConsole,
+  },
 };
 </script>
diff --git a/src/views/Control/SerialOverLan/SerialOverLanConsole.vue b/src/views/Control/SerialOverLan/SerialOverLanConsole.vue
index d5e9b214..b734bb13 100644
--- a/src/views/Control/SerialOverLan/SerialOverLanConsole.vue
+++ b/src/views/Control/SerialOverLan/SerialOverLanConsole.vue
@@ -42,13 +42,13 @@ export default {
   name: 'SerialOverLanConsole',
   components: {
     IconLaunch,
-    StatusIcon
+    StatusIcon,
   },
   props: {
     isFullWindow: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
   },
   computed: {
     hostStatus() {
@@ -61,7 +61,7 @@ export default {
       return this.hostStatus === 'on'
         ? this.$t('pageSerialOverLan.connected')
         : this.$t('pageSerialOverLan.disconnected');
-    }
+    },
   },
   created() {
     this.$store.dispatch('global/getHostStatus');
@@ -74,7 +74,7 @@ export default {
       const token = this.$store.getters['authentication/token'];
 
       const ws = new WebSocket(`wss://${window.location.host}/console0`, [
-        token
+        token,
       ]);
 
       // Refer https://github.com/xtermjs/xterm.js/ for xterm implementation and addons.
@@ -82,7 +82,7 @@ export default {
       const term = new Terminal({
         fontSize: 15,
         fontFamily:
-          'SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace'
+          'SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace',
       });
 
       const attachAddon = new AttachAddon(ws);
@@ -94,7 +94,7 @@ export default {
       const SOL_THEME = {
         background: '#19273c',
         cursor: 'rgba(83, 146, 255, .5)',
-        scrollbar: 'rgba(83, 146, 255, .5)'
+        scrollbar: 'rgba(83, 146, 255, .5)',
       };
       term.setOption('theme', SOL_THEME);
 
@@ -102,10 +102,10 @@ export default {
       fitAddon.fit();
 
       try {
-        ws.onopen = function() {
+        ws.onopen = function () {
           console.log('websocket console0/ opened');
         };
-        ws.onclose = function(event) {
+        ws.onclose = function (event) {
           console.log(
             'websocket console0/ closed. code: ' +
               event.code +
@@ -123,8 +123,8 @@ export default {
         '_blank',
         'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=600,height=550'
       );
-    }
-  }
+    },
+  },
 };
 </script>
 
diff --git a/src/views/Control/ServerLed/ServerLed.vue b/src/views/Control/ServerLed/ServerLed.vue
index b2eab0e6..73ec704f 100644
--- a/src/views/Control/ServerLed/ServerLed.vue
+++ b/src/views/Control/ServerLed/ServerLed.vue
@@ -38,6 +38,10 @@ export default {
   name: 'ServerLed',
   components: { PageTitle, PageSection },
   mixins: [LoadingBarMixin, BVToastMixin],
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
+  },
   computed: {
     indicatorLed: {
       get() {
@@ -45,8 +49,8 @@ export default {
       },
       set(newValue) {
         return newValue;
-      }
-    }
+      },
+    },
   },
   created() {
     this.startLoader();
@@ -54,15 +58,11 @@ export default {
       .dispatch('serverLed/getIndicatorValue')
       .finally(() => this.endLoader());
   },
-  beforeRouteLeave(to, from, next) {
-    this.hideLoader();
-    next();
-  },
   methods: {
     changeLedValue(indicatorLed) {
       this.$store
         .dispatch('serverLed/saveIndicatorLedValue', indicatorLed)
-        .then(message => this.successToast(message))
+        .then((message) => this.successToast(message))
         .catch(({ message }) => {
           this.errorToast(message);
           if (indicatorLed === 'Off') {
@@ -71,7 +71,7 @@ export default {
             this.indicatorLed === 'Off';
           }
         });
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/Control/ServerPowerOperations/BootSettings.vue b/src/views/Control/ServerPowerOperations/BootSettings.vue
index 3435f1c6..a94da0c3 100644
--- a/src/views/Control/ServerPowerOperations/BootSettings.vue
+++ b/src/views/Control/ServerPowerOperations/BootSettings.vue
@@ -62,8 +62,8 @@ export default {
       form: {
         bootOption: this.$store.getters['hostBootSettings/bootSource'],
         oneTimeBoot: this.$store.getters['hostBootSettings/overrideEnabled'],
-        tpmPolicyOn: this.$store.getters['hostBootSettings/tpmEnabled']
-      }
+        tpmPolicyOn: this.$store.getters['hostBootSettings/tpmEnabled'],
+      },
     };
   },
   computed: {
@@ -71,19 +71,19 @@ export default {
       'bootSourceOptions',
       'bootSource',
       'overrideEnabled',
-      'tpmEnabled'
-    ])
+      'tpmEnabled',
+    ]),
   },
   watch: {
-    bootSource: function(value) {
+    bootSource: function (value) {
       this.form.bootOption = value;
     },
-    overrideEnabled: function(value) {
+    overrideEnabled: function (value) {
       this.form.oneTimeBoot = value;
     },
-    tpmEnabled: function(value) {
+    tpmEnabled: function (value) {
       this.form.tpmPolicyOn = value;
-    }
+    },
   },
   validations: {
     // Empty validations to leverage vuelidate form states
@@ -91,13 +91,13 @@ export default {
     form: {
       bootOption: {},
       oneTimeBoot: {},
-      tpmPolicyOn: {}
-    }
+      tpmPolicyOn: {},
+    },
   },
   created() {
     Promise.all([
       this.$store.dispatch('hostBootSettings/getBootSettings'),
-      this.$store.dispatch('hostBootSettings/getTpmPolicy')
+      this.$store.dispatch('hostBootSettings/getTpmPolicy'),
     ]).finally(() =>
       this.$root.$emit('serverPowerOperations::bootSettings::complete')
     );
@@ -124,7 +124,7 @@ export default {
 
       this.$store
         .dispatch('hostBootSettings/saveSettings', settings)
-        .then(message => this.successToast(message))
+        .then((message) => this.successToast(message))
         .catch(({ message }) => this.errorToast(message))
         .finally(() => {
           this.$v.form.$reset();
@@ -135,7 +135,7 @@ export default {
       this.$v.form.bootOption.$touch();
       // Disable one time boot if selected boot option is 'None'
       if (selectedOption === 'None') this.form.oneTimeBoot = false;
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/Control/ServerPowerOperations/ServerPowerOperations.vue b/src/views/Control/ServerPowerOperations/ServerPowerOperations.vue
index 32b2ea86..9bc259f8 100644
--- a/src/views/Control/ServerPowerOperations/ServerPowerOperations.vue
+++ b/src/views/Control/ServerPowerOperations/ServerPowerOperations.vue
@@ -148,12 +148,16 @@ export default {
   name: 'ServerPowerOperations',
   components: { PageTitle, PageSection, BootSettings, Alert },
   mixins: [BVToastMixin, LoadingBarMixin],
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
+  },
   data() {
     return {
       form: {
         rebootOption: 'orderly',
-        shutdownOption: 'orderly'
-      }
+        shutdownOption: 'orderly',
+      },
     };
   },
   computed: {
@@ -168,24 +172,20 @@ export default {
     },
     oneTimeBootEnabled() {
       return this.$store.getters['hostBootSettings/overrideEnabled'];
-    }
+    },
   },
   created() {
     this.startLoader();
-    const bootSettingsPromise = new Promise(resolve => {
+    const bootSettingsPromise = new Promise((resolve) => {
       this.$root.$on('serverPowerOperations::bootSettings::complete', () =>
         resolve()
       );
     });
     Promise.all([
       this.$store.dispatch('controls/getLastPowerOperationTime'),
-      bootSettingsPromise
+      bootSettingsPromise,
     ]).finally(() => this.endLoader());
   },
-  beforeRouteLeave(to, from, next) {
-    this.hideLoader();
-    next();
-  },
   methods: {
     powerOn() {
       this.$store.dispatch('controls/hostPowerOn');
@@ -196,19 +196,19 @@ export default {
       );
       const modalOptions = {
         title: this.$t('pageServerPowerOperations.modal.confirmRebootTitle'),
-        okTitle: this.$t('global.action.confirm')
+        okTitle: this.$t('global.action.confirm'),
       };
 
       if (this.form.rebootOption === 'orderly') {
         this.$bvModal
           .msgBoxConfirm(modalMessage, modalOptions)
-          .then(confirmed => {
+          .then((confirmed) => {
             if (confirmed) this.$store.dispatch('controls/hostSoftReboot');
           });
       } else if (this.form.rebootOption === 'immediate') {
         this.$bvModal
           .msgBoxConfirm(modalMessage, modalOptions)
-          .then(confirmed => {
+          .then((confirmed) => {
             if (confirmed) this.$store.dispatch('controls/hostHardReboot');
           });
       }
@@ -219,24 +219,24 @@ export default {
       );
       const modalOptions = {
         title: this.$t('pageServerPowerOperations.modal.confirmShutdownTitle'),
-        okTitle: this.$t('global.action.confirm')
+        okTitle: this.$t('global.action.confirm'),
       };
 
       if (this.form.shutdownOption === 'orderly') {
         this.$bvModal
           .msgBoxConfirm(modalMessage, modalOptions)
-          .then(confirmed => {
+          .then((confirmed) => {
             if (confirmed) this.$store.dispatch('controls/hostSoftPowerOff');
           });
       }
       if (this.form.shutdownOption === 'immediate') {
         this.$bvModal
           .msgBoxConfirm(modalMessage, modalOptions)
-          .then(confirmed => {
+          .then((confirmed) => {
             if (confirmed) this.$store.dispatch('controls/hostHardPowerOff');
           });
       }
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/Control/VirtualMedia/ModalConfigureConnection.vue b/src/views/Control/VirtualMedia/ModalConfigureConnection.vue
index 2c75ae2a..21907734 100644
--- a/src/views/Control/VirtualMedia/ModalConfigureConnection.vue
+++ b/src/views/Control/VirtualMedia/ModalConfigureConnection.vue
@@ -6,7 +6,7 @@
     @hidden="resetForm"
     @show="initModal"
   >
-    <template v-slot:modal-title>
+    <template #modal-title>
       {{ $t('pageVirtualMedia.modal.title') }}
     </template>
     <b-form>
@@ -60,7 +60,7 @@
         </b-form-checkbox>
       </b-form-group>
     </b-form>
-    <template v-slot:modal-ok>
+    <template #modal-ok>
       {{ $t('global.action.save') }}
     </template>
   </b-modal>
@@ -76,11 +76,11 @@ export default {
     connection: {
       type: Object,
       default: null,
-      validator: prop => {
+      validator: (prop) => {
         console.log(prop);
         return true;
-      }
-    }
+      },
+    },
   },
   data() {
     return {
@@ -88,23 +88,23 @@ export default {
         serverUri: null,
         username: null,
         password: null,
-        isRW: false
-      }
+        isRW: false,
+      },
     };
   },
   watch: {
-    connection: function(value) {
+    connection: function (value) {
       if (value === null) return;
       Object.assign(this.form, value);
-    }
+    },
   },
   validations() {
     return {
       form: {
         serverUri: {
-          required
-        }
-      }
+          required,
+        },
+      },
     };
   },
   methods: {
@@ -136,7 +136,7 @@ export default {
     onOk(bvModalEvt) {
       bvModalEvt.preventDefault();
       this.handleSubmit();
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/Control/VirtualMedia/VirtualMedia.vue b/src/views/Control/VirtualMedia/VirtualMedia.vue
index 5460eb46..a15f2cd9 100644
--- a/src/views/Control/VirtualMedia/VirtualMedia.vue
+++ b/src/views/Control/VirtualMedia/VirtualMedia.vue
@@ -111,7 +111,9 @@ export default {
     return {
       modalConfigureConnection: null,
       loadImageFromExternalServer:
-        process.env.VUE_APP_VIRTUAL_MEDIA_LIST_ENABLED === 'true' ? true : false
+        process.env.VUE_APP_VIRTUAL_MEDIA_LIST_ENABLED === 'true'
+          ? true
+          : false,
     };
   },
   computed: {
@@ -120,7 +122,7 @@ export default {
     },
     legacyDevices() {
       return this.$store.getters['virtualMedia/legacyDevices'];
-    }
+    },
   },
   created() {
     if (this.proxyDevices.length > 0 || this.legacyDevices.length > 0) return;
@@ -142,7 +144,7 @@ export default {
         this.successToast(this.$t('pageVirtualMedia.toast.serverRunning'));
       device.nbd.errorReadingFile = () =>
         this.errorToast(this.$t('pageVirtualMedia.toast.errorReadingFile'));
-      device.nbd.socketClosed = code => {
+      device.nbd.socketClosed = (code) => {
         if (code === 1000)
           this.successToast(
             this.$t('pageVirtualMedia.toast.serverClosedSuccessfully')
@@ -171,7 +173,7 @@ export default {
       this.$store
         .dispatch('virtualMedia/mountImage', {
           id: connectionData.id,
-          data: data
+          data: data,
         })
         .then(() => {
           this.successToast(
@@ -208,7 +210,7 @@ export default {
     configureConnection(connectionData) {
       this.modalConfigureConnection = connectionData;
       this.$bvModal.show('configure-connection');
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/Health/EventLogs/EventLogs.vue b/src/views/Health/EventLogs/EventLogs.vue
index c345d8fb..90f589a3 100644
--- a/src/views/Health/EventLogs/EventLogs.vue
+++ b/src/views/Health/EventLogs/EventLogs.vue
@@ -33,7 +33,7 @@
           @clearSelected="clearSelectedRows($refs.table)"
           @batchAction="onBatchAction"
         >
-          <template v-slot:export>
+          <template #export>
             <table-toolbar-export
               :data="batchExportData"
               :file-name="exportFileNameByDate()"
@@ -64,7 +64,7 @@
           @row-selected="onRowSelected($event, filteredLogs.length)"
         >
           <!-- Checkbox column -->
-          <template v-slot:head(checkbox)>
+          <template #head(checkbox)>
             <b-form-checkbox
               v-model="tableHeaderCheckboxModel"
               data-test-id="eventLogs-checkbox-selectAll"
@@ -72,7 +72,7 @@
               @change="onChangeHeaderCheckbox($refs.table)"
             />
           </template>
-          <template v-slot:cell(checkbox)="row">
+          <template #cell(checkbox)="row">
             <b-form-checkbox
               v-model="row.rowSelected"
               :data-test-id="`eventLogs-checkbox-selectRow-${row.index}`"
@@ -81,19 +81,19 @@
           </template>
 
           <!-- Severity column -->
-          <template v-slot:cell(severity)="{ value }">
+          <template #cell(severity)="{ value }">
             <status-icon v-if="value" :status="statusIcon(value)" />
             {{ value }}
           </template>
 
           <!-- Date column -->
-          <template v-slot:cell(date)="{ value }">
+          <template #cell(date)="{ value }">
             <p class="mb-0">{{ value | formatDate }}</p>
             <p class="mb-0">{{ value | formatTime }}</p>
           </template>
 
           <!-- Actions column -->
-          <template v-slot:cell(actions)="row">
+          <template #cell(actions)="row">
             <table-row-action
               v-for="(action, index) in row.item.actions"
               :key="index"
@@ -104,7 +104,7 @@
               :data-test-id="`eventLogs-button-deleteRow-${row.index}`"
               @click:tableAction="onTableRowAction($event, row.item)"
             >
-              <template v-slot:icon>
+              <template #icon>
                 <icon-export v-if="action.value === 'export'" />
                 <icon-trashcan v-if="action.value === 'delete'" />
               </template>
@@ -179,7 +179,7 @@ export default {
     TableRowAction,
     TableToolbar,
     TableToolbarExport,
-    TableDateFilter
+    TableDateFilter,
   },
   mixins: [
     BVPaginationMixin,
@@ -189,64 +189,70 @@ export default {
     TableFilterMixin,
     TableDataFormatterMixin,
     TableSortMixin,
-    SearchFilterMixin
+    SearchFilterMixin,
   ],
+  beforeRouteLeave(to, from, next) {
+    // Hide loader if the user navigates to another page
+    // before request is fulfilled.
+    this.hideLoader();
+    next();
+  },
   data() {
     return {
       fields: [
         {
           key: 'checkbox',
-          sortable: false
+          sortable: false,
         },
         {
           key: 'id',
           label: this.$t('pageEventLogs.table.id'),
-          sortable: true
+          sortable: true,
         },
         {
           key: 'severity',
           label: this.$t('pageEventLogs.table.severity'),
           sortable: true,
-          tdClass: 'text-nowrap'
+          tdClass: 'text-nowrap',
         },
         {
           key: 'type',
           label: this.$t('pageEventLogs.table.type'),
-          sortable: true
+          sortable: true,
         },
         {
           key: 'date',
           label: this.$t('pageEventLogs.table.date'),
-          sortable: true
+          sortable: true,
         },
         {
           key: 'description',
-          label: this.$t('pageEventLogs.table.description')
+          label: this.$t('pageEventLogs.table.description'),
         },
         {
           key: 'actions',
           sortable: false,
           label: '',
-          tdClass: 'text-right text-nowrap'
-        }
+          tdClass: 'text-right text-nowrap',
+        },
       ],
       tableFilters: [
         {
           key: 'severity',
           label: this.$t('pageEventLogs.table.severity'),
-          values: ['OK', 'Warning', 'Critical']
-        }
+          values: ['OK', 'Warning', 'Critical'],
+        },
       ],
       activeFilters: [],
       batchActions: [
         {
           value: 'delete',
-          label: this.$t('global.action.delete')
-        }
+          label: this.$t('global.action.delete'),
+        },
       ],
       filterStartDate: null,
       filterEndDate: null,
-      searchTotalFilteredRows: 0
+      searchTotalFilteredRows: 0,
     };
   },
   computed: {
@@ -256,24 +262,24 @@ export default {
         : this.filteredLogs.length;
     },
     allLogs() {
-      return this.$store.getters['eventLog/allEvents'].map(event => {
+      return this.$store.getters['eventLog/allEvents'].map((event) => {
         return {
           ...event,
           actions: [
             {
               value: 'export',
-              title: this.$t('global.action.export')
+              title: this.$t('global.action.export'),
             },
             {
               value: 'delete',
-              title: this.$t('global.action.delete')
-            }
-          ]
+              title: this.$t('global.action.delete'),
+            },
+          ],
         };
       });
     },
     batchExportData() {
-      return this.selectedRows.map(row => omit(row, 'actions'));
+      return this.selectedRows.map((row) => omit(row, 'actions'));
     },
     filteredLogsByDate() {
       return this.getFilteredTableDataByDate(
@@ -287,7 +293,7 @@ export default {
         this.filteredLogsByDate,
         this.activeFilters
       );
-    }
+    },
   },
   created() {
     this.startLoader();
@@ -295,23 +301,19 @@ export default {
       .dispatch('eventLog/getEventLogData')
       .finally(() => this.endLoader());
   },
-  beforeRouteLeave(to, from, next) {
-    // Hide loader if the user navigates to another page
-    // before request is fulfilled.
-    this.hideLoader();
-    next();
-  },
   methods: {
     deleteLogs(uris) {
-      this.$store.dispatch('eventLog/deleteEventLogs', uris).then(messages => {
-        messages.forEach(({ type, message }) => {
-          if (type === 'success') {
-            this.successToast(message);
-          } else if (type === 'error') {
-            this.errorToast(message);
-          }
+      this.$store
+        .dispatch('eventLog/deleteEventLogs', uris)
+        .then((messages) => {
+          messages.forEach(({ type, message }) => {
+            if (type === 'success') {
+              this.successToast(message);
+            } else if (type === 'error') {
+              this.errorToast(message);
+            }
+          });
         });
-      });
     },
     onFilterChange({ activeFilters }) {
       this.activeFilters = activeFilters;
@@ -326,16 +328,16 @@ export default {
         this.$bvModal
           .msgBoxConfirm(this.$tc('pageEventLogs.modal.deleteMessage'), {
             title: this.$tc('pageEventLogs.modal.deleteTitle'),
-            okTitle: this.$t('global.action.delete')
+            okTitle: this.$t('global.action.delete'),
           })
-          .then(deleteConfirmed => {
+          .then((deleteConfirmed) => {
             if (deleteConfirmed) this.deleteLogs([uri]);
           });
       }
     },
     onBatchAction(action) {
       if (action === 'delete') {
-        const uris = this.selectedRows.map(row => row.uri);
+        const uris = this.selectedRows.map((row) => row.uri);
         this.$bvModal
           .msgBoxConfirm(
             this.$tc(
@@ -347,10 +349,10 @@ export default {
                 'pageEventLogs.modal.deleteTitle',
                 this.selectedRows.length
               ),
-              okTitle: this.$t('global.action.delete')
+              okTitle: this.$t('global.action.delete'),
             }
           )
-          .then(deleteConfirmed => {
+          .then((deleteConfirmed) => {
             if (deleteConfirmed) this.deleteLogs(uris);
           });
       }
@@ -368,13 +370,9 @@ export default {
       date =
         date.toISOString().slice(0, 10) +
         '_' +
-        date
-          .toString()
-          .split(':')
-          .join('-')
-          .split(' ')[4];
+        date.toString().split(':').join('-').split(' ')[4];
       return this.$t('pageEventLogs.exportFilePrefix') + date;
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/Health/HardwareStatus/HardwareStatus.vue b/src/views/Health/HardwareStatus/HardwareStatus.vue
index fb203381..24f02953 100644
--- a/src/views/Health/HardwareStatus/HardwareStatus.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatus.vue
@@ -45,32 +45,38 @@ export default {
     TableFans,
     TableBmcManager,
     TableChassis,
-    TableProcessors
+    TableProcessors,
   },
   mixins: [LoadingBarMixin],
+  beforeRouteLeave(to, from, next) {
+    // Hide loader if user navigates away from page
+    // before requests complete
+    this.hideLoader();
+    next();
+  },
   created() {
     this.startLoader();
-    const systemTablePromise = new Promise(resolve => {
+    const systemTablePromise = new Promise((resolve) => {
       this.$root.$on('hardwareStatus::system::complete', () => resolve());
     });
-    const bmcManagerTablePromise = new Promise(resolve => {
+    const bmcManagerTablePromise = new Promise((resolve) => {
       this.$root.$on('hardwareStatus::bmcManager::complete', () => resolve());
     });
-    const chassisTablePromise = new Promise(resolve => {
+    const chassisTablePromise = new Promise((resolve) => {
       this.$root.$on('hardwareStatus::chassis::complete', () => resolve());
     });
-    const dimmSlotTablePromise = new Promise(resolve => {
+    const dimmSlotTablePromise = new Promise((resolve) => {
       this.$root.$on('hardwareStatus::dimmSlot::complete', () => resolve());
     });
-    const fansTablePromise = new Promise(resolve => {
+    const fansTablePromise = new Promise((resolve) => {
       this.$root.$on('hardwareStatus::fans::complete', () => resolve());
     });
-    const powerSuppliesTablePromise = new Promise(resolve => {
+    const powerSuppliesTablePromise = new Promise((resolve) => {
       this.$root.$on('hardwareStatus::powerSupplies::complete', () =>
         resolve()
       );
     });
-    const processorsTablePromise = new Promise(resolve => {
+    const processorsTablePromise = new Promise((resolve) => {
       this.$root.$on('hardwareStatus::processors::complete', () => resolve());
     });
     // Combine all child component Promises to indicate
@@ -82,14 +88,8 @@ export default {
       dimmSlotTablePromise,
       fansTablePromise,
       powerSuppliesTablePromise,
-      processorsTablePromise
+      processorsTablePromise,
     ]).finally(() => this.endLoader());
   },
-  beforeRouteLeave(to, from, next) {
-    // Hide loader if user navigates away from page
-    // before requests complete
-    this.hideLoader();
-    next();
-  }
 };
 </script>
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue b/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue
index e7ddf537..783cd649 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue
@@ -9,7 +9,7 @@
       :empty-text="$t('global.table.emptyMessage')"
     >
       <!-- Expand chevron icon -->
-      <template v-slot:cell(expandRow)="row">
+      <template #cell(expandRow)="row">
         <b-button
           variant="link"
           data-test-id="hardwareStatus-button-expandBmc"
@@ -21,12 +21,12 @@
       </template>
 
       <!-- Health -->
-      <template v-slot:cell(health)="{ value }">
+      <template #cell(health)="{ value }">
         <status-icon :status="statusIcon(value)" />
         {{ value }}
       </template>
 
-      <template v-slot:row-details="{ item }">
+      <template #row-details="{ item }">
         <b-container fluid>
           <b-row>
             <b-col sm="6">
@@ -153,30 +153,30 @@ export default {
         {
           key: 'expandRow',
           label: '',
-          tdClass: 'table-row-expand'
+          tdClass: 'table-row-expand',
         },
         {
           key: 'id',
           label: this.$t('pageHardwareStatus.table.id'),
-          formatter: this.tableFormatter
+          formatter: this.tableFormatter,
         },
         {
           key: 'health',
           label: this.$t('pageHardwareStatus.table.health'),
           formatter: this.tableFormatter,
-          tdClass: 'text-nowrap'
+          tdClass: 'text-nowrap',
         },
         {
           key: 'partNumber',
           label: this.$t('pageHardwareStatus.table.partNumber'),
-          formatter: this.tableFormatter
+          formatter: this.tableFormatter,
         },
         {
           key: 'serialNumber',
           label: this.$t('pageHardwareStatus.table.serialNumber'),
-          formatter: this.tableFormatter
-        }
-      ]
+          formatter: this.tableFormatter,
+        },
+      ],
     };
   },
   computed: {
@@ -189,13 +189,13 @@ export default {
       } else {
         return [];
       }
-    }
+    },
   },
   created() {
     this.$store.dispatch('bmc/getBmcInfo').finally(() => {
       // Emit initial data fetch complete to parent component
       this.$root.$emit('hardwareStatus::bmcManager::complete');
     });
-  }
+  },
 };
 </script>
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue b/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
index 0b56a9fe..fbdadcdd 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
@@ -9,7 +9,7 @@
       :empty-text="$t('global.table.emptyMessage')"
     >
       <!-- Expand chevron icon -->
-      <template v-slot:cell(expandRow)="row">
+      <template #cell(expandRow)="row">
         <b-button
           variant="link"
           data-test-id="hardwareStatus-button-expandChassis"
@@ -21,12 +21,12 @@
       </template>
 
       <!-- Health -->
-      <template v-slot:cell(health)="{ value }">
+      <template #cell(health)="{ value }">
         <status-icon :status="statusIcon(value)" />
         {{ value }}
       </template>
 
-      <template v-slot:row-details="{ item }">
+      <template #row-details="{ item }">
         <b-container fluid>
           <b-row>
             <b-col sm="6" xl="4">
@@ -82,42 +82,42 @@ export default {
         {
           key: 'expandRow',
           label: '',
-          tdClass: 'table-row-expand'
+          tdClass: 'table-row-expand',
         },
         {
           key: 'id',
           label: this.$t('pageHardwareStatus.table.id'),
-          formatter: this.tableFormatter
+          formatter: this.tableFormatter,
         },
         {
           key: 'health',
           label: this.$t('pageHardwareStatus.table.health'),
           formatter: this.tableFormatter,
-          tdClass: 'text-nowrap'
+          tdClass: 'text-nowrap',
         },
         {
           key: 'partNumber',
           label: this.$t('pageHardwareStatus.table.partNumber'),
-          formatter: this.tableFormatter
+          formatter: this.tableFormatter,
         },
         {
           key: 'serialNumber',
           label: this.$t('pageHardwareStatus.table.serialNumber'),
-          formatter: this.tableFormatter
-        }
-      ]
+          formatter: this.tableFormatter,
+        },
+      ],
     };
   },
   computed: {
     chassis() {
       return this.$store.getters['chassis/chassis'];
-    }
+    },
   },
   created() {
     this.$store.dispatch('chassis/getChassisInfo').finally(() => {
       // Emit initial data fetch complete to parent component
       this.$root.$emit('hardwareStatus::chassis::complete');
     });
-  }
+  },
 };
 </script>
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
index babb8d07..2c901637 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
@@ -31,7 +31,7 @@
       @filtered="onFiltered"
     >
       <!-- Expand chevron icon -->
-      <template v-slot:cell(expandRow)="row">
+      <template #cell(expandRow)="row">
         <b-button
           variant="link"
           data-test-id="hardwareStatus-button-expandDimms"
@@ -43,12 +43,12 @@
       </template>
 
       <!-- Health -->
-      <template v-slot:cell(health)="{ value }">
+      <template #cell(health)="{ value }">
         <status-icon :status="statusIcon(value)" />
         {{ value }}
       </template>
 
-      <template v-slot:row-details="{ item }">
+      <template #row-details="{ item }">
         <b-container fluid>
           <b-row>
             <b-col sm="6" xl="4">
@@ -84,7 +84,7 @@ export default {
     TableRowExpandMixin,
     TableDataFormatterMixin,
     TableSortMixin,
-    SearchFilterMixin
+    SearchFilterMixin,
   ],
   data() {
     return {
@@ -93,35 +93,35 @@ export default {
           key: 'expandRow',
           label: '',
           tdClass: 'table-row-expand',
-          sortable: false
+          sortable: false,
         },
         {
           key: 'id',
           label: this.$t('pageHardwareStatus.table.id'),
           formatter: this.tableFormatter,
-          sortable: true
+          sortable: true,
         },
         {
           key: 'health',
           label: this.$t('pageHardwareStatus.table.health'),
           formatter: this.tableFormatter,
           sortable: true,
-          tdClass: 'text-nowrap'
+          tdClass: 'text-nowrap',
         },
         {
           key: 'partNumber',
           label: this.$t('pageHardwareStatus.table.partNumber'),
           formatter: this.tableFormatter,
-          sortable: true
+          sortable: true,
         },
         {
           key: 'serialNumber',
           label: this.$t('pageHardwareStatus.table.serialNumber'),
           formatter: this.tableFormatter,
-          sortable: true
-        }
+          sortable: true,
+        },
       ],
-      searchTotalFilteredRows: 0
+      searchTotalFilteredRows: 0,
     };
   },
   computed: {
@@ -132,7 +132,7 @@ export default {
     },
     dimms() {
       return this.$store.getters['memory/dimms'];
-    }
+    },
   },
   created() {
     this.$store.dispatch('memory/getDimms').finally(() => {
@@ -148,7 +148,7 @@ export default {
     },
     onFiltered(filteredItems) {
       this.searchTotalFilteredRows = filteredItems.length;
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
index 9ee9291c..6ade34bf 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
@@ -31,7 +31,7 @@
       @filtered="onFiltered"
     >
       <!-- Expand chevron icon -->
-      <template v-slot:cell(expandRow)="row">
+      <template #cell(expandRow)="row">
         <b-button
           variant="link"
           data-test-id="hardwareStatus-button-expandFans"
@@ -43,12 +43,12 @@
       </template>
 
       <!-- Health -->
-      <template v-slot:cell(health)="{ value }">
+      <template #cell(health)="{ value }">
         <status-icon :status="statusIcon(value)" />
         {{ value }}
       </template>
 
-      <template v-slot:row-details="{ item }">
+      <template #row-details="{ item }">
         <b-container fluid>
           <b-row>
             <b-col sm="6" xl="4">
@@ -83,7 +83,7 @@ export default {
     TableRowExpandMixin,
     TableDataFormatterMixin,
     TableSortMixin,
-    SearchFilterMixin
+    SearchFilterMixin,
   ],
   data() {
     return {
@@ -92,35 +92,35 @@ export default {
           key: 'expandRow',
           label: '',
           tdClass: 'table-row-expand',
-          sortable: false
+          sortable: false,
         },
         {
           key: 'id',
           label: this.$t('pageHardwareStatus.table.id'),
           formatter: this.tableFormatter,
-          sortable: true
+          sortable: true,
         },
         {
           key: 'health',
           label: this.$t('pageHardwareStatus.table.health'),
           formatter: this.tableFormatter,
           sortable: true,
-          tdClass: 'text-nowrap'
+          tdClass: 'text-nowrap',
         },
         {
           key: 'partNumber',
           label: this.$t('pageHardwareStatus.table.partNumber'),
           formatter: this.tableFormatter,
-          sortable: true
+          sortable: true,
         },
         {
           key: 'serialNumber',
           label: this.$t('pageHardwareStatus.table.serialNumber'),
           formatter: this.tableFormatter,
-          sortable: true
-        }
+          sortable: true,
+        },
       ],
-      searchTotalFilteredRows: 0
+      searchTotalFilteredRows: 0,
     };
   },
   computed: {
@@ -131,7 +131,7 @@ export default {
     },
     fans() {
       return this.$store.getters['fan/fans'];
-    }
+    },
   },
   created() {
     this.$store.dispatch('fan/getFanInfo').finally(() => {
@@ -147,7 +147,7 @@ export default {
     },
     onFiltered(filteredItems) {
       this.searchTotalFilteredRows = filteredItems.length;
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
index bd5cedb5..91c26a7d 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
@@ -31,7 +31,7 @@
       @filtered="onFiltered"
     >
       <!-- Expand chevron icon -->
-      <template v-slot:cell(expandRow)="row">
+      <template #cell(expandRow)="row">
         <b-button
           variant="link"
           data-test-id="hardwareStatus-button-expandPowerSupplies"
@@ -43,12 +43,12 @@
       </template>
 
       <!-- Health -->
-      <template v-slot:cell(health)="{ value }">
+      <template #cell(health)="{ value }">
         <status-icon :status="statusIcon(value)" />
         {{ value }}
       </template>
 
-      <template v-slot:row-details="{ item }">
+      <template #row-details="{ item }">
         <b-container fluid>
           <b-row>
             <b-col sm="6" xl="4">
@@ -106,7 +106,7 @@ export default {
     TableRowExpandMixin,
     TableDataFormatterMixin,
     TableSortMixin,
-    SearchFilterMixin
+    SearchFilterMixin,
   ],
   data() {
     return {
@@ -115,35 +115,35 @@ export default {
           key: 'expandRow',
           label: '',
           tdClass: 'table-row-expand',
-          sortable: false
+          sortable: false,
         },
         {
           key: 'id',
           label: this.$t('pageHardwareStatus.table.id'),
           formatter: this.tableFormatter,
-          sortable: true
+          sortable: true,
         },
         {
           key: 'health',
           label: this.$t('pageHardwareStatus.table.health'),
           formatter: this.tableFormatter,
           sortable: true,
-          tdClass: 'text-nowrap'
+          tdClass: 'text-nowrap',
         },
         {
           key: 'partNumber',
           label: this.$t('pageHardwareStatus.table.partNumber'),
           formatter: this.tableFormatter,
-          sortable: true
+          sortable: true,
         },
         {
           key: 'serialNumber',
           label: this.$t('pageHardwareStatus.table.serialNumber'),
           formatter: this.tableFormatter,
-          sortable: true
-        }
+          sortable: true,
+        },
       ],
-      searchTotalFilteredRows: 0
+      searchTotalFilteredRows: 0,
     };
   },
   computed: {
@@ -154,7 +154,7 @@ export default {
     },
     powerSupplies() {
       return this.$store.getters['powerSupply/powerSupplies'];
-    }
+    },
   },
   created() {
     this.$store.dispatch('powerSupply/getPowerSupply').finally(() => {
@@ -170,7 +170,7 @@ export default {
     },
     onFiltered(filteredItems) {
       this.searchTotalFilteredRows = filteredItems.length;
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
index de77243a..fba4cc4e 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
@@ -30,7 +30,7 @@
       @filtered="onFiltered"
     >
       <!-- Expand button -->
-      <template v-slot:cell(expandRow)="row">
+      <template #cell(expandRow)="row">
         <b-button
           variant="link"
           data-test-id="hardwareStatus-button-expandProcessors"
@@ -41,11 +41,11 @@
         </b-button>
       </template>
       <!-- Health -->
-      <template v-slot:cell(health)="{ value }">
+      <template #cell(health)="{ value }">
         <status-icon :status="statusIcon(value)" />
         {{ value }}
       </template>
-      <template v-slot:row-details="{ item }">
+      <template #row-details="{ item }">
         <b-container fluid>
           <b-row>
             <b-col sm="6" xl="4">
@@ -113,7 +113,7 @@ export default {
     TableRowExpandMixin,
     TableDataFormatterMixin,
     TableSortMixin,
-    SearchFilterMixin
+    SearchFilterMixin,
   ],
   data() {
     return {
@@ -122,35 +122,35 @@ export default {
           key: 'expandRow',
           label: '',
           tdClass: 'table-row-expand',
-          sortable: false
+          sortable: false,
         },
         {
           key: 'id',
           label: this.$t('pageHardwareStatus.table.id'),
           formatter: this.tableFormatter,
-          sortable: true
+          sortable: true,
         },
         {
           key: 'health',
           label: this.$t('pageHardwareStatus.table.health'),
           formatter: this.tableFormatter,
           sortable: true,
-          tdClass: 'text-nowrap'
+          tdClass: 'text-nowrap',
         },
         {
           key: 'partNumber',
           label: this.$t('pageHardwareStatus.table.partNumber'),
           formatter: this.tableFormatter,
-          sortable: true
+          sortable: true,
         },
         {
           key: 'serialNumber',
           label: this.$t('pageHardwareStatus.table.serialNumber'),
           formatter: this.tableFormatter,
-          sortable: true
-        }
+          sortable: true,
+        },
       ],
-      searchTotalFilteredRows: 0
+      searchTotalFilteredRows: 0,
     };
   },
   computed: {
@@ -161,7 +161,7 @@ export default {
     },
     processors() {
       return this.$store.getters['processors/processors'];
-    }
+    },
   },
   created() {
     this.$store.dispatch('processors/getProcessorsInfo').finally(() => {
@@ -172,7 +172,7 @@ export default {
   methods: {
     onFiltered(filteredItems) {
       this.searchTotalFilteredRows = filteredItems.length;
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue b/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
index da4d5467..fc65fbfb 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
@@ -9,7 +9,7 @@
       :empty-text="$t('global.table.emptyMessage')"
     >
       <!-- Expand chevron icon -->
-      <template v-slot:cell(expandRow)="row">
+      <template #cell(expandRow)="row">
         <b-button
           variant="link"
           data-test-id="hardwareStatus-button-expandSystem"
@@ -21,12 +21,12 @@
       </template>
 
       <!-- Health -->
-      <template v-slot:cell(health)="{ value }">
+      <template #cell(health)="{ value }">
         <status-icon :status="statusIcon(value)" />
         {{ value }}
       </template>
 
-      <template v-slot:row-details="{ item }">
+      <template #row-details="{ item }">
         <b-container fluid>
           <b-row>
             <b-col sm="6" xl="4">
@@ -94,42 +94,42 @@ export default {
         {
           key: 'expandRow',
           label: '',
-          tdClass: 'table-row-expand'
+          tdClass: 'table-row-expand',
         },
         {
           key: 'id',
           label: this.$t('pageHardwareStatus.table.id'),
-          formatter: this.tableFormatter
+          formatter: this.tableFormatter,
         },
         {
           key: 'health',
           label: this.$t('pageHardwareStatus.table.health'),
           formatter: this.tableFormatter,
-          tdClass: 'text-nowrap'
+          tdClass: 'text-nowrap',
         },
         {
           key: 'partNumber',
           label: this.$t('pageHardwareStatus.table.partNumber'),
-          formatter: this.tableFormatter
+          formatter: this.tableFormatter,
         },
         {
           key: 'serialNumber',
           label: this.$t('pageHardwareStatus.table.serialNumber'),
-          formatter: this.tableFormatter
-        }
-      ]
+          formatter: this.tableFormatter,
+        },
+      ],
     };
   },
   computed: {
     systems() {
       return this.$store.getters['system/systems'];
-    }
+    },
   },
   created() {
     this.$store.dispatch('system/getSystem').finally(() => {
       // Emit initial data fetch complete to parent component
       this.$root.$emit('hardwareStatus::system::complete');
     });
-  }
+  },
 };
 </script>
diff --git a/src/views/Health/Sensors/Sensors.vue b/src/views/Health/Sensors/Sensors.vue
index acd2d18b..384c64f6 100644
--- a/src/views/Health/Sensors/Sensors.vue
+++ b/src/views/Health/Sensors/Sensors.vue
@@ -26,7 +26,7 @@
           :selected-items-count="selectedRows.length"
           @clearSelected="clearSelectedRows($refs.table)"
         >
-          <template v-slot:export>
+          <template #export>
             <table-toolbar-export
               :data="selectedRows"
               :file-name="exportFileNameByDate()"
@@ -56,36 +56,36 @@
           @row-selected="onRowSelected($event, filteredSensors.length)"
         >
           <!-- Checkbox column -->
-          <template v-slot:head(checkbox)>
+          <template #head(checkbox)>
             <b-form-checkbox
               v-model="tableHeaderCheckboxModel"
               :indeterminate="tableHeaderCheckboxIndeterminate"
               @change="onChangeHeaderCheckbox($refs.table)"
             />
           </template>
-          <template v-slot:cell(checkbox)="row">
+          <template #cell(checkbox)="row">
             <b-form-checkbox
               v-model="row.rowSelected"
               @change="toggleSelectRow($refs.table, row.index)"
             />
           </template>
 
-          <template v-slot:cell(status)="{ value }">
+          <template #cell(status)="{ value }">
             <status-icon :status="statusIcon(value)" /> {{ value }}
           </template>
-          <template v-slot:cell(currentValue)="data">
+          <template #cell(currentValue)="data">
             {{ data.value }} {{ data.item.units }}
           </template>
-          <template v-slot:cell(lowerCaution)="data">
+          <template #cell(lowerCaution)="data">
             {{ data.value }} {{ data.item.units }}
           </template>
-          <template v-slot:cell(upperCaution)="data">
+          <template #cell(upperCaution)="data">
             {{ data.value }} {{ data.item.units }}
           </template>
-          <template v-slot:cell(lowerCritical)="data">
+          <template #cell(lowerCritical)="data">
             {{ data.value }} {{ data.item.units }}
           </template>
-          <template v-slot:cell(upperCritical)="data">
+          <template #cell(upperCritical)="data">
             {{ data.value }} {{ data.item.units }}
           </template>
         </b-table>
@@ -119,7 +119,7 @@ export default {
     TableCellCount,
     TableFilter,
     TableToolbar,
-    TableToolbarExport
+    TableToolbarExport,
   },
   mixins: [
     TableFilterMixin,
@@ -127,63 +127,67 @@ export default {
     LoadingBarMixin,
     TableDataFormatterMixin,
     TableSortMixin,
-    SearchFilterMixin
+    SearchFilterMixin,
   ],
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
+  },
   data() {
     return {
       fields: [
         {
           key: 'checkbox',
           sortable: false,
-          label: ''
+          label: '',
         },
         {
           key: 'name',
           sortable: true,
-          label: this.$t('pageSensors.table.name')
+          label: this.$t('pageSensors.table.name'),
         },
         {
           key: 'status',
           sortable: true,
           label: this.$t('pageSensors.table.status'),
-          tdClass: 'text-nowrap'
+          tdClass: 'text-nowrap',
         },
         {
           key: 'lowerCritical',
           formatter: this.tableFormatter,
-          label: this.$t('pageSensors.table.lowerCritical')
+          label: this.$t('pageSensors.table.lowerCritical'),
         },
         {
           key: 'lowerCaution',
           formatter: this.tableFormatter,
-          label: this.$t('pageSensors.table.lowerWarning')
+          label: this.$t('pageSensors.table.lowerWarning'),
         },
 
         {
           key: 'currentValue',
           formatter: this.tableFormatter,
-          label: this.$t('pageSensors.table.currentValue')
+          label: this.$t('pageSensors.table.currentValue'),
         },
         {
           key: 'upperCaution',
           formatter: this.tableFormatter,
-          label: this.$t('pageSensors.table.upperWarning')
+          label: this.$t('pageSensors.table.upperWarning'),
         },
         {
           key: 'upperCritical',
           formatter: this.tableFormatter,
-          label: this.$t('pageSensors.table.upperCritical')
-        }
+          label: this.$t('pageSensors.table.upperCritical'),
+        },
       ],
       tableFilters: [
         {
           key: 'status',
           label: this.$t('pageSensors.table.status'),
-          values: ['OK', 'Warning', 'Critical']
-        }
+          values: ['OK', 'Warning', 'Critical'],
+        },
       ],
       activeFilters: [],
-      searchTotalFilteredRows: 0
+      searchTotalFilteredRows: 0,
     };
   },
   computed: {
@@ -197,7 +201,7 @@ export default {
     },
     filteredSensors() {
       return this.getFilteredTableData(this.allSensors, this.activeFilters);
-    }
+    },
   },
   created() {
     this.startLoader();
@@ -205,10 +209,6 @@ export default {
       .dispatch('sensors/getAllSensors')
       .finally(() => this.endLoader());
   },
-  beforeRouteLeave(to, from, next) {
-    this.hideLoader();
-    next();
-  },
   methods: {
     sortCompare(a, b, key) {
       if (key === 'status') {
@@ -230,13 +230,9 @@ export default {
       date =
         date.toISOString().slice(0, 10) +
         '_' +
-        date
-          .toString()
-          .split(':')
-          .join('-')
-          .split(' ')[4];
+        date.toString().split(':').join('-').split(' ')[4];
       return this.$t('pageSensors.exportFilePrefix') + date;
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index dd0a415b..1936cd48 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -1,6 +1,6 @@
 <template>
   <b-form
-    class="login-form  mx-auto ml-md-5 mb-3"
+    class="login-form mx-auto ml-md-5 mb-3"
     novalidate
     @submit.prevent="login"
   >
@@ -79,38 +79,38 @@ export default {
     return {
       userInfo: {
         username: null,
-        password: null
+        password: null,
       },
       disableSubmitButton: false,
       languages: [
         {
           value: 'en-US',
-          text: 'English'
+          text: 'English',
         },
         {
           value: 'es',
-          text: 'Español'
-        }
-      ]
+          text: 'Español',
+        },
+      ],
     };
   },
   computed: {
     authError() {
       return this.$store.getters['authentication/authError'];
-    }
+    },
   },
   validations: {
     userInfo: {
       username: {
-        required
+        required,
       },
       password: {
-        required
-      }
-    }
+        required,
+      },
+    },
   },
   methods: {
-    login: function() {
+    login: function () {
       this.$v.$touch();
       if (this.$v.$invalid) return;
       this.disableSubmitButton = true;
@@ -128,17 +128,17 @@ export default {
             username
           );
         })
-        .then(passwordChangeRequired => {
+        .then((passwordChangeRequired) => {
           if (passwordChangeRequired) {
             this.$router.push('/change-password');
           } else {
             this.$router.push('/');
           }
         })
-        .catch(error => console.log(error))
+        .catch((error) => console.log(error))
         .finally(() => (this.disableSubmitButton = false));
-    }
-  }
+    },
+  },
 };
 </script>
 
diff --git a/src/views/Overview/Overview.vue b/src/views/Overview/Overview.vue
index 27a599b9..13138601 100644
--- a/src/views/Overview/Overview.vue
+++ b/src/views/Overview/Overview.vue
@@ -101,21 +101,22 @@ export default {
     OverviewEvents,
     OverviewNetwork,
     PageTitle,
-    PageSection
+    PageSection,
   },
   mixins: [LoadingBarMixin],
   data() {
     return {
       firmwareStoreModuleName: this.$store.hasModule('firmwareSingleImage')
         ? 'firmwareSingleImage'
-        : 'firmware'
+        : 'firmware',
     };
   },
   computed: {
     ...mapState({
-      server: state => state.system.systems[0],
-      powerCapValue: state => state.powerControl.powerCapValue,
-      powerConsumptionValue: state => state.powerControl.powerConsumptionValue,
+      server: (state) => state.system.systems[0],
+      powerCapValue: (state) => state.powerControl.powerCapValue,
+      powerConsumptionValue: (state) =>
+        state.powerControl.powerConsumptionValue,
       serverManufacturer() {
         if (this.server) return this.server.manufacturer || '--';
         return '--';
@@ -131,23 +132,23 @@ export default {
       hostFirmwareVersion() {
         if (this.server) return this.server.firmwareVersion || '--';
         return '--';
-      }
+      },
     }),
     bmcFirmwareVersion() {
       return this.$store.getters[
         `${this.firmwareStoreModuleName}/bmcFirmwareCurrentVersion`
       ];
-    }
+    },
   },
   created() {
     this.startLoader();
-    const quicklinksPromise = new Promise(resolve => {
+    const quicklinksPromise = new Promise((resolve) => {
       this.$root.$on('overview::quicklinks::complete', () => resolve());
     });
-    const networkPromise = new Promise(resolve => {
+    const networkPromise = new Promise((resolve) => {
       this.$root.$on('overview::network::complete', () => resolve());
     });
-    const eventsPromise = new Promise(resolve => {
+    const eventsPromise = new Promise((resolve) => {
       this.$root.$on('overview::events::complete', () => resolve());
     });
     Promise.all([
@@ -158,13 +159,9 @@ export default {
       this.$store.dispatch('powerControl/getPowerControl'),
       quicklinksPromise,
       networkPromise,
-      eventsPromise
+      eventsPromise,
     ]).finally(() => this.endLoader());
   },
-  beforeRouteLeave(to, from, next) {
-    this.hideLoader();
-    next();
-  }
 };
 </script>
 
diff --git a/src/views/Overview/OverviewEvents.vue b/src/views/Overview/OverviewEvents.vue
index ac39a2b3..83aa677d 100644
--- a/src/views/Overview/OverviewEvents.vue
+++ b/src/views/Overview/OverviewEvents.vue
@@ -20,11 +20,11 @@
       :fields="fields"
       :empty-text="$t('pageOverview.events.noHighEventsMsg')"
     >
-      <template v-slot:cell(severity)="{ value }">
+      <template #cell(severity)="{ value }">
         <status-icon status="danger" />
         {{ value }}
       </template>
-      <template v-slot:cell(date)="{ value }">
+      <template #cell(date)="{ value }">
         <p class="mb-0">{{ value | formatDate }}</p>
         <p class="mb-0">{{ value | formatTime }}</p>
       </template>
@@ -43,36 +43,36 @@ export default {
       fields: [
         {
           key: 'id',
-          label: this.$t('pageOverview.events.id')
+          label: this.$t('pageOverview.events.id'),
         },
         {
           key: 'severity',
-          label: this.$t('pageOverview.events.severity')
+          label: this.$t('pageOverview.events.severity'),
         },
         {
           key: 'type',
-          label: this.$t('pageOverview.events.type')
+          label: this.$t('pageOverview.events.type'),
         },
         {
           key: 'date',
-          label: this.$t('pageOverview.events.date')
+          label: this.$t('pageOverview.events.date'),
         },
         {
           key: 'description',
-          label: this.$t('pageOverview.events.description')
-        }
-      ]
+          label: this.$t('pageOverview.events.description'),
+        },
+      ],
     };
   },
   computed: {
     eventLogData() {
       return this.$store.getters['eventLog/highPriorityEvents'];
-    }
+    },
   },
   created() {
     this.$store.dispatch('eventLog/getEventLogData').finally(() => {
       this.$root.$emit('overview::events::complete');
     });
-  }
+  },
 };
 </script>
diff --git a/src/views/Overview/OverviewNetwork.vue b/src/views/Overview/OverviewNetwork.vue
index 14b4d4af..ec9fd6b5 100644
--- a/src/views/Overview/OverviewNetwork.vue
+++ b/src/views/Overview/OverviewNetwork.vue
@@ -46,13 +46,13 @@ export default {
   computed: {
     ethernetData() {
       return this.$store.getters['networkSettings/ethernetData'];
-    }
+    },
   },
   created() {
     this.$store.dispatch('networkSettings/getEthernetData').finally(() => {
       this.$root.$emit('overview::network::complete');
     });
-  }
+  },
 };
 </script>
 
diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue
index e0b4487f..1cbc64d5 100644
--- a/src/views/Overview/OverviewQuickLinks.vue
+++ b/src/views/Overview/OverviewQuickLinks.vue
@@ -62,7 +62,7 @@ import BVToastMixin from '@/components/Mixins/BVToastMixin';
 export default {
   name: 'QuickLinks',
   components: {
-    IconArrowRight: ArrowRight16
+    IconArrowRight: ArrowRight16,
   },
   mixins: [BVToastMixin],
   computed: {
@@ -75,13 +75,13 @@ export default {
       },
       set(value) {
         return value;
-      }
-    }
+      },
+    },
   },
   created() {
     Promise.all([
       this.$store.dispatch('global/getBmcTime'),
-      this.$store.dispatch('serverLed/getIndicatorValue')
+      this.$store.dispatch('serverLed/getIndicatorValue'),
     ]).finally(() => {
       this.$root.$emit('overview::quicklinks::complete');
     });
@@ -90,10 +90,10 @@ export default {
     onChangeServerLed(value) {
       this.$store
         .dispatch('serverLed/saveIndicatorLedValue', value)
-        .then(message => this.successToast(message))
+        .then((message) => this.successToast(message))
         .catch(({ message }) => this.errorToast(message));
-    }
-  }
+    },
+  },
 };
 </script>
 
diff --git a/src/views/PageNotFound/PageNotFound.vue b/src/views/PageNotFound/PageNotFound.vue
index be4b3c49..91341dbb 100644
--- a/src/views/PageNotFound/PageNotFound.vue
+++ b/src/views/PageNotFound/PageNotFound.vue
@@ -7,6 +7,6 @@
 import PageTitle from '@/components/Global/PageTitle';
 export default {
   name: 'PageNotFound',
-  components: { PageTitle }
+  components: { PageTitle },
 };
 </script>
diff --git a/src/views/ProfileSettings/ProfileSettings.vue b/src/views/ProfileSettings/ProfileSettings.vue
index 8c68839d..65c722ab 100644
--- a/src/views/ProfileSettings/ProfileSettings.vue
+++ b/src/views/ProfileSettings/ProfileSettings.vue
@@ -32,7 +32,7 @@
                 {{
                   $t('pageLocalUserManagement.modal.passwordMustBeBetween', {
                     min: passwordRequirements.minLength,
-                    max: passwordRequirements.maxLength
+                    max: passwordRequirements.maxLength,
                   })
                 }}
               </b-form-text>
@@ -51,13 +51,13 @@
                   <template
                     v-if="
                       !$v.form.newPassword.minLength ||
-                        !$v.form.newPassword.maxLength
+                      !$v.form.newPassword.maxLength
                     "
                   >
                     {{
                       $t('pageProfileSettings.newPassLabelTextInfo', {
                         min: passwordRequirements.minLength,
-                        max: passwordRequirements.maxLength
+                        max: passwordRequirements.maxLength,
                       })
                     }}
                   </template>
@@ -110,7 +110,7 @@
               >
                 {{
                   $t('pageProfileSettings.browserOffset', {
-                    timezone
+                    timezone,
                   })
                 }}
               </b-form-radio>
@@ -137,7 +137,7 @@ import {
   maxLength,
   minLength,
   required,
-  sameAs
+  sameAs,
 } from 'vuelidate/lib/validators';
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 import LocalTimezoneLabelMixin from '@/components/Mixins/LocalTimezoneLabelMixin';
@@ -152,15 +152,15 @@ export default {
     BVToastMixin,
     LocalTimezoneLabelMixin,
     LoadingBarMixin,
-    VuelidateMixin
+    VuelidateMixin,
   ],
   data() {
     return {
       form: {
         newPassword: '',
         confirmPassword: '',
-        isUtcDisplay: this.$store.getters['global/isUtcDisplay']
-      }
+        isUtcDisplay: this.$store.getters['global/isUtcDisplay'],
+      },
     };
   },
   computed: {
@@ -172,7 +172,7 @@ export default {
     },
     timezone() {
       return this.localOffset();
-    }
+    },
   },
   created() {
     this.startLoader();
@@ -186,12 +186,12 @@ export default {
         isUtcDisplay: { required },
         newPassword: {
           minLength: minLength(this.passwordRequirements.minLength),
-          maxLength: maxLength(this.passwordRequirements.maxLength)
+          maxLength: maxLength(this.passwordRequirements.maxLength),
         },
         confirmPassword: {
-          sameAsPassword: sameAs('newPassword')
-        }
-      }
+          sameAsPassword: sameAs('newPassword'),
+        },
+      },
     };
   },
   methods: {
@@ -201,12 +201,12 @@ export default {
       if (this.$v.$invalid) return;
       let userData = {
         originalUsername: this.username,
-        password: this.form.newPassword
+        password: this.form.newPassword,
       };
 
       this.$store
         .dispatch('localUsers/updateUser', userData)
-        .then(message => {
+        .then((message) => {
           (this.form.newPassword = ''), (this.form.confirmPassword = '');
           this.$v.$reset();
           this.successToast(message);
@@ -227,7 +227,7 @@ export default {
       if (this.$v.form.isUtcDisplay.$anyDirty) {
         this.saveTimeZonePrefrenceData();
       }
-    }
-  }
+    },
+  },
 };
 </script>