Migrate to Bootstrap 5 and remove Vue compat plugin
Complete migration from Bootstrap 4 (bootstrap-vue) to Bootstrap 5
(bootstrap-vue-next) and remove the @vue/compat plugin to finalize
the Vue 3 migration.
Bundle size impact:
- Before (Bootstrap 4 + bootstrap-vue): 535 KiB gzipped
- After (Bootstrap 5 + bootstrap-vue-next): 511 KiB gzipped
- Reduction: 24 KiB (4.5% smaller)
Package updates:
- Update bootstrap 4.6.2 -> 5.3.8
- Update bootstrap-vue 2.23.1 -> bootstrap-vue-next 0.40.8
- Remove @vue/compat plugin
- Update vue 3.4.29 -> 3.5.24 and related packages
- Add mitt 3.0.1 for global event bus
- Add vue-demi 0.14.10 for library compatibility
Bootstrap 5 CSS updates:
- Replace directional classes: ml/mr/pl/pr -> ms/me/ps/pe
- Replace text-left/right -> text-start/end
- Replace sr-only -> visually-hidden / visually-hidden-focusable
- Update media breakpoint xs -> sm (Bootstrap 5 removed xs)
- Update color functions: gray("700") -> $gray-700
- Add form-switch border-radius for curved toggles
- Update alert, table, toast, form, and button styles
Bootstrap-Vue-Next API changes:
- Use createBootstrap() for plugin registration
- Update modal footer slots: #modal-footer -> #footer
- Fix form select events: @change -> @update:model-value
- Add v-model bindings to modals instead of manual show()/hide()
- Update toast system with custom plugin wrapping useToast()
- Register components and directives explicitly
Vue 3 specific updates:
- Replace $root.$emit with mitt event bus (eventBus.js)
- Update render function from h(App) to createApp(App)
- Add emits option to components
- Use h() instead of $createElement in mixins
- Add Vue 3 compile-time feature flags with documentation
- Update event listeners: $on/$off to eventBus methods
- Add beforeUnmount cleanup for event listeners
New components and significant additions:
- src/plugins/toast.js - Custom toast plugin wrapping useToast() for
Options API compatibility
- src/components/Global/ConfirmModal.vue - Global confirmation dialog
shim to replace Bootstrap 4's removed bvModal.msgBoxConfirm
- src/eventBus.js - mitt-based event bus with Vue 2-compatible API
- Navigation state preservation on page refresh implemented
Critical fixes:
- Add global API interceptor to strip Vue reactivity from payloads
- Preserve binary data (File, Blob, FormData) in API requests
- Fix Generate CSR modal v-model binding for proper open/close
- Remove debug logging and fix jest configuration
- Fix responsive text visibility in AppHeader
- Update BVTableSelectableMixin for proper row selection
- Fix BVToastMixin VNode rendering for Vue 3
Vue 3 modal fixes (lazy-loaded components):
- Add v-model support to network modals (ModalIpv4, ModalIpv6, ModalDns,
ModalHostname, ModalMacAddress, ModalDefaultGateway) by adding
modelValue prop, watcher on modelValue that triggers show(), and
update:modelValue emit in resetForm
- Remove lazy loading from TableIpv4, TableIpv6, TableDns to ensure
modal component refs are available when v-model triggers
- Fix modal title accessibility by adding title prop to modals
(ModalAddDestination, ModalUser, ModalAddRoleGroup, etc.)
i18n fixes (computed properties):
- Fix computed properties using i18n translations in ModalAddRoleGroup,
ModalUser, and ModalUploadCertificate
- Move useI18n() call from data() to setup() and return i18n object
- Use i18n.t() instead of $t in computed properties and templates
- Prevents "this.$t is not a function" and "_ctx.$t is not a function"
errors in Vue 3
Toast notification fixes:
- Fix toast progress bar visibility by setting progressProps to
undefined (documented way to opt-out) instead of false
- Change modelValue prop to interval for auto-dismiss timing
- Remove temporary CSS display:none hack from _toasts.scss
Network settings fixes:
- Fix checkbox @change event sending Vue reactive proxy object instead
of boolean by casting with !! operator in changeDomainNameState and
related methods in NetworkGlobalSettings.vue
- Ensures API receives plain boolean values in PATCH requests
Navigation fixes:
- Fix nav-link styling for navigation items without children by
replacing b-nav-item with router-link in AppNavigation.vue
- Prevents blue font color from .nav-link CSS class
Configuration updates:
- Remove vue-compat webpack configuration
- Add Vue 3 feature flags (__VUE_OPTIONS_API__, etc.)
- Add .cursor to .gitignore
Accessibility improvements:
- Add autocomplete attributes to password and credential inputs
- Add modal title props for screen reader support
Build completes successfully and UI behavior matches pre-migration.
Extracted features (to be submitted in follow-up PRs):
The following features were removed from this migration PR to keep it
focused on the Bootstrap 5 upgrade. They will be submitted separately:
1. UnresponsiveModal - Server connectivity watchdog with auto-retry
2. Auth token persistence - sessionStorage support for X-Auth-Token
3. Hardware store error handling - try/catch, dynamic discovery
4. Login page connecting indicator - Backend polling with spinner
5. Test updates - Jest setup and snapshot updates for
Bootstrap-Vue-Next
6. Documentation updates - Vue 3 and Vue I18n v9+ API documentation
7. Enhanced ConfirmModal - Feature-rich confirmation dialog with
custom actions
Change-Id: Ib76a58f324b3c926cf536e6e4626e4271639de38
Signed-off-by: Jason Westover <jwestover@nvidia.com>
diff --git a/src/main.js b/src/main.js
index 9637de9..91dc8ec 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,99 +12,154 @@
//dotenv customizations.
import store from './store';
import eventBus from './eventBus';
+import { ToastPlugin } from './plugins/toast';
import {
- BootstrapVue,
- AlertPlugin,
- BadgePlugin,
- ButtonPlugin,
- BVConfigPlugin,
- CardPlugin,
- CollapsePlugin,
- DropdownPlugin,
- FormPlugin,
- FormCheckboxPlugin,
- FormDatepickerPlugin,
- FormFilePlugin,
- FormGroupPlugin,
- FormInputPlugin,
- FormRadioPlugin,
- FormSelectPlugin,
- FormTagsPlugin,
- InputGroupPlugin,
- LayoutPlugin,
- LinkPlugin,
- ListGroupPlugin,
- ModalPlugin,
- NavbarPlugin,
- NavPlugin,
- PaginationPlugin,
- ProgressPlugin,
- TablePlugin,
- TabsPlugin,
- ToastPlugin,
- TooltipPlugin,
-} from 'bootstrap-vue';
+ BButton,
+ BContainer,
+ BForm,
+ BFormGroup,
+ BFormInput,
+ BFormCheckboxGroup,
+ BInputGroup,
+ BInputGroupText,
+ BFormSelect,
+ BFormSelectOption,
+ BFormFile,
+ BFormCheckbox,
+ BFormRadioGroup,
+ BFormRadio,
+ BFormText,
+ BFormTextarea,
+ BFormTags,
+ BFormInvalidFeedback,
+ BTable,
+ BToast,
+ BModal,
+ BCloseButton,
+ BAlert,
+ BCard,
+ BCardHeader,
+ BCardBody,
+ BCardFooter,
+ BCardGroup,
+ BRow,
+ BCol,
+ BBadge,
+ BSpinner,
+ BDropdown,
+ BDropdownItem,
+ BNav,
+ BNavbar,
+ BNavbarBrand,
+ BNavbarNav,
+ BNavItem,
+ BNavbarToggle,
+ BCollapse,
+ BPagination,
+ BTooltip,
+ BPopover,
+ BProgress,
+ BProgressBar,
+ BOverlay,
+ BListGroup,
+ BListGroupItem,
+ BTabs,
+ BTab,
+ BLink,
+ BOrchestrator,
+ createBootstrap,
+ vBToggle,
+ vBTooltip,
+ vBPopover,
+ vBModal,
+} from 'bootstrap-vue-next';
-const app = createApp({
- router,
- store,
- render: (h) => h(App),
-});
+const app = createApp(App);
+
+// Note: We register only the components/directives we need
+
+// Use createBootstrap for all bootstrap-vue-next plugins in 0.40.7+
+app.use(createBootstrap());
+
+app.component('BButton', BButton);
+app.component('BBtn', BButton);
+app.component('BContainer', BContainer);
+app.component('BForm', BForm);
+app.component('BFormGroup', BFormGroup);
+app.component('BFormInput', BFormInput);
+app.component('BFormCheckboxGroup', BFormCheckboxGroup);
+app.component('BInputGroup', BInputGroup);
+app.component('BInputGroupText', BInputGroupText);
+app.component('BFormSelect', BFormSelect);
+app.component('BFormSelectOption', BFormSelectOption);
+app.component('BFormFile', BFormFile);
+app.component('BFormCheckbox', BFormCheckbox);
+app.component('BFormRadioGroup', BFormRadioGroup);
+app.component('BFormRadio', BFormRadio);
+app.component('BFormText', BFormText);
+app.component('BFormTextarea', BFormTextarea);
+app.component('BFormTags', BFormTags);
+app.component('BFormInvalidFeedback', BFormInvalidFeedback);
+app.component('BTable', BTable);
+app.component('BToast', BToast);
+app.component('BModal', BModal);
+app.component('BCloseButton', BCloseButton);
+app.component('BAlert', BAlert);
+app.component('BCard', BCard);
+app.component('BCardHeader', BCardHeader);
+app.component('BCardBody', BCardBody);
+app.component('BCardFooter', BCardFooter);
+app.component('BCardGroup', BCardGroup);
+app.component('BRow', BRow);
+app.component('BCol', BCol);
+app.component('BBadge', BBadge);
+app.component('BSpinner', BSpinner);
+app.component('BDropdown', BDropdown);
+app.component('BDropdownItem', BDropdownItem);
+app.component('BNav', BNav);
+app.component('BNavbar', BNavbar);
+app.component('BNavbarBrand', BNavbarBrand);
+app.component('BNavbarNav', BNavbarNav);
+app.component('BNavItem', BNavItem);
+app.component('BNavbarToggle', BNavbarToggle);
+app.component('BCollapse', BCollapse);
+app.component('BPagination', BPagination);
+app.component('BTooltip', BTooltip);
+app.component('BPopover', BPopover);
+app.component('BProgress', BProgress);
+app.component('BProgressBar', BProgressBar);
+app.component('BOverlay', BOverlay);
+app.component('BListGroup', BListGroup);
+app.component('BListGroupItem', BListGroupItem);
+app.component('BTabs', BTabs);
+app.component('BTab', BTab);
+app.component('BLink', BLink);
+app.component('BOrchestrator', BOrchestrator);
+
+// Register BootstrapVue Next directives used in templates
+app.directive('b-toggle', vBToggle);
+app.directive('b-tooltip', vBTooltip);
+app.directive('b-popover', vBPopover);
+app.directive('b-modal', vBModal);
+
app.use(i18n);
-
app.use(router);
app.use(store);
-
-// Plugins
-app.use(BootstrapVue);
-app.use(AlertPlugin);
-app.use(BadgePlugin);
-app.use(ButtonPlugin);
-app.use(BVConfigPlugin, {
- BFormText: { textVariant: 'secondary' },
- BTable: {
- headVariant: 'light',
- footVariant: 'light',
- },
- BFormTags: {
- tagVariant: 'primary',
- addButtonVariant: 'link-primary',
- },
- BBadge: {
- variant: 'primary',
- },
-});
-
-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;
+app.config.globalProperties.$eventBus = eventBus;
+app.config.globalProperties.$confirm = (messageOrOptions) => {
+ return new Promise((resolve) => {
+ eventBus.$emit('confirm:open', {
+ ...(typeof messageOrOptions === 'string'
+ ? { message: messageOrOptions }
+ : messageOrOptions),
+ resolve,
+ });
+ });
+};
+
//Filters
const filter = {
formatDate(value) {
@@ -146,3 +201,5 @@
},
};
app.config.globalProperties.$filters = filter;
+
+app.mount('#app');