From dc27814d77f412f0c3e789dc6f6192e442b5742a Mon Sep 17 00:00:00 2001 From: Tim Bradgate Date: Sun, 31 Aug 2025 12:40:13 +0100 Subject: [PATCH 01/14] feat: Implement Phase 3A - PrimeVue Foundation & Setup MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Install PrimeVue ecosystem (primevue, @primevue/themes, primeicons) - Configure PrimeVue with Aura theme in main.ts - Update App.vue to use PrimeVue Menubar component - Replace custom CSS with PrimeVue CSS variables - Add comprehensive MIGRATION-MAPPING.md documentation - Preserve all existing WebSocket and authentication functionality - Maintain ESLint compliance and TypeScript type checking - Verify successful build and development environment Sets foundation for Phase 3B component migration. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- client-vue3/MIGRATION-MAPPING.md | 305 +++++++++++++++++++++++++++++++ client-vue3/package-lock.json | 106 +++++++++++ client-vue3/package.json | 3 + client-vue3/src/App.vue | 120 +++++++----- client-vue3/src/main.ts | 17 ++ 5 files changed, 504 insertions(+), 47 deletions(-) create mode 100644 client-vue3/MIGRATION-MAPPING.md diff --git a/client-vue3/MIGRATION-MAPPING.md b/client-vue3/MIGRATION-MAPPING.md new file mode 100644 index 00000000..eb93f76f --- /dev/null +++ b/client-vue3/MIGRATION-MAPPING.md @@ -0,0 +1,305 @@ +# Vue 3 Migration: BootstrapVue to PrimeVue Component Mapping + +This document provides comprehensive mapping from BootstrapVue components to PrimeVue equivalents for the DigiScript Vue 3 migration. + +## Table of Contents +- [Layout & Navigation](#layout--navigation) +- [Form Controls](#form-controls) +- [Data Display](#data-display) +- [Feedback](#feedback) +- [Typography & Content](#typography--content) +- [Utilities](#utilities) +- [Migration Patterns](#migration-patterns) + +## Layout & Navigation + +### Navigation Components +| BootstrapVue | PrimeVue | Notes | +|--------------|----------|-------| +| `` | `` | Use template slots `#start` and `#end` | +| `` | `` or `` | Context-dependent | +| `` | Menu model objects | Define in component data | +| `` | `` | Similar API | +| `` | `` | Similar functionality | + +### Layout Components +| BootstrapVue | PrimeVue | Notes | +|--------------|----------|-------| +| `` | Native CSS or `
` | Use CSS classes | +| `` | Native CSS Grid/Flexbox | Use CSS classes | +| `` | Native CSS Grid/Flexbox | Use CSS classes | +| `` | `` | Similar structure | +| `` | `