refactor(files): migrate to Vue 3 - #61291
Merged
Merged
Conversation
Merged
susnux
force-pushed
the
chore/files-vue3
branch
2 times, most recently
from
September 15, 2026 18:21
a48cb03 to
4419d5d
Compare
susnux
force-pushed
the
chore/files-vue3
branch
from
September 15, 2026 19:44
4419d5d to
d48415b
Compare
susnux
changed the base branch from
master
to
refactor/files-navigation-quota
September 15, 2026 20:19
susnux
added this pull request to stack #64389
September 15, 2026 20:19
susnux
force-pushed
the
chore/files-vue3
branch
from
September 15, 2026 20:35
d48415b to
fcb2afa
Compare
susnux
force-pushed
the
chore/files-vue3
branch
from
September 30, 2026 10:33
3e931c0 to
79f97e1
Compare
susnux
marked this pull request as ready for review
September 30, 2026 10:48
susnux
requested review from
kristian-zendato and
sorbaugh
and removed request for
a team
September 30, 2026 10:48
29 of 32 tasks
susnux
force-pushed
the
chore/files-vue3
branch
from
September 30, 2026 14:32
79be741 to
44e7bb2
Compare
CarlSchwan
approved these changes
Sep 30, 2026
pringelmann
reviewed
Sep 30, 2026
Assisted-by: ClaudeCode:claude-opus-5-5 Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Assisted-by: ClaudeCode:claude-opus-5-5 Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Assisted-by: ClaudeCode:claude-opus-4-8 Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Assisted-by: ClaudeCode:claude-opus-5-5 Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
…re child views Assisted-by: ClaudeCode:claude-opus-5-5 Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Assisted-by: ClaudeCode:claude-opus-5-5 Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Assisted-by: ClaudeCode:claude-opus-5 Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Assisted-by: ClaudeCode:claude-opus-5-5 Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
`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 Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
…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 Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
The sidebar API brought back on master still rendered the sidebar with the Vue 2 constructor API and set the Webpack nonce in its entry point. Mount it as a Vue 3 app instead. As Vue 3 renders into the mountpoint rather than replacing it, the mountpoint uses `display: contents` so the sidebar keeps being laid out as a child of the target element. The Vue 3 stores return reactive proxies of the nodes, so the provider spec compares the raw nodes. Assisted-by: ClaudeCode:claude-opus-5-5 Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
…ent file The delete handler bypassed the router service, so the sidebar closing navigated from the outdated route and restored the deleted file's id. Navigate through the router service instead. Assisted-by: ClaudeCode:claude-opus-5-5 Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
susnux
force-pushed
the
chore/files-vue3
branch
from
September 30, 2026 20:14
44e7bb2 to
a4856f4
Compare
skjnldsv
approved these changes
Oct 1, 2026
Contributor
|
Found a few more bugs...will open separate issues |
2 tasks done
vitormattos
added a commit
to LibreSign/libresign
that referenced
this pull request
Oct 1, 2026
Nextcloud master migrated the Files app to Vue 3 and NcUploadPicker (nextcloud/server#61291), whose hidden input has no data-cy-upload-picker-input attribute. Open New > Upload files and feed the file chooser instead, which works with both upload pickers. Signed-off-by: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Migrate the app to Vue 3.
The stupid work of migration was done with AI, but thats only changed in: 01801b5
TODO
Uncaught (in promise) TypeError: can't access property "focus", firstButton.$el is undefinedChecklist
3. to review, feature component)stable32)AI (if applicable)