diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index 3eb8160675..e8978ae785 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -59,7 +59,6 @@ import { useUsageStore } from '@/stores/usage.store';
 import { useUsersStore } from '@/stores/users.store';
 import { useHistoryHelper } from '@/composables/useHistoryHelper';
 import { useRoute } from 'vue-router';
-import { runExternalHook } from '@/utils/externalHooks';
 import { initializeAuthenticatedFeatures } from '@/init';
 
 export default defineComponent({
@@ -119,7 +118,7 @@ export default defineComponent({
 		void this.checkForNewVersions();
 		void initializeAuthenticatedFeatures();
 
-		void runExternalHook('app.mount');
+		void useExternalHooks().run('app.mount');
 		this.loading = false;
 	},
 	watch: {
diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index f525d5bf13..7e8b6cb587 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -51,7 +51,6 @@ import type { BulkCommand, Undoable } from '@/models/history';
 import type { PartialBy, TupleToUnion } from '@/utils/typeHelpers';
 import type { Component } from 'vue';
 import type { Scope } from '@n8n/permissions';
-import type { runExternalHook } from '@/utils/externalHooks';
 
 export * from 'n8n-design-system/types';
 
@@ -161,10 +160,6 @@ export interface INodeTypesMaxCount {
 	};
 }
 
-export interface IExternalHooks {
-	run: typeof runExternalHook;
-}
-
 export interface INodeTranslationHeaders {
 	data: {
 		[key: string]: {
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
index 36d2cd0959..02a41a58ef 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
@@ -164,7 +164,7 @@ import {
 } from '@/utils/nodeTypesUtils';
 import { isValidCredentialResponse, isCredentialModalState } from '@/utils/typeGuards';
 import { isExpression, isTestableExpression } from '@/utils/expressions';
-import { externalHooks } from '@/mixins/externalHooks';
+import { useExternalHooks } from '@/composables/useExternalHooks';
 
 interface NodeAccessMap {
 	[nodeType: string]: ICredentialNodeAccess | null;
@@ -172,7 +172,7 @@ interface NodeAccessMap {
 
 export default defineComponent({
 	name: 'CredentialEdit',
-	mixins: [nodeHelpers, externalHooks],
+	mixins: [nodeHelpers],
 	components: {
 		CredentialSharing,
 		CredentialConfig,
@@ -198,6 +198,7 @@ export default defineComponent({
 	},
 	setup() {
 		return {
+			externalHooks: useExternalHooks(),
 			...useToast(),
 			...useMessage(),
 		};
@@ -266,7 +267,7 @@ export default defineComponent({
 			}
 		}
 
-		await this.$externalHooks().run('credentialsEdit.credentialModalOpened', {
+		await this.externalHooks.run('credentialsEdit.credentialModalOpened', {
 			credentialType: this.credentialTypeName,
 			isEditingCredential: this.mode === 'edit',
 			activeNode: this.ndvStore.activeNode,
@@ -876,7 +877,7 @@ export default defineComponent({
 				}
 
 				this.$telemetry.track('User saved credentials', trackProperties);
-				await this.$externalHooks().run('credentialEdit.saveCredential', trackProperties);
+				await this.externalHooks.run('credentialEdit.saveCredential', trackProperties);
 			}
 
 			return credential;
@@ -899,7 +900,7 @@ export default defineComponent({
 				return null;
 			}
 
-			await this.$externalHooks().run('credential.saved', {
+			await this.externalHooks.run('credential.saved', {
 				credential_type: credentialDetails.type,
 				credential_id: credential.id,
 				is_new: true,
@@ -933,7 +934,7 @@ export default defineComponent({
 				return null;
 			}
 
-			await this.$externalHooks().run('credential.saved', {
+			await this.externalHooks.run('credential.saved', {
 				credential_type: credentialDetails.type,
 				credential_id: credential.id,
 				is_new: false,
diff --git a/packages/editor-ui/src/components/CredentialsSelectModal.vue b/packages/editor-ui/src/components/CredentialsSelectModal.vue
index 4716125c11..4a64cca222 100644
--- a/packages/editor-ui/src/components/CredentialsSelectModal.vue
+++ b/packages/editor-ui/src/components/CredentialsSelectModal.vue
@@ -61,19 +61,24 @@
 import { defineComponent } from 'vue';
 import Modal from './Modal.vue';
 import { CREDENTIAL_SELECT_MODAL_KEY } from '../constants';
-import { externalHooks } from '@/mixins/externalHooks';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useCredentialsStore } from '@/stores/credentials.store';
 import { createEventBus } from 'n8n-design-system/utils';
+import { useExternalHooks } from '@/composables/useExternalHooks';
 
 export default defineComponent({
 	name: 'CredentialsSelectModal',
-	mixins: [externalHooks],
 	components: {
 		Modal,
 	},
+	setup() {
+		const externalHooks = useExternalHooks();
+		return {
+			externalHooks,
+		};
+	},
 	async mounted() {
 		try {
 			await this.credentialsStore.fetchCredentialTypes(false);
@@ -114,7 +119,7 @@ export default defineComponent({
 			};
 
 			this.$telemetry.track('User opened Credential modal', telemetryPayload);
-			void this.$externalHooks().run('credentialsSelectModal.openCredentialType', telemetryPayload);
+			void this.externalHooks.run('credentialsSelectModal.openCredentialType', telemetryPayload);
 		},
 	},
 });
diff --git a/packages/editor-ui/src/components/ExecutionsList.vue b/packages/editor-ui/src/components/ExecutionsList.vue
index d694a5908a..efe0852110 100644
--- a/packages/editor-ui/src/components/ExecutionsList.vue
+++ b/packages/editor-ui/src/components/ExecutionsList.vue
@@ -287,7 +287,6 @@ import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
 import ExecutionTime from '@/components/ExecutionTime.vue';
 import ExecutionFilter from '@/components/ExecutionFilter.vue';
-import { externalHooks } from '@/mixins/externalHooks';
 import { MODAL_CONFIRM, VIEWS, WAIT_TIME_UNLIMITED } from '@/constants';
 import { genericHelpers } from '@/mixins/genericHelpers';
 import { executionHelpers } from '@/mixins/executionsHelpers';
@@ -310,10 +309,11 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
 import { isEmpty } from '@/utils/typesUtils';
 import { setPageTitle } from '@/utils/htmlUtils';
 import { executionFilterToQueryFilter } from '@/utils/executionUtils';
+import { useExternalHooks } from '@/composables/useExternalHooks';
 
 export default defineComponent({
 	name: 'ExecutionsList',
-	mixins: [externalHooks, genericHelpers, executionHelpers],
+	mixins: [genericHelpers, executionHelpers],
 	components: {
 		ExecutionTime,
 		ExecutionFilter,
@@ -327,10 +327,12 @@ export default defineComponent({
 	setup() {
 		const i18n = useI18n();
 		const telemetry = useTelemetry();
+		const externalHooks = useExternalHooks();
 
 		return {
 			i18n,
 			telemetry,
+			externalHooks,
 			...useToast(),
 			...useMessage(),
 		};
@@ -368,7 +370,7 @@ export default defineComponent({
 	async created() {
 		await this.loadWorkflows();
 
-		void this.$externalHooks().run('executionsList.openDialog');
+		void this.externalHooks.run('executionsList.openDialog');
 		this.telemetry.track('User opened Executions log', {
 			workflow_id: this.workflowsStore.workflowId,
 		});
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue
index 3b6a08b1d7..2b732b11c2 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue
@@ -68,6 +68,7 @@ import { useSettingsStore } from '@/stores/settings.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useTagsStore } from '@/stores/tags.store';
 import { executionFilterToQueryFilter } from '@/utils/executionUtils';
+import { useExternalHooks } from '@/composables/useExternalHooks';
 
 // Number of execution pages that are fetched before temporary execution card is shown
 const MAX_LOADING_ATTEMPTS = 5;
@@ -91,7 +92,10 @@ export default defineComponent({
 		};
 	},
 	setup() {
+		const externalHooks = useExternalHooks();
+
 		return {
+			externalHooks,
 			...useToast(),
 			...useMessage(),
 		};
@@ -586,7 +590,7 @@ export default defineComponent({
 
 			this.tagsStore.upsertTags(tags);
 
-			void this.$externalHooks().run('workflow.open', { workflowId, workflowName: data.name });
+			void this.externalHooks.run('workflow.open', { workflowId, workflowName: data.name });
 			this.uiStore.stateIsDirty = false;
 		},
 		async addNodes(nodes: INodeUi[], connections?: IConnections) {
diff --git a/packages/editor-ui/src/components/ExpressionEdit.vue b/packages/editor-ui/src/components/ExpressionEdit.vue
index 1c42692a49..a904380cc0 100644
--- a/packages/editor-ui/src/components/ExpressionEdit.vue
+++ b/packages/editor-ui/src/components/ExpressionEdit.vue
@@ -87,7 +87,6 @@ import VariableSelector from '@/components/VariableSelector.vue';
 
 import type { IVariableItemSelected } from '@/Interface';
 
-import { externalHooks } from '@/mixins/externalHooks';
 import { genericHelpers } from '@/mixins/genericHelpers';
 
 import { EXPRESSIONS_DOCS_URL } from '@/constants';
@@ -95,14 +94,21 @@ import { EXPRESSIONS_DOCS_URL } from '@/constants';
 import { debounceHelper } from '@/mixins/debounce';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNDVStore } from '@/stores/ndv.store';
+import { useExternalHooks } from '@/composables/useExternalHooks';
 import { createExpressionTelemetryPayload } from '@/utils/telemetryUtils';
 
 import type { Segment } from '@/types/expressions';
 
 export default defineComponent({
 	name: 'ExpressionEdit',
-	mixins: [externalHooks, genericHelpers, debounceHelper],
+	mixins: [genericHelpers, debounceHelper],
 	props: ['dialogVisible', 'parameter', 'path', 'modelValue', 'eventSource', 'redactValues'],
+	setup() {
+		const externalHooks = useExternalHooks();
+		return {
+			externalHooks,
+		};
+	},
 	components: {
 		ExpressionEditorModalInput,
 		ExpressionEditorModalOutput,
@@ -152,7 +158,7 @@ export default defineComponent({
 					itemSelected: (variable: IVariableItemSelected) => void;
 				}
 			).itemSelected(eventData);
-			void this.$externalHooks().run('expressionEdit.itemSelected', {
+			void this.externalHooks.run('expressionEdit.itemSelected', {
 				parameter: this.parameter,
 				value: this.modelValue,
 				selectedItem: eventData,
@@ -233,7 +239,7 @@ export default defineComponent({
 						getValue: () => string;
 					}
 				)?.getValue() || '';
-			void this.$externalHooks().run('expressionEdit.dialogVisibleChanged', {
+			void this.externalHooks.run('expressionEdit.dialogVisibleChanged', {
 				dialogVisible: newValue,
 				parameter: this.parameter,
 				value: this.modelValue,
@@ -250,7 +256,7 @@ export default defineComponent({
 				);
 
 				this.$telemetry.track('User closed Expression Editor', telemetryPayload);
-				void this.$externalHooks().run('expressionEdit.closeDialog', telemetryPayload);
+				void this.externalHooks.run('expressionEdit.closeDialog', telemetryPayload);
 			}
 		},
 	},
diff --git a/packages/editor-ui/src/components/MainHeader/MainHeader.vue b/packages/editor-ui/src/components/MainHeader/MainHeader.vue
index fb3d053044..85ed4344fe 100644
--- a/packages/editor-ui/src/components/MainHeader/MainHeader.vue
+++ b/packages/editor-ui/src/components/MainHeader/MainHeader.vue
@@ -41,12 +41,12 @@ export default defineComponent({
 		TabBar,
 	},
 	mixins: [pushConnection, workflowHelpers],
-	setup(props) {
+	setup(props, ctx) {
 		return {
 			// eslint-disable-next-line @typescript-eslint/no-misused-promises
-			...pushConnection.setup?.(props),
+			...pushConnection.setup?.(props, ctx),
 			// eslint-disable-next-line @typescript-eslint/no-misused-promises
-			...workflowHelpers.setup?.(props),
+			...workflowHelpers.setup?.(props, ctx),
 		};
 	},
 	data() {
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 384452311f..b60d85eee0 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -121,6 +121,7 @@ import { isNavigationFailure } from 'vue-router';
 import ExecutionsUsage from '@/components/ExecutionsUsage.vue';
 import MainSidebarSourceControl from '@/components/MainSidebarSourceControl.vue';
 import { hasPermission } from '@/rbac/permissions';
+import { useExternalHooks } from '@/composables/useExternalHooks';
 
 export default defineComponent({
 	name: 'MainSidebar',
@@ -130,11 +131,14 @@ export default defineComponent({
 		MainSidebarSourceControl,
 	},
 	mixins: [genericHelpers, workflowHelpers, workflowRun, userHelpers, debounceHelper],
-	setup(props) {
+	setup(props, ctx) {
+		const externalHooks = useExternalHooks();
+
 		return {
+			externalHooks,
 			...useMessage(),
 			// eslint-disable-next-line @typescript-eslint/no-misused-promises
-			...workflowRun.setup?.(props),
+			...workflowRun.setup?.(props, ctx),
 		};
 	},
 	data() {
@@ -349,7 +353,7 @@ export default defineComponent({
 	async mounted() {
 		this.basePath = this.rootStore.baseUrl;
 		if (this.$refs.user) {
-			void this.$externalHooks().run('mainSidebar.mounted', {
+			void this.externalHooks.run('mainSidebar.mounted', {
 				userRef: this.$refs.user as Element,
 			});
 		}
diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
index de16549f0d..97bfbdb7f5 100644
--- a/packages/editor-ui/src/components/Node.vue
+++ b/packages/editor-ui/src/components/Node.vue
@@ -156,7 +156,6 @@ import {
 	NOT_DUPLICATABE_NODE_TYPES,
 	WAIT_TIME_UNLIMITED,
 } from '@/constants';
-import { externalHooks } from '@/mixins/externalHooks';
 import { nodeBase } from '@/mixins/nodeBase';
 import { nodeHelpers } from '@/mixins/nodeHelpers';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
@@ -187,14 +186,17 @@ import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { EnableNodeToggleCommand } from '@/models/history';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { type ContextMenuTarget, useContextMenu } from '@/composables/useContextMenu';
+import { useExternalHooks } from '@/composables/useExternalHooks';
 
 export default defineComponent({
 	name: 'Node',
 	setup() {
 		const contextMenu = useContextMenu();
-		return { contextMenu };
+		const externalHooks = useExternalHooks();
+
+		return { contextMenu, externalHooks };
 	},
-	mixins: [externalHooks, nodeBase, nodeHelpers, workflowHelpers, pinData, debounceHelper],
+	mixins: [nodeBase, nodeHelpers, workflowHelpers, pinData, debounceHelper],
 	components: {
 		TitledList,
 		FontAwesomeIcon,
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/Modes/ActionsMode.vue b/packages/editor-ui/src/components/Node/NodeCreator/Modes/ActionsMode.vue
index 11a7676ef6..321b44e541 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/Modes/ActionsMode.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/Modes/ActionsMode.vue
@@ -16,7 +16,7 @@ import {
 } from '@/constants';
 
 import { useUsersStore } from '@/stores/users.store';
-import { runExternalHook } from '@/utils/externalHooks';
+import { useExternalHooks } from '@/composables/useExternalHooks';
 
 import { useActions } from '../composables/useActions';
 import { useKeyboardNavigation } from '../composables/useKeyboardNavigation';
@@ -170,7 +170,7 @@ function trackActionsView() {
 		trigger_action_count,
 	};
 
-	void runExternalHook('nodeCreateList.onViewActions', trackingPayload);
+	void useExternalHooks().run('nodeCreateList.onViewActions', trackingPayload);
 	telemetry?.trackNodesPanel('nodeCreateList.onViewActions', trackingPayload);
 }
 
@@ -191,7 +191,7 @@ function addHttpNode() {
 	if (telemetry) setAddedNodeActionParameters(updateData);
 
 	const app_identifier = actions.value[0].key;
-	void runExternalHook('nodeCreateList.onActionsCustmAPIClicked', {
+	void useExternalHooks().run('nodeCreateList.onActionsCustmAPIClicked', {
 		app_identifier,
 	});
 	telemetry?.trackNodesPanel('nodeCreateList.onActionsCustmAPIClicked', { app_identifier });
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/composables/useActions.ts b/packages/editor-ui/src/components/Node/NodeCreator/composables/useActions.ts
index 231d89ff02..5d510f18ef 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/composables/useActions.ts
+++ b/packages/editor-ui/src/components/Node/NodeCreator/composables/useActions.ts
@@ -26,7 +26,7 @@ import type { Telemetry } from '@/plugins/telemetry';
 import { useNodeCreatorStore } from '@/stores/nodeCreator.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
-import { runExternalHook } from '@/utils/externalHooks';
+import { useExternalHooks } from '@/composables/useExternalHooks';
 
 import { sortNodeCreateElements, transformNodeType } from '../utils';
 
@@ -255,7 +255,7 @@ export const useActions = () => {
 			source_mode: rootView.toLowerCase(),
 			resource: (action.value as INodeParameters).resource || '',
 		};
-		void runExternalHook('nodeCreateList.addAction', payload);
+		void useExternalHooks().run('nodeCreateList.addAction', payload);
 		telemetry?.trackNodesPanel('nodeCreateList.addAction', payload);
 	}
 
diff --git a/packages/editor-ui/src/components/NodeDetailsView.vue b/packages/editor-ui/src/components/NodeDetailsView.vue
index 9e2c95e0a5..2806417632 100644
--- a/packages/editor-ui/src/components/NodeDetailsView.vue
+++ b/packages/editor-ui/src/components/NodeDetailsView.vue
@@ -147,7 +147,6 @@ import type {
 import { jsonParse, NodeHelpers, NodeConnectionType } from 'n8n-workflow';
 import type { IExecutionResponse, INodeUi, IUpdateInformation, TargetItem } from '@/Interface';
 
-import { externalHooks } from '@/mixins/externalHooks';
 import { nodeHelpers } from '@/mixins/nodeHelpers';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 
@@ -175,10 +174,11 @@ import { useUIStore } from '@/stores/ui.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useDeviceSupport } from 'n8n-design-system/composables/useDeviceSupport';
 import { useMessage } from '@/composables/useMessage';
+import { useExternalHooks } from '@/composables/useExternalHooks';
 
 export default defineComponent({
 	name: 'NodeDetailsView',
-	mixins: [externalHooks, nodeHelpers, workflowHelpers, workflowActivate, pinData],
+	mixins: [nodeHelpers, workflowHelpers, workflowActivate, pinData],
 	components: {
 		NodeSettings,
 		InputPanel,
@@ -198,12 +198,15 @@ export default defineComponent({
 			default: false,
 		},
 	},
-	setup(props) {
+	setup(props, ctx) {
+		const externalHooks = useExternalHooks();
+
 		return {
+			externalHooks,
 			...useDeviceSupport(),
 			...useMessage(),
 			// eslint-disable-next-line @typescript-eslint/no-misused-promises
-			...workflowActivate.setup?.(props),
+			...workflowActivate.setup?.(props, ctx),
 		};
 	},
 	data() {
@@ -467,7 +470,7 @@ export default defineComponent({
 				this.avgInputRowHeight = 0;
 
 				setTimeout(() => this.ndvStore.setNDVSessionId(), 0);
-				void this.$externalHooks().run('dataDisplay.nodeTypeChanged', {
+				void this.externalHooks.run('dataDisplay.nodeTypeChanged', {
 					nodeSubtitle: this.getNodeSubtitle(node, this.activeNodeType, this.getCurrentWorkflow()),
 				});
 
@@ -691,7 +694,7 @@ export default defineComponent({
 				this.ndvStore.setOutputPanelEditModeEnabled(false);
 			}
 
-			await this.$externalHooks().run('dataDisplay.nodeEditingFinished');
+			await this.externalHooks.run('dataDisplay.nodeEditingFinished');
 			this.$telemetry.track('User closed node modal', {
 				node_type: this.activeNodeType ? this.activeNodeType.name : '',
 				session_id: this.sessionId,
diff --git a/packages/editor-ui/src/components/NodeExecuteButton.vue b/packages/editor-ui/src/components/NodeExecuteButton.vue
index 175d610c32..1522052b54 100644
--- a/packages/editor-ui/src/components/NodeExecuteButton.vue
+++ b/packages/editor-ui/src/components/NodeExecuteButton.vue
@@ -39,6 +39,7 @@ import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useMessage } from '@/composables/useMessage';
 import { useToast } from '@/composables/useToast';
+import { useExternalHooks } from '@/composables/useExternalHooks';
 
 export default defineComponent({
 	inheritAttrs: false,
@@ -68,12 +69,15 @@ export default defineComponent({
 			type: String,
 		},
 	},
-	setup(props) {
+	setup(props, ctx) {
+		const externalHooks = useExternalHooks();
+
 		return {
+			externalHooks,
 			...useToast(),
 			...useMessage(),
 			// eslint-disable-next-line @typescript-eslint/no-misused-promises
-			...workflowRun.setup?.(props),
+			...workflowRun.setup?.(props, ctx),
 		};
 	},
 	computed: {
@@ -241,7 +245,7 @@ export default defineComponent({
 						session_id: this.ndvStore.sessionId,
 					};
 					this.$telemetry.track('User clicked execute node button', telemetryPayload);
-					await this.$externalHooks().run('nodeExecuteButton.onClick', telemetryPayload);
+					await this.externalHooks.run('nodeExecuteButton.onClick', telemetryPayload);
 
 					await this.runWorkflow({
 						destinationNode: this.nodeName,
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 7a17e9b3c7..53179a8bfd 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -201,7 +201,6 @@ import NodeSettingsTabs from '@/components/NodeSettingsTabs.vue';
 import NodeWebhooks from '@/components/NodeWebhooks.vue';
 import { get, set, unset } from 'lodash-es';
 
-import { externalHooks } from '@/mixins/externalHooks';
 import { nodeHelpers } from '@/mixins/nodeHelpers';
 
 import NodeExecuteButton from './NodeExecuteButton.vue';
@@ -215,10 +214,11 @@ import { RenameNodeCommand } from '@/models/history';
 import useWorkflowsEEStore from '@/stores/workflows.ee.store';
 import { useCredentialsStore } from '@/stores/credentials.store';
 import type { EventBus } from 'n8n-design-system';
+import { useExternalHooks } from '@/composables/useExternalHooks';
 
 export default defineComponent({
 	name: 'NodeSettings',
-	mixins: [externalHooks, nodeHelpers],
+	mixins: [nodeHelpers],
 	components: {
 		NodeTitle,
 		NodeCredentials,
@@ -227,6 +227,12 @@ export default defineComponent({
 		NodeWebhooks,
 		NodeExecuteButton,
 	},
+	setup() {
+		const externalHooks = useExternalHooks();
+		return {
+			externalHooks,
+		};
+	},
 	computed: {
 		...mapStores(
 			useHistoryStore,
@@ -676,7 +682,7 @@ export default defineComponent({
 				this.updateNodeCredentialIssues(node);
 			}
 
-			void this.$externalHooks().run('nodeSettings.credentialSelected', { updateInformation });
+			void this.externalHooks.run('nodeSettings.credentialSelected', { updateInformation });
 		},
 		nameChanged(name: string) {
 			if (this.node) {
@@ -775,7 +781,7 @@ export default defineComponent({
 						}
 					}
 
-					void this.$externalHooks().run('nodeSettings.valueChanged', {
+					void this.externalHooks.run('nodeSettings.valueChanged', {
 						parameterPath,
 						newValue,
 						parameters: this.parameters,
@@ -883,7 +889,7 @@ export default defineComponent({
 
 				this.workflowsStore.setNodeParameters(updateInformation);
 
-				void this.$externalHooks().run('nodeSettings.valueChanged', {
+				void this.externalHooks.run('nodeSettings.valueChanged', {
 					parameterPath,
 					newValue,
 					parameters: this.parameters,
diff --git a/packages/editor-ui/src/components/NodeSettingsTabs.vue b/packages/editor-ui/src/components/NodeSettingsTabs.vue
index 17a7ec8e4d..51190365d2 100644
--- a/packages/editor-ui/src/components/NodeSettingsTabs.vue
+++ b/packages/editor-ui/src/components/NodeSettingsTabs.vue
@@ -10,7 +10,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
-import { externalHooks } from '@/mixins/externalHooks';
 import {
 	BUILTIN_NODES_DOCS_URL,
 	COMMUNITY_NODES_INSTALLATION_DOCS_URL,
@@ -23,10 +22,10 @@ import type { INodeTypeDescription } from 'n8n-workflow';
 import { NodeConnectionType } from 'n8n-workflow';
 
 import { isCommunityPackageName } from '@/utils/nodeTypesUtils';
+import { useExternalHooks } from '@/composables/useExternalHooks';
 
 export default defineComponent({
 	name: 'NodeSettingsTabs',
-	mixins: [externalHooks],
 	props: {
 		modelValue: {
 			type: String,
@@ -37,6 +36,12 @@ export default defineComponent({
 			type: String,
 		},
 	},
+	setup() {
+		const externalHooks = useExternalHooks();
+		return {
+			externalHooks,
+		};
+	},
 	computed: {
 		...mapStores(useNDVStore, useWorkflowsStore),
 		activeNode(): INodeUi | null {
@@ -123,7 +128,7 @@ export default defineComponent({
 	methods: {
 		onTabSelect(tab: string) {
 			if (tab === 'docs' && this.nodeType) {
-				void this.$externalHooks().run('dataDisplay.onDocumentationUrlClick', {
+				void this.externalHooks.run('dataDisplay.onDocumentationUrlClick', {
 					nodeType: this.nodeType as INodeTypeDescription,
 					documentationUrl: this.documentationUrl,
 				});
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 21b18ef869..4962fde598 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -395,7 +395,6 @@ import TextEdit from '@/components/TextEdit.vue';
 import CodeNodeEditor from '@/components/CodeNodeEditor/CodeNodeEditor.vue';
 import HtmlEditor from '@/components/HtmlEditor/HtmlEditor.vue';
 import SqlEditor from '@/components/SqlEditor/SqlEditor.vue';
-import { externalHooks } from '@/mixins/externalHooks';
 import { nodeHelpers } from '@/mixins/nodeHelpers';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { hasExpressionMapping, isValueExpression } from '@/utils/nodeTypesUtils';
@@ -421,12 +420,13 @@ import { createEventBus } from 'n8n-design-system/utils';
 import { useI18n } from '@/composables/useI18n';
 import type { N8nInput } from 'n8n-design-system';
 import { isCredentialOnlyNodeType } from '@/utils/credentialOnlyNodes';
+import { useExternalHooks } from '@/composables/useExternalHooks';
 
 type Picker = { $emit: (arg0: string, arg1: Date) => void };
 
 export default defineComponent({
 	name: 'parameter-input',
-	mixins: [externalHooks, nodeHelpers, workflowHelpers, debounceHelper],
+	mixins: [nodeHelpers, workflowHelpers, debounceHelper],
 	components: {
 		CodeNodeEditor,
 		HtmlEditor,
@@ -503,9 +503,11 @@ export default defineComponent({
 		},
 	},
 	setup() {
+		const externalHooks = useExternalHooks();
 		const i18n = useI18n();
 
 		return {
+			externalHooks,
 			i18n,
 		};
 	},
@@ -882,7 +884,7 @@ export default defineComponent({
 				this.updateNodeCredentialIssues(node);
 			}
 
-			void this.$externalHooks().run('nodeSettings.credentialSelected', { updateInformation });
+			void this.externalHooks.run('nodeSettings.credentialSelected', { updateInformation });
 		},
 		/**
 		 * Check whether a param value must be skipped when collecting node param issues for validation.
@@ -1207,7 +1209,7 @@ export default defineComponent({
 					had_parameter: typeof prevValue === 'string' && prevValue.includes('$parameter'),
 				};
 				this.$telemetry.track('User switched parameter mode', telemetryPayload);
-				void this.$externalHooks().run('parameterInput.modeSwitch', telemetryPayload);
+				void this.externalHooks.run('parameterInput.modeSwitch', telemetryPayload);
 			}
 		},
 	},
@@ -1216,7 +1218,7 @@ export default defineComponent({
 		const remoteParameterOptions = this.$el.querySelectorAll('.remote-parameter-option');
 
 		if (remoteParameterOptions.length > 0) {
-			void this.$externalHooks().run('parameterInput.updated', { remoteParameterOptions });
+			void this.externalHooks.run('parameterInput.updated', { remoteParameterOptions });
 		}
 	},
 	mounted() {
@@ -1255,7 +1257,7 @@ export default defineComponent({
 			);
 		}
 
-		void this.$externalHooks().run('parameterInput.mount', {
+		void this.externalHooks.run('parameterInput.mount', {
 			parameter: this.parameter,
 			inputFieldRef: this.$refs.inputField as InstanceType<typeof N8nInput>,
 		});
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 219c9add2b..7895765316 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -91,7 +91,6 @@ import type {
 import type { BaseTextKey } from '@/plugins/i18n';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useSegment } from '@/stores/segment.store';
-import { externalHooks } from '@/mixins/externalHooks';
 import { getMappedResult } from '@/utils/mappingUtils';
 import { createEventBus } from 'n8n-design-system/utils';
 
@@ -99,7 +98,6 @@ const DISPLAY_MODES_WITH_DATA_MAPPING = ['table', 'json', 'schema'];
 
 export default defineComponent({
 	name: 'parameter-input-full',
-	mixins: [externalHooks],
 	components: {
 		ParameterOptions,
 		DraggableTarget,
diff --git a/packages/editor-ui/src/components/PersonalizationModal.vue b/packages/editor-ui/src/components/PersonalizationModal.vue
index 98d1fe40fe..2a9aaed678 100644
--- a/packages/editor-ui/src/components/PersonalizationModal.vue
+++ b/packages/editor-ui/src/components/PersonalizationModal.vue
@@ -139,6 +139,7 @@ import { useRootStore } from '@/stores/n8nRoot.store';
 import { useUsersStore } from '@/stores/users.store';
 import { createEventBus } from 'n8n-design-system/utils';
 import { usePostHog } from '@/stores/posthog.store';
+import { useExternalHooks } from '@/composables/useExternalHooks';
 
 export default defineComponent({
 	name: 'PersonalizationModal',
@@ -162,7 +163,10 @@ export default defineComponent({
 		};
 	},
 	setup() {
+		const externalHooks = useExternalHooks();
+
 		return {
+			externalHooks,
 			...useToast(),
 		};
 	},
@@ -642,7 +646,7 @@ export default defineComponent({
 					personalization_survey_n8n_version: this.rootStore.versionCli,
 				};
 
-				await this.$externalHooks().run(
+				await this.externalHooks.run(
 					'personalizationModal.onSubmit',
 					survey as IPersonalizationLatestVersion,
 				);
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 656601ec05..b6be2cf3f9 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -605,7 +605,6 @@ import {
 import BinaryDataDisplay from '@/components/BinaryDataDisplay.vue';
 import NodeErrorView from '@/components/Error/NodeErrorView.vue';
 
-import { externalHooks } from '@/mixins/externalHooks';
 import { genericHelpers } from '@/mixins/genericHelpers';
 import { nodeHelpers } from '@/mixins/nodeHelpers';
 import { pinData } from '@/mixins/pinData';
@@ -620,6 +619,7 @@ import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useToast } from '@/composables/useToast';
 import { isObject } from 'lodash-es';
+import { useExternalHooks } from '@/composables/useExternalHooks';
 
 const RunDataTable = defineAsyncComponent(async () => import('@/components/RunDataTable.vue'));
 const RunDataJson = defineAsyncComponent(async () => import('@/components/RunDataJson.vue'));
@@ -633,7 +633,7 @@ export type EnterEditModeArgs = {
 
 export default defineComponent({
 	name: 'RunData',
-	mixins: [externalHooks, genericHelpers, nodeHelpers, pinData],
+	mixins: [genericHelpers, nodeHelpers, pinData],
 	components: {
 		BinaryDataDisplay,
 		NodeErrorView,
@@ -699,7 +699,10 @@ export default defineComponent({
 		},
 	},
 	setup() {
+		const externalHooks = useExternalHooks();
+
 		return {
+			externalHooks,
 			...useToast(),
 		};
 	},
@@ -1134,7 +1137,7 @@ export default defineComponent({
 					view: !this.hasNodeRun && !this.hasPinData ? 'none' : this.displayMode,
 				};
 
-				void this.$externalHooks().run('runData.onTogglePinData', telemetryPayload);
+				void this.externalHooks.run('runData.onTogglePinData', telemetryPayload);
 				this.$telemetry.track('User clicked pin data icon', telemetryPayload);
 			}
 
@@ -1244,7 +1247,7 @@ export default defineComponent({
 			}
 
 			this.closeBinaryDataDisplay();
-			void this.$externalHooks().run('runData.displayModeChanged', {
+			void this.externalHooks.run('runData.displayModeChanged', {
 				newValue: displayMode,
 				oldValue: previous,
 			});
diff --git a/packages/editor-ui/src/components/RunDataJson.vue b/packages/editor-ui/src/components/RunDataJson.vue
index c8495ae612..b46e95fae6 100644
--- a/packages/editor-ui/src/components/RunDataJson.vue
+++ b/packages/editor-ui/src/components/RunDataJson.vue
@@ -79,13 +79,13 @@ import { isString } from '@/utils/typeGuards';
 import { highlightText, sanitizeHtml } from '@/utils/htmlUtils';
 import { shorten } from '@/utils/typesUtils';
 import type { INodeUi } from '@/Interface';
-import { externalHooks } from '@/mixins/externalHooks';
 import { mapStores } from 'pinia';
 import { useNDVStore } from '@/stores/ndv.store';
 import MappingPill from './MappingPill.vue';
 import { getMappedExpression } from '@/utils/mappingUtils';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { nonExistingJsonPath } from '@/constants';
+import { useExternalHooks } from '@/composables/useExternalHooks';
 
 const RunDataJsonActions = defineAsyncComponent(
 	async () => import('@/components/RunDataJsonActions.vue'),
@@ -93,7 +93,6 @@ const RunDataJsonActions = defineAsyncComponent(
 
 export default defineComponent({
 	name: 'run-data-json',
-	mixins: [externalHooks],
 	components: {
 		VueJsonPretty,
 		Draggable,
@@ -133,11 +132,14 @@ export default defineComponent({
 		},
 	},
 	setup() {
+		const externalHooks = useExternalHooks();
+
 		const selectedJsonPath = ref(nonExistingJsonPath);
 		const draggingPath = ref<null | string>(null);
 		const displayMode = ref('json');
 
 		return {
+			externalHooks,
 			selectedJsonPath,
 			draggingPath,
 			displayMode,
@@ -190,7 +192,7 @@ export default defineComponent({
 			};
 
 			setTimeout(() => {
-				void this.$externalHooks().run('runDataJson.onDragEnd', telemetryPayload);
+				void this.externalHooks.run('runDataJson.onDragEnd', telemetryPayload);
 				this.$telemetry.track('User dragged data for mapping', telemetryPayload);
 			}, 1000); // ensure dest data gets set if drop
 		},
diff --git a/packages/editor-ui/src/components/RunDataSchema.vue b/packages/editor-ui/src/components/RunDataSchema.vue
index 2a7e3de72b..03c83517e3 100644
--- a/packages/editor-ui/src/components/RunDataSchema.vue
+++ b/packages/editor-ui/src/components/RunDataSchema.vue
@@ -7,10 +7,11 @@ import { useNDVStore } from '@/stores/ndv.store';
 import { telemetry } from '@/plugins/telemetry';
 import type { IDataObject } from 'n8n-workflow';
 import { isEmpty } from '@/utils/typesUtils';
-import { runExternalHook } from '@/utils/externalHooks';
+import { useExternalHooks } from '@/composables/useExternalHooks';
 import { i18n } from '@/plugins/i18n';
 import MappingPill from './MappingPill.vue';
 import { useDataSchema } from '@/composables/useDataSchema';
+
 type Props = {
 	data: IDataObject[];
 	mappingEnabled: boolean;
@@ -59,7 +60,7 @@ const onDragEnd = (el: HTMLElement) => {
 			...mappingTelemetry,
 		};
 
-		void runExternalHook('runDataJson.onDragEnd', telemetryPayload);
+		void useExternalHooks().run('runDataJson.onDragEnd', telemetryPayload);
 
 		telemetry.track('User dragged data for mapping', telemetryPayload);
 	}, 1000); // ensure dest data gets set if drop
diff --git a/packages/editor-ui/src/components/RunDataTable.vue b/packages/editor-ui/src/components/RunDataTable.vue
index a3476ce305..3adee15ead 100644
--- a/packages/editor-ui/src/components/RunDataTable.vue
+++ b/packages/editor-ui/src/components/RunDataTable.vue
@@ -166,11 +166,11 @@ import { highlightText, sanitizeHtml } from '@/utils/htmlUtils';
 import { getPairedItemId } from '@/utils/pairedItemUtils';
 import type { GenericValue, IDataObject, INodeExecutionData } from 'n8n-workflow';
 import Draggable from './Draggable.vue';
-import { externalHooks } from '@/mixins/externalHooks';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import MappingPill from './MappingPill.vue';
 import { getMappedExpression } from '@/utils/mappingUtils';
+import { useExternalHooks } from '@/composables/useExternalHooks';
 
 const MAX_COLUMNS_LIMIT = 40;
 
@@ -178,7 +178,6 @@ type DraggableRef = InstanceType<typeof Draggable>;
 
 export default defineComponent({
 	name: 'run-data-table',
-	mixins: [externalHooks],
 	components: { Draggable, MappingPill },
 	props: {
 		node: {
@@ -212,6 +211,12 @@ export default defineComponent({
 			type: String,
 		},
 	},
+	setup() {
+		const externalHooks = useExternalHooks();
+		return {
+			externalHooks,
+		};
+	},
 	data() {
 		return {
 			activeColumn: -1,
@@ -429,7 +434,7 @@ export default defineComponent({
 					...mappingTelemetry,
 				};
 
-				void this.$externalHooks().run('runDataTable.onDragEnd', telemetryPayload);
+				void this.externalHooks.run('runDataTable.onDragEnd', telemetryPayload);
 
 				this.$telemetry.track('User dragged data for mapping', telemetryPayload);
 			}, 1000); // ensure dest data gets set if drop
diff --git a/packages/editor-ui/src/components/Sticky.vue b/packages/editor-ui/src/components/Sticky.vue
index 1592c69ef3..5fef786a66 100644
--- a/packages/editor-ui/src/components/Sticky.vue
+++ b/packages/editor-ui/src/components/Sticky.vue
@@ -104,7 +104,6 @@
 import { defineComponent, ref } from 'vue';
 import { mapStores } from 'pinia';
 
-import { externalHooks } from '@/mixins/externalHooks';
 import { nodeBase } from '@/mixins/nodeBase';
 import { nodeHelpers } from '@/mixins/nodeHelpers';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
@@ -126,7 +125,7 @@ import { useContextMenu } from '@/composables/useContextMenu';
 
 export default defineComponent({
 	name: 'Sticky',
-	mixins: [externalHooks, nodeBase, nodeHelpers, workflowHelpers],
+	mixins: [nodeBase, nodeHelpers, workflowHelpers],
 	setup() {
 		const colorPopoverTrigger = ref<HTMLDivElement>();
 		const forceActions = ref(false);
@@ -139,6 +138,7 @@ export default defineComponent({
 				colorPopoverTrigger.value?.click();
 			}
 		});
+
 		return { colorPopoverTrigger, contextMenu, forceActions, setForceActions };
 	},
 	props: {
diff --git a/packages/editor-ui/src/components/Telemetry.vue b/packages/editor-ui/src/components/Telemetry.vue
index 71caebd069..292c210f2b 100644
--- a/packages/editor-ui/src/components/Telemetry.vue
+++ b/packages/editor-ui/src/components/Telemetry.vue
@@ -9,11 +9,9 @@ import { useRootStore } from '@/stores/n8nRoot.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUsersStore } from '@/stores/users.store';
 import type { ITelemetrySettings } from 'n8n-workflow';
-import { externalHooks } from '@/mixins/externalHooks';
 
 export default defineComponent({
 	name: 'Telemetry',
-	mixins: [externalHooks],
 	data() {
 		return {
 			isTelemetryInitialized: false,
diff --git a/packages/editor-ui/src/components/VariableSelectorItem.vue b/packages/editor-ui/src/components/VariableSelectorItem.vue
index 5569673ef5..8505d6342d 100644
--- a/packages/editor-ui/src/components/VariableSelectorItem.vue
+++ b/packages/editor-ui/src/components/VariableSelectorItem.vue
@@ -62,11 +62,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import type { IVariableSelectorOption, IVariableItemSelected } from '@/Interface';
-import { externalHooks } from '@/mixins/externalHooks';
 
 export default defineComponent({
 	name: 'VariableSelectorItem',
-	mixins: [externalHooks],
 	props: ['allowParentSelect', 'extendAll', 'item', 'redactValues'],
 	mounted() {
 		if (this.extended) return;
diff --git a/packages/editor-ui/src/components/WorkerList.ee.vue b/packages/editor-ui/src/components/WorkerList.ee.vue
index 0122e8629b..90f398fb24 100644
--- a/packages/editor-ui/src/components/WorkerList.ee.vue
+++ b/packages/editor-ui/src/components/WorkerList.ee.vue
@@ -21,7 +21,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
-import { externalHooks } from '@/mixins/externalHooks';
 import PushConnectionTracker from '@/components/PushConnectionTracker.vue';
 import { genericHelpers } from '@/mixins/genericHelpers';
 import { executionHelpers } from '@/mixins/executionsHelpers';
@@ -38,7 +37,7 @@ import WorkerCard from './Workers/WorkerCard.ee.vue';
 // eslint-disable-next-line import/no-default-export
 export default defineComponent({
 	name: 'WorkerList',
-	mixins: [pushConnection, externalHooks, genericHelpers, executionHelpers],
+	mixins: [pushConnection, genericHelpers, executionHelpers],
 	// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/naming-convention
 	components: { PushConnectionTracker, WorkerCard },
 	props: {
@@ -47,11 +46,13 @@ export default defineComponent({
 			default: true,
 		},
 	},
-	setup() {
+	setup(props, ctx) {
 		const i18n = useI18n();
 		return {
 			i18n,
 			...useToast(),
+			// eslint-disable-next-line @typescript-eslint/no-misused-promises
+			...pushConnection.setup?.(props, ctx),
 		};
 	},
 	data() {
diff --git a/packages/editor-ui/src/components/WorkflowActivator.vue b/packages/editor-ui/src/components/WorkflowActivator.vue
index e77e2bc854..1bd10f1c0e 100644
--- a/packages/editor-ui/src/components/WorkflowActivator.vue
+++ b/packages/editor-ui/src/components/WorkflowActivator.vue
@@ -63,11 +63,11 @@ export default defineComponent({
 	name: 'WorkflowActivator',
 	props: ['workflowActive', 'workflowId'],
 	mixins: [workflowActivate],
-	setup(props) {
+	setup(props, ctx) {
 		return {
 			...useToast(),
 			// eslint-disable-next-line @typescript-eslint/no-misused-promises
-			...workflowActivate.setup?.(props),
+			...workflowActivate.setup?.(props, ctx),
 		};
 	},
 	computed: {
diff --git a/packages/editor-ui/src/components/WorkflowLMChat.vue b/packages/editor-ui/src/components/WorkflowLMChat.vue
index f6e9591f0e..b6a71a66b8 100644
--- a/packages/editor-ui/src/components/WorkflowLMChat.vue
+++ b/packages/editor-ui/src/components/WorkflowLMChat.vue
@@ -133,6 +133,7 @@ import { createEventBus } from 'n8n-design-system/utils';
 import type { IDataObject, INodeType, INode, ITaskData } from 'n8n-workflow';
 import { NodeHelpers, NodeConnectionType } from 'n8n-workflow';
 import type { INodeUi } from '@/Interface';
+import { useExternalHooks } from '@/composables/useExternalHooks';
 
 const RunDataAi = defineAsyncComponent(async () => import('@/components/RunDataAi/RunDataAi.vue'));
 
@@ -160,11 +161,14 @@ export default defineComponent({
 		Modal,
 		RunDataAi,
 	},
-	setup(props) {
+	setup(props, ctx) {
+		const externalHooks = useExternalHooks();
+
 		return {
+			externalHooks,
 			...useToast(),
 			// eslint-disable-next-line @typescript-eslint/no-misused-promises
-			...workflowRun.setup?.(props),
+			...workflowRun.setup?.(props, ctx),
 		};
 	},
 	data() {
@@ -479,7 +483,7 @@ export default defineComponent({
 		},
 		closeDialog() {
 			this.modalBus.emit('close');
-			void this.$externalHooks().run('workflowSettings.dialogVisibleChanged', {
+			void this.externalHooks.run('workflowSettings.dialogVisibleChanged', {
 				dialogVisible: false,
 			});
 		},
diff --git a/packages/editor-ui/src/components/WorkflowSettings.vue b/packages/editor-ui/src/components/WorkflowSettings.vue
index 75c62cdf4f..91e3c32406 100644
--- a/packages/editor-ui/src/components/WorkflowSettings.vue
+++ b/packages/editor-ui/src/components/WorkflowSettings.vue
@@ -355,7 +355,6 @@
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
 
-import { externalHooks } from '@/mixins/externalHooks';
 import { genericHelpers } from '@/mixins/genericHelpers';
 import { useToast } from '@/composables/useToast';
 import type {
@@ -383,15 +382,19 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
 import { createEventBus } from 'n8n-design-system/utils';
 import type { IPermissions } from '@/permissions';
 import { getWorkflowPermissions } from '@/permissions';
+import { useExternalHooks } from '@/composables/useExternalHooks';
 
 export default defineComponent({
 	name: 'WorkflowSettings',
-	mixins: [externalHooks, genericHelpers],
+	mixins: [genericHelpers],
 	components: {
 		Modal,
 	},
 	setup() {
+		const externalHooks = useExternalHooks();
+
 		return {
+			externalHooks,
 			...useToast(),
 		};
 	},
@@ -561,7 +564,7 @@ export default defineComponent({
 		this.timeoutHMS = this.convertToHMS(workflowSettings.executionTimeout);
 		this.isLoading = false;
 
-		void this.$externalHooks().run('workflowSettings.dialogVisibleChanged', {
+		void this.externalHooks.run('workflowSettings.dialogVisibleChanged', {
 			dialogVisible: true,
 		});
 		this.$telemetry.track('User opened workflow settings', {
@@ -576,7 +579,7 @@ export default defineComponent({
 		},
 		closeDialog() {
 			this.modalBus.emit('close');
-			void this.$externalHooks().run('workflowSettings.dialogVisibleChanged', {
+			void this.externalHooks.run('workflowSettings.dialogVisibleChanged', {
 				dialogVisible: false,
 			});
 		},
@@ -852,7 +855,7 @@ export default defineComponent({
 
 			this.closeDialog();
 
-			void this.$externalHooks().run('workflowSettings.saveSettings', { oldSettings });
+			void this.externalHooks.run('workflowSettings.saveSettings', { oldSettings });
 			this.$telemetry.track('User updated workflow settings', {
 				workflow_id: this.workflowsStore.workflowId,
 			});
diff --git a/packages/editor-ui/src/composables/useExternalHooks.ts b/packages/editor-ui/src/composables/useExternalHooks.ts
index cf1de1c624..6e69d6f035 100644
--- a/packages/editor-ui/src/composables/useExternalHooks.ts
+++ b/packages/editor-ui/src/composables/useExternalHooks.ts
@@ -1,7 +1,38 @@
-import type { IExternalHooks } from '@/Interface';
-import { runExternalHook } from '@/utils/externalHooks';
+import type { IDataObject } from 'n8n-workflow';
+import type {
+	ExternalHooks,
+	ExternalHooksKey,
+	ExternalHooksGenericContext,
+	ExtractExternalHooksMethodPayloadFromKey,
+} from '@/types/externalHooks';
+import { useWebhooksStore } from '@/stores/webhooks.store';
 
-export function useExternalHooks(): IExternalHooks {
+export async function runExternalHook<T extends ExternalHooksKey>(
+	eventName: T,
+	metadata?: ExtractExternalHooksMethodPayloadFromKey<T>,
+) {
+	if (!window.n8nExternalHooks) {
+		return;
+	}
+
+	const store = useWebhooksStore();
+
+	const [resource, operator] = eventName.split('.') as [
+		keyof ExternalHooks,
+		keyof ExternalHooks[keyof ExternalHooks],
+	];
+
+	const context = window.n8nExternalHooks[resource] as ExternalHooksGenericContext;
+	if (context?.[operator]) {
+		const hookMethods = context[operator];
+
+		for (const hookMethod of hookMethods) {
+			await hookMethod(store, metadata as IDataObject);
+		}
+	}
+}
+
+export function useExternalHooks() {
 	return {
 		run: runExternalHook,
 	};
diff --git a/packages/editor-ui/src/hooks/register.ts b/packages/editor-ui/src/hooks/register.ts
index 7d15486363..86bf2fc416 100644
--- a/packages/editor-ui/src/hooks/register.ts
+++ b/packages/editor-ui/src/hooks/register.ts
@@ -1,4 +1,27 @@
-import { extendExternalHooks } from '@/mixins/externalHooks';
+import type { PartialDeep } from 'type-fest';
+import type { ExternalHooks, ExternalHooksGenericContext } from '@/types';
+
+export function extendExternalHooks(hooksExtension: PartialDeep<ExternalHooks>) {
+	if (typeof window.n8nExternalHooks === 'undefined') {
+		window.n8nExternalHooks = {};
+	}
+
+	for (const resource of Object.keys(hooksExtension) as Array<keyof ExternalHooks>) {
+		if (typeof window.n8nExternalHooks[resource] === 'undefined') {
+			window.n8nExternalHooks[resource] = {};
+		}
+
+		const extensionContext = hooksExtension[resource] as ExternalHooksGenericContext;
+		const context = window.n8nExternalHooks[resource] as ExternalHooksGenericContext;
+		for (const operator of Object.keys(extensionContext)) {
+			if (typeof context[operator] === 'undefined') {
+				context[operator] = [];
+			}
+
+			context[operator].push(...extensionContext[operator]);
+		}
+	}
+}
 
 let cloudHooksInitialized = false;
 export async function initializeCloudHooks() {
diff --git a/packages/editor-ui/src/mixins/externalHooks.ts b/packages/editor-ui/src/mixins/externalHooks.ts
deleted file mode 100644
index 4d191c60e6..0000000000
--- a/packages/editor-ui/src/mixins/externalHooks.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import type { IExternalHooks } from '@/Interface';
-import type { PartialDeep } from 'type-fest';
-import type { ExternalHooks, ExternalHooksGenericContext } from '@/types';
-import { defineComponent } from 'vue';
-import { runExternalHook } from '@/utils/externalHooks';
-
-export function extendExternalHooks(hooksExtension: PartialDeep<ExternalHooks>) {
-	if (typeof window.n8nExternalHooks === 'undefined') {
-		window.n8nExternalHooks = {};
-	}
-
-	for (const resource of Object.keys(hooksExtension) as Array<keyof ExternalHooks>) {
-		if (typeof window.n8nExternalHooks[resource] === 'undefined') {
-			window.n8nExternalHooks[resource] = {};
-		}
-
-		const extensionContext = hooksExtension[resource] as ExternalHooksGenericContext;
-		const context = window.n8nExternalHooks[resource] as ExternalHooksGenericContext;
-		for (const operator of Object.keys(extensionContext)) {
-			if (typeof context[operator] === 'undefined') {
-				context[operator] = [];
-			}
-
-			context[operator].push(...extensionContext[operator]);
-		}
-	}
-}
-
-export const externalHooks = defineComponent({
-	methods: {
-		$externalHooks(): IExternalHooks {
-			return {
-				run: runExternalHook,
-			};
-		},
-	},
-});
diff --git a/packages/editor-ui/src/mixins/pinData.ts b/packages/editor-ui/src/mixins/pinData.ts
index 3481ee160d..2098446b46 100644
--- a/packages/editor-ui/src/mixins/pinData.ts
+++ b/packages/editor-ui/src/mixins/pinData.ts
@@ -13,6 +13,7 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import { NodeConnectionType, NodeHelpers, jsonParse, jsonStringify } from 'n8n-workflow';
 import { useToast } from '@/composables/useToast';
+import { useExternalHooks } from '@/composables/useExternalHooks';
 
 export type PinDataSource =
 	| 'pin-icon-click'
@@ -168,7 +169,7 @@ export const pinData = defineComponent({
 				view: this.displayMode,
 				run_index: this.runIndex,
 			};
-			void this.$externalHooks().run('runData.onDataPinningSuccess', telemetryPayload);
+			void useExternalHooks().run('runData.onDataPinningSuccess', telemetryPayload);
 			this.$telemetry.track('Ndv data pinning success', telemetryPayload);
 		},
 		onDataPinningError({
diff --git a/packages/editor-ui/src/mixins/pushConnection.ts b/packages/editor-ui/src/mixins/pushConnection.ts
index 7ec7c40803..d519a599ab 100644
--- a/packages/editor-ui/src/mixins/pushConnection.ts
+++ b/packages/editor-ui/src/mixins/pushConnection.ts
@@ -5,7 +5,6 @@ import type {
 	IPushDataExecutionFinished,
 } from '@/Interface';
 
-import { externalHooks } from '@/mixins/externalHooks';
 import { nodeHelpers } from '@/mixins/nodeHelpers';
 import { useTitleChange } from '@/composables/useTitleChange';
 import { useToast } from '@/composables/useToast';
@@ -39,6 +38,7 @@ import { defineComponent } from 'vue';
 import { useOrchestrationStore } from '@/stores/orchestration.store';
 import { usePushConnectionStore } from '@/stores/pushConnection.store';
 import { useCollaborationStore } from '@/stores/collaboration.store';
+import { useExternalHooks } from '@/composables/useExternalHooks';
 
 export const pushConnection = defineComponent({
 	setup() {
@@ -52,7 +52,7 @@ export const pushConnection = defineComponent({
 			void this.pushMessageReceived(message);
 		});
 	},
-	mixins: [externalHooks, nodeHelpers, workflowHelpers],
+	mixins: [nodeHelpers, workflowHelpers],
 	data() {
 		return {
 			retryTimeout: null as NodeJS.Timeout | null,
@@ -518,7 +518,7 @@ export const pushConnection = defineComponent({
 						runDataExecuted.data.resultData.runData[lastNodeExecuted][0].data!.main[0]!.length;
 				}
 
-				void this.$externalHooks().run('pushConnection.executionFinished', {
+				void useExternalHooks().run('pushConnection.executionFinished', {
 					itemsCount,
 					nodeName: runDataExecuted.data.resultData.lastNodeExecuted,
 					errorMessage: runDataExecutedErrorMessage,
diff --git a/packages/editor-ui/src/mixins/workflowActivate.ts b/packages/editor-ui/src/mixins/workflowActivate.ts
index dc096d8f25..30233a9fe2 100644
--- a/packages/editor-ui/src/mixins/workflowActivate.ts
+++ b/packages/editor-ui/src/mixins/workflowActivate.ts
@@ -2,7 +2,6 @@ import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
 import { useStorage } from '@/composables/useStorage';
 
-import { externalHooks } from '@/mixins/externalHooks';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { useToast } from '@/composables/useToast';
 
@@ -14,9 +13,10 @@ import {
 import { useUIStore } from '@/stores/ui.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
+import { useExternalHooks } from '@/composables/useExternalHooks';
 
 export const workflowActivate = defineComponent({
-	mixins: [externalHooks, workflowHelpers],
+	mixins: [workflowHelpers],
 	setup() {
 		return {
 			...useToast(),
@@ -64,7 +64,7 @@ export const workflowActivate = defineComponent({
 				ndv_input: telemetrySource === 'ndv',
 			};
 			this.$telemetry.track('User set workflow active status', telemetryPayload);
-			void this.$externalHooks().run('workflowActivate.updateWorkflowActivation', telemetryPayload);
+			void useExternalHooks().run('workflowActivate.updateWorkflowActivation', telemetryPayload);
 
 			try {
 				if (isWorkflowActive && newActiveState) {
@@ -111,7 +111,7 @@ export const workflowActivate = defineComponent({
 			const activationEventName = isCurrentWorkflow
 				? 'workflow.activeChangeCurrent'
 				: 'workflow.activeChange';
-			void this.$externalHooks().run(activationEventName, {
+			void useExternalHooks().run(activationEventName, {
 				workflowId: currWorkflowId,
 				active: newActiveState,
 			});
diff --git a/packages/editor-ui/src/mixins/workflowHelpers.ts b/packages/editor-ui/src/mixins/workflowHelpers.ts
index c993389976..f1bfbaf2a5 100644
--- a/packages/editor-ui/src/mixins/workflowHelpers.ts
+++ b/packages/editor-ui/src/mixins/workflowHelpers.ts
@@ -47,7 +47,6 @@ import type {
 
 import { useMessage } from '@/composables/useMessage';
 import { useToast } from '@/composables/useToast';
-import { externalHooks } from '@/mixins/externalHooks';
 import { genericHelpers } from '@/mixins/genericHelpers';
 import { nodeHelpers } from '@/mixins/nodeHelpers';
 
@@ -68,6 +67,7 @@ import { getSourceItems } from '@/utils/pairedItemUtils';
 import { v4 as uuid } from 'uuid';
 import { useSettingsStore } from '@/stores/settings.store';
 import { getCredentialTypeName, isCredentialOnlyNodeType } from '@/utils/credentialOnlyNodes';
+import { useExternalHooks } from '@/composables/useExternalHooks';
 
 export function getParentMainInputNode(workflow: Workflow, node: INode): INode {
 	const nodeType = useNodeTypesStore().getNodeType(node.type);
@@ -474,7 +474,7 @@ export function executeData(
 }
 
 export const workflowHelpers = defineComponent({
-	mixins: [externalHooks, nodeHelpers, genericHelpers],
+	mixins: [nodeHelpers, genericHelpers],
 	setup() {
 		return {
 			...useToast(),
@@ -912,7 +912,7 @@ export const workflowHelpers = defineComponent({
 
 				this.uiStore.stateIsDirty = false;
 				this.uiStore.removeActiveAction('workflowSaving');
-				void this.$externalHooks().run('workflow.afterUpdate', { workflowData });
+				void useExternalHooks().run('workflow.afterUpdate', { workflowData });
 
 				return true;
 			} catch (error) {
@@ -1077,7 +1077,7 @@ export const workflowHelpers = defineComponent({
 
 				this.uiStore.removeActiveAction('workflowSaving');
 				this.uiStore.stateIsDirty = false;
-				void this.$externalHooks().run('workflow.afterUpdate', { workflowData });
+				void useExternalHooks().run('workflow.afterUpdate', { workflowData });
 
 				getCurrentWorkflow(true); // refresh cache
 				return true;
diff --git a/packages/editor-ui/src/mixins/workflowRun.ts b/packages/editor-ui/src/mixins/workflowRun.ts
index d757df20dc..574cd71c8d 100644
--- a/packages/editor-ui/src/mixins/workflowRun.ts
+++ b/packages/editor-ui/src/mixins/workflowRun.ts
@@ -11,7 +11,6 @@ import {
 } from 'n8n-workflow';
 
 import { useToast } from '@/composables/useToast';
-import { externalHooks } from '@/mixins/externalHooks';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 
 import { useTitleChange } from '@/composables/useTitleChange';
@@ -20,9 +19,10 @@ import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { FORM_TRIGGER_NODE_TYPE } from '@/constants';
 import { openPopUpWindow } from '@/utils/executionUtils';
+import { useExternalHooks } from '@/composables/useExternalHooks';
 
 export const workflowRun = defineComponent({
-	mixins: [externalHooks, workflowHelpers],
+	mixins: [workflowHelpers],
 	setup() {
 		return {
 			...useTitleChange(),
@@ -125,7 +125,7 @@ export const workflowRun = defineComponent({
 							duration: 0,
 						});
 						this.titleSet(workflow.name as string, 'ERROR');
-						void this.$externalHooks().run('workflowRun.runError', {
+						void useExternalHooks().run('workflowRun.runError', {
 							errorMessages,
 							nodeName: options.destinationNode,
 						});
@@ -287,7 +287,7 @@ export const workflowRun = defineComponent({
 					}
 				}
 
-				await this.$externalHooks().run('workflowRun.runWorkflow', {
+				await useExternalHooks().run('workflowRun.runWorkflow', {
 					nodeName: options.destinationNode,
 					source: options.source,
 				});
diff --git a/packages/editor-ui/src/router.ts b/packages/editor-ui/src/router.ts
index 781217b9a9..eac3900d0d 100644
--- a/packages/editor-ui/src/router.ts
+++ b/packages/editor-ui/src/router.ts
@@ -8,7 +8,7 @@ import type {
 	RouteLocationNormalized,
 } from 'vue-router';
 import { createRouter, createWebHistory } from 'vue-router';
-import { runExternalHook } from '@/utils/externalHooks';
+import { useExternalHooks } from '@/composables/useExternalHooks';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useTemplatesStore } from '@/stores/templates.store';
 import { useUIStore } from '@/stores/ui.store';
@@ -828,7 +828,7 @@ router.afterEach((to, from) => {
 	 * Run external hooks
 	 */
 
-	void runExternalHook('main.routeChange', { from, to });
+	void useExternalHooks().run('main.routeChange', { from, to });
 
 	/**
 	 * Track current view for telemetry
diff --git a/packages/editor-ui/src/utils/externalHooks.ts b/packages/editor-ui/src/utils/externalHooks.ts
deleted file mode 100644
index df11bc26ac..0000000000
--- a/packages/editor-ui/src/utils/externalHooks.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { IDataObject } from 'n8n-workflow';
-import type {
-	ExternalHooks,
-	ExternalHooksKey,
-	ExternalHooksGenericContext,
-	ExtractExternalHooksMethodPayloadFromKey,
-} from '@/types/externalHooks';
-import { useWebhooksStore } from '@/stores/webhooks.store';
-
-export async function runExternalHook<T extends ExternalHooksKey>(
-	eventName: T,
-	metadata?: ExtractExternalHooksMethodPayloadFromKey<T>,
-) {
-	if (!window.n8nExternalHooks) {
-		return;
-	}
-
-	const store = useWebhooksStore();
-
-	const [resource, operator] = eventName.split('.') as [
-		keyof ExternalHooks,
-		keyof ExternalHooks[keyof ExternalHooks],
-	];
-
-	const context = window.n8nExternalHooks[resource] as ExternalHooksGenericContext;
-	if (context?.[operator]) {
-		const hookMethods = context[operator];
-
-		for (const hookMethod of hookMethods) {
-			await hookMethod(store, metadata as IDataObject);
-		}
-	}
-}
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index fee6037c8c..d35da15ba4 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -235,7 +235,6 @@ import {
 	TIME,
 } from '@/constants';
 import { copyPaste } from '@/mixins/copyPaste';
-import { externalHooks } from '@/mixins/externalHooks';
 import { genericHelpers } from '@/mixins/genericHelpers';
 import { moveNodeWorkflow } from '@/mixins/moveNodeWorkflow';
 import { nodeHelpers } from '@/mixins/nodeHelpers';
@@ -366,6 +365,7 @@ import {
 import { sourceControlEventBus } from '@/event-bus/source-control';
 import { getConnectorPaintStyleData, OVERLAY_ENDPOINT_ARROW_ID } from '@/utils/nodeViewUtils';
 import { useViewStacks } from '@/components/Node/NodeCreator/composables/useViewStacks';
+import { useExternalHooks } from '@/composables/useExternalHooks';
 
 interface AddNodeOptions {
 	position?: XYPosition;
@@ -380,7 +380,6 @@ export default defineComponent({
 	name: 'NodeView',
 	mixins: [
 		copyPaste,
-		externalHooks,
 		genericHelpers,
 		moveNodeWorkflow,
 		workflowHelpers,
@@ -399,7 +398,8 @@ export default defineComponent({
 		CanvasControls,
 		ContextMenu,
 	},
-	setup(props) {
+	setup(props, ctx) {
+		const externalHooks = useExternalHooks();
 		const locale = useI18n();
 		const contextMenu = useContextMenu();
 		const dataSchema = useDataSchema();
@@ -408,6 +408,7 @@ export default defineComponent({
 			locale,
 			contextMenu,
 			dataSchema,
+			externalHooks,
 			...useCanvasMouseSelect(),
 			...useGlobalLinkActions(),
 			...useTitleChange(),
@@ -416,7 +417,7 @@ export default defineComponent({
 			...useUniqueNodeName(),
 			...useExecutionDebugging(),
 			// eslint-disable-next-line @typescript-eslint/no-misused-promises
-			...workflowRun.setup?.(props),
+			...workflowRun.setup?.(props, ctx),
 		};
 	},
 	errorCaptured: (err, vm, info) => {
@@ -775,7 +776,7 @@ export default defineComponent({
 				session_id: this.ndvStore.sessionId,
 			};
 			this.$telemetry.track('User clicked execute node button', telemetryPayload);
-			void this.$externalHooks().run('nodeView.onRunNode', telemetryPayload);
+			void this.externalHooks.run('nodeView.onRunNode', telemetryPayload);
 			void this.runWorkflow({ destinationNode: nodeName, source });
 		},
 		async onOpenChat() {
@@ -783,7 +784,7 @@ export default defineComponent({
 				workflow_id: this.workflowsStore.workflowId,
 			};
 			this.$telemetry.track('User clicked chat open button', telemetryPayload);
-			void this.$externalHooks().run('nodeView.onOpenChat', telemetryPayload);
+			void this.externalHooks.run('nodeView.onOpenChat', telemetryPayload);
 			this.uiStore.openModal(WORKFLOW_LM_CHAT_MODAL_KEY);
 		},
 		async onRunWorkflow() {
@@ -796,7 +797,7 @@ export default defineComponent({
 					),
 				};
 				this.$telemetry.track('User clicked execute workflow button', telemetryPayload);
-				void this.$externalHooks().run('nodeView.onRunWorkflow', telemetryPayload);
+				void this.externalHooks.run('nodeView.onRunWorkflow', telemetryPayload);
 			});
 
 			await this.runWorkflow({});
@@ -950,7 +951,7 @@ export default defineComponent({
 			await this.$nextTick();
 			this.canvasStore.zoomToFit();
 			this.uiStore.stateIsDirty = false;
-			void this.$externalHooks().run('execution.open', {
+			void this.externalHooks.run('execution.open', {
 				workflowId: data.workflowData.id,
 				workflowName: data.workflowData.name,
 				executionId,
@@ -1030,7 +1031,7 @@ export default defineComponent({
 
 			let data: IWorkflowTemplate | undefined;
 			try {
-				void this.$externalHooks().run('template.requested', { templateId });
+				void this.externalHooks.run('template.requested', { templateId });
 				data = await this.templatesStore.getFixedWorkflowTemplate(templateId);
 
 				if (!data) {
@@ -1055,7 +1056,7 @@ export default defineComponent({
 			this.canvasStore.zoomToFit();
 			this.uiStore.stateIsDirty = true;
 
-			void this.$externalHooks().run('template.open', {
+			void this.externalHooks.run('template.open', {
 				templateId,
 				templateName: data.name,
 				workflow: data.workflow,
@@ -1106,7 +1107,7 @@ export default defineComponent({
 				this.uiStore.stateIsDirty = false;
 			}
 			this.canvasStore.zoomToFit();
-			void this.$externalHooks().run('workflow.open', {
+			void this.externalHooks.run('workflow.open', {
 				workflowId: workflow.id,
 				workflowName: workflow.name,
 			});
@@ -1191,7 +1192,7 @@ export default defineComponent({
 			if (e.key === 'Escape') {
 				this.createNodeActive = false;
 				if (this.activeNode) {
-					void this.$externalHooks().run('dataDisplay.nodeEditingFinished');
+					void this.externalHooks.run('dataDisplay.nodeEditingFinished');
 					this.ndvStore.activeNodeName = null;
 				}
 
@@ -2256,7 +2257,7 @@ export default defineComponent({
 					workflow_id: this.workflowsStore.workflowId,
 				});
 			} else {
-				void this.$externalHooks().run('nodeView.addNodeButton', { nodeTypeName });
+				void this.externalHooks.run('nodeView.addNodeButton', { nodeTypeName });
 				useSegment().trackAddedTrigger(nodeTypeName);
 				const trackProperties: ITelemetryTrackProperties = {
 					node_type: nodeTypeName,
@@ -3595,7 +3596,7 @@ export default defineComponent({
 					is_welcome_note: node.name === QUICKSTART_NOTE_NAME,
 				});
 			} else {
-				void this.$externalHooks().run('node.deleteNode', { node });
+				void this.externalHooks.run('node.deleteNode', { node });
 				this.$telemetry.track('User deleted node', {
 					node_type: node.type,
 					workflow_id: this.workflowsStore.workflowId,
@@ -4395,7 +4396,7 @@ export default defineComponent({
 			}
 
 			if (createNodeActive) this.nodeCreatorStore.setOpenSource(source);
-			void this.$externalHooks().run('nodeView.createNodeActiveChanged', {
+			void this.externalHooks.run('nodeView.createNodeActiveChanged', {
 				source,
 				mode,
 				createNodeActive,
@@ -4644,9 +4645,7 @@ export default defineComponent({
 		});
 
 		// TODO: This currently breaks since front-end hooks are still not updated to work with pinia store
-		void this.$externalHooks()
-			.run('nodeView.mount')
-			.catch((e) => {});
+		void this.externalHooks.run('nodeView.mount').catch((e) => {});
 
 		if (
 			this.currentUser?.personalizationAnswers !== null &&
diff --git a/packages/editor-ui/src/views/SettingsCommunityNodesView.vue b/packages/editor-ui/src/views/SettingsCommunityNodesView.vue
index aeba8fda89..fd95bb7bbe 100644
--- a/packages/editor-ui/src/views/SettingsCommunityNodesView.vue
+++ b/packages/editor-ui/src/views/SettingsCommunityNodesView.vue
@@ -68,6 +68,7 @@ import { useUIStore } from '@/stores/ui.store';
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/settings.store';
 import { defineComponent } from 'vue';
+import { useExternalHooks } from '@/composables/useExternalHooks';
 
 const PACKAGE_COUNT_THRESHOLD = 31;
 
@@ -77,11 +78,14 @@ export default defineComponent({
 	components: {
 		CommunityPackageCard,
 	},
-	setup(props) {
+	setup(props, ctx) {
+		const externalHooks = useExternalHooks();
+
 		return {
+			externalHooks,
 			...useToast(),
 			// eslint-disable-next-line @typescript-eslint/no-misused-promises
-			...pushConnection.setup?.(props),
+			...pushConnection.setup?.(props, ctx),
 		};
 	},
 	data() {
@@ -222,10 +226,7 @@ export default defineComponent({
 			};
 			this.$telemetry.track('user clicked cnr install button', telemetryPayload);
 
-			void this.$externalHooks().run(
-				'settingsCommunityNodesView.openInstallModal',
-				telemetryPayload,
-			);
+			void this.externalHooks.run('settingsCommunityNodesView.openInstallModal', telemetryPayload);
 			this.uiStore.openModal(COMMUNITY_PACKAGE_INSTALL_MODAL_KEY);
 		},
 	},
diff --git a/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupWorkflowFromTemplateView.vue b/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupWorkflowFromTemplateView.vue
index e4bb3af1cb..07bb137554 100644
--- a/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupWorkflowFromTemplateView.vue
+++ b/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupWorkflowFromTemplateView.vue
@@ -8,19 +8,15 @@ import AppsRequiringCredsNotice from './AppsRequiringCredsNotice.vue';
 import SetupTemplateFormStep from './SetupTemplateFormStep.vue';
 import TemplatesView from '../TemplatesView.vue';
 import { VIEWS } from '@/constants';
-import { useExternalHooks } from '@/composables/useExternalHooks';
 import { useI18n } from '@/composables/useI18n';
-import { useTelemetry } from '@/composables/useTelemetry';
 
 // Store
 const setupTemplateStore = useSetupTemplateStore();
 const i18n = useI18n();
-const $telemetry = useTelemetry();
-const $externalHooks = useExternalHooks();
 
 // Router
 const route = useRoute();
-const $router = useRouter();
+const router = useRouter();
 
 //#region Computed
 
@@ -31,7 +27,7 @@ const title = computed(() => setupTemplateStore.template?.name ?? 'unknown');
 const isReady = computed(() => !setupTemplateStore.isLoading);
 
 const skipSetupUrl = computed(() => {
-	const resolvedRoute = $router.resolve({
+	const resolvedRoute = router.resolve({
 		name: VIEWS.TEMPLATE_IMPORT,
 		params: { id: templateId.value },
 	});
@@ -55,9 +51,7 @@ const onSkipSetup = async (event: MouseEvent) => {
 	event.preventDefault();
 
 	await setupTemplateStore.skipSetup({
-		$externalHooks,
-		$telemetry,
-		$router,
+		router,
 	});
 };
 
@@ -69,9 +63,7 @@ const skipIfTemplateHasNoCreds = async () => {
 
 	if (setupTemplateStore.credentialUsages.length === 0) {
 		await setupTemplateStore.skipSetup({
-			$externalHooks,
-			$telemetry,
-			$router,
+			router,
 		});
 	}
 };
@@ -94,7 +86,7 @@ onMounted(async () => {
 	<TemplatesView :goBackEnabled="true">
 		<template #header>
 			<n8n-heading v-if="isReady" tag="h1" size="2xlarge"
-				>{{ $locale.baseText('templateSetup.title', { interpolate: { name: title } }) }}
+				>{{ i18n.baseText('templateSetup.title', { interpolate: { name: title } }) }}
 			</n8n-heading>
 			<n8n-loading v-else variant="h1" />
 		</template>
@@ -124,15 +116,15 @@ onMounted(async () => {
 
 				<div :class="$style.actions">
 					<n8n-link :href="skipSetupUrl" :newWindow="false" @click="onSkipSetup($event)">{{
-						$locale.baseText('templateSetup.skip')
+						i18n.baseText('templateSetup.skip')
 					}}</n8n-link>
 
 					<n8n-button
 						v-if="isReady"
 						size="large"
-						:label="$locale.baseText('templateSetup.continue.button')"
+						:label="i18n.baseText('templateSetup.continue.button')"
 						:disabled="setupTemplateStore.isSaving"
-						@click="setupTemplateStore.createWorkflow($router)"
+						@click="setupTemplateStore.createWorkflow(router)"
 						data-test-id="continue-button"
 					/>
 					<div v-else>
diff --git a/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/setupTemplate.store.ts b/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/setupTemplate.store.ts
index 0e0f00ad36..b8c95f9bdb 100644
--- a/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/setupTemplate.store.ts
+++ b/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/setupTemplate.store.ts
@@ -11,12 +11,10 @@ import { getAppNameFromNodeName } from '@/utils/nodeTypesUtils';
 import type { INodeCredentialsDetails, INodeTypeDescription } from 'n8n-workflow';
 import type {
 	ICredentialsResponse,
-	IExternalHooks,
 	INodeUi,
 	ITemplatesWorkflowFull,
 	IWorkflowTemplateNode,
 } from '@/Interface';
-import type { Telemetry } from '@/plugins/telemetry';
 import { VIEWS } from '@/constants';
 import { createWorkflowFromTemplate } from '@/utils/templates/templateActions';
 import type {
@@ -28,6 +26,8 @@ import {
 	keyFromCredentialTypeAndName,
 	normalizeTemplateNodeCredentials,
 } from '@/utils/templates/templateTransforms';
+import { useExternalHooks } from '@/composables/useExternalHooks';
+import { useTelemetry } from '@/composables/useTelemetry';
 
 export type NodeAndType = {
 	node: INodeUi;
@@ -300,25 +300,23 @@ export const useSetupTemplateStore = defineStore('setupTemplate', () => {
 	/**
 	 * Skips the setup and goes directly to the workflow view.
 	 */
-	const skipSetup = async (opts: {
-		$externalHooks: IExternalHooks;
-		$telemetry: Telemetry;
-		$router: Router;
-	}) => {
-		const { $externalHooks, $telemetry, $router } = opts;
+	const skipSetup = async ({ router }: { router: Router }) => {
+		const externalHooks = useExternalHooks();
+		const telemetry = useTelemetry();
+
 		const telemetryPayload = {
 			source: 'workflow',
 			template_id: templateId.value,
 			wf_template_repo_session_id: templatesStore.currentSessionId,
 		};
 
-		await $externalHooks.run('templatesWorkflowView.openWorkflow', telemetryPayload);
-		$telemetry.track('User inserted workflow template', telemetryPayload, {
+		await externalHooks.run('templatesWorkflowView.openWorkflow', telemetryPayload);
+		telemetry.track('User inserted workflow template', telemetryPayload, {
 			withPostHog: true,
 		});
 
 		// Replace the URL so back button doesn't come back to this setup view
-		await $router.replace({
+		await router.replace({
 			name: VIEWS.TEMPLATE_IMPORT,
 			params: { id: templateId.value },
 		});
diff --git a/packages/editor-ui/src/views/TemplatesCollectionView.vue b/packages/editor-ui/src/views/TemplatesCollectionView.vue
index 6468689d22..9ac801caab 100644
--- a/packages/editor-ui/src/views/TemplatesCollectionView.vue
+++ b/packages/editor-ui/src/views/TemplatesCollectionView.vue
@@ -71,6 +71,7 @@ import { useTemplatesStore } from '@/stores/templates.store';
 import { usePostHog } from '@/stores/posthog.store';
 import { FeatureFlag, isFeatureFlagEnabled } from '@/utils/featureFlag';
 import { openTemplateCredentialSetup } from '@/utils/templates/templateActions';
+import { useExternalHooks } from '@/composables/useExternalHooks';
 
 export default defineComponent({
 	name: 'TemplatesCollectionView',
@@ -80,6 +81,13 @@ export default defineComponent({
 		TemplateList,
 		TemplatesView,
 	},
+	setup() {
+		const externalHooks = useExternalHooks();
+
+		return {
+			externalHooks,
+		};
+	},
 	computed: {
 		...mapStores(useTemplatesStore, usePostHog),
 		collection(): ITemplatesCollectionFull | null {
@@ -127,7 +135,7 @@ export default defineComponent({
 					wf_template_repo_session_id: this.templatesStore.currentSessionId,
 					source: 'collection',
 				};
-				await this.$externalHooks().run('templatesCollectionView.onUseWorkflow', telemetryPayload);
+				await this.externalHooks.run('templatesCollectionView.onUseWorkflow', telemetryPayload);
 				this.$telemetry.track('User inserted workflow template', telemetryPayload, {
 					withPostHog: true,
 				});
diff --git a/packages/editor-ui/src/views/TemplatesWorkflowView.vue b/packages/editor-ui/src/views/TemplatesWorkflowView.vue
index d3e8bc01a4..9d2f2facb7 100644
--- a/packages/editor-ui/src/views/TemplatesWorkflowView.vue
+++ b/packages/editor-ui/src/views/TemplatesWorkflowView.vue
@@ -70,6 +70,7 @@ import { useTemplatesStore } from '@/stores/templates.store';
 import { usePostHog } from '@/stores/posthog.store';
 import { openTemplateCredentialSetup } from '@/utils/templates/templateActions';
 import { FeatureFlag, isFeatureFlagEnabled } from '@/utils/featureFlag';
+import { useExternalHooks } from '@/composables/useExternalHooks';
 
 export default defineComponent({
 	name: 'TemplatesWorkflowView',
@@ -79,6 +80,13 @@ export default defineComponent({
 		TemplatesView,
 		WorkflowPreview,
 	},
+	setup() {
+		const externalHooks = useExternalHooks();
+
+		return {
+			externalHooks,
+		};
+	},
 	computed: {
 		...mapStores(useTemplatesStore, usePostHog),
 		template(): ITemplatesWorkflowFull | null {
@@ -109,7 +117,7 @@ export default defineComponent({
 				this.$telemetry.track('User inserted workflow template', telemetryPayload, {
 					withPostHog: true,
 				});
-				await this.$externalHooks().run('templatesWorkflowView.openWorkflow', telemetryPayload);
+				await this.externalHooks.run('templatesWorkflowView.openWorkflow', telemetryPayload);
 			}
 
 			await openTemplateCredentialSetup({