I need to override style or customize VueJS components

I need to override style or customize VueJS components for the frappé apps like gameplan or insights but from my custom app, any ideas or recommendation on how to implement this?

Could use hooks

https://frappeframework.com/docs/v14/user/en/python-api/hooks#javascript-css-assets

Dan’s right about the CSS, but many of the Vue components use scoped styles, which is considered best practice. So CSS variables become the only way you can do that without overriding the entire component.

There is no customization API I am aware of for the Vue-based apps, which is disappointing considering it is one of the biggest strengths of the often maligned Frappe Form API. Monkey patching Frappe’s Vue components is possible but I’ve only done it in relatively trivial circumstances, like adding a permission check to the “New Email” button in the timeline.

I was hoping to do this also, to turn off ‘optimize’ for files in the FileUploader…

Here’s a V13 override to hide the ‘make private’ button - in this case because all files on the customer’s system are private. Not tested on any other version. Must be included in a built file.

// hide 'set all private button' in file upload
frappe.ui.FileUploader.prototype.make_dialog = function(){
		this.dialog = new frappe.ui.Dialog({
			title: __('Upload'),
			primary_action_label: __('Upload'),
			primary_action: () => this.upload_files(),
			secondary_action_label: __('Set all private'),
			secondary_action: () => {
				this.uploader.toggle_all_private();
			}
		});

		this.wrapper = this.dialog.body;
		this.dialog.show();
		this.dialog.$wrapper.on('hidden.bs.modal', function() {
			$(this).data('bs.modal', null);
			$(this).remove();
		})
		$(this.dialog.$wrapper).find('.btn-modal-secondary').hide()
}
1 Like