diff --git a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
index 9978f4a..5c2d7f1 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 @@
     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 @@
     },
     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 @@
             {
               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 @@
     },
     passwordRequirements() {
       return this.$store.getters['localUsers/accountPasswordRequirements'];
-    }
+    },
   },
   created() {
     this.startLoader();
@@ -230,10 +230,6 @@
     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 @@
       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 @@
       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 @@
       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 @@
                 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 @@
           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 @@
           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 @@
       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 a611c59..89a1ebc 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 @@
   required,
   requiredIf,
   minValue,
-  maxValue
+  maxValue,
 } from 'vuelidate/lib/validators';
 
 export default {
@@ -139,42 +139,42 @@
   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 @@
         ? 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 0fec894..962718b 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 @@
   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 @@
   props: {
     user: {
       type: Object,
-      default: null
+      default: null,
     },
     passwordRequirements: {
       type: Object,
-      required: true
-    }
+      required: true,
+    },
   },
   data() {
     return {
@@ -261,8 +261,8 @@
         privilege: '',
         password: '',
         passwordConfirmation: '',
-        manualUnlock: false
-      }
+        manualUnlock: false,
+      },
     };
   },
   computed: {
@@ -277,46 +277,46 @@
     },
     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 @@
       // 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 bf300f5..9c2e5fe 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 @@
 
 export default {
   components: {
-    Checkmark20
+    Checkmark20,
   },
   data() {
     return {
@@ -40,7 +40,7 @@
           administrator: true,
           operator: false,
           readonly: false,
-          noaccess: false
+          noaccess: false,
         },
         {
           description: this.$t(
@@ -49,7 +49,7 @@
           administrator: true,
           operator: false,
           readonly: false,
-          noaccess: false
+          noaccess: false,
         },
         {
           description: this.$t(
@@ -58,7 +58,7 @@
           administrator: true,
           operator: true,
           readonly: true,
-          noaccess: false
+          noaccess: false,
         },
         {
           description: this.$t(
@@ -67,7 +67,7 @@
           administrator: true,
           operator: false,
           readonly: false,
-          noaccess: false
+          noaccess: false,
         },
         {
           description: this.$t(
@@ -76,7 +76,7 @@
           administrator: true,
           operator: true,
           readonly: true,
-          noaccess: false
+          noaccess: false,
         },
         {
           description: this.$t(
@@ -85,7 +85,7 @@
           administrator: true,
           operator: true,
           readonly: true,
-          noaccess: false
+          noaccess: false,
         },
         {
           description: this.$t(
@@ -94,7 +94,7 @@
           administrator: true,
           operator: true,
           readonly: true,
-          noaccess: false
+          noaccess: false,
         },
         {
           description: this.$t(
@@ -103,7 +103,7 @@
           administrator: true,
           operator: false,
           readonly: false,
-          noaccess: false
+          noaccess: false,
         },
         {
           description: this.$t(
@@ -112,17 +112,17 @@
           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>