Skip to content

feat(web): migrate Web UI from MPA to Vue 3 SPA - #5553

Open
Artorias17 wants to merge 36 commits into
LizardByte:masterfrom
Artorias17:vue-spa
Open

feat(web): migrate Web UI from MPA to Vue 3 SPA#5553
Artorias17 wants to merge 36 commits into
LizardByte:masterfrom
Artorias17:vue-spa

Conversation

@Artorias17

Copy link
Copy Markdown

Description

This PR addresses the roadmap task LizardByte/roadmap#35 by migrating the Vue Web UI from MPA to SPA using Vite.

It also:

  • Reorganizes Web UI files in standard Vue 3 folder structure and replaces MPA HTML files with proper SPA vue files.
  • Adds a shared layout structure with persistent navbar.
  • Adds routes via vue-router and so refactors some of the redundancies in the backend server code.
  • Sets up the Vite dev server with HTTPS support.
  • Adds a dedicated login page with session-cookie support with the basic HTTP Basic Auth using the browser prompt as fallback. (Should be removed later.)
  • Adds/updates backend unit tests related to the new session-auth endpoints and file reorganizations.
  • Fixed some bugs while refactoring.
  • Introduced and reused components to reduce code redundancy.
  • Introduced some fallback locale entries.

Though this roadmap task was previously addressed by @TheElixZammuto in PR #3855, it went stale for almost a year.

Thus, this work was done from the ground-up.

Screenshot

Issues Fixed or Closed

Roadmap Issues

Type of Change

  • feat: New feature (non-breaking change which adds functionality)
  • fix: Bug fix (non-breaking change which fixes an issue)
  • docs: Documentation only changes
  • style: Changes that do not affect the meaning of the code (white-space, formatting, missing semicolons, etc.)
  • refactor: Code change that neither fixes a bug nor adds a feature
  • perf: Code change that improves performance
  • test: Adding missing tests or correcting existing tests
  • build: Changes that affect the build system or external dependencies
  • ci: Changes to CI configuration files and scripts
  • chore: Other changes that don't modify src or test files
  • revert: Reverts a previous commit
  • BREAKING CHANGE: Introduces a breaking change (can be combined with any type above)

Checklist

  • Code follows the style guidelines of this project
  • Code has been self-reviewed
  • Code has been commented, particularly in hard-to-understand areas
  • Code docstring/documentation-blocks for new or existing methods/components have been added or updated
  • Unit tests have been added or updated for any new or modified functionality

AI Usage

See our AI usage policy.

  • None: No AI tools were used in creating this PR
  • Light: AI provided minor assistance (formatting, simple suggestions)
  • Moderate: AI helped with code generation or debugging specific parts
  • Heavy: AI generated most or all of the code changes

@Artorias17 Artorias17 changed the title Web UI Migration to Vue 3 SPA feat(web): migrate Web UI from MPA to Vue 3 SPA Aug 24, 2026
@Artorias17

Copy link
Copy Markdown
Author

I think most of the quality gate issues are pre-existing. I can fix them but that might make it out of scope for this.

@sonarqubecloud

Copy link
Copy Markdown

Quality Gate Failed Quality Gate failed

Failed conditions
97 New issues
2 Duplicated Blocks on New Code (required ≤ 0)
52 New Code Smells (required ≤ 0)
D Reliability Rating on New Code (required ≥ A)
45 New Bugs (required ≤ 0)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

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.

Sunshine: Migrate Web UI to full SPA

1 participant