Upgrade vue3 and all dependencies

Start the process of porting everything to Vue 3.  I have most things
working.  npm run-scripts build works, npm install works.  prettier
passes.  Styles load, login works, webui loads.

This was primarily done using the linked documents below.  It makes the
following design decisions:
1. Vue is put in compat 2 mode, which allows most of the components to
   work as-is.
2. Bootstrap v4 is used along with bootstrap-vue to keep our components
   working.
3. Minor changes are made to load the latest versions of vue-router,
   vuex, and vue-i18n.

I suspect this patchset is good enough to start with, and we can clean
up the broken things one patchset at a time.  The things that need to
happen are:

1. Get remaining features working again.  This primiarily is vue-i18n
   for mixins, and non vue components.  This likely needs to be done by
   not pulling in i18n into the non vue components, then using the .Vue
   files to do the internationalization in the component context, NOT in
   the mixin context.  Alternatively, we could drop MixIns alltogether.
2. Get custom styles working again.  Previously, we used some path
   hackery in vue.config.js to optionally pre-load styles.  This stops
   working now that we're required to @import our modules.  Likely we
   need some rearangement of the paths such that custom styles are a
   complete replacement (possibly importing the original) rather than
   additive with overrides.  That's a guess, but I don't really see
   anyone else doing customization the way we've defined it here.
3. Bootstrap 5 no longer requires ANY custom vue modules, as it has
   dropped the jquery dependency.  We won't be able to pull in bootstrap
   5 all at once, so pull in bootstrap 5 under an alias, like
     "bootstrap5" that we can optionally import 5 or 4.
4. One at a time, start porting components over to Vue3 syntax and
   bootstrap 5.  This will be the bulk of the manual work and review.

The only thing I think left is getting unit tests passing, which I
commented out the pre-commit hook to make this PR.

Tested: Code builds.  Needs better testing.

[1] https://router.vuejs.org/guide/migration/
[2] https://vue-i18n.intlify.dev/guide/migration/vue3
[3] https://vuelidate-next.netlify.app/migration_guide.html#package-name-and-imports

Change-Id: I5bb3187b9efbf2e4ff63e57994bc528756e2a981
Signed-off-by: Ed Tanous <ed@tanous.net>

68 files changed, 435 insertions, 179 deletions

diff --git a/src/App.vue b/src/App.vue
index fc04b70ba..35a743c7c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,7 +9,8 @@ export default {
   name: 'App',
   computed: {
     assetTag() {
-      return this.$store.getters['global/assetTag'];
+      return '';
+      //return this.$store.getters['global/assetTag'];
     },
   },
   watch: {
@@ -25,12 +26,15 @@ export default {
       }
     },
   },
+  getters: {},
   created() {
-    document.title = this.$route.meta.title || 'Page is missing title';
+    document.title = '';
+    //document.title = this.$route.meta.title || 'Page is missing title';
   },
 };
 </script>
 
 <style lang="scss">
-@import '@/assets/styles/_obmc-custom';
+//@import '@/assets/styles/_obmc-custom';
+//@import './assets/styles/bootstrap/_helpers.scss';
 </style>
diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss
index 2a7b81692..597766ce8 100644
--- a/src/assets/styles/bmc/custom/_buttons.scss
+++ b/src/assets/styles/bmc/custom/_buttons.scss
@@ -1,3 +1,5 @@
+@import 'bootstrap/dist/css/bootstrap.css';
+
 .btn {
   padding-top: $spacer / 2;
   padding-right: $spacer;
@@ -71,7 +73,7 @@
   position: absolute;
   right: 0;
   top: 0;
-  z-index: $zindex-dropdown + 1;
+  //z-index: $zindex-dropdown + 1;
 }
 
 // Contain input buttons within input
diff --git a/src/assets/styles/bmc/custom/_dropdown.scss b/src/assets/styles/bmc/custom/_dropdown.scss
index 969c4c682..56d2ace91 100644
--- a/src/assets/styles/bmc/custom/_dropdown.scss
+++ b/src/assets/styles/bmc/custom/_dropdown.scss
@@ -1,6 +1,8 @@
+@import 'bootstrap/dist/css/bootstrap.css';
+
 // Make calendar visible over the table
 .dropdown-menu {
-  z-index: $zindex-dropdown + 1;
+  //z-index: $zindex-dropdown + 1;
   padding: 0;
 }
 .dropdown-item {
diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss
index e8b5a8321..deeddc344 100644
--- a/src/assets/styles/bmc/custom/_tables.scss
+++ b/src/assets/styles/bmc/custom/_tables.scss
@@ -1,6 +1,8 @@
+@import 'bootstrap/dist/css/bootstrap.css'
+
 .table {
   position: relative;
-  z-index: $zindex-dropdown;
+  //z-index: $zindex-dropdown;
 
   td {
     border-top: 1px solid gray("300");
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 76c96c063..9d0668077 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -246,6 +246,9 @@ export default {
 </script>
 
 <style lang="scss">
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 @mixin focus-box-shadow($padding-color: $navbar-color, $outline-color: $white) {
   box-shadow:
     inset 0 0 0 3px $padding-color,
@@ -256,11 +259,11 @@ export default {
     position: absolute;
     top: -60px;
     left: 0.5rem;
-    z-index: $zindex-popover;
-    transition: $duration--moderate-01 $exit-easing--expressive;
+    //z-index: $zindex-popover;
+    //transition: $duration--moderate-01 $exit-easing--expressive;
     &:focus {
       top: 0.5rem;
-      transition-timing-function: $entrance-easing--expressive;
+      //transition-timing-function: $entrance-easing--expressive;
     }
   }
   .navbar-text,
@@ -289,6 +292,7 @@ export default {
   .navbar {
     padding: 0;
     background-color: $navbar-color;
+
     @include media-breakpoint-up($responsive-layout-bp) {
       height: $header-height;
     }
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index a5f81051e..4c93be558 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -3,11 +3,11 @@
     <div class="nav-container" :class="{ open: isNavigationOpen }">
       <nav ref="nav" :aria-label="$t('appNavigation.primaryNavigation')">
         <b-nav vertical class="mb-4">
-          <template v-for="(navItem, index) in navigationItems">
+          <template v-for="navItem in navigationItems">
             <!-- Navigation items with no children -->
             <b-nav-item
               v-if="!navItem.children"
-              :key="index"
+              :key="navItem.index"
               :to="navItem.route"
               :data-test-id="`nav-item-${navItem.id}`"
             >
@@ -16,7 +16,7 @@
             </b-nav-item>
 
             <!-- Navigation items with children -->
-            <li v-else :key="index" class="nav-item">
+            <li v-else :key="navItem.index" class="nav-item">
               <b-button
                 v-b-toggle="`${navItem.id}`"
                 variant="link"
@@ -101,7 +101,10 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 svg {
   fill: currentColor;
   height: 1.2rem;
diff --git a/src/components/Global/ButtonBackToTop.vue b/src/components/Global/ButtonBackToTop.vue
index 9160c7b76..3ceb69161 100644
--- a/src/components/Global/ButtonBackToTop.vue
+++ b/src/components/Global/ButtonBackToTop.vue
@@ -45,6 +45,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .btn-top {
   position: fixed;
   bottom: 24px;
diff --git a/src/components/Global/FormFile.vue b/src/components/Global/FormFile.vue
index 50ac96149..1eafa25f3 100644
--- a/src/components/Global/FormFile.vue
+++ b/src/components/Global/FormFile.vue
@@ -82,6 +82,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .form-control-file {
   opacity: 0;
   height: 0;
diff --git a/src/components/Global/InfoTooltip.vue b/src/components/Global/InfoTooltip.vue
index c91109d1e..0e5c3b5d9 100644
--- a/src/components/Global/InfoTooltip.vue
+++ b/src/components/Global/InfoTooltip.vue
@@ -25,6 +25,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .btn-tooltip {
   padding: 0;
   line-height: 1em;
diff --git a/src/components/Global/InputPasswordToggle.vue b/src/components/Global/InputPasswordToggle.vue
index d2c0d4a69..cd8692065 100644
--- a/src/components/Global/InputPasswordToggle.vue
+++ b/src/components/Global/InputPasswordToggle.vue
@@ -48,6 +48,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .input-password-toggle-container {
   position: relative;
 }
diff --git a/src/components/Global/LoadingBar.vue b/src/components/Global/LoadingBar.vue
index 0e9551b5b..337aaf049 100644
--- a/src/components/Global/LoadingBar.vue
+++ b/src/components/Global/LoadingBar.vue
@@ -72,6 +72,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .progress {
   position: absolute;
   left: 0;
diff --git a/src/components/Global/PageContainer.vue b/src/components/Global/PageContainer.vue
index ab4adb63c..0de5fe763 100644
--- a/src/components/Global/PageContainer.vue
+++ b/src/components/Global/PageContainer.vue
@@ -17,6 +17,10 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
+@import 'bootstrap/dist/css/bootstrap.css';
 main {
   width: 100%;
   height: 100%;
diff --git a/src/components/Global/PageSection.vue b/src/components/Global/PageSection.vue
index dd39ddd51..15aa383ad 100644
--- a/src/components/Global/PageSection.vue
+++ b/src/components/Global/PageSection.vue
@@ -18,6 +18,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .page-section {
   margin-bottom: $spacer * 4;
 }
diff --git a/src/components/Global/PageTitle.vue b/src/components/Global/PageTitle.vue
index c3b49d80a..ca7f6082d 100644
--- a/src/components/Global/PageTitle.vue
+++ b/src/components/Global/PageTitle.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import i18n from '@/i18n';
+//import i18n from '@/i18n';
 export default {
   name: 'PageTitle',
   props: {
@@ -32,14 +32,17 @@ export default {
         );
         i++;
       }
-      this.title = i18n.t('appPageTitle.' + title);
-      document.title = this.title;
+      //this.title = i18n.t('appPageTitle.' + title);
+      //document.title = this.title;
     }
   },
 };
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .page-title {
   margin-bottom: $spacer * 2;
 }
diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue
index ac8f9bfb1..d53315b39 100644
--- a/src/components/Global/Search.vue
+++ b/src/components/Global/Search.vue
@@ -70,6 +70,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .search-input {
   padding-left: ($spacer * 2);
 }
diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue
index 4552633e9..6c1505e7b 100644
--- a/src/components/Global/StatusIcon.vue
+++ b/src/components/Global/StatusIcon.vue
@@ -34,6 +34,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .status-icon {
   vertical-align: text-bottom;
 
diff --git a/src/components/Global/TableDateFilter.vue b/src/components/Global/TableDateFilter.vue
index aa10cb5ca..4e8c5b948 100644
--- a/src/components/Global/TableDateFilter.vue
+++ b/src/components/Global/TableDateFilter.vue
@@ -99,15 +99,20 @@
 
 <script>
 import IconCalendar from '@carbon/icons-vue/es/calendar/20';
-import { helpers } from 'vuelidate/lib/validators';
-
+import { helpers } from '@vuelidate/validators';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
 
 const isoDateRegex = /([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/;
 
 export default {
   components: { IconCalendar },
   mixins: [VuelidateMixin],
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       fromDate: '',
diff --git a/src/components/Global/TableFilter.vue b/src/components/Global/TableFilter.vue
index f26777be5..8c4f50940 100644
--- a/src/components/Global/TableFilter.vue
+++ b/src/components/Global/TableFilter.vue
@@ -109,6 +109,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
+@import 'bootstrap/dist/css/bootstrap.css';
+
 .badge {
   margin-right: $spacer / 2;
 }
diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue
index 5235feae7..7c0f49068 100644
--- a/src/components/Global/TableToolbar.vue
+++ b/src/components/Global/TableToolbar.vue
@@ -69,12 +69,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
+@import 'bootstrap/dist/css/bootstrap.css';
+
 $toolbar-height: 46px;
 
 .toolbar-container {
   width: 100%;
   position: relative;
-  z-index: $zindex-dropdown + 1;
+  //z-index: $zindex-dropdown + 1;
 }
 
 .toolbar-content {
diff --git a/src/components/Mixins/BVPaginationMixin.js b/src/components/Mixins/BVPaginationMixin.js
index 4ccf6f2c7..0bdf3687e 100644
--- a/src/components/Mixins/BVPaginationMixin.js
+++ b/src/components/Mixins/BVPaginationMixin.js
@@ -1,4 +1,4 @@
-import i18n from '@/i18n';
+//import i18n from '@/i18n';
 export const currentPage = 1;
 export const perPage = 20;
 export const itemsPerPageOptions = [
@@ -20,7 +20,8 @@ export const itemsPerPageOptions = [
   },
   {
     value: 0,
-    text: i18n.t('global.table.viewAll'),
+    //text: i18n.$t('global.table.viewAll'),
+    text: 'global.table.viewAll',
   },
 ];
 const BVPaginationMixin = {
diff --git a/src/components/Mixins/TableRowExpandMixin.js b/src/components/Mixins/TableRowExpandMixin.js
index 7f815a463..92b2448dc 100644
--- a/src/components/Mixins/TableRowExpandMixin.js
+++ b/src/components/Mixins/TableRowExpandMixin.js
@@ -1,5 +1,7 @@
-import i18n from '@/i18n';
-export const expandRowLabel = i18n.t('global.table.expandTableRow');
+//import i18n from '@/i18n';
+//export const expandRowLabel = i18n.$t('global.table.expandTableRow');
+
+export const expandRowLabel = 'expand row label TODO';
 
 const TableRowExpandMixin = {
   methods: {
diff --git a/src/env/assets/styles/_default.scss b/src/env/assets/styles/_default.scss
new file mode 100644
index 000000000..8d7872869
--- /dev/null
+++ b/src/env/assets/styles/_default.scss
@@ -0,0 +1 @@
+// This file shall remain empty.
\ No newline at end of file
diff --git a/src/eventBus.js b/src/eventBus.js
index c31c98a57..68c120f49 100644
--- a/src/eventBus.js
+++ b/src/eventBus.js
@@ -1,5 +1,5 @@
-import Vue from 'vue';
+import { createApp } from 'vue';
 
-const eventBus = new Vue();
+const eventBus = createApp();
 
 export default eventBus;
diff --git a/src/i18n.js b/src/i18n.js
index c60573cad..8135a409a 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -1,26 +1,17 @@
-import Vue from 'vue';
-import VueI18n from 'vue-i18n';
+import { createI18n } from 'vue-i18n';
 
-Vue.use(VueI18n);
+import en_us from './locales/en-US.json';
+import ru_ru from './locales/ru-RU.json';
 
 function loadLocaleMessages() {
-  const locales = require.context(
-    './locales',
-    true,
-    /[A-Za-z0-9-_,\s]+\.json$/i,
-  );
-  const messages = {};
-  locales.keys().forEach((key) => {
-    const matched = key.match(/([A-Za-z0-9-_]+)\./i);
-    if (matched && matched.length > 1) {
-      const locale = matched[1];
-      messages[locale] = locales(key);
-    }
-  });
+  const messages = {
+    'en-US': en_us,
+    'ru-RU': ru_ru,
+  };
   return messages;
 }
 
-export default new VueI18n({
+const i18n = createI18n({
   // Get default locale from local storage
   locale: window.localStorage.getItem('storedLanguage'),
   // Locales that don't exist will fallback to English
@@ -29,4 +20,8 @@ export default new VueI18n({
   // Silent fallback suppresses console warnings when using fallback
   silentFallbackWarn: true,
   messages: loadLocaleMessages(),
+  globalInjection: false,
+  legacy: true,
 });
+
+export default i18n;
diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index 25ba3f615..fa9c212fc 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -63,6 +63,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .app-container {
   display: grid;
   grid-template-columns: 100%;
diff --git a/src/layouts/LoginLayout.vue b/src/layouts/LoginLayout.vue
index dba1980e0..a79228fda 100644
--- a/src/layouts/LoginLayout.vue
+++ b/src/layouts/LoginLayout.vue
@@ -44,9 +44,16 @@ export default {
     };
   },
 };
+('');
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
+@import '@/assets/styles/bmc/helpers';
+@import '@/assets/styles/bootstrap/_helpers';
+
 .login-container {
   background: gray('100');
   display: flex;
diff --git a/src/main.js b/src/main.js
index 43d09b8c0..23bfb691e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,14 +1,26 @@
-import Vue from 'vue';
+import { createApp } from 'vue';
+
 import App from './App.vue';
+import i18n from './i18n';
+
 import router from './router';
 
+//import { format } from 'date-fns-tz';
+
 //Do not change store import.
 //Exact match alias set to support
 //dotenv customizations.
 import store from './store';
 import eventBus from './eventBus';
 
+import './assets/styles/bmc/helpers/_index.scss';
+import './assets/styles/bootstrap/_helpers.scss';
+
+import 'bootstrap/dist/css/bootstrap.css';
+import 'bootstrap-vue/dist/bootstrap-vue.css';
+
 import {
+  BootstrapVue,
   AlertPlugin,
   BadgePlugin,
   ButtonPlugin,
@@ -39,11 +51,9 @@ import {
   ToastPlugin,
   TooltipPlugin,
 } from 'bootstrap-vue';
-import Vuelidate from 'vuelidate';
-import i18n from './i18n';
-import { format } from 'date-fns-tz';
 
 // Filters
+/*
 Vue.filter('shortTimeZone', function (value) {
   const longTZ = value
     .toString()
@@ -83,12 +93,24 @@ Vue.filter('formatTime', function (value) {
     return format(value, pattern, { timezone }).replace('GMT', 'UTC');
   }
 });
+*/
+
+const app = createApp({
+  router,
+  store,
+  render: (h) => h(App),
+});
+app.use(i18n);
+
+app.use(router);
+app.use(store);
 
 // Plugins
-Vue.use(AlertPlugin);
-Vue.use(BadgePlugin);
-Vue.use(ButtonPlugin);
-Vue.use(BVConfigPlugin, {
+app.use(BootstrapVue);
+app.use(AlertPlugin);
+app.use(BadgePlugin);
+app.use(ButtonPlugin);
+app.use(BVConfigPlugin, {
   BFormText: { textVariant: 'secondary' },
   BTable: {
     headVariant: 'light',
@@ -102,38 +124,33 @@ Vue.use(BVConfigPlugin, {
     variant: 'primary',
   },
 });
-Vue.use(CardPlugin);
-Vue.use(CollapsePlugin);
-Vue.use(DropdownPlugin);
-Vue.use(FormPlugin);
-Vue.use(FormCheckboxPlugin);
-Vue.use(FormDatepickerPlugin);
-Vue.use(FormFilePlugin);
-Vue.use(FormGroupPlugin);
-Vue.use(FormInputPlugin);
-Vue.use(FormRadioPlugin);
-Vue.use(FormSelectPlugin);
-Vue.use(FormTagsPlugin);
-Vue.use(InputGroupPlugin);
-Vue.use(LayoutPlugin);
-Vue.use(LayoutPlugin);
-Vue.use(LinkPlugin);
-Vue.use(ListGroupPlugin);
-Vue.use(ModalPlugin);
-Vue.use(NavbarPlugin);
-Vue.use(NavPlugin);
-Vue.use(PaginationPlugin);
-Vue.use(ProgressPlugin);
-Vue.use(TablePlugin);
-Vue.use(TabsPlugin);
-Vue.use(ToastPlugin);
-Vue.use(TooltipPlugin);
-Vue.use(Vuelidate);
-
-new Vue({
-  router,
-  store,
-  i18n,
-  render: (h) => h(App),
-}).$mount('#app');
-Vue.prototype.$eventBus = eventBus;
+
+app.use(CardPlugin);
+app.use(CollapsePlugin);
+app.use(DropdownPlugin);
+app.use(FormPlugin);
+app.use(FormCheckboxPlugin);
+app.use(FormDatepickerPlugin);
+app.use(FormFilePlugin);
+app.use(FormGroupPlugin);
+app.use(FormInputPlugin);
+app.use(FormRadioPlugin);
+app.use(FormSelectPlugin);
+app.use(FormTagsPlugin);
+app.use(InputGroupPlugin);
+app.use(LayoutPlugin);
+app.use(LayoutPlugin);
+app.use(LinkPlugin);
+app.use(ListGroupPlugin);
+app.use(ModalPlugin);
+app.use(NavbarPlugin);
+app.use(NavPlugin);
+app.use(PaginationPlugin);
+app.use(ProgressPlugin);
+app.use(TablePlugin);
+app.use(TabsPlugin);
+app.use(ToastPlugin);
+app.use(TooltipPlugin);
+
+app.mount('#app');
+app.prototype.$eventBus = eventBus;
diff --git a/src/router/routes.js b/src/router/routes.js
index 5424cab80..8b3ff1786 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -30,7 +30,7 @@ import Certificates from '@/views/SecurityAndAccess/Certificates';
 import VirtualMedia from '@/views/Operations/VirtualMedia';
 import Power from '@/views/ResourceManagement/Power';
 import SnmpAlerts from '@/views/Settings/SnmpAlerts';
-import i18n from '@/i18n';
+//import { i18n } from '@/i18n';
 
 const roles = {
   administrator: 'Administrator',
@@ -49,7 +49,7 @@ const routes = [
         name: 'login',
         component: Login,
         meta: {
-          title: i18n.t('appPageTitle.login'),
+          //title: i18n.$t('appPageTitle.login'),
         },
       },
       {
@@ -57,7 +57,7 @@ const routes = [
         name: 'change-password',
         component: ChangePassword,
         meta: {
-          title: i18n.t('appPageTitle.changePassword'),
+          //title: i18n.$t('appPageTitle.changePassword'),
           requiresAuth: true,
         },
       },
@@ -75,7 +75,7 @@ const routes = [
         name: 'serial-over-lan-console',
         component: SerialOverLanConsole,
         meta: {
-          title: i18n.t('appPageTitle.serialOverLan'),
+          //title: i18n.t('appPageTitle.serialOverLan'),
         },
       },
       {
@@ -83,7 +83,7 @@ const routes = [
         name: 'kvm-console',
         component: KvmConsole,
         meta: {
-          title: i18n.t('appPageTitle.kvm'),
+          //title: i18n.t('appPageTitle.kvm'),
         },
       },
     ],
@@ -100,7 +100,7 @@ const routes = [
         name: 'overview',
         component: Overview,
         meta: {
-          title: i18n.t('appPageTitle.overview'),
+          //title: i18n.t('appPageTitle.overview'),
         },
       },
       {
@@ -108,7 +108,7 @@ const routes = [
         name: 'profile-settings',
         component: ProfileSettings,
         meta: {
-          title: i18n.t('appPageTitle.profileSettings'),
+          //title: i18n.t('appPageTitle.profileSettings'),
         },
       },
       {
@@ -116,7 +116,7 @@ const routes = [
         name: 'event-logs',
         component: EventLogs,
         meta: {
-          title: i18n.t('appPageTitle.eventLogs'),
+          //title: i18n.t('appPageTitle.eventLogs'),
         },
       },
       {
@@ -124,7 +124,7 @@ const routes = [
         name: 'post-code-logs',
         component: PostCodeLogs,
         meta: {
-          title: i18n.t('appPageTitle.postCodeLogs'),
+          //title: i18n.t('appPageTitle.postCodeLogs'),
         },
       },
       {
@@ -132,7 +132,7 @@ const routes = [
         name: 'inventory',
         component: Inventory,
         meta: {
-          title: i18n.t('appPageTitle.inventory'),
+          //title: i18n.t('appPageTitle.inventory'),
         },
       },
       {
@@ -140,7 +140,7 @@ const routes = [
         name: 'sensors',
         component: Sensors,
         meta: {
-          title: i18n.t('appPageTitle.sensors'),
+          //title: i18n.t('appPageTitle.sensors'),
         },
       },
       {
@@ -148,7 +148,7 @@ const routes = [
         name: 'sessions',
         component: Sessions,
         meta: {
-          title: i18n.t('appPageTitle.sessions'),
+          //title: i18n.t('appPageTitle.sessions'),
         },
       },
       {
@@ -156,7 +156,7 @@ const routes = [
         name: 'ldap',
         component: Ldap,
         meta: {
-          title: i18n.t('appPageTitle.ldap'),
+          //title: i18n.t('appPageTitle.ldap'),
         },
       },
       {
@@ -164,7 +164,7 @@ const routes = [
         name: 'user-management',
         component: UserManagement,
         meta: {
-          title: i18n.t('appPageTitle.userManagement'),
+          //title: i18n.t('appPageTitle.userManagement'),
         },
       },
       {
@@ -172,7 +172,7 @@ const routes = [
         name: 'policies',
         component: Policies,
         meta: {
-          title: i18n.t('appPageTitle.policies'),
+          //title: i18n.t('appPageTitle.policies'),
         },
       },
       {
@@ -180,7 +180,7 @@ const routes = [
         name: 'certificates',
         component: Certificates,
         meta: {
-          title: i18n.t('appPageTitle.certificates'),
+          //title: i18n.t('appPageTitle.certificates'),
         },
       },
       {
@@ -188,7 +188,7 @@ const routes = [
         name: 'date-time',
         component: DateTime,
         meta: {
-          title: i18n.t('appPageTitle.dateTime'),
+          //title: i18n.t('appPageTitle.dateTime'),
         },
       },
       {
@@ -196,7 +196,7 @@ const routes = [
         name: 'snmp-alerts',
         component: SnmpAlerts,
         meta: {
-          title: i18n.t('appPageTitle.snmpAlerts'),
+          //title: i18n.t('appPageTitle.snmpAlerts'),
         },
       },
       {
@@ -204,7 +204,7 @@ const routes = [
         name: 'factory-reset',
         component: FactoryReset,
         meta: {
-          title: i18n.t('appPageTitle.factoryReset'),
+          //title: i18n.t('appPageTitle.factoryReset'),
         },
       },
       {
@@ -212,7 +212,7 @@ const routes = [
         name: 'key-clear',
         component: KeyClear,
         meta: {
-          title: i18n.t('appPageTitle.keyClear'),
+          //title: i18n.t('appPageTitle.keyClear'),
         },
       },
       {
@@ -220,7 +220,7 @@ const routes = [
         name: 'kvm',
         component: Kvm,
         meta: {
-          title: i18n.t('appPageTitle.kvm'),
+          //title: i18n.t('appPageTitle.kvm'),
         },
       },
       {
@@ -228,7 +228,7 @@ const routes = [
         name: 'firmware',
         component: Firmware,
         meta: {
-          title: i18n.t('appPageTitle.firmware'),
+          //title: i18n.t('appPageTitle.firmware'),
         },
       },
       {
@@ -236,7 +236,7 @@ const routes = [
         name: 'network',
         component: Network,
         meta: {
-          title: i18n.t('appPageTitle.network'),
+          //title: i18n.t('appPageTitle.network'),
         },
       },
       {
@@ -244,7 +244,7 @@ const routes = [
         name: 'power-restore-policy',
         component: PowerRestorePolicy,
         meta: {
-          title: i18n.t('appPageTitle.powerRestorePolicy'),
+          //title: i18n.t('appPageTitle.powerRestorePolicy'),
         },
       },
       {
@@ -252,7 +252,7 @@ const routes = [
         name: 'power',
         component: Power,
         meta: {
-          title: i18n.t('appPageTitle.power'),
+          //title: i18n.t('appPageTitle.power'),
         },
       },
       {
@@ -260,7 +260,7 @@ const routes = [
         name: 'reboot-bmc',
         component: RebootBmc,
         meta: {
-          title: i18n.t('appPageTitle.rebootBmc'),
+          //title: i18n.t('appPageTitle.rebootBmc'),
         },
       },
       {
@@ -268,7 +268,7 @@ const routes = [
         name: 'serial-over-lan',
         component: SerialOverLan,
         meta: {
-          title: i18n.t('appPageTitle.serialOverLan'),
+          //title: i18n.t('appPageTitle.serialOverLan'),
           exclusiveToRoles: [roles.administrator],
         },
       },
@@ -277,7 +277,7 @@ const routes = [
         name: 'server-power-operations',
         component: ServerPowerOperations,
         meta: {
-          title: i18n.t('appPageTitle.serverPowerOperations'),
+          //title: i18n.t('appPageTitle.serverPowerOperations'),
         },
       },
       {
@@ -285,7 +285,7 @@ const routes = [
         name: 'virtual-media',
         component: VirtualMedia,
         meta: {
-          title: i18n.t('appPageTitle.virtualMedia'),
+          //title: i18n.t('appPageTitle.virtualMedia'),
           exclusiveToRoles: [roles.administrator],
         },
       },
@@ -294,7 +294,7 @@ const routes = [
         name: 'page-not-found',
         component: PageNotFound,
         meta: {
-          title: i18n.t('appPageTitle.pageNotFound'),
+          //title: i18n.t('appPageTitle.pageNotFound'),
         },
       },
     ],
diff --git a/src/store/api.js b/src/store/api.js
index 664e2b76a..babed4c8a 100644
--- a/src/store/api.js
+++ b/src/store/api.js
@@ -5,7 +5,7 @@ import { setupCache, buildWebStorage } from 'axios-cache-interceptor';
 //Do not change store import.
 //Exact match alias set to support
 //dotenv customizations.
-import store from '../store';
+import store from '.';
 
 Axios.defaults.headers.common['Accept'] = 'application/json';
 Axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
diff --git a/src/store/index.js b/src/store/index.js
index 453e0f64e..029df7a26 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -36,7 +36,7 @@ import VirtualMediaStore from './modules/Operations/VirtualMediaStore';
 
 Vue.use(Vuex);
 
-export default new Vuex.Store({
+const store = new Vuex.Store({
   state: {},
   mutations: {},
   actions: {},
@@ -74,3 +74,5 @@ export default new Vuex.Store({
     keyClear: KeyClearStore,
   },
 });
+
+export default store;
diff --git a/src/views/ChangePassword/ChangePassword.vue b/src/views/ChangePassword/ChangePassword.vue
index 2440ace1c..002362a93 100644
--- a/src/views/ChangePassword/ChangePassword.vue
+++ b/src/views/ChangePassword/ChangePassword.vue
@@ -72,16 +72,22 @@
 </template>
 
 <script>
-import { required, sameAs } from 'vuelidate/lib/validators';
+import { required, sameAs } from '@vuelidate/validators';
 import Alert from '@/components/Global/Alert';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin';
 import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   name: 'ChangePassword',
   components: { Alert, InputPasswordToggle },
   mixins: [VuelidateMixin, BVToastMixin],
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       form: {
@@ -126,6 +132,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .change-password__form-container {
   @include media-breakpoint-up('md') {
     max-width: 360px;
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue b/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue
index cf3ee2bfd..8c1e50d42 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue
@@ -88,14 +88,14 @@
                 <!-- BMC date and time -->
                 <dt>{{ $t('pageInventory.table.bmcDateTime') }}:</dt>
                 <dd>
-                  {{ item.dateTime | formatDate }}
-                  {{ item.dateTime | formatTime }}
+                  {{ item.dateTime }}
+                  {{ item.dateTime }}
                 </dd>
                 <!-- Reset date and time -->
                 <dt>{{ $t('pageInventory.table.lastResetTime') }}:</dt>
                 <dd>
-                  {{ item.lastResetTime | formatDate }}
-                  {{ item.lastResetTime | formatTime }}
+                  {{ item.lastResetTime }}
+                  {{ item.lastResetTime }}
                 </dd>
               </dl>
             </b-col>
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 5e1e6ddd9..cbf9f3e75 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -18,15 +18,15 @@
         id="username"
         v-model="userInfo.username"
         aria-describedby="login-error-alert username-required"
-        :state="getValidationState($v.userInfo.username)"
+        :state="getValidationState(v$.userInfo.username)"
         type="text"
         autofocus="autofocus"
         data-test-id="login-input-username"
-        @input="$v.userInfo.username.$touch()"
+        @input="v$.userInfo.username.$touch()"
       >
       </b-form-input>
       <b-form-invalid-feedback id="username-required" role="alert">
-        <template v-if="!$v.userInfo.username.required">
+        <template v-if="!v$.userInfo.username.required">
           {{ $t('global.form.fieldRequired') }}
         </template>
       </b-form-invalid-feedback>
@@ -38,16 +38,16 @@
           id="password"
           v-model="userInfo.password"
           aria-describedby="login-error-alert password-required"
-          :state="getValidationState($v.userInfo.password)"
+          :state="getValidationState(v$.userInfo.password)"
           type="password"
           data-test-id="login-input-password"
           class="form-control-with-button"
-          @input="$v.userInfo.password.$touch()"
+          @input="v$.userInfo.password.$touch()"
         >
         </b-form-input>
       </input-password-toggle>
       <b-form-invalid-feedback id="password-required" role="alert">
-        <template v-if="!$v.userInfo.password.required">
+        <template v-if="!v$.userInfo.password.required">
           {{ $t('global.form.fieldRequired') }}
         </template>
       </b-form-invalid-feedback>
@@ -64,8 +64,10 @@
 </template>
 
 <script>
-import { required } from 'vuelidate/lib/validators';
+import { required } from '@vuelidate/validators';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
+
 import i18n from '@/i18n';
 import Alert from '@/components/Global/Alert';
 import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
@@ -74,6 +76,11 @@ export default {
   name: 'Login',
   components: { Alert, InputPasswordToggle },
   mixins: [VuelidateMixin],
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       userInfo: {
@@ -110,8 +117,8 @@ export default {
   },
   methods: {
     login: function () {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
+      this.v$.$touch();
+      if (this.v$.$invalid) return;
       this.disableSubmitButton = true;
       const username = this.userInfo.username;
       const password = this.userInfo.password;
diff --git a/src/views/Logs/Dumps/Dumps.vue b/src/views/Logs/Dumps/Dumps.vue
index e89acd933..5a9869a42 100644
--- a/src/views/Logs/Dumps/Dumps.vue
+++ b/src/views/Logs/Dumps/Dumps.vue
@@ -84,8 +84,8 @@
 
             <!-- Date and Time column -->
             <template #cell(dateTime)="{ value }">
-              <p class="mb-0">{{ value | formatDate }}</p>
-              <p class="mb-0">{{ value | formatTime }}</p>
+              <p class="mb-0">{{ value }}</p>
+              <p class="mb-0">{{ value }}</p>
             </template>
 
             <!-- Size column -->
diff --git a/src/views/Logs/Dumps/DumpsForm.vue b/src/views/Logs/Dumps/DumpsForm.vue
index 0a9b05898..40cea7e32 100644
--- a/src/views/Logs/Dumps/DumpsForm.vue
+++ b/src/views/Logs/Dumps/DumpsForm.vue
@@ -33,7 +33,8 @@
 </template>
 
 <script>
-import { required } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
 import ModalConfirmation from './DumpsModalConfirmation';
 import Alert from '@/components/Global/Alert';
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
@@ -42,6 +43,11 @@ import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
 export default {
   components: { Alert, ModalConfirmation },
   mixins: [BVToastMixin, VuelidateMixin],
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       selectedDumpType: null,
diff --git a/src/views/Logs/Dumps/DumpsModalConfirmation.vue b/src/views/Logs/Dumps/DumpsModalConfirmation.vue
index f8e20cfd5..2a1e552f0 100644
--- a/src/views/Logs/Dumps/DumpsModalConfirmation.vue
+++ b/src/views/Logs/Dumps/DumpsModalConfirmation.vue
@@ -40,10 +40,16 @@
 <script>
 import StatusIcon from '@/components/Global/StatusIcon';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   components: { StatusIcon },
   mixins: [VuelidateMixin],
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       confirmed: false,
diff --git a/src/views/Logs/EventLogs/EventLogs.vue b/src/views/Logs/EventLogs/EventLogs.vue
index b48bd4415..5060306e6 100644
--- a/src/views/Logs/EventLogs/EventLogs.vue
+++ b/src/views/Logs/EventLogs/EventLogs.vue
@@ -144,8 +144,8 @@
                     <!-- Modified date -->
                     <dt>{{ $t('pageEventLogs.table.modifiedDate') }}:</dt>
                     <dd v-if="item.modifiedDate">
-                      {{ item.modifiedDate | formatDate }}
-                      {{ item.modifiedDate | formatTime }}
+                      {{ item.modifiedDate }}
+                      {{ item.modifiedDate }}
                     </dd>
                     <dd v-else>--</dd>
                   </dl>
@@ -166,8 +166,8 @@
           </template>
           <!-- Date column -->
           <template #cell(date)="{ value }">
-            <p class="mb-0">{{ value | formatDate }}</p>
-            <p class="mb-0">{{ value | formatTime }}</p>
+            <p class="mb-0">{{ value }}</p>
+            <p class="mb-0">{{ value }}</p>
           </template>
 
           <!-- Status column -->
diff --git a/src/views/Logs/PostCodeLogs/PostCodeLogs.vue b/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
index 6b3030bc8..ad62afce9 100644
--- a/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
+++ b/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
@@ -97,8 +97,8 @@
           </template>
           <!-- Date column -->
           <template #cell(date)="{ value }">
-            <p class="mb-0">{{ value | formatDate }}</p>
-            <p class="mb-0">{{ value | formatTime }}</p>
+            <p class="mb-0">{{ value }}</p>
+            <p class="mb-0">{{ value }}</p>
           </template>
 
           <!-- Actions column -->
diff --git a/src/views/Operations/FactoryReset/FactoryReset.vue b/src/views/Operations/FactoryReset/FactoryReset.vue
index 897348fc2..40330b125 100644
--- a/src/views/Operations/FactoryReset/FactoryReset.vue
+++ b/src/views/Operations/FactoryReset/FactoryReset.vue
@@ -51,7 +51,7 @@
     </b-form>
 
     <!-- Modals -->
-    <modal-reset :reset-type="resetOption" @okConfirm="onOkConfirm" />
+    <modal-reset :reset-type="resetOption" @ok-confirm="onOkConfirm" />
   </b-container>
 </template>
 
diff --git a/src/views/Operations/Firmware/FirmwareCardsHost.vue b/src/views/Operations/Firmware/FirmwareCardsHost.vue
index b4a8e90da..8fd0cac9b 100644
--- a/src/views/Operations/Firmware/FirmwareCardsHost.vue
+++ b/src/views/Operations/Firmware/FirmwareCardsHost.vue
@@ -67,6 +67,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .page-section {
   margin-top: -$spacer * 1.5;
 }
diff --git a/src/views/Operations/Firmware/FirmwareFormUpdate.vue b/src/views/Operations/Firmware/FirmwareFormUpdate.vue
index 28d1104d7..3f114a93a 100644
--- a/src/views/Operations/Firmware/FirmwareFormUpdate.vue
+++ b/src/views/Operations/Firmware/FirmwareFormUpdate.vue
@@ -46,6 +46,7 @@ import { required } from 'vuelidate/lib/validators';
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
 
 import FormFile from '@/components/Global/FormFile';
 import ModalUpdateFirmware from './FirmwareModalUpdateFirmware';
@@ -64,6 +65,11 @@ export default {
       type: Boolean,
     },
   },
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       loading,
diff --git a/src/views/Operations/Kvm/KvmConsole.vue b/src/views/Operations/Kvm/KvmConsole.vue
index 62dd47ad1..cc623e44e 100644
--- a/src/views/Operations/Kvm/KvmConsole.vue
+++ b/src/views/Operations/Kvm/KvmConsole.vue
@@ -95,7 +95,7 @@ export default {
   mounted() {
     this.openTerminal();
   },
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener('resize', this.resizeKvmWindow);
     this.closeTerminal();
   },
@@ -173,7 +173,10 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .button-ctrl-alt-delete {
   float: right;
 }
diff --git a/src/views/Operations/RebootBmc/RebootBmc.vue b/src/views/Operations/RebootBmc/RebootBmc.vue
index fe575489c..e56e968f7 100644
--- a/src/views/Operations/RebootBmc/RebootBmc.vue
+++ b/src/views/Operations/RebootBmc/RebootBmc.vue
@@ -11,8 +11,8 @@
                   {{ $t('pageRebootBmc.lastReboot') }}
                 </dt>
                 <dd v-if="lastBmcRebootTime">
-                  {{ lastBmcRebootTime | formatDate }}
-                  {{ lastBmcRebootTime | formatTime }}
+                  {{ lastBmcRebootTime }}
+                  {{ lastBmcRebootTime }}
                 </dd>
                 <dd v-else>--</dd>
               </dl>
@@ -81,4 +81,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+</style>
diff --git a/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue b/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue
index ca81385e4..8b4cd2222 100644
--- a/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue
+++ b/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue
@@ -86,7 +86,7 @@ export default {
   mounted() {
     this.openTerminal();
   },
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener('resize', this.resizeConsoleWindow);
     this.closeTerminal();
   },
@@ -161,6 +161,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 @import '~xterm/css/xterm.css';
 
 #terminal {
diff --git a/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue b/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
index 281bbef46..4e26ee10d 100644
--- a/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
+++ b/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
@@ -44,8 +44,8 @@
                   v-if="lastPowerOperationTime"
                   data-test-id="powerServerOps-text-lastPowerOp"
                 >
-                  {{ lastPowerOperationTime | formatDate }}
-                  {{ lastPowerOperationTime | formatTime }}
+                  {{ lastPowerOperationTime }}
+                  {{ lastPowerOperationTime }}
                 </dd>
                 <dd v-else>--</dd>
               </dl>
diff --git a/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue b/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue
index b0bcfb2bf..61e20507a 100644
--- a/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue
+++ b/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue
@@ -70,8 +70,9 @@
 </template>
 
 <script>
-import { required } from 'vuelidate/lib/validators';
+import { required } from '@vuelidate/validators';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   mixins: [VuelidateMixin],
@@ -85,6 +86,11 @@ export default {
       },
     },
   },
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       form: {
diff --git a/src/views/Overview/OverviewCard.vue b/src/views/Overview/OverviewCard.vue
index 4fc0a031f..aa5697d67 100644
--- a/src/views/Overview/OverviewCard.vue
+++ b/src/views/Overview/OverviewCard.vue
@@ -71,6 +71,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 a {
   vertical-align: middle;
   font-size: 14px;
diff --git a/src/views/Overview/OverviewEvents.vue b/src/views/Overview/OverviewEvents.vue
index 73853bb59..4d85dbd6a 100644
--- a/src/views/Overview/OverviewEvents.vue
+++ b/src/views/Overview/OverviewEvents.vue
@@ -85,6 +85,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .status-icon {
   vertical-align: text-top;
 }
diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue
index bc579b034..2ab76541f 100644
--- a/src/views/Overview/OverviewQuickLinks.vue
+++ b/src/views/Overview/OverviewQuickLinks.vue
@@ -5,7 +5,7 @@
         <dl>
           <dt>{{ $t('pageOverview.bmcTime') }}</dt>
           <dd v-if="bmcTime" data-test-id="overviewQuickLinks-text-bmcTime">
-            {{ bmcTime | formatDate }} {{ bmcTime | formatTime }}
+            {{ bmcTime }} {{ bmcTime }}
           </dd>
           <dd v-else>--</dd>
         </dl>
@@ -49,6 +49,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 dd,
 dl {
   margin: 0;
diff --git a/src/views/ProfileSettings/ProfileSettings.vue b/src/views/ProfileSettings/ProfileSettings.vue
index 5d84ccef2..aa325745c 100644
--- a/src/views/ProfileSettings/ProfileSettings.vue
+++ b/src/views/ProfileSettings/ProfileSettings.vue
@@ -145,12 +145,13 @@
 <script>
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
-import { maxLength, minLength, sameAs } from 'vuelidate/lib/validators';
+import { maxLength, minLength, sameAs } from '@vuelidate/validators';
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 import LocalTimezoneLabelMixin from '@/components/Mixins/LocalTimezoneLabelMixin';
 import PageTitle from '@/components/Global/PageTitle';
 import PageSection from '@/components/Global/PageSection';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   name: 'ProfileSettings',
@@ -161,6 +162,11 @@ export default {
     LoadingBarMixin,
     VuelidateMixin,
   ],
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       form: {
diff --git a/src/views/ResourceManagement/Power.vue b/src/views/ResourceManagement/Power.vue
index cc0cc993b..8a9503fdc 100644
--- a/src/views/ResourceManagement/Power.vue
+++ b/src/views/ResourceManagement/Power.vue
@@ -87,8 +87,10 @@
 import PageTitle from '@/components/Global/PageTitle';
 import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
+
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import { requiredIf, between } from 'vuelidate/lib/validators';
+import { requiredIf, between } from '@vuelidate/validators';
 import { mapGetters } from 'vuex';
 
 export default {
@@ -99,6 +101,11 @@ export default {
     this.hideLoader();
     next();
   },
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       loading,
diff --git a/src/views/SecurityAndAccess/Certificates/Certificates.vue b/src/views/SecurityAndAccess/Certificates/Certificates.vue
index 35e4b8192..bceab5d25 100644
--- a/src/views/SecurityAndAccess/Certificates/Certificates.vue
+++ b/src/views/SecurityAndAccess/Certificates/Certificates.vue
@@ -63,7 +63,7 @@
           :empty-text="$t('global.table.emptyMessage')"
         >
           <template #cell(validFrom)="{ value }">
-            {{ value | formatDate }}
+            {{ value }}
           </template>
 
           <template #cell(validUntil)="{ value }">
@@ -71,7 +71,7 @@
               v-if="getDaysUntilExpired(value) < 31"
               :status="getIconStatus(value)"
             />
-            {{ value | formatDate }}
+            {{ value }}
           </template>
 
           <template #cell(actions)="{ value, item }">
diff --git a/src/views/SecurityAndAccess/Certificates/CsrCountryCodes.js b/src/views/SecurityAndAccess/Certificates/CsrCountryCodes.js
index a2d700073..8e8b213fc 100644
--- a/src/views/SecurityAndAccess/Certificates/CsrCountryCodes.js
+++ b/src/views/SecurityAndAccess/Certificates/CsrCountryCodes.js
@@ -1,5 +1,7 @@
-import i18n from '@/i18n';
+//import i18n from '@/i18n';
 
+export const COUNTRY_LIST = [];
+/*
 export const COUNTRY_LIST = [
   { name: 'Afghanistan', code: 'AF', label: i18n.t('countries.AF') },
   { name: 'Albania', code: 'AL', label: i18n.t('countries.AL') },
@@ -342,4 +344,4 @@ export const COUNTRY_LIST = [
   { 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') },
-];
+];*/
diff --git a/src/views/SecurityAndAccess/Certificates/ModalGenerateCsr.vue b/src/views/SecurityAndAccess/Certificates/ModalGenerateCsr.vue
index 9f60d2ba2..03ab8f4ac 100644
--- a/src/views/SecurityAndAccess/Certificates/ModalGenerateCsr.vue
+++ b/src/views/SecurityAndAccess/Certificates/ModalGenerateCsr.vue
@@ -363,16 +363,22 @@
 import IconAdd from '@carbon/icons-vue/es/add--alt/20';
 import IconCheckmark from '@carbon/icons-vue/es/checkmark/20';
 
-import { required, requiredIf } from 'vuelidate/lib/validators';
+import { required, requiredIf } from '@vuelidate/validators';
 
 import { COUNTRY_LIST } from './CsrCountryCodes';
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   name: 'ModalGenerateCsr',
   components: { IconAdd, IconCheckmark },
   mixins: [BVToastMixin, VuelidateMixin],
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       form: {
diff --git a/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue b/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue
index f4db7a26f..60170f1bb 100644
--- a/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue
+++ b/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue
@@ -69,8 +69,9 @@
 </template>
 
 <script>
-import { required, requiredIf } from 'vuelidate/lib/validators';
+import { required, requiredIf } from '@vuelidate/validators';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
 
 import FormFile from '@/components/Global/FormFile';
 
@@ -90,6 +91,11 @@ export default {
       },
     },
   },
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       form: {
diff --git a/src/views/SecurityAndAccess/Ldap/Ldap.vue b/src/views/SecurityAndAccess/Ldap/Ldap.vue
index a5ee47567..28d2b1cb9 100644
--- a/src/views/SecurityAndAccess/Ldap/Ldap.vue
+++ b/src/views/SecurityAndAccess/Ldap/Ldap.vue
@@ -52,12 +52,12 @@
                 <dl>
                   <dt>{{ $t('pageLdap.form.caCertificateValidUntil') }}</dt>
                   <dd v-if="caCertificateExpiration">
-                    {{ caCertificateExpiration | formatDate }}
+                    {{ caCertificateExpiration }}
                   </dd>
                   <dd v-else>--</dd>
                   <dt>{{ $t('pageLdap.form.ldapCertificateValidUntil') }}</dt>
                   <dd v-if="ldapCertificateExpiration">
-                    {{ ldapCertificateExpiration | formatDate }}
+                    {{ ldapCertificateExpiration }}
                   </dd>
                   <dd v-else>--</dd>
                 </dl>
@@ -232,7 +232,8 @@
 <script>
 import { mapGetters } from 'vuex';
 import { find } from 'lodash';
-import { requiredIf } from 'vuelidate/lib/validators';
+import { requiredIf } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
 
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin';
@@ -257,6 +258,11 @@ export default {
     this.hideLoader();
     next();
   },
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       form: {
diff --git a/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue b/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue
index beacf5750..9b50abdc1 100644
--- a/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue
+++ b/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue
@@ -80,8 +80,9 @@
 </template>
 
 <script>
-import { required, requiredIf } from 'vuelidate/lib/validators';
+import { required, requiredIf } from '@vuelidate/validators';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   mixins: [VuelidateMixin],
@@ -98,6 +99,11 @@ export default {
       },
     },
   },
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       form: {
diff --git a/src/views/SecurityAndAccess/Policies/Policies.vue b/src/views/SecurityAndAccess/Policies/Policies.vue
index 3ebfee4ea..fb5217504 100644
--- a/src/views/SecurityAndAccess/Policies/Policies.vue
+++ b/src/views/SecurityAndAccess/Policies/Policies.vue
@@ -254,6 +254,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .setting-section {
   border-bottom: 1px solid gray('300');
 }
diff --git a/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue b/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue
index 0f05123c4..8932eb56b 100644
--- a/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue
+++ b/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue
@@ -123,12 +123,14 @@
 
 <script>
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
+
 import {
   required,
   requiredIf,
   minValue,
   maxValue,
-} from 'vuelidate/lib/validators';
+} from '@vuelidate/validators';
 
 export default {
   mixins: [VuelidateMixin],
@@ -138,6 +140,11 @@ export default {
       required: true,
     },
   },
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       form: {
diff --git a/src/views/SecurityAndAccess/UserManagement/ModalUser.vue b/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
index 5ffb2979f..dca973634 100644
--- a/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
+++ b/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
@@ -27,7 +27,6 @@
               v-model="form.manualUnlock"
               data-test-id="userManagement-input-manualUnlock"
               type="hidden"
-              value="false"
             />
             <b-button
               variant="primary"
@@ -232,8 +231,10 @@ import {
   sameAs,
   helpers,
   requiredIf,
-} from 'vuelidate/lib/validators';
+} from '@vuelidate/validators';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
+
 import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
 import Alert from '@/components/Global/Alert';
 
@@ -250,6 +251,11 @@ export default {
       required: true,
     },
   },
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       originalUsername: '',
diff --git a/src/views/SecurityAndAccess/UserManagement/UserManagement.vue b/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
index 944ea2581..43f3a404b 100644
--- a/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
+++ b/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
@@ -422,6 +422,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .btn.collapsed {
   svg {
     transform: rotate(180deg);
diff --git a/src/views/Settings/DateTime/DateTime.vue b/src/views/Settings/DateTime/DateTime.vue
index a3fec3628..00d7b45a6 100644
--- a/src/views/Settings/DateTime/DateTime.vue
+++ b/src/views/Settings/DateTime/DateTime.vue
@@ -18,14 +18,14 @@
         <b-col lg="3">
           <dl>
             <dt>{{ $t('pageDateTime.form.date') }}</dt>
-            <dd v-if="bmcTime">{{ bmcTime | formatDate }}</dd>
+            <dd v-if="bmcTime">{{ bmcTime }}</dd>
             <dd v-else>--</dd>
           </dl>
         </b-col>
         <b-col lg="3">
           <dl>
             <dt>{{ $t('pageDateTime.form.time.label') }}</dt>
-            <dd v-if="bmcTime">{{ bmcTime | formatTime }}</dd>
+            <dd v-if="bmcTime">{{ bmcTime }}</dd>
             <dd v-else>--</dd>
           </dl>
         </b-col>
@@ -206,9 +206,10 @@ import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
 import LocalTimezoneLabelMixin from '@/components/Mixins/LocalTimezoneLabelMixin';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
 
 import { mapState } from 'vuex';
-import { requiredIf, helpers } from 'vuelidate/lib/validators';
+import { requiredIf, helpers } from '@vuelidate/validators';
 
 const isoDateRegex = /([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/;
 const isoTimeRegex = /^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/;
@@ -226,6 +227,11 @@ export default {
     this.hideLoader();
     next();
   },
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       locale: this.$store.getters['global/languagePreference'],
diff --git a/src/views/Settings/Network/ModalDns.vue b/src/views/Settings/Network/ModalDns.vue
index 7f1271730..8fe371ee1 100644
--- a/src/views/Settings/Network/ModalDns.vue
+++ b/src/views/Settings/Network/ModalDns.vue
@@ -44,10 +44,17 @@
 
 <script>
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import { ipAddress, required } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+
+import { ipAddress, required } from '@vuelidate/validators';
 
 export default {
   mixins: [VuelidateMixin],
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       form: {
diff --git a/src/views/Settings/Network/ModalHostname.vue b/src/views/Settings/Network/ModalHostname.vue
index f3221ec7b..1b3bab1d0 100644
--- a/src/views/Settings/Network/ModalHostname.vue
+++ b/src/views/Settings/Network/ModalHostname.vue
@@ -49,7 +49,9 @@
 
 <script>
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import { required, helpers } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+
+import { required, helpers } from '@vuelidate/validators';
 
 const validateHostname = helpers.regex('validateHostname', /^\S{0,64}$/);
 
@@ -61,6 +63,11 @@ export default {
       default: '',
     },
   },
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       form: {
diff --git a/src/views/Settings/Network/ModalIpv4.vue b/src/views/Settings/Network/ModalIpv4.vue
index dcf4a5790..2c3d9e889 100644
--- a/src/views/Settings/Network/ModalIpv4.vue
+++ b/src/views/Settings/Network/ModalIpv4.vue
@@ -90,7 +90,9 @@
 
 <script>
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import { ipAddress, required } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+
+import { ipAddress, required } from '@vuelidate/validators';
 
 export default {
   mixins: [VuelidateMixin],
@@ -100,6 +102,11 @@ export default {
       default: '',
     },
   },
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       form: {
diff --git a/src/views/Settings/Network/ModalMacAddress.vue b/src/views/Settings/Network/ModalMacAddress.vue
index d563f4ce6..307eb8dfa 100644
--- a/src/views/Settings/Network/ModalMacAddress.vue
+++ b/src/views/Settings/Network/ModalMacAddress.vue
@@ -50,7 +50,9 @@
 
 <script>
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import { macAddress, required } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+
+import { macAddress, required } from '@vuelidate/validators';
 
 export default {
   mixins: [VuelidateMixin],
@@ -60,6 +62,11 @@ export default {
       default: '',
     },
   },
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       form: {
diff --git a/src/views/Settings/PowerRestorePolicy/PowerRestorePolicy.vue b/src/views/Settings/PowerRestorePolicy/PowerRestorePolicy.vue
index 11870a87a..dfa4865dd 100644
--- a/src/views/Settings/PowerRestorePolicy/PowerRestorePolicy.vue
+++ b/src/views/Settings/PowerRestorePolicy/PowerRestorePolicy.vue
@@ -25,6 +25,8 @@
 import PageTitle from '@/components/Global/PageTitle';
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
+
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 
 export default {
@@ -35,6 +37,11 @@ export default {
     this.hideLoader();
     next();
   },
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       policyValue: null,
diff --git a/src/views/Settings/SnmpAlerts/ModalAddDestination.vue b/src/views/Settings/SnmpAlerts/ModalAddDestination.vue
index 9637652bc..f52acd726 100644
--- a/src/views/Settings/SnmpAlerts/ModalAddDestination.vue
+++ b/src/views/Settings/SnmpAlerts/ModalAddDestination.vue
@@ -82,16 +82,17 @@
 </template>
 
 <script>
-import {
-  required,
-  ipAddress,
-  minValue,
-  maxValue,
-} from 'vuelidate/lib/validators';
+import { required, ipAddress, minValue, maxValue } from '@vuelidate/validators';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   mixins: [VuelidateMixin],
+  setup() {
+    return {
+      v$: useVuelidate(),
+    };
+  },
   data() {
     return {
       form: {