Skip to content

Upgrade dashboard to Vue 3 and vue-router 5 - #156

Merged
ato merged 2 commits into
masterfrom
upgrade-vue3
Oct 13, 2026
Merged

ato merged 2 commits into
masterfrom
upgrade-vue3

Conversation

@ato

@ato ato commented Oct 13, 2026 •

Copy link
Copy Markdown
Member

Vue 2 reached end of life at the end of 2023. This upgrades the dashboard from Vue 2.0.1 to 3.5.43 and vue-router from 2.0.0 to 5.0.7.

Changes

  • Dependencies: vue-router now comes from a webjar instead of the vendored copy in resources/outbackcdx/lib. Both webjars have their transitive webjars excluded since we only serve the prebuilt global builds. The shaded jar grows by under 1 MB.
  • App setup: switched to createApp/createRouter. Hash history is kept, so existing #/... URLs and bookmarks still work.
  • Components: date-range and period are registered on the app and use modelValue/update:modelValue for v-model.
  • Link highlighting: vue-router 4+ only marks a link active for parent routes, not path prefixes. The collection links and the Access Rules tab now set active explicitly to keep the old highlighting.
  • Bug fix (separate commit): picking only one end of a date range sent the string "Invalid date" for the other end. It now sends null, which the server treats as open-ended.

Testing

  • mvn test passes.
  • Ran the dashboard with EXPERIMENTAL_ACCESS_CONTROL=1 and tested query, the rule list (search, sort, pinned icon), the rule editor (date ranges, period, policy; create, edit, delete) and the policy list. No console errors.
  • Not tested: Keycloak login. The only related change is that initKeycloak now receives the app instance via this.

ato added 2 commits October 13, 2026 11:59
Vue 2 reached end of life in 2023. The dashboard still uses in-DOM and
x-template templates with no build step, so we serve the global builds
that include the template compiler.

- Switch to createApp/createRouter, keeping hash history so existing
  URLs and bookmarks still work
- Register date-range and period on the app instead of globally, and
  move their v-model to modelValue/update:modelValue
- Replace the vendored vue-router 2.0.0 with a webjar, excluding the
  transitive webjars we don't serve
- Router 4+ only marks a link active for parent routes, so set the
  active class explicitly for the collection links and the Access
  Rules tab to keep the old highlighting
When only one end of a date range was picked, the other was formatted
from an empty picker as the string "Invalid date" and sent to the
server on save. Emit null for an unset date instead, which the server
treats as open-ended. Also check value.end rather than value.start
before setting the end picker's date.
@sonarqubecloud

Copy link
Copy Markdown

@ato
ato merged commit c91c01d into master Oct 13, 2026
6 checks passed
@ato
ato deleted the upgrade-vue3 branch October 13, 2026 03:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant