refactor: Migrate Vue 2 application to Vue 3 with Bootstrap-Vue-Next and Vite build system

[berntpopp]

Summary

Migrate the entire Vue 2.7.8 frontend application to Vue 3 with modern tooling to resolve Node.js 22 compatibility issues and improve development experience.

Details

• Upgrade Vue 2.7.8 → Vue 3.4+
• Replace Vue CLI with Vite build system
• Migrate Bootstrap-Vue → Bootstrap-Vue-Next
• Update Vue Router v3 → v4
• Modernize component syntax and lifecycle hooks
• Fix Node.js 22 compatibility issues
• Improve build performance and developer experience

Migration Plan

Phase 1: Build System Migration (2-3 hours)

• Replace Vue CLI with Vite
• Update package.json and remove deprecated packages
• Create vite.config.js configuration

Phase 2: Core Framework Upgrade (4-6 hours)

• Vue Core Migration (2.7.8 → 3.4+)
• Vue Router Migration (v3 → v4)
• State Management updates (Pinia)
• Meta Management (vue-meta → @vueuse/head)

Phase 3: UI Framework Migration (4-6 hours)

• Install Bootstrap-Vue-Next
• Update component imports
• Test critical components (Navbar, Tables, Forms)

Phase 4: Application Code Updates (6-8 hours)

• Rewrite main.js for Vue 3
• Update component syntax (v-model, events, slots)
• Upgrade form validation (VeeValidate v4)
• Update lifecycle hooks

Phase 5: Dependencies & Utilities (2-3 hours)

• Update third-party libraries
• Fix PWA configuration
• Update build & deployment scripts

Phase 6: Testing & Quality Assurance (3-4 hours)

• Test all 33 Vue components
• Verify functionality (auth, visualization, forms)
• Performance and cross-browser testing

Acceptance Criteria

• Application runs on Vue 3 + Vite
• All 33 components render correctly
• Authentication and routing functional
• Data visualizations work (D3.js components)
• Forms and validation operational
• Build performance improved
• No console errors or warnings
• Cross-browser compatibility maintained

Technical Scope

• 33 Vue components to migrate
• Vue Router configuration updates
• Pinia state management updates
• VeeValidate form validation upgrade
• PWA configuration updates
• Build system replacement (Vue CLI → Vite)

Key Files to Update

• package.json - Dependencies and scripts
• src/main.js - Application entry point
• src/router/index.js - Router configuration
• src/components/Navbar.vue - Navigation component
• vue.config.js → vite.config.js - Build configuration
• All .vue files - Template and script syntax

Risk Mitigation

• Feature flags for gradual rollout
• Keep Vue 2 branch as backup
• Test bootstrap-vue-next components early
• Progressive testing of critical paths

Estimated Effort

22-32 hours (4-5 days focused development)

Current Issues

• Node.js 22 compatibility problems with legacy packages
• vue-cli-service: not found errors during development
• Deprecated package warnings and security vulnerabilities