feat(vue3): migrate larpingapp to Vue 3 (@conduction/nextcloud-vue@2.1.0-vue3.13)

[rubenvdlinde]

Migrates larpingapp from Vue 2 to Vue 3 against @conduction/nextcloud-vue@2.1.0-vue3.13 (pinned exactly — a caret floats a prerelease when the vue3 dist-tag moves).

Wave 1b of the 13-app fleet migration.

Dependencies

package	from	to
vue	^2.7.14	^3.5.13
@nextcloud/vue	^8.16.0	^9.5.0
vue-router	^3.6.5	^4.5.0
@nextcloud/dialogs	^3.2.0	^7.4.1
@conduction/nextcloud-vue	^1.0.0-beta.213	2.1.0-vue3.13 (exact)
@nextcloud/webpack-vue-config	^6.0.1	^7.0.2
vue-loader	^15	^17.4.2

Added because nc-vue declares them as peers and an isolated clone cannot resolve them from a hoisted node_modules: @vueuse/core, axe-core, dexie, dompurify, marked, @nextcloud/capabilities, gridstack (+ its stylesheet — without it every dashboard item renders 0 px wide with no error). Added because @nextcloud/webpack-vue-config@7 require()s them without declaring them: terser-webpack-plugin, path-browserify.

Dropped: vue-template-compiler, vue-apexcharts (unused; nc-vue bundles vue3-apexcharts), and the postinstall: vue-demi-switch 2.7 vue hook.

Lint

Adopts the shared conductionVue3Fixes preset from nc-vue, spread last. No local copies of vue/no-v-model-argument / vue/no-v-for-template-key — the preset disables both itself.

Verified by severity, not by counting rule names (--print-config | grep -c counts rules set to off and will happily report 21 when none are armed):

vue/no-deprecated-* ACTIVE: 21     vue/no-deprecated-* OFF: 0
vue/no-v-model-argument      => [0]
vue/no-v-for-template-key    => [0]
vue/v-on-event-hyphenation   => [2,"always",{"ignore":["update:modelValue"]}]
languageOptions.ecmaVersion  => "latest"   parserOptions.ecmaVersion => "latest"

Positive-controlled: a seeded .vue file with beforeDestroy + filters: produces both errors, and a seeded .js file with an unused var is reported — so a clean run means the files were actually opened.

src lint: 0 errors, 0 warnings (was 0 errors / 85 warnings).

The 71 @spec "Invalid JSDoc tag name" warnings needed definedTags as rule options; settings.jsdoc.definedTags is ignored once an extended preset has configured the rule.

Code

Lint does not cover bootstrap idioms, so these were found by hand:

• new Vue({...}).$mount('#content') → createApp({...}).mount('#content') (main.js, settings.js)
• Vue.mixin / Vue.use → app.mixin / app.use; PiniaVuePlugin removed
• Vue.observable({...}) → reactive({...}) (App.vue sidebar channel)
• new VueRouter({ mode: 'hash' }) → createRouter({ history: createWebHashHistory() })
• path: '*' → path: '/:pathMatch(.*)*' — removed in vue-router 4; an unknown hash would have rendered the shell with an empty <main> and no error

Found by the newly-armed rules or by reading the v9 API:

• beforeDestroy → beforeUnmount in SkillTree.vue. Vue 3 never calls the old name and never warns, so this hook would have leaked two live collection subscriptions and a $watch handle for the lifetime of the page.
• @nextcloud/vue/dist/Components/*.js → @nextcloud/vue/components/* (v9 ships an exports map; the old paths throw ERR_PACKAGE_PATH_NOT_EXPORTED).
• NcButton type="primary|secondary|tertiary" → variant="…". v9 repurposed type as the native button type; the Vue-2 spelling renders <button type="secondary"> with no warning and no lint error. (NcNoteCard still uses type — left alone.)
• NcSelect @input / @change → @update:modelValue. Neither is in @nextcloud/vue-select@4's emits list, so both listeners were silently dead: picking a character in the skill tree would never have fetched the requirement report (tree stays uncoloured), and switching a type's storage to "Internal" would have left a stale register + schema attached. Verified against the compiler that v-model and an explicit @update:modelValue merge into an array with the v-model assignment first, so the handlers see the new value.
• App.vue dual-instance hazard. useTenantContext was pulled in with require('@conduction/nextcloud-vue') inside a try/catch while the rest of the file used a static ESM import — two module instances of the library. The injection key is a module-local Symbol, and CnAppRoot provides from the ESM copy, so the CJS-side useTenantContext() would have looked up a different key, silently returned the no-op fallback, and the tenant watcher would never have fired. Now a static import; the "absence must not crash" contract is still met by the composable's own fallback.

Deleted as dead Vue-2 leftovers (unreferenced by any import, manifest or test): jest.config.js (a @vue/vue2-jest transform; jest is not a dependency and appears in no workflow), src/navigation/MainMenu.vue (superseded by the manifest-driven CnAppNav), src/views/settings/UserSettings.vue (superseded by App.vue's #user-settings slot).

webpack

• vue-router$ absolute-file alias — mandatory, not an optimisation. @nextcloud/vue@9 hard-depends on vue-router ^5.1.0, so npm installs both vue-router@4.6.4 (root) and vue-router@5.2.0 (nested). Without the alias, main.js gets the 4.x singleton while every @nextcloud/vue component calling useRoute()/useRouter() resolves the 5.x copy — a different injection key, so those components see no router at all.
• @nextcloud/vue and @nextcloud/dialogs aliases now point at the entry FILE, not the package directory. Both declare no main and no module, only an exports map; a directory alias bypasses that map. This produced 233 Can't resolve '@nextcloud/vue' errors on the first Vue 3 build.
• output.publicPath: 'auto'. @nextcloud/webpack-vue-config hardcodes /apps/<app>/js/. An app installed into Nextcloud's second apps path is served from /custom_apps/, so every lazy chunk 404s, comes back as the text/html error page, is refused on MIME grounds, and kills the page with a ChunkLoadError. The entry bundle is unaffected (Nextcloud writes that tag itself), so the build reports nothing. Reproduced in a browser on the isolated instance.

No optimization.sideEffects = false workaround was present.

e2e safety

playwright.config.ts, global-setup.ts, workflows/fixtures.ts and detail-forms-admin.spec.ts each computed their own ?? 'http://localhost:8080' default. :8080 is the shared dev container — its bind mounts reach real host checkouts, and this suite's fixture WRITE paths were creating and deleting OpenRegister objects there. tests/e2e/_base-url.ts is now the single resolver (PLAYWRIGHT_BASE_URL > NEXTCLOUD_URL > NC_BASE_URL) and it throws when none is set.

Verified against a disposable instance on :8094 whose /var/www/html is a named volume (the shared container reports ~40 bind mounts).

Pre-existing issues fixed

• CI had been dead for two months. All 8 reusable-workflow calls pointed at Conduction/.github, which Actions cannot resolve, so Code Quality produced zero jobs and failed instantly on every push and PR since e2faa09 (2026-06-01, "org rename" — the rename went the wrong way). No ESLint, PHPCS, PHPMD, PHPStan, Psalm, license/security scan or PHPUnit ran in that window. The shared workflows live in ConductionNL/.github; ci: restore the Code Quality gate (baseline probe — do not merge yet) #238 is a probe on an otherwise untouched development proving the restored gate runs 24 jobs.
• docs/features.json regenerated — the shared job that maintains it is skipped on PRs and its bot push to development is rejected by branch protection (Allow CI bot to push auto-generated files (.coverage-baseline, SBOM) to ruleset-protected branches .github#61).
• 4 rule-empty-line-before stylelint errors in SkillTree.vue.

Baseline comparison

Measured against #238 — the same restored workflow on an otherwise untouched development:

job	development (#238)	this PR
Vue Quality (eslint)	pass	pass
Vue Quality (stylelint)	fail	fixed
Features Check	fail	fixed
PHP Quality (phpcs / phpmd / phpstan / psalm / phpmetrics / lint)	pass	—
PHPUnit ×4 (PHP 8.3/8.4 × NC stable31/32)	pass	—
License + Security (composer, npm)	pass	—

Known, unchanged, reported not fixed

• Playwright has never run in CI. code-quality.yml never sets enable-playwright, so E2E Tests (Playwright) is skipping — including on the restored baseline. 17 spec files have never gated a PR. Not enabled here because the CI-side seed is unvalidated and flipping it on would make this PR red for reasons unrelated to Vue 3.
• npm run test:l10n reports 280 missing translations — byte-identical count on development and on this branch. Not gated in CI (frontend-checks is unset).
• 6 other fleet apps carry the same broken workflow reference: pipelinq, procest, opencatalogi, docudesk, softwarecatalog, decidesk, openbuild.
• PR chore(deps): bump nextcloud-vue to beta.220 (OpenBuild glyph fix) #233 (nc-vue beta.220) closed as superseded — merging it would have moved the dependency backwards onto the Vue 2 line. PR chore(deps): bump the npm_and_yarn group across 2 directories with 21 updates #235 (dependabot security group, green) merged first. PR Release: merge development into beta #90 is the development → beta release PR and is untouched.

---

e2e: what the 58 failures actually were

The first full run against the isolated instance was 90 passed / 58 failed / 24 skipped of 172. None of it was a Vue 3 rendering problem. Root-caused rather than retried:

1. Nextcloud's own first-run wizard (the dominant cause). On a freshly provisioned instance the admin account has never dismissed it, so it opens a modal at z-index 10005 — above larpingapp's own onboarding tour (10000) and above the entire app. Measured: two live [role="dialog"] nodes, two modal masks, and document.elementFromPoint(innerWidth/2, innerHeight/2) returning the tour's <video>.

The page underneath renders perfectly, so toBeVisible() keeps passing and only click() dies — 60 s actionability timeouts that read exactly like a rendering regression. Even "Close tour" was unreachable, because the wizard covered it.

After occ app:disable firstrunwizard: one click dismissed the app tour, and the next click landed in 35 ms.

This is why the suite passed on the shared dev container and not here — the shared instance's admin dismissed that wizard months ago. Fixed in the shared spin-up-e2e-instance.sh so no other app in the fleet loses a day to it.

2. Five copies of dismissSupportDialog that could not dismiss the tour. All matched only button[aria-label="Close"]; the tour's controls are "Close tour" and "Skip". One implementation now lives in _nav.ts and the five duplicates import it.

3. Stale fixture ids. detail-forms-admin.spec.ts hardcoded register 8 / schemas 18-25 with a comment reading "8 on the dev instance". On a fresh install LarpingApp's register imports as 15 with a different schema assignment, so every seed 404'd, seedObject() swallowed it, ids became the literal string 'seed-missing', and the specs failed 60 s later as timeouts. Now resolved at runtime from the app's settings API; seedObject() reports status and body on failure.

4. Dashboard widgets rendered "Widget not available". 5 of 7. Cause: nc-vue declares sideEffects: ["**/*.css"], so webpack legally dropped registerDashboardWidgets.js's bare side-effect imports — and stat / object-table are registered only that way. The one widget that did render, chart, is registered by an inline call tree-shaking cannot reach, which is what identified the mechanism. Fixed by calling the library's registerBuiltinDashboardWidgets() at bootstrap. Verified live: the KPI tiles now read Characters 0 | Events 48 | Items 48.

Also verified live, since the playbook calls it the silent case: gridstack items measure 231 × 160 and 462 × 320 px via getBoundingClientRect(), not 0 px wide.

Known pre-existing gap, not fixed here

The player schema does not exist on a fresh install. lib/Settings/larpingapp_register.json declares ten schemas including player, but after import the register contains nine — ability, skill, larping_item, condition, effect, larping_event, setting, xpAward, character, larping_attendance — and player_register / player_schema are empty in the app config. Positive-controlled: a character-slug search finds schema 18; a player search finds nothing in any register. Note that item, event and attendance were imported prefixed (larping_*) while player was dropped, which points at slug-collision handling in the register import. Players pages therefore have no storage on any new deployment. Out of scope for a Vue 3 migration, but it should not stay unreported.

[github-actions]

Quality Report — ConductionNL/larpingapp @ dc0353a

Check	PHP	Vue	Security	License	Tests
lint	✅
phpcs	✅
phpmd	✅
psalm	✅
phpstan	✅
phpmetrics	✅
eslint		✅
stylelint		✅
composer			✅	✅ 94/94
npm			✅	✅ 537/537
PHPUnit					✅
Newman					⏭️
Playwright					⏭️

Coverage: 0% (0/17 statements)

---

Quality workflow — 2026-07-31 21:30 UTC

Download the full PDF report from the workflow artifacts.

[github-actions]

Quality Report — ConductionNL/larpingapp @ 4521816

Check	PHP	Vue	Security	License	Tests
lint	✅
phpcs	✅
phpmd	✅
psalm	✅
phpstan	✅
phpmetrics	✅
eslint		✅
stylelint		✅
composer			✅	✅ 94/94
npm			✅	✅ 537/537
PHPUnit					✅
Newman					⏭️
Playwright					⏭️

Coverage: 0% (0/17 statements)

---

Quality workflow — 2026-07-31 21:35 UTC

Download the full PDF report from the workflow artifacts.

[github-actions]

Quality Report — ConductionNL/larpingapp @ 8a2700e

Check	PHP	Vue	Security	License	Tests
lint	✅
phpcs	✅
phpmd	✅
psalm	✅
phpstan	✅
phpmetrics	✅
eslint		✅
stylelint		✅
composer			✅	✅ 94/94
npm			✅	✅ 537/537
PHPUnit					✅
Newman					⏭️
Playwright					⏭️

Coverage: 0% (0/17 statements)

---

Quality workflow — 2026-07-31 21:41 UTC

Download the full PDF report from the workflow artifacts.

[github-actions]

Quality Report — ConductionNL/larpingapp @ 126bcbe

Check	PHP	Vue	Security	License	Tests
lint	✅
phpcs	✅
phpmd	✅
psalm	✅
phpstan	✅
phpmetrics	✅
eslint		✅
stylelint		✅
composer			✅	✅ 94/94
npm			✅	✅ 537/537
PHPUnit					✅
Newman					⏭️
Playwright					⏭️

Coverage: 0% (0/17 statements)

---

Quality workflow — 2026-07-31 21:43 UTC

Download the full PDF report from the workflow artifacts.

[github-actions]

Quality Report — ConductionNL/larpingapp @ 519d3ea

Check	PHP	Vue	Security	License	Tests
lint	✅
phpcs	✅
phpmd	✅
psalm	✅
phpstan	✅
phpmetrics	✅
eslint		✅
stylelint		✅
composer			✅	✅ 94/94
npm			✅	✅ 537/537
PHPUnit					✅
Newman					⏭️
Playwright					⏭️

Coverage: 0% (0/17 statements)

---

Quality workflow — 2026-08-01 06:39 UTC

Download the full PDF report from the workflow artifacts.

[github-actions]

Quality Report — ConductionNL/larpingapp @ f7b8f30

Check	PHP	Vue	Security	License	Tests
lint	✅
phpcs	✅
phpmd	✅
psalm	✅
phpstan	✅
phpmetrics	✅
eslint		✅
stylelint		✅
composer			✅	✅ 94/94
npm			✅	✅ 537/537
PHPUnit					✅
Newman					⏭️
Playwright					⏭️

Coverage: 0% (0/17 statements)

---

Quality workflow — 2026-08-01 06:58 UTC

Download the full PDF report from the workflow artifacts.

[github-actions]

Quality Report — ConductionNL/larpingapp @ 8a339eb

Check	PHP	Vue	Security	License	Tests
lint	✅
phpcs	✅
phpmd	✅
psalm	✅
phpstan	✅
phpmetrics	✅
eslint		✅
stylelint		✅
composer			✅	✅ 94/94
npm			✅	✅ 537/537
PHPUnit					✅
Newman					⏭️
Playwright					⏭️

Coverage: 0% (0/17 statements)

---

Quality workflow — 2026-08-01 07:13 UTC

Download the full PDF report from the workflow artifacts.