Skip to content

refactor(files): migrate to Vue 3 - #61291

Draft
susnux wants to merge 15 commits into
refactor/files-navigation-quotafrom
chore/files-vue3
Draft

susnux wants to merge 15 commits into
refactor/files-navigation-quotafrom
chore/files-vue3

Conversation

@susnux

@susnux susnux commented Jun 15, 2026

Copy link
Copy Markdown
Contributor

Summary

Migrate the app to Vue 3.
The stupid work of migration was done with AI, but thats only changed in: 01801b5

TODO

  • fix issues with breadcrumbs
  • fix issues with reloading content
  • fix uploading
  • fix issues with actions
  • fix visual issue where navigation always has a chevron even without children
  • fix this: Uncaught (in promise) TypeError: can't access property "focus", firstButton.$el is undefined

Checklist

AI (if applicable)

  • The content of this PR was partly or fully generated using AI

@susnux susnux added 2. developing Work in progress feature: files ♻️ refactor Refactor code (not a bug fix, not a feature just refactoring) team: Files Code maintained by 📁 Files team labels Jun 15, 2026
@susnux susnux added this to the Nextcloud 35 milestone Jun 15, 2026
@susnux susnux self-assigned this Jun 15, 2026
@susnux
susnux force-pushed the chore/files-vue3 branch from 60e1f29 to 5faa61b Compare June 15, 2026 13:30
@blizzz blizzz mentioned this pull request Aug 27, 2026
Signed-off-by: Akhil <akhil@e.email>
@susnux
susnux force-pushed the chore/files-vue3 branch 2 times, most recently from a48cb03 to 4419d5d Compare September 15, 2026 18:21
fix: logs can leak sensitive information..
@susnux
susnux changed the base branch from master to refactor/files-navigation-quota September 15, 2026 20:19
@susnux
susnux added this pull request to stack #64389 September 15, 2026 20:19
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Assisted-by: ClaudeCode:claude-opus-4-8
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
…re child views

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Assisted-by: ClaudeCode:claude-opus-5
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
susnux and others added 3 commits September 16, 2026 16:36
`RouterService` still read `router.currentRoute` directly, but with
vue-router 5 that is a ref, so name, params and query were always empty:
every navigation dropped the `dir` query and the fileid. It now unwraps
the ref and, because vue-router navigates asynchronously, also reports a
requested route until it is applied - otherwise the stores that each
merge their own change into the route overwrite each other.

`spawnDialog()` returns a promise since @nextcloud/vue 9, so the call
sites still passing a callback as third argument never resolved and the
"New folder" and rename dialogs hung.

The type filter looped endlessly because resetting an already empty
selection re-entered `setPresets()`, which resets again.

`Uploader.upload()` ignores the `root` option, so dropping onto a folder
row uploaded into the folder being browsed instead of the drop target.
The uploader destination is now moved to the drop target while the queue
is built.

Finally the router lost the query encoding Nextcloud URLs use: keep
spaces as "%20" instead of vue-router's "+".

On the test side: `NcCheckboxRadioSwitch` now forwards attributes to its
`<input>`, so the selection hooks sit on the checkbox itself; Vue 3
condenses the whitespace between the filename and extension spans; and
the breadcrumb helper addressed ancestors as buttons although only the
current directory is one.

Assisted-by: ClaudeCode:claude-opus-5
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
The files app is built with Vue 3 and vue-router 5, but the public share
entry point still created a vue-router 3 instance and exposed it as
`window.OCP.Files.Router`. The files app installs exactly that router, so
on a public share it ended up with a Vue 2 router in a Vue 3 app: there
was no `$route` and rendering the file list threw.

The entry point and everything only it uses now live in `src/public/` and
are built by the Vue 3 frontend, which makes that directory the boundary
between the migrated and the not yet migrated parts of the app. The
remaining entry points keep being built - and linted - as Vue 2.

`<RouterView>` needs a component to render, so the share route now points
at the file list, which the files app rendered directly before the router
was introduced.

Assisted-by: ClaudeCode:claude-opus-5
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
…cker

`NcUploadPicker` names the menu entry "Upload folder" where the Vue 2
`UploadPicker` said "Upload folders", it renders a progress bar of its
own - and the files app re-renders the file drop view while uploading,
so the list header is what reports the progress. The new uploader also
probes the destination collection before uploading, which the request
interception held back together with the file it means to delay.

Assisted-by: ClaudeCode:claude-opus-5
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

2. developing Work in progress AI assisted feature: files force-e2e-tests ♻️ refactor Refactor code (not a bug fix, not a feature just refactoring) team: Files Code maintained by 📁 Files team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants