WebUI Vue

The Vue-based WebUI lives in webui-vue/ and is currently documented as a technical preview that exists in parallel with the classic PHP-based WebUI in webui/.

Coexistence model

The repository currently contains two different WebUI implementations:

  • webui/ for the classic PHP-based WebUI

  • webui-vue/ for the Vue-based technical preview

Documentation, packaging, and operational guidance should reflect that both variants currently coexist. Changes to the Vue WebUI should not implicitly assume that it has already replaced the classic WebUI everywhere.

Repository layout

The most relevant parts of the Vue WebUI are:

  • webui-vue/src/ for the application source

  • webui-vue/src/pages/ for page-level route components

  • webui-vue/src/components/ for reusable UI components

  • webui-vue/src/composables/ for shared page and data-loading logic

  • webui-vue/src/stores/ for Pinia stores

  • webui-vue/src/generated/ for generated version and translation data

  • webui-vue/tests/unit/ for unit tests

  • webui-vue/tests/e2e/ for Playwright-based end-to-end tests

Build and installation

The installable SPA bundle is generated from the repository root with:

cmake --build <builddir> --target bareos-webui-vue-build

The build logic is implemented in:

  • webui-vue/CMakeLists.txt

  • webui-vue/build-dist.cmake

The installed Apache configuration is generated from:

  • webui-vue/install/apache/bareos-webui-vue.conf.in

The SPA is installed below $CMAKE_INSTALL_FULL_DATAROOTDIR/bareos-webui-vue and exposed by Apache below /bareos-webui-vue.

Runtime architecture

Unlike the classic PHP WebUI, the Vue WebUI does not talk to the Director through PHP. Instead it uses bareos-webui-proxy for WebSocket-based communication.

The default Apache configuration:

  • serves the SPA from /bareos-webui-vue

  • rewrites SPA routes back to index.html

  • proxies /ws to bareos-webui-proxy on port 9104

Testing

Typical local validation commands are:

cd webui-vue && npm run build
cd webui-vue && npm run test:unit
ctest --test-dir cmake-build --output-on-failure -R '^webui-vue:'

The browser-based system tests use the shared WebUI Vue test setup under:

  • systemtests/tests/webui-vue-common/

Translations

The Vue WebUI currently reuses the legacy WebUI locale sources and generated catalog data.

Relevant files are:

  • webui-vue/scripts/generate-webui-i18n.mjs

  • webui-vue/src/generated/webui-locales.js

  • webui-vue/src/generated/webui-messages.js

  • webui/module/Application/language/

To regenerate the committed Vue translation catalog files, run:

cd webui-vue && npm run generate:i18n

Documentation guidance

When documenting Vue WebUI work:

  • add operator-facing documentation to the introduction/tutorial manual

  • add implementation and workflow details here in the developer guide

  • clearly mark the Vue WebUI as a technical preview while it coexists with the classic PHP WebUI

  • avoid wording that implies the classic WebUI no longer exists unless that product decision has changed