feat(build): migrate to Vue 3 + bootstrap-vue-next

[TimeToBuildBob]

Summary

Phase 1 of Vue 3 migration (requested in #772):

• Vue: 2.7 → 3.5
• Vue Router: 3.x → 4.x (createRouter, createWebHashHistory)
• Bootstrap: 4.6 → 5.3
• bootstrap-vue → bootstrap-vue-next (0.25)
• Build: Remove all @vue/cli-* / webpack deps, keep Vite only
• FullCalendar: @fullcalendar/vue → @fullcalendar/vue3 (v6)
• vue-chartjs: 4.x → 5.x (+ chart.js 3 → 4)
• @vue/test-utils: 1.x → 2.x

Key changes

• src/main.js: new Vue(...).$mount() → createApp(App).mount()
• src/route.js: new VueRouter() → createRouter()
• src/util/filters.js: Vue 2 Vue.filter() → named function exports
• Stub plugin for Vue 2-only packages (vue-awesome, vue-color, vue-datetime, vue-d3-sunburst) — renders placeholder components until proper Vue 3 alternatives are added
• Components using Vue.extend() → defineComponent()
• Header/Footer renamed to AwHeader/AwFooter (reserved HTML names in Vue 3)

Build status

Build succeeds: ✓ 2191 modules transformed, built in 26s

What's left (Phase 2+)

• Replace stub components with real Vue 3 alternatives (icons, color picker, datetime, sunburst)
• Migrate bootstrap-vue component names (<b-button>, etc.) to bootstrap-vue-next equivalents
• Replace {{ value | filterName }} template filter syntax
• Fix Sass deprecation warnings
• Replace vuedraggable@2 usage

Test plan

• Verify npm run build succeeds
• Test basic navigation in browser (router working)
• Check that Activity view loads data from aw-server
• Check no console errors on page load

---

Important

Migrate from Vue 2 to Vue 3, updating components, routing, and build tools, while stubbing Vue 2-only packages.

• Migration to Vue 3:
  • Update src/main.js to use createApp() instead of new Vue().
  • Replace Vue.filter() with named function exports in src/util/filters.js.
  • Use defineComponent() instead of Vue.extend() in components like QueryOptions.vue and SelectCategories.vue.
  • Stub vue-awesome, vue-color, vue-datetime, vue-d3-sunburst in vite.config.js.
• Library Updates:
  • Upgrade vue-router to 4.x and update src/route.js to use createRouter().
  • Replace @fullcalendar/vue with @fullcalendar/vue3 in Calendar.vue.
  • Upgrade vue-chartjs to 5.x in TimelineBarChart.vue.
• Build System:
  • Remove @vue/cli-* and webpack dependencies, use Vite exclusively.
  • Update package.json scripts to use Vite for serving and building.
  • Add vue2StubPlugin in vite.config.js to handle Vue 2-only packages.
• Component Changes:
  • Rename Header and Footer components to AwHeader and AwFooter.
  • Replace vue-awesome icons with IconPlaceholder.vue.
  • Register components asynchronously in src/main.js using defineAsyncComponent().
• Miscellaneous:
  • Update vite.config.js to handle CSP and auto-inject scripts.
  • Adjust routing in src/route.js for Vue Router 4.x syntax.
  • Update src/stores/index.js to use Pinia without PiniaVuePlugin.

^{This description was created by for 5500d9b. You can customize this summary. It will automatically update as commits are pushed.}

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed everything up to 5500d9b in 16 seconds. Click for details.

• Reviewed 729 lines of code in 14 files
• Skipped 1 files when reviewing.
• Skipped posting 0 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

Workflow ID: wflow_jGB2URIKIUFsDPmO

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[greptile-apps]

Greptile Summary

This PR successfully migrates the codebase from Vue 2 to Vue 3 as Phase 1 of the migration. The core Vue 3 APIs are properly adopted: createApp() replaces new Vue(), Vue Router 4 uses createRouter() with createWebHashHistory(), and components migrated from Vue.extend() to defineComponent().

Key accomplishments:

• Dependencies updated to Vue 3 ecosystem (Vue 3.5, Vue Router 4, Bootstrap 5.3, bootstrap-vue-next)
• Build system fully migrated from webpack/vue-cli to Vite
• Stub plugin created for Vue 2-only packages to allow build to proceed
• Component names fixed (Header/Footer → AwHeader/AwFooter) to avoid reserved names
• Global filters converted to exported functions

Issue found:

• app.config.globalProperties.$aw is set after app.mount() on line 170 of src/main.js, which could cause components to fail when accessing this.$aw during initialization

As documented in PR description, Phase 2 will:

• Replace stub components with real Vue 3 alternatives
• Migrate bootstrap-vue component usage
• Update template filter syntax in 13+ component files

Confidence Score: 3/5

• Safe to merge after fixing the $aw initialization order issue
• The migration is well-executed overall, but the logic error in src/main.js (setting $aw after mount) could cause runtime failures when components access it during initialization. Once fixed, this should work as intended for Phase 1.
• Pay close attention to src/main.js line 170 — must fix the $aw initialization order before merging

Important Files Changed

Filename	Overview
package.json	Dependencies updated from Vue 2 to Vue 3 ecosystem, webpack removed in favor of Vite
src/main.js	Migrated to Vue 3 createApp API, but $aw set after mount (should be before)
src/route.js	Correctly migrated to Vue Router 4 with createRouter and createWebHashHistory
src/util/filters.js	Filters converted from Vue 2 global filters to exported functions with clear documentation
vite.config.js	Added stub plugin for Vue 2-only packages, switched from @vitejs/plugin-vue2 to @vitejs/plugin-vue

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Vue 2 App] --> B[Create Vue 3 App]
    B --> C[createApp from vue]
    B --> D[createRouter from vue-router]
    B --> E[createBootstrap from bootstrap-vue-next]
    
    C --> F[Register Plugins]
    F --> G[app.use createBootstrap]
    F --> H[app.use router]
    F --> I[app.use pinia]
    
    F --> J[Set Global Properties]
    J --> K[PRODUCTION, COMMIT_HASH, $isAndroid]
    J --> L[**$aw should be here**]
    
    J --> M[Register Components]
    M --> N[defineAsyncComponent for all components]
    
    M --> O[app.mount #app]
    O --> P[**$aw currently set here - WRONG**]
    
    D --> Q[Vue Router 4 API]
    Q --> R[createWebHashHistory]
    Q --> S[Catch-all: :pathMatch.*.*]
    
    E --> T[Bootstrap 5 + bootstrap-vue-next]
    
    style P fill:#ff6b6b
    style L fill:#51cf66

Loading

_{Last reviewed commit: 5500d9b}

[greptile-apps]

_{15 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

$aw set after app.mount() — move before line 167

In Vue 3, global properties should be set before mounting. Components accessing this.$aw during setup/initialization may fail.

Suggested change

	app.mount('#app');
	// Set the $aw global property
	app.config.globalProperties.$aw = getClient();
	app.config.globalProperties.$aw = getClient();
	app.mount('#app');
	// Set the $aw global property