How to Extend a Vue Page in Frappe HR (e.g., /hrms/home) from a Custom App?

[Sudhanshu]

Hi community,

I’m working with Frappe HR and I want to extend the Vue-based web app from a custom app without modifying the core HR app.

Specifically, I want to:

• Add a button to the /hrms/home page.
• On click, it should show a popup or toast saying "It's working!".

I tried creating a custom Vue page in my custom app and registering a route at /hrms/home, but that not working or i’m doing something wrong.
Is there a recommended way to extend or wrap the original component (instead of replacing it), so I can inject UI without breaking future updates?

Any examples or patterns to follow?

Thanks in advance!

[avc]

Hi @Sudhanshu

Check this.

[Workflow] Customizing Frappe UI such as Frappe CRM & HR from custom App

Like many in community, we too faced challenges while trying to customize Frappe UI-based applications. Sometimes, client needs some customisations that are critical. Am sharing the workflow we are following for the same, for feedback and for others benefit. The Challenge While Frappe’s Desk based application and modules are highly customizable using client scripts, server scripts etc… Frappe UI based apps built using Vue.js (e.g., CRM, Gameplan), etc are almost impossible to customise out of…

Hope this helps.