Best Practices for Custom Embedding Vue Frontend into Frappe Desk UI

Frappe Framework Customization
,
1

Hi everyone,

I’m currently exploring how to make better use of the Frappe Desk UI (sidebar, search bar, and general navigation) while still being able to work comfortably with a custom Vue frontend.

Right now, I’ve tried embedding my Vue app using an iframe and custom html block inside Desk, but I’m running into a few issues:

  • Layout spacing and sizing feel very restricted.
  • Switching between the Vue app and Desk UI is not smooth.
  • Popups/modal dialogs don’t render nicely inside the iframe context.

What I’d really like is a way to integrate the Vue interface directly into Desk, so it feels natural and seamless—almost like it’s a native part of Frappe, rather than something tacked on.

Has anyone managed to achieve this kind of full, natural embedding of a custom UI into Frappe Desk? Any examples, best practices, or guidance would be hugely appreciated.

Thanks in advance!

2

Also interested in best practices. I did a very simple link on both sides. On Desk, using custom HTML block defined on the Workspace to send to the Frontend, and on the Frontend, with a link to /app on router.js and AppSidebar.vue (depending on the user role). For me, embedding sort of defeats the purpose of having a clean frontend UI.

3

I skip the iframe and just write the vue code directly in the custom block. It’s been working well for me.