How to override templates in LMS (Vue)

[grafzahl-io]

Hi alltogether,

I did a lot of research (including the Frappe School) but could not find a matching topic.
We are using the LMS app and need to customize parts of the frontend.
As the LMS frontend is build in Vue, we need a way to override it to keep the core LMS app updatable.

Maybe I misunderstood something but in general I found answers that suggest creating a new own app and mirroring the file structure of for that file you want to override and add related commands in the hooks.py.

But as Vue will build separately: how do we do that?
Is there an official recommondation how to safely override things in a Vue frontend?

To have a specific example: I want to alter the Badges for tags in frappe_bench/apps/lms/frontend/src/components/CourseCard.vue

Thanks in advance!

[agritheory]

There is no customization option for Frappe's Vue components. It's not technically impossible, but it requires some opinions / build cadence that is a poor fit with erpnext.com or the more SaaS-like apps. We have implemented an override technique in one of our custom apps, but it's extending that app itself and definitely not a low-code path. While this ticket has been marked as invalid, I think it would be valid if it were aimed at a design for user-editable component registration and override. I think that extending Client Script and hooks.py both could be used to define these components.

[grafzahl-io]

Thank you for your fast reply!

Do you have a public example or documentation for your override technique?

Wouldn`t it be desireable make the existing apps fully customizable (even if they are intended to be low-code)?

In my opinion, that would open it to more use cases.