Vue3 Upgrade

[r-neuschulz]

1. Core Infra (Vue Upgrade)

The entire Vue core and compiler stack was replaced.

• vue: Updated ^2.7.10 → ^3.5.26 (a815271)
• @vue/compat: Added (temporarily) to support Vue 2 migration (a815271), then removed (5162437)

2. Build System (Webpack → Vite)

Complete replacement of the build infrastructure.

• vite: Added ^7.3.0 (8159ede)
• @vitejs/plugin-vue: Added ^6.0.3 (Replaced @vitejs/plugin-vue2) (a815271)
• vite-plugin-pwa: Added ^1.2.0 (Replaced register-service-worker build chain)(8159ede)
• vite-imagetools: Added ^9.0.2 (For image compression/processing, replacing webpack-image-*) (ad79dd7)
• @vue/cli-* & webpack-*: All Removed (8159ede)
• @vue/compiler-sfc: Added (temporarily) required for Vue 3 SFCs (a815271), then removed (166453f)
• vue-template-compiler: Removed (Vue 2 specific) (a815271)

3. Vue Ecosystem (Major Version Bumps)

Core-ish libraries updated to their Vue 3 compatible versions.

• vue-router: Updated ^3.x → ^4.6.4 (a815271)
• vuex: Updated ^3.x → ^4.1.0 (6826546, a815271)
• vue-i18n: Updated ^8.x → ^11.2.7 (Vue I18n v9+) (a815271)
• vue-gtag: Updated ^1.x → ^3.6.3 (GA4 support, will need double-check @marvin-roesch ) (a815271)
• vuex: Removed (deprecated) (0a2a4e6)
• pinia: Added ^3.0.4 (only functionally with a monostore) (0a2a4e6)

4. UI Libraries & Utilities

Components that had to be swapped or bumped.

• vuescroll: Removed (Incompatible) (07107aa)
• overlayscrollbars / overlayscrollbars-vue: Added ^2.13.0 (Replacement for vuescroll) (07107aa)
• vuedraggable: Replaced with @marshallswain/vuedraggable ^4.2.0 (a815271)
• vue-tags-input: Replaced with @vojtechlanka/vue-tags-input ^3.1.1 (a815271)
• vue-feather-icons: Replaced with vue-feather ^2.0.0 (a815271)
• three: Updated ^0.137 → ^0.182.0 (dcaa9ae, cad4647) incl fixes/optimization for graticules (df153bd)

5. Dev Dependencies & Maintenance

• eslint: Updated ^6.7.2 to ^9.39.2 (Flat config) (8159ede)
• sass: Updated ^1.29 -> ^1.97.1 (Native Sass support for Vite)(8159ede)
• cross-env: Updated to ^10.1.0 (cad4647)
• is-mobile: Updated to ^5.0.0 (5a3aed7)

6. Minor Improvements

• Externalized Inline SVGs: Extracted large inline SVGs (like Knight Radiant logos) into separate files in src/assets/ (564d775).
• Measurement Tool Fix: Resolved an issue where the tool displayed stale/incorrect non-zero distances on reload (b9aae9a).
• Social Media & Sharing: Updated icons (updated X, removed unused) improved Details view sharing, and externalized social logos (13747dd).
• UI Window Consistency: Added missing close (X) buttons to "First Visit" and "Tutorial" windows and aligned Text Styling (1049ea2)
• UI Search Consistency: Added gradient to match look&feel of details and info page, as well as usability improvement. (34b4c32)
• Timeline UX: Added helper text in Settings to guide users on adding new timelines (bec4dee).
• Editor: Fixed an issue where tags were not properly displayed in editor upon keystroke entry (d34975b)
• Rendering: Improved Compression with universal webp, and activated anti-aliasing (a1e4bb8).
• Dev: Harmonized to proper ISO 3166-1 in the build (namely exclusively using en-US and es-ES where applicable). (b680e14)
• Fixed the issue that the compass wasing always pointing in the direction of North-ing. (4526bf6)

7. Results & Benchmarks

Comparison between the previous Webpack/Vue 2 build and the new Vite/Vue 3 build.

My totally-independent-from-potato-internet metrics.

Build & Runtime Metrics

Metric	New (Vite / Vue 3)	Old (Webpack / Vue 2)
Cold Start Time (yarn serve)	4273 ms	182 s
Build Time (Dockerfile-dev)	232.5 s	417.1 s
Build Time (yarn run)	103.2 s	201.5 s
HMR (Hot Module Reload)	Instant	n/a
FPS (30 Measurements)	60 (capped)	12 (down to 5 during paint)

Lighthouse Performance

Metric	New	Old
Performance Score	31	27
First Contentful Paint	1.6 s	2.4 s
Largest Contentful Paint	10.4 s	14.5 s
Total Blocking Time	1,560 ms	1,590 ms
Cumulative Layout Shift	0.009	0.001
Speed Index	4.8 s	6.5 s

Dep Count

Type	New Count	Old Count
Dependencies	22	24
DevDependencies	14	26
Total	36	50

(If my count is right)

---

Left To Do

• Clear and setup dependabot to give monthly dependency updates.
• More accessible language selector when best effort assessment fails.
• Remove need for reloading by using a nice transition shader.

[marvin-roesch]

This looks very nice overall, thanks for putting in the effort to bring this code base into the modern world 😁

I only had three comments to leave, one concerning the actual functionality of the app and the other two regarding now-obsolete files.

Apart from that, the only thing I have to point out code-wise is that there are a few files (e.g. the scripts in bin/) which now have lines that are only whitespace, probably from a search & replace gone a little wrong. If these lines could be removed, that'd be great!

Thanks again for the great work!

[r-neuschulz]

@marvin-roesch , I have addressed the linting issue with 42a2f44, by adding a new linter warn, and running it through with --fix.

Do we have an equally hard opinion on multiple empty lines? If yes, I'd suggest un-commenting the no-multiple-empty-lines in the eslint.config.mjs

[r-neuschulz]

Had to change the github pages action due to failing dep download. Now following official Github Actions Recommendations, which suggestapt-get update before install.

[r-neuschulz]

@marvin-roesch, seems like extendTransforms: () => { .. } needs the builtin functions as an argument, otherwise it replaces them entirely (which broke .webp conversion). Added ...builtins spread to avoid regression.