Skip to content

Migrate the dashboard app to Vue 3 - #62624

Open
julien-nc wants to merge 4 commits into
masterfrom
enh/noid/vue3-dashboard
Open

Migrate the dashboard app to Vue 3#62624
julien-nc wants to merge 4 commits into
masterfrom
enh/noid/vue3-dashboard

Conversation

@julien-nc

Copy link
Copy Markdown
Member

Summary

I heard Vue2 will soon be dropped in server.

Here is an attempt to migrate the dashboard app to Vue 3.

This app uses the vuedraggable npm pkgs which is made for Vue 2. There is a next tag for Vue 3.
The Vue 3 version brings a lot of changes described there: https://www.npmjs.com/package/vuedraggable/v/next

  • Migrate to Vue 3
  • Fix #app-content-vue width
  • Install vuedraggable@next
  • Adjust to vuedraggable@next
  • Remove dashboard app symlink in build/frontend-legacy/apps
  • Add dashboard app symlink in build/frontend/apps
  • Build vuedraggable (by importing vuedraggable/src/vuedraggable.js) to avoid importing a UMD bundle which does things that are forbidden by our CSP policy (call new Function(...))

There were a lot of issues with the rendering logic of panels (widgets) and statuses. I let the LLM fix it and tried to keep the changes small.

Checklist

AI (if applicable)

  • The content of this PR was partly or fully generated using AI (OpenCode:minimax-m3)

@julien-nc julien-nc added this to the Nextcloud 35 milestone Jul 28, 2026
@julien-nc julien-nc added 3. to review Waiting for reviews technical debt 🧱 🤔🚀 labels Jul 28, 2026
@julien-nc
julien-nc requested review from a team as code owners July 28, 2026 16:08
@julien-nc
julien-nc requested review from Altahrim, come-nc, kristian-zendato, leftybournes, nfebe and skjnldsv and removed request for a team July 28, 2026 16:08
@julien-nc
julien-nc force-pushed the enh/noid/vue3-dashboard branch from d875fe0 to 31ac7c6 Compare July 28, 2026 16:19
@julien-nc

Copy link
Copy Markdown
Member Author

/compile

julien-nc and others added 3 commits July 28, 2026 22:11
- adjust to new vuedraggable
- fix #app-content-vue width
- close dashboard settings modal on click outside
- fix eslint issues
- remove dashboard app symlink in build/frontend-legacy/apps add it in build/frontend/apps

Assisted-by: OpenCode:minimax-m3
Signed-off-by: Julien Veyssier <julien-nc@posteo.net>
…ings that are forbidden by our CSP policy

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

@susnux susnux left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, one issue with the new mounting changes of Vue 3.
The scrollbar is now floating instead of aligned with the page.

@susnux
susnux requested review from CarlSchwan and pringelmann and removed request for a team, come-nc, nfebe and skjnldsv July 28, 2026 20:13
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
@susnux
susnux force-pushed the enh/noid/vue3-dashboard branch from 4fac6c7 to ab7a14e Compare July 28, 2026 20:13
@susnux

susnux commented Jul 28, 2026

Copy link
Copy Markdown
Contributor

rebased to solve the conflicts.

The scrollbar is now floating instead of aligned with the page.

Pushed a commit for this ✔️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants