From b95fcd73235fed85e0e644541738f7e1d138a4c4 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Fri, 12 May 2023 10:13:42 +0200
Subject: [PATCH] refactor(editor): Turn showMessage mixin to composable
 (#6081)

* refactor(editor): move $getExecutionError from showMessages mixin to pushConnection (it is used there only)

* refactor(editor): resolve showMessage mixin methods

* fix(editor): use composable instead of mixin

* fix(editor): resolve conflicts

* fix(editor): replace clearAllStickyNotifications

* fix(editor): replace confirmMessage

* fix(editor): replace confirmMessage

* fix(editor): replace confirmMessage

* fix(editor): remove last confirmMessage usage

* fix(editor): remove $prompt usage

* fix(editor): remove $show methods

* fix(editor): lint fix

* fix(editor): lint fix

* fix(editor): fixes after review
---
 packages/editor-ui/src/App.vue                |  30 +--
 .../src/components/ChangePasswordModal.vue    |  19 +-
 .../src/components/CommunityPackageCard.vue   |   7 +-
 .../CommunityPackageInstallModal.vue          |  19 +-
 .../CommunityPackageManageConfirmModal.vue    |  26 +-
 .../src/components/ContactPromptModal.vue     |  10 +-
 .../editor-ui/src/components/CopyInput.vue    |  11 +-
 .../src/components/CredentialCard.vue         |  26 +-
 .../CredentialEdit/CredentialEdit.vue         |  89 ++++---
 .../CredentialEdit/CredentialSharing.ee.vue   |  32 ++-
 .../src/components/DeleteUserModal.vue        |  20 +-
 .../components/DuplicateWorkflowDialog.vue    |  17 +-
 .../src/components/Error/NodeErrorView.vue    |  12 +-
 .../src/components/ExecutionsList.vue         |  48 ++--
 .../ExecutionsView/ExecutionCard.vue          |   3 +-
 .../ExecutionsView/ExecutionPreview.vue       |  25 +-
 .../ExecutionsView/ExecutionsList.vue         |  58 +++--
 .../src/components/ImportCurlModal.vue        |  21 +-
 .../src/components/ImportParameter.vue        |   5 +-
 .../src/components/InlineNameEdit.vue         |  13 +-
 .../src/components/InviteUsersModal.vue       |  19 +-
 .../components/MainHeader/WorkflowDetails.vue |  31 ++-
 .../editor-ui/src/components/MainSidebar.vue  |  16 +-
 .../src/components/NodeCredentials.vue        |  11 +-
 .../src/components/NodeDetailsView.vue        |  14 +-
 .../src/components/NodeExecuteButton.vue      |  21 +-
 .../editor-ui/src/components/NodeWebhooks.vue |  11 +-
 .../components/OnboardingCallSignupModal.vue  |  15 +-
 .../editor-ui/src/components/PageAlert.vue    |  20 +-
 .../src/components/ParameterInput.vue         |   9 +-
 .../src/components/ParameterInputFull.vue     |  13 +-
 .../src/components/ParameterInputWrapper.vue  |   5 +-
 .../src/components/PersonalizationModal.vue   |  15 +-
 packages/editor-ui/src/components/RunData.vue |  11 +-
 .../src/components/RunDataJsonActions.vue     |  12 +-
 .../EventDestinationCard.ee.vue               |  29 ++-
 .../EventDestinationSettingsModal.ee.vue      |  54 ++--
 .../editor-ui/src/components/TagsDropdown.vue |  13 +-
 .../components/TagsManager/TagsManager.vue    |  21 +-
 .../editor-ui/src/components/TriggerPanel.vue |  21 +-
 .../editor-ui/src/components/ValueSurvey.vue  |  10 +-
 .../src/components/WorkflowActivator.vue      |  14 +-
 .../editor-ui/src/components/WorkflowCard.vue |  33 ++-
 .../src/components/WorkflowPreview.vue        |  17 +-
 .../src/components/WorkflowSettings.vue       |  25 +-
 .../src/components/WorkflowShareModal.ee.vue  |  55 ++--
 .../__tests__/ExecutionsList.test.ts          |   3 +-
 .../layouts/ResourcesListLayout.vue           |   5 +-
 packages/editor-ui/src/composables/index.ts   |   7 +-
 .../editor-ui/src/composables/useToast.ts     |  26 +-
 packages/editor-ui/src/constants.ts           |   2 +-
 .../editor-ui/src/mixins/genericHelpers.ts    |  13 +-
 packages/editor-ui/src/mixins/newVersions.ts  |  13 +-
 packages/editor-ui/src/mixins/pinData.ts      |  10 +-
 .../editor-ui/src/mixins/pushConnection.ts    |  59 +++--
 packages/editor-ui/src/mixins/showMessage.ts  | 235 ------------------
 .../editor-ui/src/mixins/workflowActivate.ts  |  15 +-
 .../editor-ui/src/mixins/workflowHelpers.ts   |  30 ++-
 packages/editor-ui/src/mixins/workflowRun.ts  |   9 +-
 .../src/plugins/i18n/locales/en.json          |   4 +-
 .../src/views/ChangePasswordView.vue          |  21 +-
 .../editor-ui/src/views/CredentialsView.vue   |  18 +-
 .../src/views/ForgotMyPasswordView.vue        |  15 +-
 packages/editor-ui/src/views/NodeView.vue     | 124 +++++----
 .../editor-ui/src/views/SettingsApiView.vue   |  33 ++-
 .../src/views/SettingsCommunityNodesView.vue  |  11 +-
 .../editor-ui/src/views/SettingsLdapView.vue  |  50 ++--
 .../src/views/SettingsPersonalView.vue        |  15 +-
 .../editor-ui/src/views/SettingsUsersView.vue |  17 +-
 packages/editor-ui/src/views/SetupView.vue    |  38 +--
 packages/editor-ui/src/views/SigninView.vue   |  13 +-
 packages/editor-ui/src/views/SignoutView.vue  |  13 +-
 packages/editor-ui/src/views/SignupView.vue   |  19 +-
 .../src/views/TemplatesSearchView.vue         |  10 +-
 .../editor-ui/src/views/WorkflowsView.vue     |  18 +-
 75 files changed, 990 insertions(+), 862 deletions(-)
 delete mode 100644 packages/editor-ui/src/mixins/showMessage.ts

diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index 7bbd5c668a..14aec36ec8 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -27,29 +27,28 @@
 </template>
 
 <script lang="ts">
-import Modals from './components/Modals.vue';
-import LoadingView from './views/LoadingView.vue';
-import Telemetry from './components/Telemetry.vue';
-import { HIRING_BANNER, LOCAL_STORAGE_THEME, VIEWS } from './constants';
+import Modals from '@/components/Modals.vue';
+import LoadingView from '@/views/LoadingView.vue';
+import Telemetry from '@/components/Telemetry.vue';
+import { HIRING_BANNER, LOCAL_STORAGE_THEME, VIEWS } from '@/constants';
 
 import mixins from 'vue-typed-mixins';
-import { showMessage } from '@/mixins/showMessage';
 import { userHelpers } from '@/mixins/userHelpers';
-import { loadLanguage } from './plugins/i18n';
-import useGlobalLinkActions from '@/composables/useGlobalLinkActions';
+import { loadLanguage } from '@/plugins/i18n';
+import { useGlobalLinkActions, useToast } from '@/composables';
 import { mapStores } from 'pinia';
-import { useUIStore } from './stores/ui.store';
-import { useSettingsStore } from './stores/settings.store';
-import { useUsersStore } from './stores/users.store';
-import { useRootStore } from './stores/n8nRoot.store';
-import { useTemplatesStore } from './stores/templates.store';
-import { useNodeTypesStore } from './stores/nodeTypes.store';
+import { useUIStore } from '@/stores/ui.store';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useUsersStore } from '@/stores/users.store';
+import { useRootStore } from '@/stores/n8nRoot.store';
+import { useTemplatesStore } from '@/stores/templates.store';
+import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useHistoryHelper } from '@/composables/useHistoryHelper';
 import { newVersions } from '@/mixins/newVersions';
 import { useRoute } from 'vue-router/composables';
 import { useVersionControlStore } from '@/stores/versionControl.store';
 
-export default mixins(newVersions, showMessage, userHelpers).extend({
+export default mixins(newVersions, userHelpers).extend({
 	name: 'App',
 	components: {
 		LoadingView,
@@ -60,6 +59,7 @@ export default mixins(newVersions, showMessage, userHelpers).extend({
 		return {
 			...useGlobalLinkActions(),
 			...useHistoryHelper(useRoute()),
+			...useToast(),
 		};
 	},
 	computed: {
@@ -86,7 +86,7 @@ export default mixins(newVersions, showMessage, userHelpers).extend({
 			try {
 				await this.settingsStore.getSettings();
 			} catch (e) {
-				this.$showToast({
+				this.showToast({
 					title: this.$locale.baseText('startupError'),
 					message: this.$locale.baseText('startupError.message'),
 					type: 'error',
diff --git a/packages/editor-ui/src/components/ChangePasswordModal.vue b/packages/editor-ui/src/components/ChangePasswordModal.vue
index 7289655188..4cc5dee6ef 100644
--- a/packages/editor-ui/src/components/ChangePasswordModal.vue
+++ b/packages/editor-ui/src/components/ChangePasswordModal.vue
@@ -29,17 +29,17 @@
 </template>
 
 <script lang="ts">
-import mixins from 'vue-typed-mixins';
+import { defineComponent } from 'vue';
 
-import { showMessage } from '@/mixins/showMessage';
-import Modal from './Modal.vue';
+import { useToast } from '@/composables';
+import Modal from '@/components/Modal.vue';
 import type { IFormInputs } from '@/Interface';
-import { CHANGE_PASSWORD_MODAL_KEY } from '../constants';
+import { CHANGE_PASSWORD_MODAL_KEY } from '@/constants';
 import { mapStores } from 'pinia';
 import { useUsersStore } from '@/stores/users.store';
 import { createEventBus } from '@/event-bus';
 
-export default mixins(showMessage).extend({
+export default defineComponent({
 	components: { Modal },
 	name: 'ChangePasswordModal',
 	props: {
@@ -47,6 +47,11 @@ export default mixins(showMessage).extend({
 			type: String,
 		},
 	},
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	data() {
 		return {
 			config: null as null | IFormInputs,
@@ -127,7 +132,7 @@ export default mixins(showMessage).extend({
 				this.loading = true;
 				await this.usersStore.updateCurrentUserPassword(values);
 
-				this.$showMessage({
+				this.showMessage({
 					type: 'success',
 					title: this.$locale.baseText('auth.changePassword.passwordUpdated'),
 					message: this.$locale.baseText('auth.changePassword.passwordUpdatedMessage'),
@@ -135,7 +140,7 @@ export default mixins(showMessage).extend({
 
 				this.modalBus.emit('close');
 			} catch (error) {
-				this.$showError(error, this.$locale.baseText('auth.changePassword.error'));
+				this.showError(error, this.$locale.baseText('auth.changePassword.error'));
 			}
 			this.loading = false;
 		},
diff --git a/packages/editor-ui/src/components/CommunityPackageCard.vue b/packages/editor-ui/src/components/CommunityPackageCard.vue
index 5c0f3e9164..56a9217a7b 100644
--- a/packages/editor-ui/src/components/CommunityPackageCard.vue
+++ b/packages/editor-ui/src/components/CommunityPackageCard.vue
@@ -65,11 +65,10 @@
 import { useUIStore } from '@/stores/ui.store';
 import type { PublicInstalledPackage } from 'n8n-workflow';
 import { mapStores } from 'pinia';
-import mixins from 'vue-typed-mixins';
-import { NPM_PACKAGE_DOCS_BASE_URL, COMMUNITY_PACKAGE_MANAGE_ACTIONS } from '../constants';
-import { showMessage } from '@/mixins/showMessage';
+import { defineComponent } from 'vue';
+import { NPM_PACKAGE_DOCS_BASE_URL, COMMUNITY_PACKAGE_MANAGE_ACTIONS } from '@/constants';
 
-export default mixins(showMessage).extend({
+export default defineComponent({
 	name: 'CommunityPackageCard',
 	props: {
 		communityPackage: {
diff --git a/packages/editor-ui/src/components/CommunityPackageInstallModal.vue b/packages/editor-ui/src/components/CommunityPackageInstallModal.vue
index 67f70b77c5..9617a9988f 100644
--- a/packages/editor-ui/src/components/CommunityPackageInstallModal.vue
+++ b/packages/editor-ui/src/components/CommunityPackageInstallModal.vue
@@ -88,24 +88,29 @@
 </template>
 
 <script lang="ts">
-import Modal from './Modal.vue';
+import Modal from '@/components/Modal.vue';
 import {
 	COMMUNITY_PACKAGE_INSTALL_MODAL_KEY,
 	NPM_KEYWORD_SEARCH_URL,
 	COMMUNITY_NODES_INSTALLATION_DOCS_URL,
 	COMMUNITY_NODES_RISKS_DOCS_URL,
-} from '../constants';
-import mixins from 'vue-typed-mixins';
-import { showMessage } from '@/mixins/showMessage';
+} from '@/constants';
+import { defineComponent } from 'vue';
+import { useToast } from '@/composables';
 import { mapStores } from 'pinia';
 import { useCommunityNodesStore } from '@/stores/communityNodes.store';
 import { createEventBus } from '@/event-bus';
 
-export default mixins(showMessage).extend({
+export default defineComponent({
 	name: 'CommunityPackageInstallModal',
 	components: {
 		Modal,
 	},
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	data() {
 		return {
 			loading: false,
@@ -144,7 +149,7 @@ export default mixins(showMessage).extend({
 					await this.communityNodesStore.fetchInstalledPackages();
 					this.loading = false;
 					this.modalBus.emit('close');
-					this.$showMessage({
+					this.showMessage({
 						title: this.$locale.baseText('settings.communityNodes.messages.install.success'),
 						type: 'success',
 					});
@@ -152,7 +157,7 @@ export default mixins(showMessage).extend({
 					if (error.httpStatusCode && error.httpStatusCode === 400) {
 						this.infoTextErrorMessage = error.message;
 					} else {
-						this.$showError(
+						this.showError(
 							error,
 							this.$locale.baseText('settings.communityNodes.messages.install.error'),
 						);
diff --git a/packages/editor-ui/src/components/CommunityPackageManageConfirmModal.vue b/packages/editor-ui/src/components/CommunityPackageManageConfirmModal.vue
index a78c016249..e2f4b4565b 100644
--- a/packages/editor-ui/src/components/CommunityPackageManageConfirmModal.vue
+++ b/packages/editor-ui/src/components/CommunityPackageManageConfirmModal.vue
@@ -35,18 +35,15 @@
 </template>
 
 <script>
-import mixins from 'vue-typed-mixins';
-import Modal from './Modal.vue';
-import {
-	COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY,
-	COMMUNITY_PACKAGE_MANAGE_ACTIONS,
-} from '../constants';
-import { showMessage } from '@/mixins/showMessage';
+import { defineComponent } from 'vue';
+import Modal from '@/components/Modal.vue';
+import { COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY, COMMUNITY_PACKAGE_MANAGE_ACTIONS } from '@/constants';
+import { useToast } from '@/composables';
 import { mapStores } from 'pinia';
 import { useCommunityNodesStore } from '@/stores/communityNodes.store';
 import { createEventBus } from '@/event-bus';
 
-export default mixins(showMessage).extend({
+export default defineComponent({
 	name: 'CommunityPackageManageConfirmModal',
 	components: {
 		Modal,
@@ -64,6 +61,11 @@ export default mixins(showMessage).extend({
 			type: String,
 		},
 	},
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	data() {
 		return {
 			loading: false,
@@ -140,12 +142,12 @@ export default mixins(showMessage).extend({
 				});
 				this.loading = true;
 				await this.communityNodesStore.uninstallPackage(this.activePackageName);
-				this.$showMessage({
+				this.showMessage({
 					title: this.$locale.baseText('settings.communityNodes.messages.uninstall.success.title'),
 					type: 'success',
 				});
 			} catch (error) {
-				this.$showError(
+				this.showError(
 					error,
 					this.$locale.baseText('settings.communityNodes.messages.uninstall.error'),
 				);
@@ -167,7 +169,7 @@ export default mixins(showMessage).extend({
 				this.loading = true;
 				const updatedVersion = this.activePackage.updateAvailable;
 				await this.communityNodesStore.updatePackage(this.activePackageName);
-				this.$showMessage({
+				this.showMessage({
 					title: this.$locale.baseText('settings.communityNodes.messages.update.success.title'),
 					message: this.$locale.baseText(
 						'settings.communityNodes.messages.update.success.message',
@@ -181,7 +183,7 @@ export default mixins(showMessage).extend({
 					type: 'success',
 				});
 			} catch (error) {
-				this.$showError(
+				this.showError(
 					error,
 					this.$locale.baseText('settings.communityNodes.messages.update.error.title'),
 				);
diff --git a/packages/editor-ui/src/components/ContactPromptModal.vue b/packages/editor-ui/src/components/ContactPromptModal.vue
index 2bc9a222de..0a591bee3d 100644
--- a/packages/editor-ui/src/components/ContactPromptModal.vue
+++ b/packages/editor-ui/src/components/ContactPromptModal.vue
@@ -38,16 +38,22 @@ import mixins from 'vue-typed-mixins';
 import type { IN8nPromptResponse } from '@/Interface';
 import { VALID_EMAIL_REGEX } from '@/constants';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
-import Modal from './Modal.vue';
+import Modal from '@/components/Modal.vue';
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useRootStore } from '@/stores/n8nRoot.store';
 import { createEventBus } from '@/event-bus';
+import { useToast } from '@/composables';
 
 export default mixins(workflowHelpers).extend({
 	components: { Modal },
 	name: 'ContactPromptModal',
 	props: ['modalName'],
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	data() {
 		return {
 			email: '',
@@ -94,7 +100,7 @@ export default mixins(workflowHelpers).extend({
 						instance_id: this.rootStore.instanceId,
 						email: this.email,
 					});
-					this.$showMessage({
+					this.showMessage({
 						title: 'Thanks!',
 						message: "It's people like you that help make n8n better",
 						type: 'success',
diff --git a/packages/editor-ui/src/components/CopyInput.vue b/packages/editor-ui/src/components/CopyInput.vue
index 534321e140..a3c7770ba9 100644
--- a/packages/editor-ui/src/components/CopyInput.vue
+++ b/packages/editor-ui/src/components/CopyInput.vue
@@ -19,9 +19,9 @@
 <script lang="ts">
 import mixins from 'vue-typed-mixins';
 import { copyPaste } from '@/mixins/copyPaste';
-import { showMessage } from '@/mixins/showMessage';
+import { useToast } from '@/composables';
 
-export default mixins(copyPaste, showMessage).extend({
+export default mixins(copyPaste).extend({
 	props: {
 		label: {
 			type: String,
@@ -56,12 +56,17 @@ export default mixins(copyPaste, showMessage).extend({
 			default: 'large',
 		},
 	},
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	methods: {
 		copy(): void {
 			this.$emit('copy');
 			this.copyToClipboard(this.value);
 
-			this.$showMessage({
+			this.showMessage({
 				title: this.toastTitle,
 				message: this.toastMessage,
 				type: 'success',
diff --git a/packages/editor-ui/src/components/CredentialCard.vue b/packages/editor-ui/src/components/CredentialCard.vue
index 1007a62cce..3fdde8bd7a 100644
--- a/packages/editor-ui/src/components/CredentialCard.vue
+++ b/packages/editor-ui/src/components/CredentialCard.vue
@@ -31,11 +31,11 @@
 </template>
 
 <script lang="ts">
-import mixins from 'vue-typed-mixins';
+import { defineComponent } from 'vue';
 import type { ICredentialsResponse, IUser } from '@/Interface';
 import type { ICredentialType } from 'n8n-workflow';
-import { EnterpriseEditionFeature } from '@/constants';
-import { showMessage } from '@/mixins/showMessage';
+import { EnterpriseEditionFeature, MODAL_CONFIRM } from '@/constants';
+import { useMessage } from '@/composables';
 import CredentialIcon from '@/components/CredentialIcon.vue';
 import type { IPermissions } from '@/permissions';
 import { getCredentialPermissions } from '@/permissions';
@@ -50,12 +50,17 @@ export const CREDENTIAL_LIST_ITEM_ACTIONS = {
 	DELETE: 'delete',
 };
 
-export default mixins(showMessage).extend({
+export default defineComponent({
 	data() {
 		return {
 			EnterpriseEditionFeature,
 		};
 	},
+	setup() {
+		return {
+			...useMessage(),
+		};
+	},
 	components: {
 		CredentialIcon,
 	},
@@ -128,7 +133,7 @@ export default mixins(showMessage).extend({
 			if (action === CREDENTIAL_LIST_ITEM_ACTIONS.OPEN) {
 				await this.onClick();
 			} else if (action === CREDENTIAL_LIST_ITEM_ACTIONS.DELETE) {
-				const deleteConfirmed = await this.confirmMessage(
+				const deleteConfirmed = await this.confirm(
 					this.$locale.baseText(
 						'credentialEdit.credentialEdit.confirmMessage.deleteCredential.message',
 						{
@@ -138,13 +143,14 @@ export default mixins(showMessage).extend({
 					this.$locale.baseText(
 						'credentialEdit.credentialEdit.confirmMessage.deleteCredential.headline',
 					),
-					null,
-					this.$locale.baseText(
-						'credentialEdit.credentialEdit.confirmMessage.deleteCredential.confirmButtonText',
-					),
+					{
+						confirmButtonText: this.$locale.baseText(
+							'credentialEdit.credentialEdit.confirmMessage.deleteCredential.confirmButtonText',
+						),
+					},
 				);
 
-				if (deleteConfirmed) {
+				if (deleteConfirmed === MODAL_CONFIRM) {
 					await this.credentialsStore.deleteCredential({ id: this.data.id });
 				}
 			}
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
index e7f47e0062..353acbc164 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
@@ -127,21 +127,21 @@ import type {
 	ITelemetryTrackProperties,
 } from 'n8n-workflow';
 import { NodeHelpers } from 'n8n-workflow';
-import CredentialIcon from '../CredentialIcon.vue';
+import CredentialIcon from '@/components/CredentialIcon.vue';
 
 import mixins from 'vue-typed-mixins';
 import { nodeHelpers } from '@/mixins/nodeHelpers';
-import { showMessage } from '@/mixins/showMessage';
+import { useToast, useMessage } from '@/composables';
 
-import CredentialConfig from './CredentialConfig.vue';
-import CredentialInfo from './CredentialInfo.vue';
-import CredentialSharing from './CredentialSharing.ee.vue';
-import SaveButton from '../SaveButton.vue';
-import Modal from '../Modal.vue';
-import InlineNameEdit from '../InlineNameEdit.vue';
-import { CREDENTIAL_EDIT_MODAL_KEY, EnterpriseEditionFeature } from '@/constants';
+import CredentialConfig from '@/components/CredentialEdit/CredentialConfig.vue';
+import CredentialInfo from '@/components/CredentialEdit/CredentialInfo.vue';
+import CredentialSharing from '@/components/CredentialEdit/CredentialSharing.ee.vue';
+import SaveButton from '@/components/SaveButton.vue';
+import Modal from '@/components/Modal.vue';
+import InlineNameEdit from '@/components/InlineNameEdit.vue';
+import { CREDENTIAL_EDIT_MODAL_KEY, EnterpriseEditionFeature, MODAL_CONFIRM } from '@/constants';
 import type { IDataObject } from 'n8n-workflow';
-import FeatureComingSoon from '../FeatureComingSoon.vue';
+import FeatureComingSoon from '@/components/FeatureComingSoon.vue';
 import type { IPermissions } from '@/permissions';
 import { getCredentialPermissions } from '@/permissions';
 import type { IMenuItem } from 'n8n-design-system';
@@ -165,7 +165,7 @@ interface NodeAccessMap {
 	[nodeType: string]: ICredentialNodeAccess | null;
 }
 
-export default mixins(showMessage, nodeHelpers).extend({
+export default mixins(nodeHelpers).extend({
 	name: 'CredentialEdit',
 	components: {
 		CredentialSharing,
@@ -190,6 +190,12 @@ export default mixins(showMessage, nodeHelpers).extend({
 			type: String,
 		},
 	},
+	setup() {
+		return {
+			...useToast(),
+			...useMessage(),
+		};
+	},
 	data() {
 		return {
 			activeTab: 'connection',
@@ -486,7 +492,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 
 			if (this.hasUnsavedChanges) {
 				const displayName = this.credentialType ? this.credentialType.displayName : '';
-				keepEditing = await this.confirmMessage(
+				const confirmAction = await this.confirm(
 					this.$locale.baseText(
 						'credentialEdit.credentialEdit.confirmMessage.beforeClose1.message',
 						{ interpolate: { credentialDisplayName: displayName } },
@@ -494,30 +500,34 @@ export default mixins(showMessage, nodeHelpers).extend({
 					this.$locale.baseText(
 						'credentialEdit.credentialEdit.confirmMessage.beforeClose1.headline',
 					),
-					null,
-					this.$locale.baseText(
-						'credentialEdit.credentialEdit.confirmMessage.beforeClose1.cancelButtonText',
-					),
-					this.$locale.baseText(
-						'credentialEdit.credentialEdit.confirmMessage.beforeClose1.confirmButtonText',
-					),
+					{
+						cancelButtonText: this.$locale.baseText(
+							'credentialEdit.credentialEdit.confirmMessage.beforeClose1.cancelButtonText',
+						),
+						confirmButtonText: this.$locale.baseText(
+							'credentialEdit.credentialEdit.confirmMessage.beforeClose1.confirmButtonText',
+						),
+					},
 				);
+				keepEditing = confirmAction === MODAL_CONFIRM;
 			} else if (this.credentialPermissions.isOwner && this.isOAuthType && !this.isOAuthConnected) {
-				keepEditing = await this.confirmMessage(
+				const confirmAction = await this.confirm(
 					this.$locale.baseText(
 						'credentialEdit.credentialEdit.confirmMessage.beforeClose2.message',
 					),
 					this.$locale.baseText(
 						'credentialEdit.credentialEdit.confirmMessage.beforeClose2.headline',
 					),
-					null,
-					this.$locale.baseText(
-						'credentialEdit.credentialEdit.confirmMessage.beforeClose2.cancelButtonText',
-					),
-					this.$locale.baseText(
-						'credentialEdit.credentialEdit.confirmMessage.beforeClose2.confirmButtonText',
-					),
+					{
+						cancelButtonText: this.$locale.baseText(
+							'credentialEdit.credentialEdit.confirmMessage.beforeClose2.cancelButtonText',
+						),
+						confirmButtonText: this.$locale.baseText(
+							'credentialEdit.credentialEdit.confirmMessage.beforeClose2.confirmButtonText',
+						),
+					},
 				);
+				keepEditing = confirmAction === MODAL_CONFIRM;
 			}
 
 			if (!keepEditing) {
@@ -596,7 +606,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 					this.nodeAccess[access.nodeType] = access;
 				});
 			} catch (error) {
-				this.$showError(
+				this.showError(
 					error,
 					this.$locale.baseText('credentialEdit.credentialEdit.showError.loadCredential.title'),
 				);
@@ -840,7 +850,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 				credential = await this.credentialsStore.createNewCredential(credentialDetails);
 				this.hasUnsavedChanges = false;
 			} catch (error) {
-				this.$showError(
+				this.showError(
 					error,
 					this.$locale.baseText('credentialEdit.credentialEdit.showError.createCredential.title'),
 				);
@@ -874,7 +884,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 				});
 				this.hasUnsavedChanges = false;
 			} catch (error) {
-				this.$showError(
+				this.showError(
 					error,
 					this.$locale.baseText('credentialEdit.credentialEdit.showError.updateCredential.title'),
 				);
@@ -902,7 +912,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 
 			const savedCredentialName = this.currentCredential.name;
 
-			const deleteConfirmed = await this.confirmMessage(
+			const deleteConfirmed = await this.confirm(
 				this.$locale.baseText(
 					'credentialEdit.credentialEdit.confirmMessage.deleteCredential.message',
 					{ interpolate: { savedCredentialName } },
@@ -910,13 +920,14 @@ export default mixins(showMessage, nodeHelpers).extend({
 				this.$locale.baseText(
 					'credentialEdit.credentialEdit.confirmMessage.deleteCredential.headline',
 				),
-				null,
-				this.$locale.baseText(
-					'credentialEdit.credentialEdit.confirmMessage.deleteCredential.confirmButtonText',
-				),
+				{
+					confirmButtonText: this.$locale.baseText(
+						'credentialEdit.credentialEdit.confirmMessage.deleteCredential.confirmButtonText',
+					),
+				},
 			);
 
-			if (deleteConfirmed === false) {
+			if (deleteConfirmed !== MODAL_CONFIRM) {
 				return;
 			}
 
@@ -925,7 +936,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 				await this.credentialsStore.deleteCredential({ id: this.credentialId });
 				this.hasUnsavedChanges = false;
 			} catch (error) {
-				this.$showError(
+				this.showError(
 					error,
 					this.$locale.baseText('credentialEdit.credentialEdit.showError.deleteCredential.title'),
 				);
@@ -939,7 +950,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 			this.updateNodesCredentialsIssues();
 			this.credentialData = {};
 
-			this.$showMessage({
+			this.showMessage({
 				title: this.$locale.baseText('credentialEdit.credentialEdit.showMessage.title'),
 				type: 'success',
 			});
@@ -968,7 +979,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 					}
 				}
 			} catch (error) {
-				this.$showError(
+				this.showError(
 					error,
 					this.$locale.baseText(
 						'credentialEdit.credentialEdit.showError.generateAuthorizationUrl.title',
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue
index c45b047d6c..3908d3af13 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue
@@ -81,17 +81,17 @@
 
 <script lang="ts">
 import type { IUser, IUserListAction } from '@/Interface';
-import mixins from 'vue-typed-mixins';
-import { showMessage } from '@/mixins/showMessage';
+import { defineComponent } from 'vue';
+import { useMessage } from '@/composables';
 import { mapStores } from 'pinia';
 import { useUsersStore } from '@/stores/users.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUIStore } from '@/stores/ui.store';
 import { useCredentialsStore } from '@/stores/credentials.store';
 import { useUsageStore } from '@/stores/usage.store';
-import { EnterpriseEditionFeature, VIEWS } from '@/constants';
+import { EnterpriseEditionFeature, MODAL_CONFIRM, VIEWS } from '@/constants';
 
-export default mixins(showMessage).extend({
+export default defineComponent({
 	name: 'CredentialSharing',
 	props: [
 		'credential',
@@ -101,6 +101,11 @@ export default mixins(showMessage).extend({
 		'credentialPermissions',
 		'modalBus',
 	],
+	setup() {
+		return {
+			...useMessage(),
+		};
+	},
 	computed: {
 		...mapStores(useCredentialsStore, useUsersStore, useUsageStore, useUIStore, useSettingsStore),
 		usersListActions(): IUserListAction[] {
@@ -148,21 +153,22 @@ export default mixins(showMessage).extend({
 			const user = this.usersStore.getUserById(userId);
 
 			if (user) {
-				const confirm = await this.confirmMessage(
+				const confirm = await this.confirm(
 					this.$locale.baseText('credentialEdit.credentialSharing.list.delete.confirm.message', {
 						interpolate: { name: user.fullName || '' },
 					}),
 					this.$locale.baseText('credentialEdit.credentialSharing.list.delete.confirm.title'),
-					null,
-					this.$locale.baseText(
-						'credentialEdit.credentialSharing.list.delete.confirm.confirmButtonText',
-					),
-					this.$locale.baseText(
-						'credentialEdit.credentialSharing.list.delete.confirm.cancelButtonText',
-					),
+					{
+						confirmButtonText: this.$locale.baseText(
+							'credentialEdit.credentialSharing.list.delete.confirm.confirmButtonText',
+						),
+						cancelButtonText: this.$locale.baseText(
+							'credentialEdit.credentialSharing.list.delete.confirm.cancelButtonText',
+						),
+					},
 				);
 
-				if (confirm) {
+				if (confirm === MODAL_CONFIRM) {
 					this.$emit(
 						'change',
 						this.credentialData.sharedWith.filter((sharee: IUser) => {
diff --git a/packages/editor-ui/src/components/DeleteUserModal.vue b/packages/editor-ui/src/components/DeleteUserModal.vue
index c556fd08de..3131b87192 100644
--- a/packages/editor-ui/src/components/DeleteUserModal.vue
+++ b/packages/editor-ui/src/components/DeleteUserModal.vue
@@ -70,16 +70,15 @@
 </template>
 
 <script lang="ts">
-import mixins from 'vue-typed-mixins';
-
-import { showMessage } from '@/mixins/showMessage';
-import Modal from './Modal.vue';
-import type { IUser } from '../Interface';
+import { defineComponent } from 'vue';
+import { useToast } from '@/composables';
+import Modal from '@/components/Modal.vue';
+import type { IUser } from '@/Interface';
 import { mapStores } from 'pinia';
 import { useUsersStore } from '@/stores/users.store';
 import { createEventBus } from '@/event-bus';
 
-export default mixins(showMessage).extend({
+export default defineComponent({
 	components: {
 		Modal,
 	},
@@ -92,6 +91,11 @@ export default mixins(showMessage).extend({
 			type: String,
 		},
 	},
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	data() {
 		return {
 			modalBus: createEventBus(),
@@ -169,7 +173,7 @@ export default mixins(showMessage).extend({
 					}
 				}
 
-				this.$showMessage({
+				this.showMessage({
 					type: 'success',
 					title: this.$locale.baseText('settings.users.userDeleted'),
 					message,
@@ -177,7 +181,7 @@ export default mixins(showMessage).extend({
 
 				this.modalBus.emit('close');
 			} catch (error) {
-				this.$showError(error, this.$locale.baseText('settings.users.userDeletedError'));
+				this.showError(error, this.$locale.baseText('settings.users.userDeletedError'));
 			}
 			this.loading = false;
 		},
diff --git a/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue b/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
index d74a0ffb37..9c4dee6281 100644
--- a/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
+++ b/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
@@ -53,9 +53,9 @@ import mixins from 'vue-typed-mixins';
 
 import { MAX_WORKFLOW_NAME_LENGTH, PLACEHOLDER_EMPTY_WORKFLOW_ID } from '@/constants';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
-import { showMessage } from '@/mixins/showMessage';
+import { useToast } from '@/composables';
 import TagsDropdown from '@/components/TagsDropdown.vue';
-import Modal from './Modal.vue';
+import Modal from '@/components/Modal.vue';
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
@@ -66,10 +66,15 @@ import { useUsersStore } from '@/stores/users.store';
 import { createEventBus } from '@/event-bus';
 import { useCredentialsStore } from '@/stores';
 
-export default mixins(showMessage, workflowHelpers).extend({
+export default mixins(workflowHelpers).extend({
 	components: { TagsDropdown, Modal },
 	name: 'DuplicateWorkflow',
 	props: ['modalName', 'isActive', 'data'],
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	data() {
 		const currentTagIds = this.data.tags;
 
@@ -134,7 +139,7 @@ export default mixins(showMessage, workflowHelpers).extend({
 		async save(): Promise<void> {
 			const name = this.name.trim();
 			if (!name) {
-				this.$showMessage({
+				this.showMessage({
 					title: this.$locale.baseText('duplicateWorkflowDialog.errors.missingName.title'),
 					message: this.$locale.baseText('duplicateWorkflowDialog.errors.missingName.message'),
 					type: 'error',
@@ -181,12 +186,12 @@ export default mixins(showMessage, workflowHelpers).extend({
 				if (error.httpStatusCode === 403) {
 					error.message = this.$locale.baseText('duplicateWorkflowDialog.errors.forbidden.message');
 
-					this.$showError(
+					this.showError(
 						error,
 						this.$locale.baseText('duplicateWorkflowDialog.errors.forbidden.title'),
 					);
 				} else {
-					this.$showError(
+					this.showError(
 						error,
 						this.$locale.baseText('duplicateWorkflowDialog.errors.generic.title'),
 					);
diff --git a/packages/editor-ui/src/components/Error/NodeErrorView.vue b/packages/editor-ui/src/components/Error/NodeErrorView.vue
index 8c1b17abab..b6661ab60f 100644
--- a/packages/editor-ui/src/components/Error/NodeErrorView.vue
+++ b/packages/editor-ui/src/components/Error/NodeErrorView.vue
@@ -118,10 +118,9 @@
 </template>
 
 <script lang="ts">
-//@ts-ignore
 import VueJsonPretty from 'vue-json-pretty';
 import { copyPaste } from '@/mixins/copyPaste';
-import { showMessage } from '@/mixins/showMessage';
+import { useToast } from '@/composables';
 import mixins from 'vue-typed-mixins';
 import { MAX_DISPLAY_DATA_SIZE } from '@/constants';
 
@@ -131,12 +130,17 @@ import { mapStores } from 'pinia';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 
-export default mixins(copyPaste, showMessage).extend({
+export default mixins(copyPaste).extend({
 	name: 'NodeErrorView',
 	props: ['error'],
 	components: {
 		VueJsonPretty,
 	},
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	computed: {
 		...mapStores(useNodeTypesStore, useNDVStore),
 		displayCause(): boolean {
@@ -251,7 +255,7 @@ export default mixins(copyPaste, showMessage).extend({
 			this.copySuccess();
 		},
 		copySuccess() {
-			this.$showMessage({
+			this.showMessage({
 				title: this.$locale.baseText('nodeErrorView.showMessage.title'),
 				type: 'info',
 			});
diff --git a/packages/editor-ui/src/components/ExecutionsList.vue b/packages/editor-ui/src/components/ExecutionsList.vue
index 98645ac09c..07bc2b3164 100644
--- a/packages/editor-ui/src/components/ExecutionsList.vue
+++ b/packages/editor-ui/src/components/ExecutionsList.vue
@@ -285,10 +285,10 @@ import ExecutionTime from '@/components/ExecutionTime.vue';
 import WorkflowActivator from '@/components/WorkflowActivator.vue';
 import ExecutionFilter from '@/components/ExecutionFilter.vue';
 import { externalHooks } from '@/mixins/externalHooks';
-import { VIEWS, WAIT_TIME_UNLIMITED } from '@/constants';
+import { MODAL_CONFIRM, VIEWS, WAIT_TIME_UNLIMITED } from '@/constants';
 import { genericHelpers } from '@/mixins/genericHelpers';
 import { executionHelpers } from '@/mixins/executionsHelpers';
-import { showMessage } from '@/mixins/showMessage';
+import { useToast, useMessage } from '@/composables';
 import type {
 	IExecutionsCurrentSummaryExtended,
 	IExecutionDeleteFilter,
@@ -306,13 +306,19 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
 import { isEmpty, setPageTitle } from '@/utils';
 import { executionFilterToQueryFilter } from '@/utils/executionUtils';
 
-export default mixins(externalHooks, genericHelpers, executionHelpers, showMessage).extend({
+export default mixins(externalHooks, genericHelpers, executionHelpers).extend({
 	name: 'ExecutionsList',
 	components: {
 		ExecutionTime,
 		WorkflowActivator,
 		ExecutionFilter,
 	},
+	setup() {
+		return {
+			...useToast(),
+			...useMessage(),
+		};
+	},
 	data() {
 		return {
 			isMounting: true,
@@ -444,17 +450,21 @@ export default mixins(externalHooks, genericHelpers, executionHelpers, showMessa
 				Object.keys(this.selectedItems).length === this.finishedExecutionsCount;
 		},
 		async handleDeleteSelected() {
-			const deleteExecutions = await this.confirmMessage(
+			const deleteExecutions = await this.confirm(
 				this.$locale.baseText('executionsList.confirmMessage.message', {
 					interpolate: { numSelected: this.numSelected.toString() },
 				}),
 				this.$locale.baseText('executionsList.confirmMessage.headline'),
-				'warning',
-				this.$locale.baseText('executionsList.confirmMessage.confirmButtonText'),
-				this.$locale.baseText('executionsList.confirmMessage.cancelButtonText'),
+				{
+					type: 'warning',
+					confirmButtonText: this.$locale.baseText(
+						'executionsList.confirmMessage.confirmButtonText',
+					),
+					cancelButtonText: this.$locale.baseText('executionsList.confirmMessage.cancelButtonText'),
+				},
 			);
 
-			if (!deleteExecutions) {
+			if (deleteExecutions !== MODAL_CONFIRM) {
 				return;
 			}
 
@@ -473,7 +483,7 @@ export default mixins(externalHooks, genericHelpers, executionHelpers, showMessa
 				await this.workflowsStore.deleteExecutions(sendData);
 			} catch (error) {
 				this.isDataLoading = false;
-				this.$showError(
+				this.showError(
 					error,
 					this.$locale.baseText('executionsList.showError.handleDeleteSelected.title'),
 				);
@@ -482,7 +492,7 @@ export default mixins(externalHooks, genericHelpers, executionHelpers, showMessa
 			}
 			this.isDataLoading = false;
 
-			this.$showMessage({
+			this.showMessage({
 				title: this.$locale.baseText('executionsList.showMessage.handleDeleteSelected.title'),
 				type: 'success',
 			});
@@ -673,7 +683,7 @@ export default mixins(externalHooks, genericHelpers, executionHelpers, showMessa
 				);
 			} catch (error) {
 				this.isDataLoading = false;
-				this.$showError(error, this.$locale.baseText('executionsList.showError.loadMore.title'));
+				this.showError(error, this.$locale.baseText('executionsList.showError.loadMore.title'));
 				return;
 			}
 
@@ -713,7 +723,7 @@ export default mixins(externalHooks, genericHelpers, executionHelpers, showMessa
 
 				Vue.set(this, 'workflows', workflows);
 			} catch (error) {
-				this.$showError(
+				this.showError(
 					error,
 					this.$locale.baseText('executionsList.showError.loadWorkflows.title'),
 				);
@@ -729,12 +739,12 @@ export default mixins(externalHooks, genericHelpers, executionHelpers, showMessa
 				);
 
 				if (retrySuccessful) {
-					this.$showMessage({
+					this.showMessage({
 						title: this.$locale.baseText('executionsList.showMessage.retrySuccessfulTrue.title'),
 						type: 'success',
 					});
 				} else {
-					this.$showMessage({
+					this.showMessage({
 						title: this.$locale.baseText('executionsList.showMessage.retrySuccessfulFalse.title'),
 						type: 'error',
 					});
@@ -742,7 +752,7 @@ export default mixins(externalHooks, genericHelpers, executionHelpers, showMessa
 
 				this.isDataLoading = false;
 			} catch (error) {
-				this.$showError(
+				this.showError(
 					error,
 					this.$locale.baseText('executionsList.showError.retryExecution.title'),
 				);
@@ -756,7 +766,7 @@ export default mixins(externalHooks, genericHelpers, executionHelpers, showMessa
 			try {
 				await Promise.all([this.loadActiveExecutions(), this.loadFinishedExecutions()]);
 			} catch (error) {
-				this.$showError(error, this.$locale.baseText('executionsList.showError.refreshData.title'));
+				this.showError(error, this.$locale.baseText('executionsList.showError.refreshData.title'));
 			}
 
 			this.isDataLoading = false;
@@ -856,7 +866,7 @@ export default mixins(externalHooks, genericHelpers, executionHelpers, showMessa
 				const index = this.stoppingExecutions.indexOf(activeExecutionId);
 				this.stoppingExecutions.splice(index, 1);
 
-				this.$showMessage({
+				this.showMessage({
 					title: this.$locale.baseText('executionsList.showMessage.stopExecution.title'),
 					message: this.$locale.baseText('executionsList.showMessage.stopExecution.message', {
 						interpolate: { activeExecutionId },
@@ -866,7 +876,7 @@ export default mixins(externalHooks, genericHelpers, executionHelpers, showMessa
 
 				this.refreshData();
 			} catch (error) {
-				this.$showError(
+				this.showError(
 					error,
 					this.$locale.baseText('executionsList.showError.stopExecution.title'),
 				);
@@ -892,7 +902,7 @@ export default mixins(externalHooks, genericHelpers, executionHelpers, showMessa
 					this.selectAllVisibleExecutions();
 				}
 			} catch (error) {
-				this.$showError(
+				this.showError(
 					error,
 					this.$locale.baseText('executionsList.showError.handleDeleteSelected.title'),
 				);
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue
index 7778795f91..908b2d9c61 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue
@@ -86,10 +86,9 @@ import mixins from 'vue-typed-mixins';
 import type { IExecutionUIData } from '@/mixins/executionsHelpers';
 import { executionHelpers } from '@/mixins/executionsHelpers';
 import { VIEWS } from '@/constants';
-import { showMessage } from '@/mixins/showMessage';
 import ExecutionTime from '@/components/ExecutionTime.vue';
 
-export default mixins(executionHelpers, showMessage).extend({
+export default mixins(executionHelpers).extend({
 	name: 'execution-card',
 	components: {
 		ExecutionTime,
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
index c6a37dd3cb..5e91da16e8 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
@@ -127,18 +127,18 @@
 
 <script lang="ts">
 import mixins from 'vue-typed-mixins';
-import { showMessage } from '@/mixins/showMessage';
+import { useMessage } from '@/composables';
 import WorkflowPreview from '@/components/WorkflowPreview.vue';
 import type { IExecutionUIData } from '@/mixins/executionsHelpers';
 import { executionHelpers } from '@/mixins/executionsHelpers';
-import { VIEWS } from '@/constants';
+import { MODAL_CONFIRM, VIEWS } from '@/constants';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { Dropdown as ElDropdown } from 'element-ui';
 
 type RetryDropdownRef = InstanceType<typeof ElDropdown> & { hide: () => void };
 
-export default mixins(showMessage, executionHelpers).extend({
+export default mixins(executionHelpers).extend({
 	name: 'execution-preview',
 	components: {
 		ElDropdown,
@@ -149,6 +149,11 @@ export default mixins(showMessage, executionHelpers).extend({
 			VIEWS,
 		};
 	},
+	setup() {
+		return {
+			...useMessage(),
+		};
+	},
 	computed: {
 		...mapStores(useUIStore),
 		executionUIDetails(): IExecutionUIData | null {
@@ -163,14 +168,18 @@ export default mixins(showMessage, executionHelpers).extend({
 	},
 	methods: {
 		async onDeleteExecution(): Promise<void> {
-			const deleteConfirmed = await this.confirmMessage(
+			const deleteConfirmed = await this.confirm(
 				this.$locale.baseText('executionDetails.confirmMessage.message'),
 				this.$locale.baseText('executionDetails.confirmMessage.headline'),
-				'warning',
-				this.$locale.baseText('executionDetails.confirmMessage.confirmButtonText'),
-				'',
+				{
+					type: 'warning',
+					confirmButtonText: this.$locale.baseText(
+						'executionDetails.confirmMessage.confirmButtonText',
+					),
+					cancelButtonText: '',
+				},
 			);
-			if (!deleteConfirmed) {
+			if (deleteConfirmed !== MODAL_CONFIRM) {
 				return;
 			}
 			this.$emit('deleteCurrentExecution');
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue
index 4e96b66ba5..d1b5b9ca39 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue
@@ -27,7 +27,7 @@ import ExecutionsSidebar from '@/components/ExecutionsView/ExecutionsSidebar.vue
 import {
 	MAIN_HEADER_TABS,
 	MODAL_CANCEL,
-	MODAL_CONFIRMED,
+	MODAL_CONFIRM,
 	PLACEHOLDER_EMPTY_WORKFLOW_ID,
 	VIEWS,
 	WEBHOOK_NODE_TYPE,
@@ -49,7 +49,7 @@ import type {
 } from 'n8n-workflow';
 import { NodeHelpers } from 'n8n-workflow';
 import mixins from 'vue-typed-mixins';
-import { showMessage } from '@/mixins/showMessage';
+import { useToast, useMessage } from '@/composables';
 import { v4 as uuid } from 'uuid';
 import type { Route } from 'vue-router';
 import { executionHelpers } from '@/mixins/executionsHelpers';
@@ -70,7 +70,7 @@ const MAX_LOADING_ATTEMPTS = 5;
 // Number of executions fetched on each page
 const LOAD_MORE_PAGE_SIZE = 100;
 
-export default mixins(showMessage, executionHelpers, debounceHelper, workflowHelpers).extend({
+export default mixins(executionHelpers, debounceHelper, workflowHelpers).extend({
 	name: 'executions-list',
 	components: {
 		ExecutionsSidebar,
@@ -83,6 +83,12 @@ export default mixins(showMessage, executionHelpers, debounceHelper, workflowHel
 			temporaryExecution: null as IExecutionsSummary | null,
 		};
 	},
+	setup() {
+		return {
+			...useToast(),
+			...useMessage(),
+		};
+	},
 	computed: {
 		...mapStores(useTagsStore, useNodeTypesStore, useSettingsStore, useUIStore, useWorkflowsStore),
 		hidePreview(): boolean {
@@ -132,16 +138,22 @@ export default mixins(showMessage, executionHelpers, debounceHelper, workflowHel
 			return;
 		}
 		if (this.uiStore.stateIsDirty) {
-			const confirmModal = await this.confirmModal(
+			const confirmModal = await this.confirm(
 				this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
-				this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
-				'warning',
-				this.$locale.baseText('generic.unsavedWork.confirmMessage.confirmButtonText'),
-				this.$locale.baseText('generic.unsavedWork.confirmMessage.cancelButtonText'),
-				true,
+				{
+					title: this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
+					type: 'warning',
+					confirmButtonText: this.$locale.baseText(
+						'generic.unsavedWork.confirmMessage.confirmButtonText',
+					),
+					cancelButtonText: this.$locale.baseText(
+						'generic.unsavedWork.confirmMessage.cancelButtonText',
+					),
+					showClose: true,
+				},
 			);
 
-			if (confirmModal === MODAL_CONFIRMED) {
+			if (confirmModal === MODAL_CONFIRM) {
 				const saved = await this.saveCurrentWorkflow({}, false);
 				if (saved) {
 					await this.settingsStore.fetchPromptsData();
@@ -221,7 +233,7 @@ export default mixins(showMessage, executionHelpers, debounceHelper, workflowHel
 				data = await this.workflowsStore.getPastExecutions(this.requestFilter, limit, lastId);
 			} catch (error) {
 				this.loadingMore = false;
-				this.$showError(error, this.$locale.baseText('executionsList.showError.loadMore.title'));
+				this.showError(error, this.$locale.baseText('executionsList.showError.loadMore.title'));
 				return;
 			}
 
@@ -276,7 +288,7 @@ export default mixins(showMessage, executionHelpers, debounceHelper, workflowHel
 				await this.setExecutions();
 			} catch (error) {
 				this.loading = false;
-				this.$showError(
+				this.showError(
 					error,
 					this.$locale.baseText('executionsList.showError.handleDeleteSelected.title'),
 				);
@@ -284,7 +296,7 @@ export default mixins(showMessage, executionHelpers, debounceHelper, workflowHel
 			}
 			this.loading = false;
 
-			this.$showMessage({
+			this.showMessage({
 				title: this.$locale.baseText('executionsList.showMessage.handleDeleteSelected.title'),
 				type: 'success',
 			});
@@ -295,7 +307,7 @@ export default mixins(showMessage, executionHelpers, debounceHelper, workflowHel
 			try {
 				await this.workflowsStore.stopCurrentExecution(activeExecutionId);
 
-				this.$showMessage({
+				this.showMessage({
 					title: this.$locale.baseText('executionsList.showMessage.stopExecution.title'),
 					message: this.$locale.baseText('executionsList.showMessage.stopExecution.message', {
 						interpolate: { activeExecutionId },
@@ -305,7 +317,7 @@ export default mixins(showMessage, executionHelpers, debounceHelper, workflowHel
 
 				await this.loadAutoRefresh();
 			} catch (error) {
-				this.$showError(
+				this.showError(
 					error,
 					this.$locale.baseText('executionsList.showError.stopExecution.title'),
 				);
@@ -399,7 +411,7 @@ export default mixins(showMessage, executionHelpers, debounceHelper, workflowHel
 				return await this.workflowsStore.loadCurrentWorkflowExecutions(this.requestFilter);
 			} catch (error) {
 				if (error.errorCode === NO_NETWORK_ERROR_CODE) {
-					this.$showMessage(
+					this.showMessage(
 						{
 							title: this.$locale.baseText('executionsList.showError.refreshData.title'),
 							message: error.message,
@@ -409,7 +421,7 @@ export default mixins(showMessage, executionHelpers, debounceHelper, workflowHel
 						false,
 					);
 				} else {
-					this.$showError(
+					this.showError(
 						error,
 						this.$locale.baseText('executionsList.showError.refreshData.title'),
 					);
@@ -449,7 +461,7 @@ export default mixins(showMessage, executionHelpers, debounceHelper, workflowHel
 				const existingExecution = await this.workflowsStore.fetchExecutionDataById(executionId);
 				if (!existingExecution) {
 					this.workflowsStore.activeWorkflowExecution = null;
-					this.$showError(
+					this.showError(
 						new Error(
 							this.$locale.baseText('executionView.notFound.message', {
 								interpolate: { executionId },
@@ -493,7 +505,7 @@ export default mixins(showMessage, executionHelpers, debounceHelper, workflowHel
 			try {
 				data = await this.workflowsStore.fetchWorkflow(workflowId);
 			} catch (error) {
-				this.$showError(error, this.$locale.baseText('nodeView.showError.openWorkflow.title'));
+				this.showError(error, this.$locale.baseText('nodeView.showError.openWorkflow.title'));
 				return;
 			}
 			if (data === undefined) {
@@ -642,7 +654,7 @@ export default mixins(showMessage, executionHelpers, debounceHelper, workflowHel
 		async onRetryExecution(payload: { execution: IExecutionsSummary; command: string }) {
 			const loadWorkflow = payload.command === 'current-workflow';
 
-			this.$showMessage({
+			this.showMessage({
 				title: this.$locale.baseText('executionDetails.runningMessage'),
 				type: 'info',
 				duration: 2000,
@@ -664,18 +676,18 @@ export default mixins(showMessage, executionHelpers, debounceHelper, workflowHel
 				);
 
 				if (retrySuccessful === true) {
-					this.$showMessage({
+					this.showMessage({
 						title: this.$locale.baseText('executionsList.showMessage.retrySuccessfulTrue.title'),
 						type: 'success',
 					});
 				} else {
-					this.$showMessage({
+					this.showMessage({
 						title: this.$locale.baseText('executionsList.showMessage.retrySuccessfulFalse.title'),
 						type: 'error',
 					});
 				}
 			} catch (error) {
-				this.$showError(
+				this.showError(
 					error,
 					this.$locale.baseText('executionsList.showError.retryExecution.title'),
 				);
diff --git a/packages/editor-ui/src/components/ImportCurlModal.vue b/packages/editor-ui/src/components/ImportCurlModal.vue
index 5d9f50c079..c70ba33c2b 100644
--- a/packages/editor-ui/src/components/ImportCurlModal.vue
+++ b/packages/editor-ui/src/components/ImportCurlModal.vue
@@ -40,25 +40,30 @@
 </template>
 
 <script lang="ts">
-import Modal from './Modal.vue';
+import Modal from '@/components/Modal.vue';
 import {
 	IMPORT_CURL_MODAL_KEY,
 	CURL_IMPORT_NOT_SUPPORTED_PROTOCOLS,
 	CURL_IMPORT_NODES_PROTOCOLS,
-} from '../constants';
-import { showMessage } from '@/mixins/showMessage';
-import mixins from 'vue-typed-mixins';
+} from '@/constants';
+import { useToast } from '@/composables';
+import { defineComponent } from 'vue';
 import type { INodeUi } from '@/Interface';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import { createEventBus } from '@/event-bus';
 
-export default mixins(showMessage).extend({
+export default defineComponent({
 	name: 'ImportCurlModal',
 	components: {
 		Modal,
 	},
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	data() {
 		return {
 			IMPORT_CURL_MODAL_KEY,
@@ -122,7 +127,7 @@ export default mixins(showMessage).extend({
 			}
 		},
 		showProtocolErrorWithSupportedNode(protocol: string, node: string): void {
-			this.$showToast({
+			this.showToast({
 				title: this.$locale.baseText('importParameter.showError.invalidProtocol1.title', {
 					interpolate: {
 						node,
@@ -138,7 +143,7 @@ export default mixins(showMessage).extend({
 			});
 		},
 		showProtocolError(protocol: string): void {
-			this.$showToast({
+			this.showToast({
 				title: this.$locale.baseText('importParameter.showError.invalidProtocol2.title'),
 				message: this.$locale.baseText('importParameter.showError.invalidProtocol.message', {
 					interpolate: {
@@ -150,7 +155,7 @@ export default mixins(showMessage).extend({
 			});
 		},
 		showInvalidcURLCommandError(): void {
-			this.$showToast({
+			this.showToast({
 				title: this.$locale.baseText('importParameter.showError.invalidCurlCommand.title'),
 				message: this.$locale.baseText('importParameter.showError.invalidCurlCommand.message'),
 				type: 'error',
diff --git a/packages/editor-ui/src/components/ImportParameter.vue b/packages/editor-ui/src/components/ImportParameter.vue
index d9f4887919..3f9448765f 100644
--- a/packages/editor-ui/src/components/ImportParameter.vue
+++ b/packages/editor-ui/src/components/ImportParameter.vue
@@ -11,13 +11,12 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { IMPORT_CURL_MODAL_KEY } from '@/constants';
 import { useUIStore } from '@/stores/ui.store';
 import { mapStores } from 'pinia';
-import mixins from 'vue-typed-mixins';
-import { showMessage } from '@/mixins/showMessage';
 
-export default mixins(showMessage).extend({
+export default defineComponent({
 	name: 'import-parameter',
 	props: {
 		isReadOnly: {
diff --git a/packages/editor-ui/src/components/InlineNameEdit.vue b/packages/editor-ui/src/components/InlineNameEdit.vue
index 269c7d8656..0e14aaba0d 100644
--- a/packages/editor-ui/src/components/InlineNameEdit.vue
+++ b/packages/editor-ui/src/components/InlineNameEdit.vue
@@ -32,10 +32,10 @@
 </template>
 
 <script lang="ts">
-import mixins from 'vue-typed-mixins';
-import { showMessage } from '@/mixins/showMessage';
+import { defineComponent } from 'vue';
+import { useToast } from '@/composables';
 
-export default mixins(showMessage).extend({
+export default defineComponent({
 	name: 'InlineNameEdit',
 	props: {
 		name: {
@@ -52,6 +52,11 @@ export default mixins(showMessage).extend({
 			default: false,
 		},
 	},
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	data() {
 		return {
 			isNameEdit: false,
@@ -75,7 +80,7 @@ export default mixins(showMessage).extend({
 			if (!this.name) {
 				this.$emit('input', `Untitled ${this.type}`);
 
-				this.$showToast({
+				this.showToast({
 					title: 'Error',
 					message: `${this.type} name cannot be empty`,
 					type: 'warning',
diff --git a/packages/editor-ui/src/components/InviteUsersModal.vue b/packages/editor-ui/src/components/InviteUsersModal.vue
index e6d8d57faf..8f7a5d1d58 100644
--- a/packages/editor-ui/src/components/InviteUsersModal.vue
+++ b/packages/editor-ui/src/components/InviteUsersModal.vue
@@ -66,7 +66,7 @@
 <script lang="ts">
 import mixins from 'vue-typed-mixins';
 
-import { showMessage } from '@/mixins/showMessage';
+import { useToast } from '@/composables';
 import { copyPaste } from '@/mixins/copyPaste';
 import Modal from './Modal.vue';
 import type { IFormInputs, IInviteResponse, IUser } from '@/Interface';
@@ -90,7 +90,7 @@ function getEmail(email: string): string {
 	return parsed;
 }
 
-export default mixins(showMessage, copyPaste).extend({
+export default mixins(copyPaste).extend({
 	components: { Modal },
 	name: 'InviteUsersModal',
 	props: {
@@ -98,6 +98,11 @@ export default mixins(showMessage, copyPaste).extend({
 			type: String,
 		},
 	},
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	data() {
 		return {
 			config: null as IFormInputs | null,
@@ -224,7 +229,7 @@ export default mixins(showMessage, copyPaste).extend({
 				);
 
 				if (successfulEmailInvites.length) {
-					this.$showMessage({
+					this.showMessage({
 						type: 'success',
 						title: this.$locale.baseText(
 							successfulEmailInvites.length > 1
@@ -244,7 +249,7 @@ export default mixins(showMessage, copyPaste).extend({
 						this.copyToClipboard(successfulUrlInvites[0].user.inviteAcceptUrl);
 					}
 
-					this.$showMessage({
+					this.showMessage({
 						type: 'success',
 						title: this.$locale.baseText(
 							successfulUrlInvites.length > 1
@@ -266,7 +271,7 @@ export default mixins(showMessage, copyPaste).extend({
 
 				if (erroredInvites.length) {
 					setTimeout(() => {
-						this.$showMessage({
+						this.showMessage({
 							type: 'error',
 							title: this.$locale.baseText('settings.users.usersEmailedError'),
 							message: this.$locale.baseText('settings.users.emailInvitesSentError', {
@@ -282,12 +287,12 @@ export default mixins(showMessage, copyPaste).extend({
 					this.modalBus.emit('close');
 				}
 			} catch (error) {
-				this.$showError(error, this.$locale.baseText('settings.users.usersInvitedError'));
+				this.showError(error, this.$locale.baseText('settings.users.usersInvitedError'));
 			}
 			this.loading = false;
 		},
 		showCopyInviteLinkToast(successfulUrlInvites: IInviteResponse[]) {
-			this.$showMessage({
+			this.showMessage({
 				type: 'success',
 				title: this.$locale.baseText(
 					successfulUrlInvites.length > 1
diff --git a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
index a98361ef7b..122c667f16 100644
--- a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
+++ b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@@ -128,6 +128,7 @@ import {
 	DUPLICATE_MODAL_KEY,
 	EnterpriseEditionFeature,
 	MAX_WORKFLOW_NAME_LENGTH,
+	MODAL_CONFIRM,
 	PLACEHOLDER_EMPTY_WORKFLOW_ID,
 	VIEWS,
 	WORKFLOW_MENU_ACTIONS,
@@ -147,7 +148,7 @@ import BreakpointsObserver from '@/components/BreakpointsObserver.vue';
 import type { IUser, IWorkflowDataUpdate, IWorkflowDb, IWorkflowToShare } from '@/Interface';
 
 import { saveAs } from 'file-saver';
-import { useTitleChange } from '@/composables/useTitleChange';
+import { useTitleChange, useToast, useMessage } from '@/composables';
 import type { MessageBoxInputData } from 'element-ui/types/message-box';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
@@ -185,6 +186,8 @@ export default mixins(workflowHelpers).extend({
 	setup() {
 		return {
 			...useTitleChange(),
+			...useToast(),
+			...useMessage(),
 		};
 	},
 	data() {
@@ -381,7 +384,7 @@ export default mixins(workflowHelpers).extend({
 		async onNameSubmit(name: string, cb: (saved: boolean) => void) {
 			const newName = name.trim();
 			if (!newName) {
-				this.$showMessage({
+				this.showMessage({
 					title: this.$locale.baseText('workflowDetails.showMessage.title'),
 					message: this.$locale.baseText('workflowDetails.showMessage.message'),
 					type: 'error',
@@ -413,7 +416,7 @@ export default mixins(workflowHelpers).extend({
 				try {
 					workflowData = JSON.parse(data as string);
 				} catch (error) {
-					this.$showMessage({
+					this.showMessage({
 						title: this.$locale.baseText('mainSidebar.showMessage.handleFileImport.title'),
 						message: this.$locale.baseText('mainSidebar.showMessage.handleFileImport.message'),
 						type: 'error',
@@ -470,7 +473,7 @@ export default mixins(workflowHelpers).extend({
 				}
 				case WORKFLOW_MENU_ACTIONS.IMPORT_FROM_URL: {
 					try {
-						const promptResponse = (await this.$prompt(
+						const promptResponse = (await this.prompt(
 							this.$locale.baseText('mainSidebar.prompt.workflowUrl') + ':',
 							this.$locale.baseText('mainSidebar.prompt.importWorkflowFromUrl') + ':',
 							{
@@ -494,30 +497,36 @@ export default mixins(workflowHelpers).extend({
 					break;
 				}
 				case WORKFLOW_MENU_ACTIONS.DELETE: {
-					const deleteConfirmed = await this.confirmMessage(
+					const deleteConfirmed = await this.confirm(
 						this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.message', {
 							interpolate: { workflowName: this.workflowName },
 						}),
 						this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.headline'),
-						'warning',
-						this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.confirmButtonText'),
-						this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.cancelButtonText'),
+						{
+							type: 'warning',
+							confirmButtonText: this.$locale.baseText(
+								'mainSidebar.confirmMessage.workflowDelete.confirmButtonText',
+							),
+							cancelButtonText: this.$locale.baseText(
+								'mainSidebar.confirmMessage.workflowDelete.cancelButtonText',
+							),
+						},
 					);
 
-					if (deleteConfirmed === false) {
+					if (deleteConfirmed !== MODAL_CONFIRM) {
 						return;
 					}
 
 					try {
 						await this.workflowsStore.deleteWorkflow(this.currentWorkflowId);
 					} catch (error) {
-						this.$showError(error, this.$locale.baseText('generic.deleteWorkflowError'));
+						this.showError(error, this.$locale.baseText('generic.deleteWorkflowError'));
 						return;
 					}
 					this.uiStore.stateIsDirty = false;
 					// Reset tab title since workflow is deleted.
 					this.titleReset();
-					this.$showMessage({
+					this.showMessage({
 						title: this.$locale.baseText('mainSidebar.showMessage.handleSelect1.title'),
 						type: 'success',
 					});
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index cf84e3fd66..03cb8b6498 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -110,13 +110,13 @@
 </template>
 
 <script lang="ts">
-import type { IExecutionResponse, IMenuItem, IVersion } from '../Interface';
-
+import type { IExecutionResponse, IMenuItem, IVersion } from '@/Interface';
+import type { MessageBoxInputData } from 'element-ui/types/message-box';
 import GiftNotificationIcon from './GiftNotificationIcon.vue';
 import WorkflowSettings from '@/components/WorkflowSettings.vue';
 
 import { genericHelpers } from '@/mixins/genericHelpers';
-import { showMessage } from '@/mixins/showMessage';
+import { useMessage } from '@/composables';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { workflowRun } from '@/mixins/workflowRun';
 
@@ -137,7 +137,6 @@ import { useVersionControlStore } from '@/stores/versionControl.store';
 
 export default mixins(
 	genericHelpers,
-	showMessage,
 	workflowHelpers,
 	workflowRun,
 	userHelpers,
@@ -148,6 +147,11 @@ export default mixins(
 		GiftNotificationIcon,
 		WorkflowSettings,
 	},
+	setup() {
+		return {
+			...useMessage(),
+		};
+	},
 	data() {
 		return {
 			// @ts-ignore
@@ -483,7 +487,7 @@ export default mixins(
 			}
 		},
 		async sync() {
-			const prompt = await this.$prompt(
+			const prompt = (await this.prompt(
 				this.$locale.baseText('settings.versionControl.sync.prompt.description', {
 					interpolate: { branch: this.versionControlStore.state.currentBranch },
 				}),
@@ -499,7 +503,7 @@ export default mixins(
 					inputPattern: /^.+$/,
 					inputErrorMessage: this.$locale.baseText('settings.versionControl.sync.prompt.error'),
 				},
-			);
+			)) as MessageBoxInputData;
 
 			if (prompt.value) {
 				await this.versionControlStore.sync({ commitMessage: prompt.value });
diff --git a/packages/editor-ui/src/components/NodeCredentials.vue b/packages/editor-ui/src/components/NodeCredentials.vue
index 26c01d25e8..44fd3fd213 100644
--- a/packages/editor-ui/src/components/NodeCredentials.vue
+++ b/packages/editor-ui/src/components/NodeCredentials.vue
@@ -115,7 +115,7 @@ import type {
 
 import { genericHelpers } from '@/mixins/genericHelpers';
 import { nodeHelpers } from '@/mixins/nodeHelpers';
-import { showMessage } from '@/mixins/showMessage';
+import { useToast } from '@/composables';
 
 import TitledList from '@/components/TitledList.vue';
 
@@ -141,7 +141,7 @@ interface CredentialDropdownOption extends ICredentialsResponse {
 	typeDisplayName: string;
 }
 
-export default mixins(genericHelpers, nodeHelpers, showMessage).extend({
+export default mixins(genericHelpers, nodeHelpers).extend({
 	name: 'NodeCredentials',
 	props: {
 		readonly: {
@@ -167,6 +167,11 @@ export default mixins(genericHelpers, nodeHelpers, showMessage).extend({
 	components: {
 		TitledList,
 	},
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	data() {
 		return {
 			NEW_CREDENTIALS_TEXT: `- ${this.$locale.baseText('nodeCredentials.createNew')} -`,
@@ -452,7 +457,7 @@ export default mixins(genericHelpers, nodeHelpers, showMessage).extend({
 					type: selectedCredentialsType,
 				});
 				this.updateNodesCredentialsIssues();
-				this.$showMessage({
+				this.showMessage({
 					title: this.$locale.baseText('nodeCredentials.showMessage.title'),
 					message: this.$locale.baseText('nodeCredentials.showMessage.message', {
 						interpolate: {
diff --git a/packages/editor-ui/src/components/NodeDetailsView.vue b/packages/editor-ui/src/components/NodeDetailsView.vue
index 781c02c705..bf07da9f35 100644
--- a/packages/editor-ui/src/components/NodeDetailsView.vue
+++ b/packages/editor-ui/src/components/NodeDetailsView.vue
@@ -150,6 +150,7 @@ import {
 	BASE_NODE_SURVEY_URL,
 	EnterpriseEditionFeature,
 	EXECUTABLE_TRIGGER_NODE_TYPES,
+	MODAL_CONFIRM,
 	START_NODE_TYPE,
 	STICKY_NODE_TYPE,
 } from '@/constants';
@@ -163,6 +164,7 @@ import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useUIStore } from '@/stores/ui.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import useDeviceSupport from '@/composables/useDeviceSupport';
+import { useMessage } from '@/composables';
 
 export default mixins(
 	externalHooks,
@@ -194,6 +196,7 @@ export default mixins(
 	setup() {
 		return {
 			...useDeviceSupport(),
+			...useMessage(),
 		};
 	},
 	data() {
@@ -608,15 +611,16 @@ export default mixins(
 			}
 
 			if (this.outputPanelEditMode.enabled) {
-				const shouldPinDataBeforeClosing = await this.confirmMessage(
+				const shouldPinDataBeforeClosing = await this.confirm(
 					'',
 					this.$locale.baseText('ndv.pinData.beforeClosing.title'),
-					null,
-					this.$locale.baseText('ndv.pinData.beforeClosing.confirm'),
-					this.$locale.baseText('ndv.pinData.beforeClosing.cancel'),
+					{
+						confirmButtonText: this.$locale.baseText('ndv.pinData.beforeClosing.confirm'),
+						cancelButtonText: this.$locale.baseText('ndv.pinData.beforeClosing.cancel'),
+					},
 				);
 
-				if (shouldPinDataBeforeClosing) {
+				if (shouldPinDataBeforeClosing === MODAL_CONFIRM) {
 					const { value } = this.outputPanelEditMode;
 
 					if (!this.isValidPinDataSize(value)) {
diff --git a/packages/editor-ui/src/components/NodeExecuteButton.vue b/packages/editor-ui/src/components/NodeExecuteButton.vue
index 343fd51146..8d974fbab4 100644
--- a/packages/editor-ui/src/components/NodeExecuteButton.vue
+++ b/packages/editor-ui/src/components/NodeExecuteButton.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts">
-import { WEBHOOK_NODE_TYPE, MANUAL_TRIGGER_NODE_TYPE } from '@/constants';
+import { WEBHOOK_NODE_TYPE, MANUAL_TRIGGER_NODE_TYPE, MODAL_CONFIRM } from '@/constants';
 import type { INodeUi } from '@/Interface';
 import type { INodeTypeDescription } from 'n8n-workflow';
 import mixins from 'vue-typed-mixins';
@@ -29,6 +29,7 @@ import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
+import { useToast, useMessage } from '@/composables';
 
 export default mixins(workflowRun, pinData).extend({
 	props: {
@@ -56,6 +57,12 @@ export default mixins(workflowRun, pinData).extend({
 			type: String,
 		},
 	},
+	setup() {
+		return {
+			...useToast(),
+			...useMessage(),
+		};
+	},
 	computed: {
 		...mapStores(useNodeTypesStore, useNDVStore, useWorkflowsStore),
 		node(): INodeUi | null {
@@ -173,7 +180,7 @@ export default mixins(workflowRun, pinData).extend({
 			try {
 				await this.workflowsStore.removeTestWebhook(this.workflowsStore.workflowId);
 			} catch (error) {
-				this.$showError(error, this.$locale.baseText('ndv.execute.stopWaitingForWebhook.error'));
+				this.showError(error, this.$locale.baseText('ndv.execute.stopWaitingForWebhook.error'));
 				return;
 			}
 		},
@@ -186,13 +193,15 @@ export default mixins(workflowRun, pinData).extend({
 			} else {
 				let shouldUnpinAndExecute = false;
 				if (this.hasPinData) {
-					shouldUnpinAndExecute = await this.confirmMessage(
+					const confirmResult = await this.confirm(
 						this.$locale.baseText('ndv.pinData.unpinAndExecute.description'),
 						this.$locale.baseText('ndv.pinData.unpinAndExecute.title'),
-						null,
-						this.$locale.baseText('ndv.pinData.unpinAndExecute.confirm'),
-						this.$locale.baseText('ndv.pinData.unpinAndExecute.cancel'),
+						{
+							confirmButtonText: this.$locale.baseText('ndv.pinData.unpinAndExecute.confirm'),
+							cancelButtonText: this.$locale.baseText('ndv.pinData.unpinAndExecute.cancel'),
+						},
 					);
+					shouldUnpinAndExecute = confirmResult === MODAL_CONFIRM;
 
 					if (shouldUnpinAndExecute) {
 						dataPinningEventBus.emit('data-unpinning', { source: 'unpin-and-execute-modal' });
diff --git a/packages/editor-ui/src/components/NodeWebhooks.vue b/packages/editor-ui/src/components/NodeWebhooks.vue
index 9e50397f45..4ad9082ab3 100644
--- a/packages/editor-ui/src/components/NodeWebhooks.vue
+++ b/packages/editor-ui/src/components/NodeWebhooks.vue
@@ -62,17 +62,22 @@ import type { INodeTypeDescription, IWebhookDescription } from 'n8n-workflow';
 
 import { WEBHOOK_NODE_TYPE } from '@/constants';
 import { copyPaste } from '@/mixins/copyPaste';
-import { showMessage } from '@/mixins/showMessage';
+import { useToast } from '@/composables';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 
 import mixins from 'vue-typed-mixins';
 
-export default mixins(copyPaste, showMessage, workflowHelpers).extend({
+export default mixins(copyPaste, workflowHelpers).extend({
 	name: 'NodeWebhooks',
 	props: [
 		'node', // NodeUi
 		'nodeType', // INodeTypeDescription
 	],
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	data() {
 		return {
 			isMinimized: this.nodeType && this.nodeType.name !== WEBHOOK_NODE_TYPE,
@@ -95,7 +100,7 @@ export default mixins(copyPaste, showMessage, workflowHelpers).extend({
 			const webhookUrl = this.getWebhookUrlDisplay(webhookData);
 			this.copyToClipboard(webhookUrl);
 
-			this.$showMessage({
+			this.showMessage({
 				title: this.$locale.baseText('nodeWebhooks.showMessage.title'),
 				type: 'success',
 			});
diff --git a/packages/editor-ui/src/components/OnboardingCallSignupModal.vue b/packages/editor-ui/src/components/OnboardingCallSignupModal.vue
index 61595fa1df..98a783b58b 100644
--- a/packages/editor-ui/src/components/OnboardingCallSignupModal.vue
+++ b/packages/editor-ui/src/components/OnboardingCallSignupModal.vue
@@ -51,18 +51,23 @@
 import { ONBOARDING_CALL_SIGNUP_MODAL_KEY, VALID_EMAIL_REGEX } from '@/constants';
 import Modal from './Modal.vue';
 
-import mixins from 'vue-typed-mixins';
-import { showMessage } from '@/mixins/showMessage';
+import { defineComponent } from 'vue';
+import { useToast } from '@/composables';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { createEventBus } from '@/event-bus';
 
-export default mixins(showMessage).extend({
+export default defineComponent({
 	components: {
 		Modal,
 	},
 	name: 'OnboardingCallSignupModal',
 	props: ['modalName'],
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	data() {
 		return {
 			email: '',
@@ -91,7 +96,7 @@ export default mixins(showMessage).extend({
 
 			try {
 				await this.uiStore.applyForOnboardingCall(this.email);
-				this.$showMessage({
+				this.showMessage({
 					type: 'success',
 					title: this.$locale.baseText('onboardingCallSignupSucess.title'),
 					message: this.$locale.baseText('onboardingCallSignupSucess.message'),
@@ -99,7 +104,7 @@ export default mixins(showMessage).extend({
 				this.okToClose = true;
 				this.modalBus.emit('close');
 			} catch (e) {
-				this.$showError(
+				this.showError(
 					e,
 					this.$locale.baseText('onboardingCallSignupFailed.title'),
 					this.$locale.baseText('onboardingCallSignupFailed.message'),
diff --git a/packages/editor-ui/src/components/PageAlert.vue b/packages/editor-ui/src/components/PageAlert.vue
index d3f914baf6..4fb2906a0d 100644
--- a/packages/editor-ui/src/components/PageAlert.vue
+++ b/packages/editor-ui/src/components/PageAlert.vue
@@ -3,13 +3,12 @@
 </template>
 
 <script lang="ts">
-import mixins from 'vue-typed-mixins';
-
-import { showMessage } from '@/mixins/showMessage';
-import type { ElMessageComponent } from 'element-ui/types/message';
+import { defineComponent } from 'vue';
+import type { ElNotificationComponent } from 'element-ui/types/notification';
 import { sanitizeHtml } from '@/utils';
+import { useToast } from '@/composables';
 
-export default mixins(showMessage).extend({
+export default defineComponent({
 	name: 'PageAlert',
 	props: {
 		message: {
@@ -20,19 +19,24 @@ export default mixins(showMessage).extend({
 			type: String,
 		},
 	},
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	data() {
 		return {
-			alert: null as null | ElMessageComponent,
+			alert: null as null | ElNotificationComponent,
 		};
 	},
 	mounted() {
-		this.alert = this.$showAlert({
+		this.alert = this.showAlert({
+			title: '',
 			message: sanitizeHtml(this.message),
 			type: 'warning',
 			duration: 0,
 			showClose: true,
 			dangerouslyUseHTMLString: true,
-			// @ts-ignore
 			customClass: this.popupClass || '',
 		});
 	},
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 4f640f44d3..efeef45bf4 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -379,7 +379,6 @@ 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 { showMessage } from '@/mixins/showMessage';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { hasExpressionMapping, isValueExpression, isResourceLocatorValue } from '@/utils';
 
@@ -397,13 +396,7 @@ import Vue from 'vue';
 
 type ResourceLocatorRef = InstanceType<typeof ResourceLocator>;
 
-export default mixins(
-	externalHooks,
-	nodeHelpers,
-	showMessage,
-	workflowHelpers,
-	debounceHelper,
-).extend({
+export default mixins(externalHooks, nodeHelpers, workflowHelpers, debounceHelper).extend({
 	name: 'parameter-input',
 	components: {
 		CodeNodeEditor,
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index ac1ffa2cba..a464537a41 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -76,7 +76,7 @@ import type { IN8nButton, INodeUi, IRunDataDisplayMode, IUpdateInformation } fro
 import ParameterOptions from '@/components/ParameterOptions.vue';
 import DraggableTarget from '@/components/DraggableTarget.vue';
 import mixins from 'vue-typed-mixins';
-import { showMessage } from '@/mixins/showMessage';
+import { useToast } from '@/composables';
 import {
 	hasExpressionMapping,
 	isResourceLocatorValue,
@@ -95,19 +95,24 @@ import { mapStores } from 'pinia';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useSegment } from '@/stores/segment.store';
 import { externalHooks } from '@/mixins/externalHooks';
-import { getMappedResult } from '../utils/mappingUtils';
+import { getMappedResult } from '@/utils/mappingUtils';
 
 type ParamterInputWrapperRef = InstanceType<typeof ParameterInputWrapper>;
 
 const DISPLAY_MODES_WITH_DATA_MAPPING = ['table', 'json', 'schema'];
 
-export default mixins(showMessage, externalHooks).extend({
+export default mixins(externalHooks).extend({
 	name: 'parameter-input-full',
 	components: {
 		ParameterOptions,
 		DraggableTarget,
 		ParameterInputWrapper,
 	},
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	data() {
 		return {
 			focused: false,
@@ -292,7 +297,7 @@ export default mixins(showMessage, externalHooks).extend({
 					this.$emit('valueChanged', parameterData);
 
 					if (!this.ndvStore.isMappingOnboarded) {
-						this.$showMessage({
+						this.showMessage({
 							title: this.$locale.baseText('dataMapping.success.title'),
 							message: this.$locale.baseText('dataMapping.success.moreInfo'),
 							type: 'success',
diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index 96aa9fdc11..e2be625087 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -45,9 +45,8 @@
 import type { PropType } from 'vue';
 
 import ParameterInput from '@/components/ParameterInput.vue';
-import InputHint from './ParameterInputHint.vue';
+import InputHint from '@/components/ParameterInputHint.vue';
 import mixins from 'vue-typed-mixins';
-import { showMessage } from '@/mixins/showMessage';
 import type {
 	INodeProperties,
 	INodePropertyMode,
@@ -63,7 +62,7 @@ import { useNDVStore } from '@/stores/ndv.store';
 
 type ParamRef = InstanceType<typeof ParameterInput>;
 
-export default mixins(showMessage, workflowHelpers).extend({
+export default mixins(workflowHelpers).extend({
 	name: 'parameter-input-wrapper',
 	components: {
 		ParameterInput,
diff --git a/packages/editor-ui/src/components/PersonalizationModal.vue b/packages/editor-ui/src/components/PersonalizationModal.vue
index 3331f296ef..2d14f99448 100644
--- a/packages/editor-ui/src/components/PersonalizationModal.vue
+++ b/packages/editor-ui/src/components/PersonalizationModal.vue
@@ -125,8 +125,8 @@ import {
 	VIEWS,
 } from '@/constants';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
-import { showMessage } from '@/mixins/showMessage';
-import Modal from './Modal.vue';
+import { useToast } from '@/composables';
+import Modal from '@/components/Modal.vue';
 import type { IFormInputs, IPersonalizationLatestVersion, IUser } from '@/Interface';
 import { getAccountAge } from '@/utils';
 import type { GenericValue } from 'n8n-workflow';
@@ -137,7 +137,7 @@ import { useRootStore } from '@/stores/n8nRoot.store';
 import { useUsersStore } from '@/stores/users.store';
 import { createEventBus } from '@/event-bus';
 
-export default mixins(showMessage, workflowHelpers).extend({
+export default mixins(workflowHelpers).extend({
 	components: { Modal },
 	name: 'PersonalizationModal',
 	data() {
@@ -151,6 +151,11 @@ export default mixins(showMessage, workflowHelpers).extend({
 			formBus: createEventBus(),
 		};
 	},
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	computed: {
 		...mapStores(useRootStore, useSettingsStore, useUIStore, useUsersStore),
 		survey() {
@@ -637,7 +642,7 @@ export default mixins(showMessage, workflowHelpers).extend({
 
 				await this.fetchOnboardingPrompt();
 			} catch (e) {
-				this.$showError(e, 'Error while submitting results');
+				this.showError(e, 'Error while submitting results');
 			}
 
 			this.$data.isSaving = false;
@@ -654,7 +659,7 @@ export default mixins(showMessage, workflowHelpers).extend({
 
 				if (onboardingResponse.title && onboardingResponse.description) {
 					setTimeout(async () => {
-						this.$showToast({
+						this.showToast({
 							type: 'info',
 							title: onboardingResponse.title,
 							message: onboardingResponse.description,
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 9d638016a6..abbf42a265 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -508,12 +508,12 @@ import { nodeHelpers } from '@/mixins/nodeHelpers';
 import { pinData } from '@/mixins/pinData';
 import CodeNodeEditor from '@/components/CodeNodeEditor/CodeNodeEditor.vue';
 import { dataPinningEventBus } from '@/event-bus';
-import { clearJsonKey, executionDataToJson, stringSizeInBytes } from '@/utils';
-import { isEmpty } from '@/utils';
+import { clearJsonKey, executionDataToJson, stringSizeInBytes, isEmpty } from '@/utils';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { mapStores } from 'pinia';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
+import { useToast } from '@/composables';
 
 const RunDataTable = async () => import('@/components/RunDataTable.vue');
 const RunDataJson = async () => import('@/components/RunDataJson.vue');
@@ -585,6 +585,11 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
 			default: false,
 		},
 	},
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	data() {
 		return {
 			binaryDataPreviewActive: false,
@@ -1072,7 +1077,7 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
 			this.workflowsStore.pinData({ node: this.node, data: this.inputData });
 
 			if (this.maxRunIndex > 0) {
-				this.$showToast({
+				this.showToast({
 					title: this.$locale.baseText('ndv.pinData.pin.multipleRuns.title', {
 						interpolate: {
 							index: `${this.runIndex}`,
diff --git a/packages/editor-ui/src/components/RunDataJsonActions.vue b/packages/editor-ui/src/components/RunDataJsonActions.vue
index 1523fa71c6..1f679fb4a0 100644
--- a/packages/editor-ui/src/components/RunDataJsonActions.vue
+++ b/packages/editor-ui/src/components/RunDataJsonActions.vue
@@ -48,6 +48,7 @@ import { clearJsonKey, convertPath, executionDataToJson } from '@/utils';
 import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNDVStore } from '@/stores/ndv.store';
+import { useToast } from '@/composables';
 
 type JsonPathData = {
 	path: string;
@@ -90,6 +91,11 @@ export default mixins(genericHelpers, nodeHelpers, pinData, copyPaste).extend({
 			required: true,
 		},
 	},
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	computed: {
 		...mapStores(useNDVStore, useWorkflowsStore),
 		activeNode(): INodeUi | null {
@@ -152,7 +158,7 @@ export default mixins(genericHelpers, nodeHelpers, pinData, copyPaste).extend({
 			if (commandData.command === 'value') {
 				value = this.getJsonValue();
 
-				this.$showToast({
+				this.showToast({
 					title: this.$locale.baseText('runData.copyValue.toast'),
 					message: '',
 					type: 'success',
@@ -166,7 +172,7 @@ export default mixins(genericHelpers, nodeHelpers, pinData, copyPaste).extend({
 					startPath = jsonItemPath.startPath;
 					path = jsonItemPath.path;
 
-					this.$showToast({
+					this.showToast({
 						title: this.$locale.baseText('runData.copyItemPath.toast'),
 						message: '',
 						type: 'success',
@@ -177,7 +183,7 @@ export default mixins(genericHelpers, nodeHelpers, pinData, copyPaste).extend({
 					startPath = jsonParameterPath.startPath;
 					path = jsonParameterPath.path;
 
-					this.$showToast({
+					this.showToast({
 						title: this.$locale.baseText('runData.copyParameterPath.toast'),
 						message: '',
 						type: 'success',
diff --git a/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationCard.ee.vue b/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationCard.ee.vue
index 58e7adbc5b..d9c80f4b39 100644
--- a/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationCard.ee.vue
+++ b/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationCard.ee.vue
@@ -47,9 +47,9 @@
 </template>
 
 <script lang="ts">
-import mixins from 'vue-typed-mixins';
-import { EnterpriseEditionFeature } from '@/constants';
-import { showMessage } from '@/mixins/showMessage';
+import { defineComponent } from 'vue';
+import { EnterpriseEditionFeature, MODAL_CONFIRM } from '@/constants';
+import { useMessage } from '@/composables';
 import { useLogStreamingStore } from '@/stores/logStreaming.store';
 import type { PropType } from 'vue';
 import { mapStores } from 'pinia';
@@ -63,13 +63,18 @@ export const DESTINATION_LIST_ITEM_ACTIONS = {
 	DELETE: 'delete',
 };
 
-export default mixins(showMessage).extend({
+export default defineComponent({
 	data() {
 		return {
 			EnterpriseEditionFeature,
 			nodeParameters: {} as MessageEventBusDestinationOptions,
 		};
 	},
+	setup() {
+		return {
+			...useMessage(),
+		};
+	},
 	components: {},
 	props: {
 		eventBus: {
@@ -148,17 +153,23 @@ export default mixins(showMessage).extend({
 			if (action === DESTINATION_LIST_ITEM_ACTIONS.OPEN) {
 				this.$emit('edit', this.destination.id);
 			} else if (action === DESTINATION_LIST_ITEM_ACTIONS.DELETE) {
-				const deleteConfirmed = await this.confirmMessage(
+				const deleteConfirmed = await this.confirm(
 					this.$locale.baseText('settings.log-streaming.destinationDelete.message', {
 						interpolate: { destinationName: this.destination.label },
 					}),
 					this.$locale.baseText('settings.log-streaming.destinationDelete.headline'),
-					'warning',
-					this.$locale.baseText('settings.log-streaming.destinationDelete.confirmButtonText'),
-					this.$locale.baseText('settings.log-streaming.destinationDelete.cancelButtonText'),
+					{
+						type: 'warning',
+						confirmButtonText: this.$locale.baseText(
+							'settings.log-streaming.destinationDelete.confirmButtonText',
+						),
+						cancelButtonText: this.$locale.baseText(
+							'settings.log-streaming.destinationDelete.cancelButtonText',
+						),
+					},
 				);
 
-				if (deleteConfirmed === false) {
+				if (deleteConfirmed !== MODAL_CONFIRM) {
 					return;
 				}
 
diff --git a/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue b/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue
index d841827f48..c267cea5ec 100644
--- a/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue
+++ b/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue
@@ -174,13 +174,11 @@
 <script lang="ts">
 import { get, set, unset } from 'lodash-es';
 import { mapStores } from 'pinia';
-import mixins from 'vue-typed-mixins';
 import { useLogStreamingStore } from '@/stores/logStreaming.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import ParameterInputList from '@/components/ParameterInputList.vue';
-import NodeCredentials from '@/components/NodeCredentials.vue';
-import type { IMenuItem, INodeUi, ITab, IUpdateInformation } from '@/Interface';
+import type { IMenuItem, INodeUi, IUpdateInformation } from '@/Interface';
 import type {
 	IDataObject,
 	INodeCredentials,
@@ -196,27 +194,26 @@ import {
 	defaultMessageEventBusDestinationSentryOptions,
 } from 'n8n-workflow';
 import type { PropType } from 'vue';
-import Vue from 'vue';
-import { LOG_STREAM_MODAL_KEY } from '@/constants';
+import Vue, { defineComponent } from 'vue';
+import { LOG_STREAM_MODAL_KEY, MODAL_CONFIRM } from '@/constants';
 import Modal from '@/components/Modal.vue';
-import { showMessage } from '@/mixins/showMessage';
+import { useMessage } from '@/composables';
 import { useUIStore } from '@/stores/ui.store';
 import { useUsersStore } from '@/stores/users.store';
-import { destinationToFakeINodeUi } from './Helpers.ee';
+import { destinationToFakeINodeUi } from '@/components/SettingsLogStreaming/Helpers.ee';
 import {
 	webhookModalDescription,
 	sentryModalDescription,
 	syslogModalDescription,
 } from './descriptions.ee';
 import type { BaseTextKey } from '@/plugins/i18n';
-import InlineNameEdit from '../InlineNameEdit.vue';
-import SaveButton from '../SaveButton.vue';
+import InlineNameEdit from '@/components/InlineNameEdit.vue';
+import SaveButton from '@/components/SaveButton.vue';
 import EventSelection from '@/components/SettingsLogStreaming/EventSelection.ee.vue';
-import { Checkbox } from 'element-ui';
 import type { EventBus } from '@/event-bus';
 import { createEventBus } from '@/event-bus';
 
-export default mixins(showMessage).extend({
+export default defineComponent({
 	name: 'event-destination-settings-modal',
 	props: {
 		modalName: String,
@@ -232,11 +229,14 @@ export default mixins(showMessage).extend({
 	components: {
 		Modal,
 		ParameterInputList,
-		NodeCredentials,
 		InlineNameEdit,
 		SaveButton,
 		EventSelection,
-		Checkbox,
+	},
+	setup() {
+		return {
+			...useMessage(),
+		};
 	},
 	data() {
 		return {
@@ -311,18 +311,6 @@ export default mixins(showMessage).extend({
 			}
 			return items;
 		},
-		tabItems(): ITab[] {
-			return [
-				{
-					label: this.$locale.baseText('settings.log-streaming.tab.settings'),
-					value: 'settings',
-				},
-				{
-					label: this.$locale.baseText('settings.log-streaming.tab.events'),
-					value: 'events',
-				},
-			];
-		},
 	},
 	mounted() {
 		this.isInstanceOwner = this.usersStore.currentUser?.globalRole?.name === 'owner';
@@ -442,17 +430,23 @@ export default mixins(showMessage).extend({
 			this.testMessageSent = true;
 		},
 		async removeThis() {
-			const deleteConfirmed = await this.confirmMessage(
+			const deleteConfirmed = await this.confirm(
 				this.$locale.baseText('settings.log-streaming.destinationDelete.message', {
 					interpolate: { destinationName: this.destination.label },
 				}),
 				this.$locale.baseText('settings.log-streaming.destinationDelete.headline'),
-				'warning',
-				this.$locale.baseText('settings.log-streaming.destinationDelete.confirmButtonText'),
-				this.$locale.baseText('settings.log-streaming.destinationDelete.cancelButtonText'),
+				{
+					type: 'warning',
+					confirmButtonText: this.$locale.baseText(
+						'settings.log-streaming.destinationDelete.confirmButtonText',
+					),
+					cancelButtonText: this.$locale.baseText(
+						'settings.log-streaming.destinationDelete.cancelButtonText',
+					),
+				},
 			);
 
-			if (deleteConfirmed === false) {
+			if (deleteConfirmed !== MODAL_CONFIRM) {
 				return;
 			} else {
 				this.eventBus.emit('remove', this.destination.id);
diff --git a/packages/editor-ui/src/components/TagsDropdown.vue b/packages/editor-ui/src/components/TagsDropdown.vue
index 1bdc580fd4..d9ee2859a4 100644
--- a/packages/editor-ui/src/components/TagsDropdown.vue
+++ b/packages/editor-ui/src/components/TagsDropdown.vue
@@ -55,12 +55,12 @@
 </template>
 
 <script lang="ts">
-import mixins from 'vue-typed-mixins';
+import { defineComponent } from 'vue';
 
 import type { ITag } from '@/Interface';
 import { MAX_TAG_NAME_LENGTH, TAGS_MANAGER_MODAL_KEY } from '@/constants';
 
-import { showMessage } from '@/mixins/showMessage';
+import { useToast } from '@/composables';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useTagsStore } from '@/stores/tags.store';
@@ -75,7 +75,7 @@ type CreateRef = InstanceType<typeof N8nOption>;
 const MANAGE_KEY = '__manage';
 const CREATE_KEY = '__create';
 
-export default mixins(showMessage).extend({
+export default defineComponent({
 	name: 'TagsDropdown',
 	props: {
 		placeholder: {},
@@ -88,6 +88,11 @@ export default mixins(showMessage).extend({
 			type: Object as PropType<EventBus>,
 		},
 	},
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	data() {
 		return {
 			filter: '',
@@ -163,7 +168,7 @@ export default mixins(showMessage).extend({
 
 				this.$data.filter = '';
 			} catch (error) {
-				this.$showError(
+				this.showError(
 					error,
 					this.$locale.baseText('tagsDropdown.showError.title'),
 					this.$locale.baseText('tagsDropdown.showError.message', { interpolate: { name } }),
diff --git a/packages/editor-ui/src/components/TagsManager/TagsManager.vue b/packages/editor-ui/src/components/TagsManager/TagsManager.vue
index 791de6bd7b..34bd4745a4 100644
--- a/packages/editor-ui/src/components/TagsManager/TagsManager.vue
+++ b/packages/editor-ui/src/components/TagsManager/TagsManager.vue
@@ -28,11 +28,11 @@
 </template>
 
 <script lang="ts">
-import mixins from 'vue-typed-mixins';
+import { defineComponent } from 'vue';
 
 import type { ITag } from '@/Interface';
 
-import { showMessage } from '@/mixins/showMessage';
+import { useToast } from '@/composables';
 import TagsView from '@/components/TagsManager/TagsView/TagsView.vue';
 import NoTagsView from '@/components/TagsManager/NoTagsView.vue';
 import Modal from '@/components/Modal.vue';
@@ -41,8 +41,13 @@ import { mapStores } from 'pinia';
 import { useTagsStore } from '@/stores/tags.store';
 import { createEventBus } from '@/event-bus';
 
-export default mixins(showMessage).extend({
+export default defineComponent({
 	name: 'TagsManager',
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	created() {
 		void this.tagsStore.fetchAll({ force: true, withUsageCount: true });
 	},
@@ -94,7 +99,7 @@ export default mixins(showMessage).extend({
 				cb(newTag);
 			} catch (error) {
 				const escapedName = escape(name);
-				this.$showError(
+				this.showError(
 					error,
 					this.$locale.baseText('tagsManager.showError.onCreate.title'),
 					this.$locale.baseText('tagsManager.showError.onCreate.message', {
@@ -122,13 +127,13 @@ export default mixins(showMessage).extend({
 				const updatedTag = await this.tagsStore.rename({ id, name });
 				cb(!!updatedTag);
 
-				this.$showMessage({
+				this.showMessage({
 					title: this.$locale.baseText('tagsManager.showMessage.onUpdate.title'),
 					type: 'success',
 				});
 			} catch (error) {
 				const escapedName = escape(oldName);
-				this.$showError(
+				this.showError(
 					error,
 					this.$locale.baseText('tagsManager.showError.onUpdate.title'),
 					this.$locale.baseText('tagsManager.showError.onUpdate.message', {
@@ -153,13 +158,13 @@ export default mixins(showMessage).extend({
 
 				cb(deleted);
 
-				this.$showMessage({
+				this.showMessage({
 					title: this.$locale.baseText('tagsManager.showMessage.onDelete.title'),
 					type: 'success',
 				});
 			} catch (error) {
 				const escapedName = escape(name);
-				this.$showError(
+				this.showError(
 					error,
 					this.$locale.baseText('tagsManager.showError.onDelete.title'),
 					this.$locale.baseText('tagsManager.showError.onDelete.message', {
diff --git a/packages/editor-ui/src/components/TriggerPanel.vue b/packages/editor-ui/src/components/TriggerPanel.vue
index 99e66e5c93..451301a3fe 100644
--- a/packages/editor-ui/src/components/TriggerPanel.vue
+++ b/packages/editor-ui/src/components/TriggerPanel.vue
@@ -106,13 +106,12 @@ import { EXECUTIONS_MODAL_KEY, WEBHOOK_NODE_TYPE, WORKFLOW_SETTINGS_MODAL_KEY }
 import type { INodeUi } from '@/Interface';
 import type { INodeTypeDescription } from 'n8n-workflow';
 import { getTriggerNodeServiceName } from '@/utils';
-import NodeExecuteButton from './NodeExecuteButton.vue';
+import NodeExecuteButton from '@/components/NodeExecuteButton.vue';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import mixins from 'vue-typed-mixins';
-import CopyInput from './CopyInput.vue';
-import NodeIcon from './NodeIcon.vue';
+import CopyInput from '@/components/CopyInput.vue';
+import NodeIcon from '@/components/NodeIcon.vue';
 import { copyPaste } from '@/mixins/copyPaste';
-import { showMessage } from '@/mixins/showMessage';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
@@ -122,7 +121,7 @@ import type { N8nInfoAccordion } from 'n8n-design-system';
 
 type HelpRef = InstanceType<typeof N8nInfoAccordion>;
 
-export default mixins(workflowHelpers, copyPaste, showMessage).extend({
+export default mixins(workflowHelpers, copyPaste).extend({
 	name: 'TriggerPanel',
 	components: {
 		NodeExecuteButton,
@@ -190,18 +189,6 @@ export default mixins(workflowHelpers, copyPaste, showMessage).extend({
 
 			return this.getWebhookUrl(this.nodeType.webhooks[0], this.node, 'test');
 		},
-		webhookProdUrl(): string | undefined {
-			if (
-				!this.node ||
-				!this.nodeType ||
-				!this.nodeType.webhooks ||
-				!this.nodeType.webhooks.length
-			) {
-				return undefined;
-			}
-
-			return this.getWebhookUrl(this.nodeType.webhooks[0], this.node, 'prod');
-		},
 		isWebhookBasedNode(): boolean {
 			return Boolean(this.nodeType && this.nodeType.webhooks && this.nodeType.webhooks.length);
 		},
diff --git a/packages/editor-ui/src/components/ValueSurvey.vue b/packages/editor-ui/src/components/ValueSurvey.vue
index 3973812b4a..c40642b333 100644
--- a/packages/editor-ui/src/components/ValueSurvey.vue
+++ b/packages/editor-ui/src/components/ValueSurvey.vue
@@ -59,7 +59,7 @@
 import { VALID_EMAIL_REGEX, VALUE_SURVEY_MODAL_KEY } from '@/constants';
 import type { IN8nPromptResponse } from '@/Interface';
 
-import ModalDrawer from './ModalDrawer.vue';
+import ModalDrawer from '@/components/ModalDrawer.vue';
 
 import mixins from 'vue-typed-mixins';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
@@ -67,6 +67,7 @@ import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useRootStore } from '@/stores/n8nRoot.store';
 import { createEventBus } from '@/event-bus';
+import { useToast } from '@/composables';
 
 const DEFAULT_TITLE = 'How likely are you to recommend n8n to a friend or colleague?';
 const GREAT_FEEDBACK_TITLE =
@@ -80,6 +81,11 @@ export default mixins(workflowHelpers).extend({
 	components: {
 		ModalDrawer,
 	},
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	watch: {
 		isActive(isActive) {
 			if (isActive) {
@@ -164,7 +170,7 @@ export default mixins(workflowHelpers).extend({
 						instance_id: this.rootStore.instanceId,
 						email: this.form.email,
 					});
-					this.$showMessage({
+					this.showMessage({
 						title: 'Thanks for your feedback',
 						message:
 							'If you’d like to help even more, leave us a <a target="_blank" href="https://www.g2.com/products/n8n/reviews/start">review on G2</a>.',
diff --git a/packages/editor-ui/src/components/WorkflowActivator.vue b/packages/editor-ui/src/components/WorkflowActivator.vue
index 05c1118645..47331ab385 100644
--- a/packages/editor-ui/src/components/WorkflowActivator.vue
+++ b/packages/editor-ui/src/components/WorkflowActivator.vue
@@ -50,7 +50,7 @@
 </template>
 
 <script lang="ts">
-import { showMessage } from '@/mixins/showMessage';
+import { useToast } from '@/composables';
 import { workflowActivate } from '@/mixins/workflowActivate';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
@@ -58,14 +58,16 @@ import { mapStores } from 'pinia';
 import mixins from 'vue-typed-mixins';
 import { getActivatableTriggerNodes } from '@/utils';
 
-export default mixins(showMessage, workflowActivate).extend({
+export default mixins(workflowActivate).extend({
 	name: 'WorkflowActivator',
 	props: ['workflowActive', 'workflowId'],
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	computed: {
 		...mapStores(useUIStore, useWorkflowsStore),
-		getStateIsDirty(): boolean {
-			return this.uiStore.stateIsDirty;
-		},
 		nodesIssuesExist(): boolean {
 			return this.workflowsStore.nodesIssuesExist;
 		},
@@ -123,7 +125,7 @@ export default mixins(showMessage, workflowActivate).extend({
 				);
 			}
 
-			this.$showMessage({
+			this.showMessage({
 				title: this.$locale.baseText('workflowActivator.showMessage.displayActivationError.title'),
 				message: errorMessage,
 				type: 'warning',
diff --git a/packages/editor-ui/src/components/WorkflowCard.vue b/packages/editor-ui/src/components/WorkflowCard.vue
index 063b9ae60c..0db405f348 100644
--- a/packages/editor-ui/src/components/WorkflowCard.vue
+++ b/packages/editor-ui/src/components/WorkflowCard.vue
@@ -62,15 +62,16 @@
 </template>
 
 <script lang="ts">
-import mixins from 'vue-typed-mixins';
+import { defineComponent } from 'vue';
 import type { IWorkflowDb, IUser, ITag } from '@/Interface';
 import {
 	DUPLICATE_MODAL_KEY,
 	EnterpriseEditionFeature,
+	MODAL_CONFIRM,
 	VIEWS,
 	WORKFLOW_SHARE_MODAL_KEY,
 } from '@/constants';
-import { showMessage } from '@/mixins/showMessage';
+import { useToast, useMessage } from '@/composables';
 import type { IPermissions } from '@/permissions';
 import { getWorkflowPermissions } from '@/permissions';
 import dateformat from 'dateformat';
@@ -90,12 +91,18 @@ export const WORKFLOW_LIST_ITEM_ACTIONS = {
 	DELETE: 'delete',
 };
 
-export default mixins(showMessage).extend({
+export default defineComponent({
 	data() {
 		return {
 			EnterpriseEditionFeature,
 		};
 	},
+	setup() {
+		return {
+			...useToast(),
+			...useMessage(),
+		};
+	},
 	components: {
 		WorkflowActivator,
 	},
@@ -218,29 +225,35 @@ export default mixins(showMessage).extend({
 					sub_view: this.$route.name === VIEWS.WORKFLOWS ? 'Workflows listing' : 'Workflow editor',
 				});
 			} else if (action === WORKFLOW_LIST_ITEM_ACTIONS.DELETE) {
-				const deleteConfirmed = await this.confirmMessage(
+				const deleteConfirmed = await this.confirm(
 					this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.message', {
 						interpolate: { workflowName: this.data.name },
 					}),
 					this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.headline'),
-					'warning',
-					this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.confirmButtonText'),
-					this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.cancelButtonText'),
+					{
+						type: 'warning',
+						confirmButtonText: this.$locale.baseText(
+							'mainSidebar.confirmMessage.workflowDelete.confirmButtonText',
+						),
+						cancelButtonText: this.$locale.baseText(
+							'mainSidebar.confirmMessage.workflowDelete.cancelButtonText',
+						),
+					},
 				);
 
-				if (deleteConfirmed === false) {
+				if (deleteConfirmed !== MODAL_CONFIRM) {
 					return;
 				}
 
 				try {
 					await this.workflowsStore.deleteWorkflow(this.data.id);
 				} catch (error) {
-					this.$showError(error, this.$locale.baseText('generic.deleteWorkflowError'));
+					this.showError(error, this.$locale.baseText('generic.deleteWorkflowError'));
 					return;
 				}
 
 				// Reset tab title since workflow is deleted.
-				this.$showMessage({
+				this.showMessage({
 					title: this.$locale.baseText('mainSidebar.showMessage.handleSelect1.title'),
 					type: 'success',
 				});
diff --git a/packages/editor-ui/src/components/WorkflowPreview.vue b/packages/editor-ui/src/components/WorkflowPreview.vue
index 26d85bda6a..390559a693 100644
--- a/packages/editor-ui/src/components/WorkflowPreview.vue
+++ b/packages/editor-ui/src/components/WorkflowPreview.vue
@@ -22,13 +22,13 @@
 </template>
 
 <script lang="ts">
-import mixins from 'vue-typed-mixins';
-import { showMessage } from '@/mixins/showMessage';
-import type { IWorkflowDb } from '../Interface';
+import { defineComponent } from 'vue';
+import { useToast } from '@/composables';
+import type { IWorkflowDb } from '@/Interface';
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/n8nRoot.store';
 
-export default mixins(showMessage).extend({
+export default defineComponent({
 	name: 'WorkflowPreview',
 	props: {
 		loading: {
@@ -58,6 +58,11 @@ export default mixins(showMessage).extend({
 			validator: (value: string): boolean => ['image', 'spinner'].includes(value),
 		},
 	},
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	data() {
 		return {
 			nodeViewDetailsOpened: false,
@@ -107,7 +112,7 @@ export default mixins(showMessage).extend({
 					);
 				}
 			} catch (error) {
-				this.$showError(
+				this.showError(
 					error,
 					this.$locale.baseText('workflowPreview.showError.previewError.title'),
 					this.$locale.baseText('workflowPreview.showError.previewError.message'),
@@ -131,7 +136,7 @@ export default mixins(showMessage).extend({
 					);
 				}
 			} catch (error) {
-				this.$showError(
+				this.showError(
 					error,
 					this.$locale.baseText('workflowPreview.showError.previewError.title'),
 					this.$locale.baseText('workflowPreview.executionMode.showError.previewError.message'),
diff --git a/packages/editor-ui/src/components/WorkflowSettings.vue b/packages/editor-ui/src/components/WorkflowSettings.vue
index a230a24e79..66aeb21028 100644
--- a/packages/editor-ui/src/components/WorkflowSettings.vue
+++ b/packages/editor-ui/src/components/WorkflowSettings.vue
@@ -328,7 +328,7 @@ import Vue from 'vue';
 
 import { externalHooks } from '@/mixins/externalHooks';
 import { genericHelpers } from '@/mixins/genericHelpers';
-import { showMessage } from '@/mixins/showMessage';
+import { useToast } from '@/composables';
 import type {
 	ITimeoutHMS,
 	IUser,
@@ -337,12 +337,12 @@ import type {
 	IWorkflowSettings,
 	IWorkflowShortResponse,
 } from '@/Interface';
-import Modal from './Modal.vue';
+import Modal from '@/components/Modal.vue';
 import {
 	EnterpriseEditionFeature,
 	PLACEHOLDER_EMPTY_WORKFLOW_ID,
 	WORKFLOW_SETTINGS_MODAL_KEY,
-} from '../constants';
+} from '@/constants';
 
 import mixins from 'vue-typed-mixins';
 
@@ -356,11 +356,16 @@ import useWorkflowsEEStore from '@/stores/workflows.ee.store';
 import { useUsersStore } from '@/stores/users.store';
 import { createEventBus } from '@/event-bus';
 
-export default mixins(externalHooks, genericHelpers, showMessage).extend({
+export default mixins(externalHooks, genericHelpers).extend({
 	name: 'WorkflowSettings',
 	components: {
 		Modal,
 	},
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	data() {
 		return {
 			isLoading: true,
@@ -448,7 +453,7 @@ export default mixins(externalHooks, genericHelpers, showMessage).extend({
 		this.maxExecutionTimeout = this.rootStore.maxExecutionTimeout;
 
 		if (!this.workflowId || this.workflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID) {
-			this.$showMessage({
+			this.showMessage({
 				title: 'No workflow active',
 				message: 'No workflow active to display settings of.',
 				type: 'error',
@@ -477,7 +482,7 @@ export default mixins(externalHooks, genericHelpers, showMessage).extend({
 		try {
 			await Promise.all(promises);
 		} catch (error) {
-			this.$showError(
+			this.showError(
 				error,
 				'Problem loading settings',
 				'The following error occurred loading the data:',
@@ -754,7 +759,7 @@ export default mixins(externalHooks, genericHelpers, showMessage).extend({
 				data.settings!.executionTimeout !== -1 ? hours * 3600 + minutes * 60 + seconds : -1;
 
 			if (data.settings!.executionTimeout === 0) {
-				this.$showError(
+				this.showError(
 					new Error(this.$locale.baseText('workflowSettings.showError.saveSettings1.errorMessage')),
 					this.$locale.baseText('workflowSettings.showError.saveSettings1.title'),
 					this.$locale.baseText('workflowSettings.showError.saveSettings1.message') + ':',
@@ -767,7 +772,7 @@ export default mixins(externalHooks, genericHelpers, showMessage).extend({
 				const { hours, minutes, seconds } = this.convertToHMS(
 					this.workflowSettings.maxExecutionTimeout as number,
 				);
-				this.$showError(
+				this.showError(
 					new Error(
 						this.$locale.baseText('workflowSettings.showError.saveSettings2.errorMessage', {
 							interpolate: {
@@ -791,7 +796,7 @@ export default mixins(externalHooks, genericHelpers, showMessage).extend({
 				const workflow = await this.workflowsStore.updateWorkflow(this.$route.params.name, data);
 				this.workflowsStore.setWorkflowVersionId(workflow.versionId);
 			} catch (error) {
-				this.$showError(
+				this.showError(
 					error,
 					this.$locale.baseText('workflowSettings.showError.saveSettings3.title'),
 				);
@@ -813,7 +818,7 @@ export default mixins(externalHooks, genericHelpers, showMessage).extend({
 
 			this.isLoading = false;
 
-			this.$showMessage({
+			this.showMessage({
 				title: this.$locale.baseText('workflowSettings.showMessage.saveSettings.title'),
 				type: 'success',
 			});
diff --git a/packages/editor-ui/src/components/WorkflowShareModal.ee.vue b/packages/editor-ui/src/components/WorkflowShareModal.ee.vue
index 3dbbce28e1..7e83173656 100644
--- a/packages/editor-ui/src/components/WorkflowShareModal.ee.vue
+++ b/packages/editor-ui/src/components/WorkflowShareModal.ee.vue
@@ -126,15 +126,16 @@
 import Modal from './Modal.vue';
 import {
 	EnterpriseEditionFeature,
+	MODAL_CONFIRM,
 	PLACEHOLDER_EMPTY_WORKFLOW_ID,
 	VIEWS,
 	WORKFLOW_SHARE_MODAL_KEY,
-} from '../constants';
+} from '@/constants';
 import type { IUser, IWorkflowDb } from '@/Interface';
 import type { IPermissions } from '@/permissions';
 import { getWorkflowPermissions } from '@/permissions';
-import mixins from 'vue-typed-mixins';
-import { showMessage } from '@/mixins/showMessage';
+import { defineComponent } from 'vue';
+import { useToast, useMessage } from '@/composables';
 import { createEventBus, nodeViewEventBus } from '@/event-bus';
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/settings.store';
@@ -147,7 +148,7 @@ import { useUsageStore } from '@/stores/usage.store';
 import type { BaseTextKey } from '@/plugins/i18n';
 import { isNavigationFailure } from 'vue-router';
 
-export default mixins(showMessage).extend({
+export default defineComponent({
 	name: 'workflow-share-modal',
 	components: {
 		Modal,
@@ -158,6 +159,12 @@ export default mixins(showMessage).extend({
 			default: () => ({}),
 		},
 	},
+	setup() {
+		return {
+			...useToast(),
+			...useMessage(),
+		};
+	},
 	data() {
 		const workflowsStore = useWorkflowsStore();
 		const workflow =
@@ -188,11 +195,6 @@ export default mixins(showMessage).extend({
 		isSharingEnabled(): boolean {
 			return this.settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing);
 		},
-		fallbackLinkUrl(): string {
-			return `${this.$locale.baseText(
-				this.uiStore.contextBasedTranslationKeys.upgradeLinkUrl as BaseTextKey,
-			)}${true ? '&utm_campaign=upgrade-workflow-sharing' : ''}`;
-		},
 		modalTitle(): string {
 			return this.$locale.baseText(
 				this.isSharingEnabled
@@ -292,12 +294,12 @@ export default mixins(showMessage).extend({
 					sharees_removed: shareesRemoved.length,
 				});
 
-				this.$showMessage({
+				this.showMessage({
 					title: this.$locale.baseText('workflows.shareModal.onSave.success.title'),
 					type: 'success',
 				});
 			} catch (error) {
-				this.$showError(error, this.$locale.baseText('workflows.shareModal.onSave.error.title'));
+				this.showError(error, this.$locale.baseText('workflows.shareModal.onSave.error.title'));
 			} finally {
 				this.modalBus.emit('close');
 				this.loading = false;
@@ -370,7 +372,7 @@ export default mixins(showMessage).extend({
 
 			let confirm = true;
 			if (!isNewSharee && isLastUserWithAccessToCredentials) {
-				confirm = await this.confirmMessage(
+				const confirmAction = await this.confirm(
 					this.$locale.baseText(
 						'workflows.shareModal.list.delete.confirm.lastUserWithAccessToCredentials.message',
 						{
@@ -380,10 +382,17 @@ export default mixins(showMessage).extend({
 					this.$locale.baseText('workflows.shareModal.list.delete.confirm.title', {
 						interpolate: { name: user.fullName as string },
 					}),
-					null,
-					this.$locale.baseText('workflows.shareModal.list.delete.confirm.confirmButtonText'),
-					this.$locale.baseText('workflows.shareModal.list.delete.confirm.cancelButtonText'),
+					{
+						confirmButtonText: this.$locale.baseText(
+							'workflows.shareModal.list.delete.confirm.confirmButtonText',
+						),
+						cancelButtonText: this.$locale.baseText(
+							'workflows.shareModal.list.delete.confirm.cancelButtonText',
+						),
+					},
 				);
+
+				confirm = confirmAction === MODAL_CONFIRM;
 			}
 
 			if (confirm) {
@@ -404,15 +413,21 @@ export default mixins(showMessage).extend({
 		},
 		async onCloseModal() {
 			if (this.isDirty) {
-				const shouldSave = await this.confirmMessage(
+				const shouldSave = await this.confirm(
 					this.$locale.baseText('workflows.shareModal.saveBeforeClose.message'),
 					this.$locale.baseText('workflows.shareModal.saveBeforeClose.title'),
-					'warning',
-					this.$locale.baseText('workflows.shareModal.saveBeforeClose.confirmButtonText'),
-					this.$locale.baseText('workflows.shareModal.saveBeforeClose.cancelButtonText'),
+					{
+						type: 'warning',
+						confirmButtonText: this.$locale.baseText(
+							'workflows.shareModal.saveBeforeClose.confirmButtonText',
+						),
+						cancelButtonText: this.$locale.baseText(
+							'workflows.shareModal.saveBeforeClose.cancelButtonText',
+						),
+					},
 				);
 
-				if (shouldSave) {
+				if (shouldSave === MODAL_CONFIRM) {
 					return this.onSave();
 				}
 			}
diff --git a/packages/editor-ui/src/components/__tests__/ExecutionsList.test.ts b/packages/editor-ui/src/components/__tests__/ExecutionsList.test.ts
index 2075750da4..41ea0c1a6c 100644
--- a/packages/editor-ui/src/components/__tests__/ExecutionsList.test.ts
+++ b/packages/editor-ui/src/components/__tests__/ExecutionsList.test.ts
@@ -10,7 +10,6 @@ import ExecutionsList from '@/components/ExecutionsList.vue';
 import { externalHooks } from '@/mixins/externalHooks';
 import { genericHelpers } from '@/mixins/genericHelpers';
 import { executionHelpers } from '@/mixins/executionsHelpers';
-import { showMessage } from '@/mixins/showMessage';
 import { i18nInstance } from '@/plugins/i18n';
 import type { IWorkflowDb } from '@/Interface';
 import type { IExecutionsSummary } from 'n8n-workflow';
@@ -73,7 +72,7 @@ const renderOptions = {
 	}),
 	i18n: i18nInstance,
 	stubs: ['font-awesome-icon'],
-	mixins: [externalHooks, genericHelpers, executionHelpers, showMessage],
+	mixins: [externalHooks, genericHelpers, executionHelpers],
 };
 
 function TelemetryPlugin(vue: typeof Vue): void {
diff --git a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
index 522f6ac477..c6c5062780 100644
--- a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
+++ b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
@@ -195,7 +195,6 @@
 </template>
 
 <script lang="ts">
-import { showMessage } from '@/mixins/showMessage';
 import type { IUser } from '@/Interface';
 import mixins from 'vue-typed-mixins';
 
@@ -237,9 +236,7 @@ interface IFilters {
 type IResourceKeyType = 'credentials' | 'workflows';
 type SearchRef = InstanceType<typeof N8nInput>;
 
-const filterKeys = ['ownedBy', 'sharedWith'];
-
-export default mixins(showMessage, debounceHelper).extend({
+export default mixins(debounceHelper).extend({
 	name: 'resources-list-layout',
 	components: {
 		TemplateCard,
diff --git a/packages/editor-ui/src/composables/index.ts b/packages/editor-ui/src/composables/index.ts
index 86ee35fe50..c34202344c 100644
--- a/packages/editor-ui/src/composables/index.ts
+++ b/packages/editor-ui/src/composables/index.ts
@@ -1,8 +1,13 @@
+export { default as useCanvasMouseSelect } from './useCanvasMouseSelect';
 export * from './useCopyToClipboard';
+export * from './useDebounce';
+export { default as useDeviceSupport } from './useDeviceSupport';
 export * from './useExternalHooks';
-export * from './useGlobalLinkActions';
+export { default as useGlobalLinkActions } from './useGlobalLinkActions';
+export * from './useHistoryHelper';
 export * from './useI18n';
 export * from './useMessage';
 export * from './useTelemetry';
+export * from './useTitleChange';
 export * from './useToast';
 export * from './useUpgradeLink';
diff --git a/packages/editor-ui/src/composables/useToast.ts b/packages/editor-ui/src/composables/useToast.ts
index 524639447d..495c5687c2 100644
--- a/packages/editor-ui/src/composables/useToast.ts
+++ b/packages/editor-ui/src/composables/useToast.ts
@@ -3,7 +3,7 @@ import type { ElNotificationComponent, ElNotificationOptions } from 'element-ui/
 import type { MessageType } from 'element-ui/types/message';
 import { sanitizeHtml } from '@/utils';
 import { useTelemetry } from '@/composables/useTelemetry';
-import { useWorkflowsStore } from '@/stores';
+import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useI18n } from './useI18n';
 import { useExternalHooks } from './useExternalHooks';
 
@@ -39,6 +39,7 @@ export function useToast() {
 			telemetry.track('Instance FE emitted error', {
 				error_title: messageData.title,
 				error_message: messageData.message,
+				caused_by_credential: causedByCredential(messageData.message),
 				workflow_id: workflowsStore.workflowId,
 			});
 		}
@@ -130,13 +131,36 @@ export function useToast() {
 			error_title: title,
 			error_description: message,
 			error_message: error.message,
+			caused_by_credential: causedByCredential(error.message),
 			workflow_id: workflowsStore.workflowId,
 		});
 	}
 
+	function showAlert(config: ElNotificationOptions): ElNotificationComponent {
+		return Notification(config);
+	}
+
+	function causedByCredential(message: string | undefined) {
+		if (!message) return false;
+
+		return message.includes('Credentials for') && message.includes('are not set');
+	}
+
+	function clearAllStickyNotifications() {
+		stickyNotificationQueue.forEach((notification) => {
+			if (notification) {
+				notification.close();
+			}
+		});
+
+		stickyNotificationQueue.length = 0;
+	}
+
 	return {
 		showMessage,
 		showToast,
 		showError,
+		showAlert,
+		clearAllStickyNotifications,
 	};
 }
diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts
index 99e14b81f7..84ab14690f 100644
--- a/packages/editor-ui/src/constants.ts
+++ b/packages/editor-ui/src/constants.ts
@@ -304,7 +304,7 @@ export const ROLE_OTHER = 'other';
 
 export const MODAL_CANCEL = 'cancel';
 export const MODAL_CLOSE = 'close';
-export const MODAL_CONFIRMED = 'confirmed';
+export const MODAL_CONFIRM = 'confirm';
 
 export const VALID_EMAIL_REGEX =
 	/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
diff --git a/packages/editor-ui/src/mixins/genericHelpers.ts b/packages/editor-ui/src/mixins/genericHelpers.ts
index c47f4f7190..acb12a66bd 100644
--- a/packages/editor-ui/src/mixins/genericHelpers.ts
+++ b/packages/editor-ui/src/mixins/genericHelpers.ts
@@ -1,10 +1,15 @@
-import mixins from 'vue-typed-mixins';
+import { defineComponent } from 'vue';
 import dateformat from 'dateformat';
 
 import { VIEWS } from '@/constants';
-import { showMessage } from '@/mixins/showMessage';
+import { useToast } from '@/composables';
 
-export const genericHelpers = mixins(showMessage).extend({
+export const genericHelpers = defineComponent({
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	data() {
 		return {
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -46,7 +51,7 @@ export const genericHelpers = mixins(showMessage).extend({
 		},
 		editAllowedCheck(): boolean {
 			if (this.isReadOnly) {
-				this.$showMessage({
+				this.showMessage({
 					// title: 'Workflow can not be changed!',
 					title: this.$locale.baseText('genericHelpers.showMessage.title'),
 					message: this.$locale.baseText('genericHelpers.showMessage.message'),
diff --git a/packages/editor-ui/src/mixins/newVersions.ts b/packages/editor-ui/src/mixins/newVersions.ts
index 1c9e63879c..0b865263f5 100644
--- a/packages/editor-ui/src/mixins/newVersions.ts
+++ b/packages/editor-ui/src/mixins/newVersions.ts
@@ -1,11 +1,16 @@
-import mixins from 'vue-typed-mixins';
-import { showMessage } from './showMessage';
+import { defineComponent } from 'vue';
+import { useToast } from '@/composables';
 import { VERSIONS_MODAL_KEY } from '@/constants';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useVersionsStore } from '@/stores/versions.store';
 
-export const newVersions = mixins(showMessage).extend({
+export const newVersions = defineComponent({
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	computed: {
 		...mapStores(useUIStore, useVersionsStore),
 	},
@@ -28,7 +33,7 @@ export const newVersions = mixins(showMessage).extend({
 				}
 
 				message = `${message} <a class="primary-color">More info</a>`;
-				this.$showToast({
+				this.showToast({
 					title: 'Critical update available',
 					message,
 					onClick: () => {
diff --git a/packages/editor-ui/src/mixins/pinData.ts b/packages/editor-ui/src/mixins/pinData.ts
index fa91e70bea..0676d26877 100644
--- a/packages/editor-ui/src/mixins/pinData.ts
+++ b/packages/editor-ui/src/mixins/pinData.ts
@@ -5,6 +5,7 @@ import { stringSizeInBytes } from '@/utils';
 import { MAX_WORKFLOW_PINNED_DATA_SIZE, PIN_DATA_NODE_TYPES_DENYLIST } from '@/constants';
 import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows.store';
+import { useToast } from '@/composables';
 
 export interface IPinDataContext {
 	node: INodeUi;
@@ -13,6 +14,11 @@ export interface IPinDataContext {
 }
 
 export const pinData = (Vue as Vue.VueConstructor<Vue & IPinDataContext>).extend({
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	computed: {
 		...mapStores(useWorkflowsStore),
 		pinData(): IPinData[string] | undefined {
@@ -72,7 +78,7 @@ export const pinData = (Vue as Vue.VueConstructor<Vue & IPinDataContext>).extend
 					})} ${error.message}`;
 				}
 
-				this.$showError(error, title);
+				this.showError(error, title);
 
 				return false;
 			}
@@ -84,7 +90,7 @@ export const pinData = (Vue as Vue.VueConstructor<Vue & IPinDataContext>).extend
 				this.workflowsStore.pinDataSize + stringSizeInBytes(data) >
 				MAX_WORKFLOW_PINNED_DATA_SIZE
 			) {
-				this.$showError(
+				this.showError(
 					new Error(this.$locale.baseText('ndv.pinData.error.tooLarge.description')),
 					this.$locale.baseText('ndv.pinData.error.tooLarge.title'),
 				);
diff --git a/packages/editor-ui/src/mixins/pushConnection.ts b/packages/editor-ui/src/mixins/pushConnection.ts
index ef8b068ff6..b555e89444 100644
--- a/packages/editor-ui/src/mixins/pushConnection.ts
+++ b/packages/editor-ui/src/mixins/pushConnection.ts
@@ -7,8 +7,7 @@ import type {
 
 import { externalHooks } from '@/mixins/externalHooks';
 import { nodeHelpers } from '@/mixins/nodeHelpers';
-import { showMessage } from '@/mixins/showMessage';
-import { useTitleChange } from '@/composables/useTitleChange';
+import { useTitleChange, useToast } from '@/composables';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 
 import type {
@@ -19,6 +18,7 @@ import type {
 	IRunExecutionData,
 	IWorkflowBase,
 	SubworkflowOperationError,
+	IExecuteContextData,
 } from 'n8n-workflow';
 import { TelemetryHelpers } from 'n8n-workflow';
 
@@ -35,15 +35,11 @@ import { useSettingsStore } from '@/stores/settings.store';
 import { parse } from 'flatted';
 import { useSegment } from '@/stores/segment.store';
 
-export const pushConnection = mixins(
-	externalHooks,
-	nodeHelpers,
-	showMessage,
-	workflowHelpers,
-).extend({
+export const pushConnection = mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
 	setup() {
 		return {
 			...useTitleChange(),
+			...useToast(),
 		};
 	},
 	data() {
@@ -324,7 +320,7 @@ export const pushConnection = mixins(
 
 				const runDataExecuted = pushData.data;
 
-				let runDataExecutedErrorMessage = this.$getExecutionError(runDataExecuted.data);
+				let runDataExecutedErrorMessage = this.getExecutionError(runDataExecuted.data);
 
 				if (pushData.data.status === 'crashed') {
 					runDataExecutedErrorMessage = this.$locale.baseText(
@@ -367,7 +363,7 @@ export const pushConnection = mixins(
 
 					// Workflow did start but had been put to wait
 					this.titleSet(workflow.name as string, 'IDLE');
-					this.$showToast({
+					this.showToast({
 						title: 'Workflow started waiting',
 						message: `${action} <a href="https://docs.n8n.io/integrations/builtin/core-nodes/n8n-nodes-base.wait/" target="_blank">More info</a>`,
 						type: 'success',
@@ -422,7 +418,7 @@ export const pushConnection = mixins(
 
 						this.workflowsStore.subWorkflowExecutionError = error;
 
-						this.$showMessage({
+						this.showMessage({
 							title: error.message,
 							message: error.description,
 							type: 'error',
@@ -436,7 +432,7 @@ export const pushConnection = mixins(
 							title = 'Problem executing workflow';
 						}
 
-						this.$showMessage({
+						this.showMessage({
 							title,
 							message: runDataExecutedErrorMessage,
 							type: 'error',
@@ -459,7 +455,7 @@ export const pushConnection = mixins(
 							execution.data.resultData.runData &&
 							execution.data.resultData.runData[execution.executedNode];
 						if (nodeType && nodeType.polling && !nodeOutput) {
-							this.$showMessage({
+							this.showMessage({
 								title: this.$locale.baseText('pushConnection.pollingNode.dataNotFound', {
 									interpolate: {
 										service: getTriggerNodeServiceName(nodeType),
@@ -473,13 +469,13 @@ export const pushConnection = mixins(
 								type: 'success',
 							});
 						} else {
-							this.$showMessage({
+							this.showMessage({
 								title: this.$locale.baseText('pushConnection.nodeExecutedSuccessfully'),
 								type: 'success',
 							});
 						}
 					} else {
-						this.$showMessage({
+						this.showMessage({
 							title: this.$locale.baseText('pushConnection.workflowExecutedSuccessfully'),
 							type: 'success',
 						});
@@ -582,5 +578,38 @@ export const pushConnection = mixins(
 			}
 			return true;
 		},
+		getExecutionError(data: IRunExecutionData | IExecuteContextData) {
+			const error = data.resultData.error;
+
+			let errorMessage: string;
+
+			if (data.resultData.lastNodeExecuted && error) {
+				errorMessage = error.message || error.description;
+			} else {
+				errorMessage = this.$locale.baseText('pushConnection.executionError', {
+					interpolate: { error: '!' },
+				});
+
+				if (error && error.message) {
+					let nodeName: string | undefined;
+					if ('node' in error) {
+						nodeName = typeof error.node === 'string' ? error.node : error.node!.name;
+					}
+
+					const receivedError = nodeName ? `${nodeName}: ${error.message}` : error.message;
+					errorMessage = this.$locale.baseText('pushConnection.executionError', {
+						interpolate: {
+							error: `.${this.$locale.baseText('pushConnection.executionError.details', {
+								interpolate: {
+									details: receivedError,
+								},
+							})}`,
+						},
+					});
+				}
+			}
+
+			return errorMessage;
+		},
 	},
 });
diff --git a/packages/editor-ui/src/mixins/showMessage.ts b/packages/editor-ui/src/mixins/showMessage.ts
deleted file mode 100644
index abc1c5c174..0000000000
--- a/packages/editor-ui/src/mixins/showMessage.ts
+++ /dev/null
@@ -1,235 +0,0 @@
-// @ts-ignore
-import type { ElNotificationComponent, ElNotificationOptions } from 'element-ui/types/notification';
-import mixins from 'vue-typed-mixins';
-
-import { externalHooks } from '@/mixins/externalHooks';
-import type { IExecuteContextData, IRunExecutionData } from 'n8n-workflow';
-import type { ElMessageBoxOptions } from 'element-ui/types/message-box';
-import type { ElMessageComponent, ElMessageOptions, MessageType } from 'element-ui/types/message';
-import { sanitizeHtml } from '@/utils';
-import { mapStores } from 'pinia';
-import { useWorkflowsStore } from '@/stores/workflows.store';
-
-let stickyNotificationQueue: ElNotificationComponent[] = [];
-
-export const showMessage = mixins(externalHooks).extend({
-	computed: {
-		...mapStores(useWorkflowsStore),
-	},
-	methods: {
-		$showMessage(
-			messageData: Omit<ElNotificationOptions, 'message'> & { message?: string },
-			track = true,
-		) {
-			messageData.dangerouslyUseHTMLString = true;
-			messageData.message = messageData.message
-				? sanitizeHtml(messageData.message)
-				: messageData.message;
-
-			if (messageData.position === undefined) {
-				messageData.position = 'bottom-right';
-			}
-
-			const notification = this.$notify(messageData as ElNotificationOptions);
-
-			if (messageData.duration === 0) {
-				stickyNotificationQueue.push(notification);
-			}
-
-			if (messageData.type === 'error' && track) {
-				this.$telemetry.track('Instance FE emitted error', {
-					error_title: messageData.title,
-					error_message: messageData.message,
-					caused_by_credential: this.causedByCredential(messageData.message),
-					workflow_id: this.workflowsStore.workflowId,
-				});
-			}
-
-			return notification;
-		},
-
-		$showToast(config: {
-			title: string;
-			message: string;
-			onClick?: () => void;
-			onClose?: () => void;
-			duration?: number;
-			customClass?: string;
-			closeOnClick?: boolean;
-			type?: MessageType;
-		}) {
-			// eslint-disable-next-line prefer-const
-			let notification: ElNotificationComponent;
-			if (config.closeOnClick) {
-				const cb = config.onClick;
-				config.onClick = () => {
-					if (notification) {
-						notification.close();
-					}
-					if (cb) {
-						cb();
-					}
-				};
-			}
-
-			notification = this.$showMessage({
-				title: config.title,
-				message: config.message,
-				onClick: config.onClick,
-				onClose: config.onClose,
-				duration: config.duration,
-				customClass: config.customClass,
-				type: config.type,
-			});
-
-			return notification;
-		},
-
-		$showAlert(config: ElMessageOptions): ElMessageComponent {
-			return this.$message(config);
-		},
-
-		$getExecutionError(data: IRunExecutionData | IExecuteContextData) {
-			const error = data.resultData.error;
-
-			let errorMessage: string;
-
-			if (data.resultData.lastNodeExecuted && error) {
-				errorMessage = error.message || error.description;
-			} else {
-				errorMessage = 'There was a problem executing the workflow!';
-
-				if (error && error.message) {
-					let nodeName: string | undefined;
-					if ('node' in error) {
-						nodeName = typeof error.node === 'string' ? error.node : error.node!.name;
-					}
-
-					const receivedError = nodeName ? `${nodeName}: ${error.message}` : error.message;
-					errorMessage = `There was a problem executing the workflow:<br /><strong>"${receivedError}"</strong>`;
-				}
-			}
-
-			return errorMessage;
-		},
-
-		$showError(e: Error | unknown, title: string, message?: string) {
-			const error = e as Error;
-			const messageLine = message ? `${message}<br/>` : '';
-			this.$showMessage(
-				{
-					title,
-					message: `
-					${messageLine}
-					<i>${error.message}</i>
-					${this.collapsableDetails(error)}`,
-					type: 'error',
-					duration: 0,
-				},
-				false,
-			);
-
-			void this.$externalHooks().run('showMessage.showError', {
-				title,
-				message,
-				errorMessage: error.message,
-			});
-
-			this.$telemetry.track('Instance FE emitted error', {
-				error_title: title,
-				error_description: message,
-				error_message: error.message,
-				caused_by_credential: this.causedByCredential(error.message),
-				workflow_id: this.workflowsStore.workflowId,
-			});
-		},
-
-		async confirmMessage(
-			message: string,
-			headline: string,
-			type: MessageType | null = 'warning',
-			confirmButtonText?: string,
-			cancelButtonText?: string,
-		): Promise<boolean> {
-			try {
-				const options: ElMessageBoxOptions = {
-					confirmButtonText: confirmButtonText || this.$locale.baseText('showMessage.ok'),
-					cancelButtonText: cancelButtonText || this.$locale.baseText('showMessage.cancel'),
-					dangerouslyUseHTMLString: true,
-					...(type && { type }),
-				};
-
-				const sanitizedMessage = sanitizeHtml(message);
-				await this.$confirm(sanitizedMessage, headline, options);
-				return true;
-			} catch (e) {
-				return false;
-			}
-		},
-
-		async confirmModal(
-			message: string,
-			headline: string,
-			type: MessageType | null = 'warning',
-			confirmButtonText?: string,
-			cancelButtonText?: string,
-			showClose = false,
-		): Promise<string> {
-			try {
-				const options: ElMessageBoxOptions = {
-					confirmButtonText: confirmButtonText || this.$locale.baseText('showMessage.ok'),
-					cancelButtonText: cancelButtonText || this.$locale.baseText('showMessage.cancel'),
-					dangerouslyUseHTMLString: true,
-					showClose,
-					...(type && { type }),
-				};
-
-				const sanitizedMessage = sanitizeHtml(message);
-				await this.$confirm(sanitizedMessage, headline, options);
-				return 'confirmed';
-			} catch (e) {
-				return e as string;
-			}
-		},
-
-		clearAllStickyNotifications() {
-			stickyNotificationQueue.map((notification: ElNotificationComponent) => {
-				if (notification) {
-					notification.close();
-				}
-			});
-
-			stickyNotificationQueue = [];
-		},
-
-		// @ts-ignore
-		collapsableDetails({ description, node }: Error) {
-			if (!description) return '';
-
-			const errorDescription =
-				description.length > 500 ? `${description.slice(0, 500)}...` : description;
-
-			return `
-				<br>
-				<br>
-				<details>
-					<summary
-						style="color: #ff6d5a; font-weight: bold; cursor: pointer;"
-					>
-						${this.$locale.baseText('showMessage.showDetails')}
-					</summary>
-					<p>${node.name}: ${errorDescription}</p>
-				</details>
-			`;
-		},
-
-		/**
-		 * Whether a workflow execution error was caused by a credential issue, as reflected by the error message.
-		 */
-		causedByCredential(message: string | undefined) {
-			if (!message) return false;
-
-			return message.includes('Credentials for') && message.includes('are not set');
-		},
-	},
-});
diff --git a/packages/editor-ui/src/mixins/workflowActivate.ts b/packages/editor-ui/src/mixins/workflowActivate.ts
index d6d8ce961f..1c0516ed2e 100644
--- a/packages/editor-ui/src/mixins/workflowActivate.ts
+++ b/packages/editor-ui/src/mixins/workflowActivate.ts
@@ -1,6 +1,6 @@
 import { externalHooks } from '@/mixins/externalHooks';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
-import { showMessage } from '@/mixins/showMessage';
+import { useToast } from '@/composables';
 
 import mixins from 'vue-typed-mixins';
 import {
@@ -13,7 +13,12 @@ import { useUIStore } from '@/stores/ui.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 
-export const workflowActivate = mixins(externalHooks, workflowHelpers, showMessage).extend({
+export const workflowActivate = mixins(externalHooks, workflowHelpers).extend({
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	data() {
 		return {
 			updatingWorkflowActivation: false,
@@ -60,7 +65,7 @@ export const workflowActivate = mixins(externalHooks, workflowHelpers, showMessa
 
 			try {
 				if (isWorkflowActive && newActiveState) {
-					this.$showMessage({
+					this.showMessage({
 						title: this.$locale.baseText('workflowActivator.workflowIsActive'),
 						type: 'success',
 					});
@@ -70,7 +75,7 @@ export const workflowActivate = mixins(externalHooks, workflowHelpers, showMessa
 				}
 
 				if (isCurrentWorkflow && nodesIssuesExist && newActiveState === true) {
-					this.$showMessage({
+					this.showMessage({
 						title: this.$locale.baseText(
 							'workflowActivator.showMessage.activeChangedNodesIssuesExistTrue.title',
 						),
@@ -87,7 +92,7 @@ export const workflowActivate = mixins(externalHooks, workflowHelpers, showMessa
 				await this.updateWorkflow({ workflowId: currWorkflowId, active: newActiveState });
 			} catch (error) {
 				const newStateName = newActiveState === true ? 'activated' : 'deactivated';
-				this.$showError(
+				this.showError(
 					error,
 					this.$locale.baseText('workflowActivator.showError.title', {
 						interpolate: { newStateName },
diff --git a/packages/editor-ui/src/mixins/workflowHelpers.ts b/packages/editor-ui/src/mixins/workflowHelpers.ts
index e38d73e2b9..e30104983f 100644
--- a/packages/editor-ui/src/mixins/workflowHelpers.ts
+++ b/packages/editor-ui/src/mixins/workflowHelpers.ts
@@ -4,6 +4,7 @@ import {
 	WEBHOOK_NODE_TYPE,
 	VIEWS,
 	EnterpriseEditionFeature,
+	MODAL_CONFIRM,
 } from '@/constants';
 
 import type {
@@ -40,7 +41,7 @@ import type {
 
 import { externalHooks } from '@/mixins/externalHooks';
 import { nodeHelpers } from '@/mixins/nodeHelpers';
-import { showMessage } from '@/mixins/showMessage';
+import { useToast, useMessage } from '@/composables';
 
 import { isEqual } from 'lodash-es';
 
@@ -320,7 +321,13 @@ function executeData(
 	return executeData;
 }
 
-export const workflowHelpers = mixins(externalHooks, nodeHelpers, showMessage).extend({
+export const workflowHelpers = mixins(externalHooks, nodeHelpers).extend({
+	setup() {
+		return {
+			...useToast(),
+			...useMessage(),
+		};
+	},
 	computed: {
 		...mapStores(
 			useNodeTypesStore,
@@ -741,26 +748,31 @@ export const workflowHelpers = mixins(externalHooks, nodeHelpers, showMessage).e
 						params: { name: currentWorkflow },
 					}).href;
 
-					const overwrite = await this.confirmMessage(
+					const overwrite = await this.confirm(
 						this.$locale.baseText('workflows.concurrentChanges.confirmMessage.message', {
 							interpolate: {
 								url,
 							},
 						}),
 						this.$locale.baseText('workflows.concurrentChanges.confirmMessage.title'),
-						null,
-						this.$locale.baseText('workflows.concurrentChanges.confirmMessage.confirmButtonText'),
-						this.$locale.baseText('workflows.concurrentChanges.confirmMessage.cancelButtonText'),
+						{
+							confirmButtonText: this.$locale.baseText(
+								'workflows.concurrentChanges.confirmMessage.confirmButtonText',
+							),
+							cancelButtonText: this.$locale.baseText(
+								'workflows.concurrentChanges.confirmMessage.cancelButtonText',
+							),
+						},
 					);
 
-					if (overwrite) {
+					if (overwrite === MODAL_CONFIRM) {
 						return this.saveCurrentWorkflow({ id, name, tags }, redirect, true);
 					}
 
 					return false;
 				}
 
-				this.$showMessage({
+				this.showMessage({
 					title: this.$locale.baseText('workflowHelpers.showMessage.title'),
 					message: error.message,
 					type: 'error',
@@ -890,7 +902,7 @@ export const workflowHelpers = mixins(externalHooks, nodeHelpers, showMessage).e
 			} catch (e) {
 				this.uiStore.removeActiveAction('workflowSaving');
 
-				this.$showMessage({
+				this.showMessage({
 					title: this.$locale.baseText('workflowHelpers.showMessage.title'),
 					message: (e as Error).message,
 					type: 'error',
diff --git a/packages/editor-ui/src/mixins/workflowRun.ts b/packages/editor-ui/src/mixins/workflowRun.ts
index 3c406f24de..9df395e103 100644
--- a/packages/editor-ui/src/mixins/workflowRun.ts
+++ b/packages/editor-ui/src/mixins/workflowRun.ts
@@ -5,7 +5,7 @@ import { NodeHelpers, TelemetryHelpers } from 'n8n-workflow';
 
 import { externalHooks } from '@/mixins/externalHooks';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
-import { showMessage } from '@/mixins/showMessage';
+import { useToast } from '@/composables';
 
 import mixins from 'vue-typed-mixins';
 import { useTitleChange } from '@/composables/useTitleChange';
@@ -14,10 +14,11 @@ import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useRootStore } from '@/stores/n8nRoot.store';
 
-export const workflowRun = mixins(externalHooks, workflowHelpers, showMessage).extend({
+export const workflowRun = mixins(externalHooks, workflowHelpers).extend({
 	setup() {
 		return {
 			...useTitleChange(),
+			...useToast(),
 		};
 	},
 	computed: {
@@ -106,7 +107,7 @@ export const workflowRun = mixins(externalHooks, workflowHelpers, showMessage).e
 							trackNodeIssues.push(trackNodeIssue);
 						}
 
-						this.$showMessage({
+						this.showMessage({
 							title: this.$locale.baseText('workflowRun.showMessage.title'),
 							message: errorMessages.join('<br />'),
 							type: 'error',
@@ -239,7 +240,7 @@ export const workflowRun = mixins(externalHooks, workflowHelpers, showMessage).e
 				return runWorkflowApiResponse;
 			} catch (error) {
 				this.titleSet(workflow.name as string, 'ERROR');
-				this.$showError(error, this.$locale.baseText('workflowRun.showError.title'));
+				this.showError(error, this.$locale.baseText('workflowRun.showError.title'));
 				return undefined;
 			}
 		},
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index b398af6c24..1f3bde39b6 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -1821,5 +1821,7 @@
 	"userActivationSurveyModal.sharedFeedback.success": "Thanks for your feedback",
 	"userActivationSurveyModal.sharedFeedback.error": "Problem sharing feedback, try again",
 	"sso.login.divider": "or",
-	"sso.login.button": "Continue with SSO"
+	"sso.login.button": "Continue with SSO",
+	"pushConnection.executionError": "There was a problem executing the workflow{error}",
+	"pushConnection.executionError.details": "<br /><strong>{details}</strong>"
 }
diff --git a/packages/editor-ui/src/views/ChangePasswordView.vue b/packages/editor-ui/src/views/ChangePasswordView.vue
index 42f20ed308..92aeee733d 100644
--- a/packages/editor-ui/src/views/ChangePasswordView.vue
+++ b/packages/editor-ui/src/views/ChangePasswordView.vue
@@ -9,20 +9,25 @@
 </template>
 
 <script lang="ts">
-import AuthView from './AuthView.vue';
-import { showMessage } from '@/mixins/showMessage';
+import AuthView from '@/views/AuthView.vue';
+import { useToast } from '@/composables';
 
-import mixins from 'vue-typed-mixins';
+import { defineComponent } from 'vue';
 import type { IFormBoxConfig } from '@/Interface';
 import { VIEWS } from '@/constants';
 import { mapStores } from 'pinia';
 import { useUsersStore } from '@/stores/users.store';
 
-export default mixins(showMessage).extend({
+export default defineComponent({
 	name: 'ChangePasswordView',
 	components: {
 		AuthView,
 	},
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	data() {
 		return {
 			password: '',
@@ -88,7 +93,7 @@ export default mixins(showMessage).extend({
 
 			await this.usersStore.validatePasswordToken({ token, userId });
 		} catch (e) {
-			this.$showMessage({
+			this.showMessage({
 				title: this.$locale.baseText('auth.changePassword.tokenValidationError'),
 				type: 'error',
 			});
@@ -128,7 +133,7 @@ export default mixins(showMessage).extend({
 				if (token && userId) {
 					await this.usersStore.changePassword({ token, userId, password: this.password });
 
-					this.$showMessage({
+					this.showMessage({
 						type: 'success',
 						title: this.$locale.baseText('auth.changePassword.passwordUpdated'),
 						message: this.$locale.baseText('auth.changePassword.passwordUpdatedMessage'),
@@ -136,13 +141,13 @@ export default mixins(showMessage).extend({
 
 					await this.$router.push({ name: VIEWS.SIGNIN });
 				} else {
-					this.$showError(
+					this.showError(
 						new Error(this.$locale.baseText('auth.validation.missingParameters')),
 						this.$locale.baseText('auth.changePassword.error'),
 					);
 				}
 			} catch (error) {
-				this.$showError(error, this.$locale.baseText('auth.changePassword.error'));
+				this.showError(error, this.$locale.baseText('auth.changePassword.error'));
 			}
 			this.loading = false;
 		},
diff --git a/packages/editor-ui/src/views/CredentialsView.vue b/packages/editor-ui/src/views/CredentialsView.vue
index 6e11e8314d..b7bfa5fc11 100644
--- a/packages/editor-ui/src/views/CredentialsView.vue
+++ b/packages/editor-ui/src/views/CredentialsView.vue
@@ -44,20 +44,12 @@
 </template>
 
 <script lang="ts">
-import { showMessage } from '@/mixins/showMessage';
 import type { ICredentialsResponse, ICredentialTypeMap } from '@/Interface';
-import mixins from 'vue-typed-mixins';
+import { defineComponent } from 'vue';
 
-import SettingsView from './SettingsView.vue';
 import ResourcesListLayout from '@/components/layouts/ResourcesListLayout.vue';
-import PageViewLayout from '@/components/layouts/PageViewLayout.vue';
-import PageViewLayoutList from '@/components/layouts/PageViewLayoutList.vue';
 import CredentialCard from '@/components/CredentialCard.vue';
 import type { ICredentialType } from 'n8n-workflow';
-import TemplateCard from '@/components/TemplateCard.vue';
-import { debounceHelper } from '@/mixins/debounce';
-import ResourceOwnershipSelect from '@/components/forms/ResourceOwnershipSelect.ee.vue';
-import ResourceFiltersDropdown from '@/components/forms/ResourceFiltersDropdown.vue';
 import { CREDENTIAL_SELECT_MODAL_KEY } from '@/constants';
 import type Vue from 'vue';
 import { mapStores } from 'pinia';
@@ -68,17 +60,11 @@ import { useCredentialsStore } from '@/stores/credentials.store';
 
 type IResourcesListLayoutInstance = Vue & { sendFiltersTelemetry: (source: string) => void };
 
-export default mixins(showMessage, debounceHelper).extend({
+export default defineComponent({
 	name: 'SettingsPersonalView',
 	components: {
 		ResourcesListLayout,
-		TemplateCard,
-		PageViewLayout,
-		PageViewLayoutList,
-		SettingsView,
 		CredentialCard,
-		ResourceOwnershipSelect,
-		ResourceFiltersDropdown,
 	},
 	data() {
 		return {
diff --git a/packages/editor-ui/src/views/ForgotMyPasswordView.vue b/packages/editor-ui/src/views/ForgotMyPasswordView.vue
index 28ebe57c47..55ede7a05a 100644
--- a/packages/editor-ui/src/views/ForgotMyPasswordView.vue
+++ b/packages/editor-ui/src/views/ForgotMyPasswordView.vue
@@ -4,19 +4,24 @@
 
 <script lang="ts">
 import AuthView from './AuthView.vue';
-import { showMessage } from '@/mixins/showMessage';
+import { useToast } from '@/composables';
 
-import mixins from 'vue-typed-mixins';
+import { defineComponent } from 'vue';
 import type { IFormBoxConfig } from '@/Interface';
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUsersStore } from '@/stores/users.store';
 
-export default mixins(showMessage).extend({
+export default defineComponent({
 	name: 'ForgotMyPasswordView',
 	components: {
 		AuthView,
 	},
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	data() {
 		return {
 			loading: false,
@@ -74,7 +79,7 @@ export default mixins(showMessage).extend({
 				this.loading = true;
 				await this.usersStore.sendForgotPasswordEmail(values);
 
-				this.$showMessage({
+				this.showMessage({
 					type: 'success',
 					title: this.$locale.baseText('forgotPassword.recoveryEmailSent'),
 					message: this.$locale.baseText('forgotPassword.emailSentIfExists', {
@@ -86,7 +91,7 @@ export default mixins(showMessage).extend({
 				if (error.httpStatusCode === 422) {
 					message = this.$locale.baseText(error.message);
 				}
-				this.$showMessage({
+				this.showMessage({
 					type: 'error',
 					title: this.$locale.baseText('forgotPassword.sendingEmailError'),
 					message,
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 8d2fd74bd2..24f34c5eeb 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -186,7 +186,7 @@ import {
 	MAIN_HEADER_TABS,
 	MODAL_CANCEL,
 	MODAL_CLOSE,
-	MODAL_CONFIRMED,
+	MODAL_CONFIRM,
 	NODE_OUTPUT_DEFAULT_KEY,
 	ONBOARDING_CALL_SIGNUP_MODAL_KEY,
 	ONBOARDING_PROMPT_TIMEBOX,
@@ -206,13 +206,15 @@ import { copyPaste } from '@/mixins/copyPaste';
 import { externalHooks } from '@/mixins/externalHooks';
 import { genericHelpers } from '@/mixins/genericHelpers';
 import { moveNodeWorkflow } from '@/mixins/moveNodeWorkflow';
-import useGlobalLinkActions from '@/composables/useGlobalLinkActions';
-import useCanvasMouseSelect from '@/composables/useCanvasMouseSelect';
-import { showMessage } from '@/mixins/showMessage';
-import { useTitleChange } from '@/composables/useTitleChange';
+import {
+	useGlobalLinkActions,
+	useCanvasMouseSelect,
+	useMessage,
+	useToast,
+	useTitleChange,
+} from '@/composables';
 import { useUniqueNodeName } from '@/composables/useUniqueNodeName';
 import { useI18n } from '@/composables/useI18n';
-
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { workflowRun } from '@/mixins/workflowRun';
 
@@ -322,7 +324,6 @@ export default mixins(
 	externalHooks,
 	genericHelpers,
 	moveNodeWorkflow,
-	showMessage,
 	workflowHelpers,
 	workflowRun,
 	debounceHelper,
@@ -343,6 +344,8 @@ export default mixins(
 			...useCanvasMouseSelect(),
 			...useGlobalLinkActions(),
 			...useTitleChange(),
+			...useToast(),
+			...useMessage(),
 			...useUniqueNodeName(),
 			...useI18n(),
 		};
@@ -415,15 +418,21 @@ export default mixins(
 			return;
 		}
 		if (this.uiStore.stateIsDirty) {
-			const confirmModal = await this.confirmModal(
+			const confirmModal = await this.confirm(
 				this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
-				this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
-				'warning',
-				this.$locale.baseText('generic.unsavedWork.confirmMessage.confirmButtonText'),
-				this.$locale.baseText('generic.unsavedWork.confirmMessage.cancelButtonText'),
-				true,
+				{
+					title: this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
+					type: 'warning',
+					confirmButtonText: this.$locale.baseText(
+						'generic.unsavedWork.confirmMessage.confirmButtonText',
+					),
+					cancelButtonText: this.$locale.baseText(
+						'generic.unsavedWork.confirmMessage.cancelButtonText',
+					),
+					showClose: true,
+				},
 			);
-			if (confirmModal === MODAL_CONFIRMED) {
+			if (confirmModal === MODAL_CONFIRM) {
 				// Make sure workflow id is empty when leaving the editor
 				this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
 				const saved = await this.saveCurrentWorkflow({}, false);
@@ -660,7 +669,7 @@ export default mixins(
 			this.registerCustomAction('showNodeCreator', () =>
 				this.showTriggerCreator(NODE_CREATOR_OPEN_SOURCES.NO_TRIGGER_EXECUTION_TOOLTIP),
 			);
-			const notice = this.$showMessage({
+			const notice = this.showMessage({
 				type: 'info',
 				title: this.$locale.baseText('nodeView.cantExecuteNoTrigger'),
 				message,
@@ -688,7 +697,7 @@ export default mixins(
 					saved = true;
 				}
 				if (saved) {
-					this.$showMessage({
+					this.showMessage({
 						title: this.$locale.baseText('generic.workflowSaved'),
 						type: 'success',
 					});
@@ -708,7 +717,7 @@ export default mixins(
 			try {
 				data = await this.workflowsStore.getExecution(executionId);
 			} catch (error) {
-				this.$showError(error, this.$locale.baseText('nodeView.showError.openExecution.title'));
+				this.showError(error, this.$locale.baseText('nodeView.showError.openExecution.title'));
 				return;
 			}
 			if (data === undefined) {
@@ -766,7 +775,7 @@ export default mixins(
 				}
 			}
 			if ((data as IExecutionsSummary).waitTill) {
-				this.$showMessage({
+				this.showMessage({
 					title: this.$locale.baseText('nodeView.thisExecutionHasntFinishedYet'),
 					message: `<a data-action="reload">${this.$locale.baseText(
 						'nodeView.refresh',
@@ -819,7 +828,7 @@ export default mixins(
 					);
 				}
 			} catch (error) {
-				this.$showError(error, this.$locale.baseText('nodeView.couldntImportWorkflow'));
+				this.showError(error, this.$locale.baseText('nodeView.couldntImportWorkflow'));
 				void this.$router.replace({ name: VIEWS.NEW_WORKFLOW });
 				return;
 			}
@@ -1030,7 +1039,7 @@ export default mixins(
 					void this.$router.push({ name: VIEWS.NEW_WORKFLOW });
 				}
 
-				this.$showMessage({
+				this.showMessage({
 					title: this.$locale.baseText('nodeView.showMessage.keyDown.title'),
 					type: 'success',
 				});
@@ -1305,7 +1314,7 @@ export default mixins(
 				this.copyToClipboard(nodeData);
 				if (data.nodes.length > 0) {
 					if (!isCut) {
-						this.$showMessage({
+						this.showMessage({
 							title: 'Copied!',
 							message: '',
 							type: 'success',
@@ -1327,7 +1336,7 @@ export default mixins(
 			try {
 				this.stopExecutionInProgress = true;
 				await this.workflowsStore.stopCurrentExecution(executionId);
-				this.$showMessage({
+				this.showMessage({
 					title: this.$locale.baseText('nodeView.showMessage.stopExecutionTry.title'),
 					type: 'success',
 				});
@@ -1346,7 +1355,7 @@ export default mixins(
 					this.uiStore.removeActiveAction('workflowRunning');
 
 					this.titleSet(this.workflowsStore.workflowName, 'IDLE');
-					this.$showMessage({
+					this.showMessage({
 						title: this.$locale.baseText('nodeView.showMessage.stopExecutionCatch.unsaved.title'),
 						message: this.$locale.baseText(
 							'nodeView.showMessage.stopExecutionCatch.unsaved.message',
@@ -1373,13 +1382,13 @@ export default mixins(
 					this.workflowsStore.executingNode = null;
 					this.workflowsStore.setWorkflowExecutionData(executedData as IExecutionResponse);
 					this.uiStore.removeActiveAction('workflowRunning');
-					this.$showMessage({
+					this.showMessage({
 						title: this.$locale.baseText('nodeView.showMessage.stopExecutionCatch.title'),
 						message: this.$locale.baseText('nodeView.showMessage.stopExecutionCatch.message'),
 						type: 'success',
 					});
 				} else {
-					this.$showError(error, this.$locale.baseText('nodeView.showError.stopExecution.title'));
+					this.showError(error, this.$locale.baseText('nodeView.showError.stopExecution.title'));
 				}
 			}
 			this.stopExecutionInProgress = false;
@@ -1401,7 +1410,7 @@ export default mixins(
 			try {
 				await this.workflowsStore.removeTestWebhook(this.workflowsStore.workflowId);
 			} catch (error) {
-				this.$showError(
+				this.showError(
 					error,
 					this.$locale.baseText('nodeView.showError.stopWaitingForWebhook.title'),
 				);
@@ -1426,19 +1435,23 @@ export default mixins(
 						return;
 					}
 
-					const importConfirm = await this.confirmMessage(
+					const importConfirm = await this.confirm(
 						this.$locale.baseText('nodeView.confirmMessage.receivedCopyPasteData.message', {
 							interpolate: { plainTextData },
 						}),
 						this.$locale.baseText('nodeView.confirmMessage.receivedCopyPasteData.headline'),
-						'warning',
-						this.$locale.baseText(
-							'nodeView.confirmMessage.receivedCopyPasteData.confirmButtonText',
-						),
-						this.$locale.baseText('nodeView.confirmMessage.receivedCopyPasteData.cancelButtonText'),
+						{
+							type: 'warning',
+							confirmButtonText: this.$locale.baseText(
+								'nodeView.confirmMessage.receivedCopyPasteData.confirmButtonText',
+							),
+							cancelButtonText: this.$locale.baseText(
+								'nodeView.confirmMessage.receivedCopyPasteData.cancelButtonText',
+							),
+						},
 					);
 
-					if (!importConfirm) {
+					if (importConfirm !== MODAL_CONFIRM) {
 						return;
 					}
 
@@ -1475,7 +1488,7 @@ export default mixins(
 				workflowData = await this.workflowsStore.getWorkflowFromUrl(url);
 			} catch (error) {
 				this.stopLoading();
-				this.$showError(
+				this.showError(
 					error,
 					this.$locale.baseText('nodeView.showError.getWorkflowDataFromUrl.title'),
 				);
@@ -1593,10 +1606,7 @@ export default mixins(
 					this.workflowsStore.addWorkflowTagIds(tagIds);
 				}
 			} catch (error) {
-				this.$showError(
-					error,
-					this.$locale.baseText('nodeView.showError.importWorkflowData.title'),
-				);
+				this.showError(error, this.$locale.baseText('nodeView.showError.importWorkflowData.title'));
 			}
 		},
 		onDragOver(event: DragEvent) {
@@ -1660,7 +1670,7 @@ export default mixins(
 		},
 		showMaxNodeTypeError(nodeTypeData: INodeTypeDescription) {
 			const maxNodes = nodeTypeData.maxNodes;
-			this.$showMessage({
+			this.showMessage({
 				title: this.$locale.baseText('nodeView.showMessage.showMaxNodeTypeError.title'),
 				message: this.$locale.baseText('nodeView.showMessage.showMaxNodeTypeError.message', {
 					adjustToNumber: maxNodes,
@@ -1770,7 +1780,7 @@ export default mixins(
 				this.nodeTypesStore.getNodeType(nodeTypeName);
 
 			if (nodeTypeData === null) {
-				this.$showMessage({
+				this.showMessage({
 					title: this.$locale.baseText('nodeView.showMessage.addNodeButton.title'),
 					message: this.$locale.baseText('nodeView.showMessage.addNodeButton.message', {
 						interpolate: { nodeTypeName },
@@ -2490,15 +2500,21 @@ export default mixins(
 			} else {
 				const result = this.uiStore.stateIsDirty;
 				if (result) {
-					const confirmModal = await this.confirmModal(
+					const confirmModal = await this.confirm(
 						this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
-						this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
-						'warning',
-						this.$locale.baseText('generic.unsavedWork.confirmMessage.confirmButtonText'),
-						this.$locale.baseText('generic.unsavedWork.confirmMessage.cancelButtonText'),
-						true,
+						{
+							title: this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
+							type: 'warning',
+							confirmButtonText: this.$locale.baseText(
+								'generic.unsavedWork.confirmMessage.confirmButtonText',
+							),
+							cancelButtonText: this.$locale.baseText(
+								'generic.unsavedWork.confirmMessage.cancelButtonText',
+							),
+							showClose: true,
+						},
 					);
-					if (confirmModal === MODAL_CONFIRMED) {
+					if (confirmModal === MODAL_CONFIRM) {
 						const saved = await this.saveCurrentWorkflow();
 						if (saved) await this.settingsStore.fetchPromptsData();
 					} else if (confirmModal === MODAL_CLOSE) {
@@ -2515,7 +2531,7 @@ export default mixins(
 					try {
 						workflow = await this.workflowsStore.fetchWorkflow(workflowId);
 					} catch (error) {
-						this.$showError(error, this.$locale.baseText('openWorkflow.workflowNotFoundError'));
+						this.showError(error, this.$locale.baseText('openWorkflow.workflowNotFoundError'));
 
 						void this.$router.push({
 							name: VIEWS.NEW_WORKFLOW,
@@ -2999,7 +3015,7 @@ export default mixins(
 		},
 		async renameNodePrompt(currentName: string) {
 			try {
-				const promptResponsePromise = this.$prompt(
+				const promptResponsePromise = this.prompt(
 					this.$locale.baseText('nodeView.prompt.newName') + ':',
 					this.$locale.baseText('nodeView.prompt.renameNode') + `: ${currentName}`,
 					{
@@ -3557,7 +3573,7 @@ export default mixins(
 								'*',
 							);
 						}
-						this.$showMessage({
+						this.showMessage({
 							title: this.$locale.baseText('openWorkflow.workflowImportError'),
 							message: (e as Error).message,
 							type: 'error',
@@ -3581,7 +3597,7 @@ export default mixins(
 								'*',
 							);
 						}
-						this.$showMessage({
+						this.showMessage({
 							title: this.$locale.baseText('nodeView.showError.openExecution.title'),
 							message: (e as Error).message,
 							type: 'error',
@@ -3780,7 +3796,7 @@ export default mixins(
 		try {
 			await Promise.all(loadPromises);
 		} catch (error) {
-			this.$showError(
+			this.showError(
 				error,
 				this.$locale.baseText('nodeView.showError.mounted1.title'),
 				this.$locale.baseText('nodeView.showError.mounted1.message') + ':',
@@ -3800,7 +3816,7 @@ export default mixins(
 					);
 				}
 			} catch (error) {
-				this.$showError(
+				this.showError(
 					error,
 					this.$locale.baseText('nodeView.showError.mounted2.title'),
 					this.$locale.baseText('nodeView.showError.mounted2.message') + ':',
@@ -3831,7 +3847,7 @@ export default mixins(
 
 			if (onboardingResponse.title && onboardingResponse.description) {
 				setTimeout(async () => {
-					this.$showToast({
+					this.showToast({
 						type: 'info',
 						title: onboardingResponse.title,
 						message: onboardingResponse.description,
diff --git a/packages/editor-ui/src/views/SettingsApiView.vue b/packages/editor-ui/src/views/SettingsApiView.vue
index d317281bbf..dcc35fe402 100644
--- a/packages/editor-ui/src/views/SettingsApiView.vue
+++ b/packages/editor-ui/src/views/SettingsApiView.vue
@@ -75,22 +75,28 @@
 </template>
 
 <script lang="ts">
-import { showMessage } from '@/mixins/showMessage';
+import { defineComponent } from 'vue';
 import type { IUser } from '@/Interface';
-import mixins from 'vue-typed-mixins';
+import { useToast, useMessage } from '@/composables';
 
 import CopyInput from '@/components/CopyInput.vue';
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useRootStore } from '@/stores/n8nRoot.store';
 import { useUsersStore } from '@/stores/users.store';
-import { DOCS_DOMAIN } from '@/constants';
+import { DOCS_DOMAIN, MODAL_CONFIRM } from '@/constants';
 
-export default mixins(showMessage).extend({
+export default defineComponent({
 	name: 'SettingsApiView',
 	components: {
 		CopyInput,
 	},
+	setup() {
+		return {
+			...useToast(),
+			...useMessage(),
+		};
+	},
 	data() {
 		return {
 			loading: false,
@@ -118,14 +124,15 @@ export default mixins(showMessage).extend({
 	},
 	methods: {
 		async showDeleteModal() {
-			const confirmed = await this.confirmMessage(
+			const confirmed = await this.confirm(
 				this.$locale.baseText('settings.api.delete.description'),
 				this.$locale.baseText('settings.api.delete.title'),
-				null,
-				this.$locale.baseText('settings.api.delete.button'),
-				this.$locale.baseText('generic.cancel'),
+				{
+					confirmButtonText: this.$locale.baseText('settings.api.delete.button'),
+					cancelButtonText: this.$locale.baseText('generic.cancel'),
+				},
 			);
-			if (confirmed) {
+			if (confirmed === MODAL_CONFIRM) {
 				await this.deleteApiKey();
 			}
 		},
@@ -133,7 +140,7 @@ export default mixins(showMessage).extend({
 			try {
 				this.apiKey = (await this.settingsStore.getApiKey()) || '';
 			} catch (error) {
-				this.$showError(error, this.$locale.baseText('settings.api.view.error'));
+				this.showError(error, this.$locale.baseText('settings.api.view.error'));
 			} finally {
 				this.mounted = true;
 			}
@@ -144,7 +151,7 @@ export default mixins(showMessage).extend({
 			try {
 				this.apiKey = (await this.settingsStore.createApiKey()) || '';
 			} catch (error) {
-				this.$showError(error, this.$locale.baseText('settings.api.create.error'));
+				this.showError(error, this.$locale.baseText('settings.api.create.error'));
 			} finally {
 				this.loading = false;
 				this.$telemetry.track('User clicked create API key button');
@@ -153,13 +160,13 @@ export default mixins(showMessage).extend({
 		async deleteApiKey() {
 			try {
 				await this.settingsStore.deleteApiKey();
-				this.$showMessage({
+				this.showMessage({
 					title: this.$locale.baseText('settings.api.delete.toast'),
 					type: 'success',
 				});
 				this.apiKey = '';
 			} catch (error) {
-				this.$showError(error, this.$locale.baseText('settings.api.delete.error'));
+				this.showError(error, this.$locale.baseText('settings.api.delete.error'));
 			} finally {
 				this.$telemetry.track('User clicked delete API key button');
 			}
diff --git a/packages/editor-ui/src/views/SettingsCommunityNodesView.vue b/packages/editor-ui/src/views/SettingsCommunityNodesView.vue
index 7bef6d1bfb..a687355623 100644
--- a/packages/editor-ui/src/views/SettingsCommunityNodesView.vue
+++ b/packages/editor-ui/src/views/SettingsCommunityNodesView.vue
@@ -58,7 +58,7 @@ import {
 	COMMUNITY_NODES_NPM_INSTALLATION_URL,
 } from '@/constants';
 import CommunityPackageCard from '@/components/CommunityPackageCard.vue';
-import { showMessage } from '@/mixins/showMessage';
+import { useToast } from '@/composables';
 import { pushConnection } from '@/mixins/pushConnection';
 import mixins from 'vue-typed-mixins';
 import type { PublicInstalledPackage } from 'n8n-workflow';
@@ -70,11 +70,16 @@ import { useSettingsStore } from '@/stores/settings.store';
 
 const PACKAGE_COUNT_THRESHOLD = 31;
 
-export default mixins(showMessage, pushConnection).extend({
+export default mixins(pushConnection).extend({
 	name: 'SettingsCommunityNodesView',
 	components: {
 		CommunityPackageCard,
 	},
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	data() {
 		return {
 			loading: false,
@@ -113,7 +118,7 @@ export default mixins(showMessage, pushConnection).extend({
 				number_of_updates_available: packagesToUpdate.length,
 			});
 		} catch (error) {
-			this.$showError(
+			this.showError(
 				error,
 				this.$locale.baseText('settings.communityNodes.fetchError.title'),
 				this.$locale.baseText('settings.communityNodes.fetchError.message'),
diff --git a/packages/editor-ui/src/views/SettingsLdapView.vue b/packages/editor-ui/src/views/SettingsLdapView.vue
index eaa5c789f5..9df4ea0764 100644
--- a/packages/editor-ui/src/views/SettingsLdapView.vue
+++ b/packages/editor-ui/src/views/SettingsLdapView.vue
@@ -143,8 +143,9 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { convertToDisplayDate } from '@/utils';
-import { showMessage } from '@/mixins/showMessage';
+import { useToast, useMessage } from '@/composables';
 import type {
 	ILdapConfig,
 	ILdapSyncData,
@@ -153,7 +154,7 @@ import type {
 	IFormInputs,
 	IUser,
 } from '@/Interface';
-import mixins from 'vue-typed-mixins';
+import { MODAL_CONFIRM } from '@/constants';
 
 import humanizeDuration from 'humanize-duration';
 import type { rowCallbackParams, cellCallbackParams } from 'element-ui/types/table';
@@ -180,11 +181,17 @@ type rowType = rowCallbackParams & tableRow;
 
 type cellType = cellCallbackParams & { property: keyof tableRow };
 
-export default mixins(showMessage).extend({
+export default defineComponent({
 	name: 'SettingsLdapView',
 	components: {
 		InfiniteLoading,
 	},
+	setup() {
+		return {
+			...useToast(),
+			...useMessage(),
+		};
+	},
 	data() {
 		return {
 			dataTable: [] as ILdapSyncTable[],
@@ -301,13 +308,20 @@ export default mixins(showMessage).extend({
 
 			try {
 				if (this.adConfig.loginEnabled === true && newConfiguration.loginEnabled === false) {
-					saveForm = await this.confirmMessage(
+					const confirmAction = await this.confirm(
 						this.$locale.baseText('settings.ldap.confirmMessage.beforeSaveForm.message'),
 						this.$locale.baseText('settings.ldap.confirmMessage.beforeSaveForm.headline'),
-						null,
-						this.$locale.baseText('settings.ldap.confirmMessage.beforeSaveForm.cancelButtonText'),
-						this.$locale.baseText('settings.ldap.confirmMessage.beforeSaveForm.confirmButtonText'),
+						{
+							cancelButtonText: this.$locale.baseText(
+								'settings.ldap.confirmMessage.beforeSaveForm.cancelButtonText',
+							),
+							confirmButtonText: this.$locale.baseText(
+								'settings.ldap.confirmMessage.beforeSaveForm.confirmButtonText',
+							),
+						},
 					);
+
+					saveForm = confirmAction === MODAL_CONFIRM;
 				}
 
 				if (!saveForm) {
@@ -315,13 +329,13 @@ export default mixins(showMessage).extend({
 				}
 
 				this.adConfig = await this.settingsStore.updateLdapConfig(newConfiguration);
-				this.$showToast({
+				this.showToast({
 					title: this.$locale.baseText('settings.ldap.updateConfiguration'),
 					message: '',
 					type: 'success',
 				});
 			} catch (error) {
-				this.$showError(error, this.$locale.baseText('settings.ldap.configurationError'));
+				this.showError(error, this.$locale.baseText('settings.ldap.configurationError'));
 			} finally {
 				if (saveForm) {
 					this.hasAnyChanges = false;
@@ -335,13 +349,13 @@ export default mixins(showMessage).extend({
 			this.loadingTestConnection = true;
 			try {
 				await this.settingsStore.testLdapConnection();
-				this.$showToast({
+				this.showToast({
 					title: this.$locale.baseText('settings.ldap.connectionTest'),
 					message: this.$locale.baseText('settings.ldap.toast.connection.success'),
 					type: 'success',
 				});
 			} catch (error) {
-				this.$showToast({
+				this.showToast({
 					title: this.$locale.baseText('settings.ldap.connectionTestError'),
 					message: error.message,
 					type: 'error',
@@ -354,13 +368,13 @@ export default mixins(showMessage).extend({
 			this.loadingDryRun = true;
 			try {
 				await this.settingsStore.runLdapSync({ type: 'dry' });
-				this.$showToast({
+				this.showToast({
 					title: this.$locale.baseText('settings.ldap.runSync.title'),
 					message: this.$locale.baseText('settings.ldap.toast.sync.success'),
 					type: 'success',
 				});
 			} catch (error) {
-				this.$showError(error, this.$locale.baseText('settings.ldap.synchronizationError'));
+				this.showError(error, this.$locale.baseText('settings.ldap.synchronizationError'));
 			} finally {
 				this.loadingDryRun = false;
 				await this.reloadLdapSynchronizations();
@@ -370,13 +384,13 @@ export default mixins(showMessage).extend({
 			this.loadingLiveRun = true;
 			try {
 				await this.settingsStore.runLdapSync({ type: 'live' });
-				this.$showToast({
+				this.showToast({
 					title: this.$locale.baseText('settings.ldap.runSync.title'),
 					message: this.$locale.baseText('settings.ldap.toast.sync.success'),
 					type: 'success',
 				});
 			} catch (error) {
-				this.$showError(error, this.$locale.baseText('settings.ldap.synchronizationError'));
+				this.showError(error, this.$locale.baseText('settings.ldap.synchronizationError'));
 			} finally {
 				this.loadingLiveRun = false;
 				await this.reloadLdapSynchronizations();
@@ -669,7 +683,7 @@ export default mixins(showMessage).extend({
 					},
 				];
 			} catch (error) {
-				this.$showError(error, this.$locale.baseText('settings.ldap.configurationError'));
+				this.showError(error, this.$locale.baseText('settings.ldap.configurationError'));
 			}
 		},
 		async getLdapSynchronizations(state: any) {
@@ -688,7 +702,7 @@ export default mixins(showMessage).extend({
 				}
 				this.loadingTable = false;
 			} catch (error) {
-				this.$showError(error, this.$locale.baseText('settings.ldap.synchronizationError'));
+				this.showError(error, this.$locale.baseText('settings.ldap.synchronizationError'));
 			}
 		},
 		async reloadLdapSynchronizations() {
@@ -697,7 +711,7 @@ export default mixins(showMessage).extend({
 				this.tableKey += 1;
 				this.dataTable = [];
 			} catch (error) {
-				this.$showError(error, this.$locale.baseText('settings.ldap.synchronizationError'));
+				this.showError(error, this.$locale.baseText('settings.ldap.synchronizationError'));
 			}
 		},
 	},
diff --git a/packages/editor-ui/src/views/SettingsPersonalView.vue b/packages/editor-ui/src/views/SettingsPersonalView.vue
index eb3b27136a..ee5e580f56 100644
--- a/packages/editor-ui/src/views/SettingsPersonalView.vue
+++ b/packages/editor-ui/src/views/SettingsPersonalView.vue
@@ -58,18 +58,23 @@
 </template>
 
 <script lang="ts">
-import { showMessage } from '@/mixins/showMessage';
+import { useToast } from '@/composables';
 import { CHANGE_PASSWORD_MODAL_KEY } from '@/constants';
 import type { IFormInputs, IUser } from '@/Interface';
 import { useUIStore } from '@/stores/ui.store';
 import { useUsersStore } from '@/stores/users.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { mapStores } from 'pinia';
-import mixins from 'vue-typed-mixins';
+import { defineComponent } from 'vue';
 import { createEventBus } from '@/event-bus';
 
-export default mixins(showMessage).extend({
+export default defineComponent({
 	name: 'SettingsPersonalView',
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	data() {
 		return {
 			hasAnyChanges: false,
@@ -154,14 +159,14 @@ export default mixins(showMessage).extend({
 					lastName: form.lastName,
 					email: form.email,
 				});
-				this.$showToast({
+				this.showToast({
 					title: this.$locale.baseText('settings.personal.personalSettingsUpdated'),
 					message: '',
 					type: 'success',
 				});
 				this.hasAnyChanges = false;
 			} catch (e) {
-				this.$showError(e, this.$locale.baseText('settings.personal.personalSettingsUpdatedError'));
+				this.showError(e, this.$locale.baseText('settings.personal.personalSettingsUpdatedError'));
 			}
 		},
 		onSaveClick() {
diff --git a/packages/editor-ui/src/views/SettingsUsersView.vue b/packages/editor-ui/src/views/SettingsUsersView.vue
index 1ff70b7a15..5c34609b95 100644
--- a/packages/editor-ui/src/views/SettingsUsersView.vue
+++ b/packages/editor-ui/src/views/SettingsUsersView.vue
@@ -61,10 +61,10 @@
 <script lang="ts">
 import { EnterpriseEditionFeature, INVITE_USER_MODAL_KEY, VIEWS } from '@/constants';
 
-import PageAlert from '../components/PageAlert.vue';
+import PageAlert from '@/components/PageAlert.vue';
 import type { IUser, IUserListAction } from '@/Interface';
 import mixins from 'vue-typed-mixins';
-import { showMessage } from '@/mixins/showMessage';
+import { useToast } from '@/composables';
 import { copyPaste } from '@/mixins/copyPaste';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
@@ -73,11 +73,16 @@ import { useUsersStore } from '@/stores/users.store';
 import { useUsageStore } from '@/stores/usage.store';
 import { useSSOStore } from '@/stores/sso.store';
 
-export default mixins(showMessage, copyPaste).extend({
+export default mixins(copyPaste).extend({
 	name: 'SettingsUsersView',
 	components: {
 		PageAlert,
 	},
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	async mounted() {
 		if (!this.usersStore.showUMSetupWarning) {
 			await this.usersStore.fetchUsers();
@@ -126,7 +131,7 @@ export default mixins(showMessage, copyPaste).extend({
 				try {
 					await this.usersStore.reinviteUser({ id: user.id });
 
-					this.$showToast({
+					this.showToast({
 						type: 'success',
 						title: this.$locale.baseText('settings.users.inviteResent'),
 						message: this.$locale.baseText('settings.users.emailSentTo', {
@@ -134,7 +139,7 @@ export default mixins(showMessage, copyPaste).extend({
 						}),
 					});
 				} catch (e) {
-					this.$showError(e, this.$locale.baseText('settings.users.userReinviteError'));
+					this.showError(e, this.$locale.baseText('settings.users.userReinviteError'));
 				}
 			}
 		},
@@ -143,7 +148,7 @@ export default mixins(showMessage, copyPaste).extend({
 			if (user?.inviteAcceptUrl) {
 				this.copyToClipboard(user.inviteAcceptUrl);
 
-				this.$showToast({
+				this.showToast({
 					type: 'success',
 					title: this.$locale.baseText('settings.users.inviteUrlCreated'),
 					message: this.$locale.baseText('settings.users.inviteUrlCreated.message'),
diff --git a/packages/editor-ui/src/views/SetupView.vue b/packages/editor-ui/src/views/SetupView.vue
index 801eabd17b..9b3547a913 100644
--- a/packages/editor-ui/src/views/SetupView.vue
+++ b/packages/editor-ui/src/views/SetupView.vue
@@ -10,22 +10,28 @@
 
 <script lang="ts">
 import AuthView from './AuthView.vue';
-import { showMessage } from '@/mixins/showMessage';
+import { defineComponent } from 'vue';
 
-import mixins from 'vue-typed-mixins';
+import { useToast, useMessage } from '@/composables';
 import type { IFormBoxConfig } from '@/Interface';
-import { VIEWS } from '@/constants';
+import { MODAL_CONFIRM, VIEWS } from '@/constants';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUsersStore } from '@/stores/users.store';
 import { useCredentialsStore } from '@/stores/credentials.store';
 
-export default mixins(showMessage).extend({
+export default defineComponent({
 	name: 'SetupView',
 	components: {
 		AuthView,
 	},
+	setup() {
+		return {
+			...useToast(),
+			...useMessage(),
+		};
+	},
 	async mounted() {
 		const { credentials, workflows } = await this.usersStore.preOwnerSetup();
 		this.credentialsCount = credentials;
@@ -126,17 +132,20 @@ export default mixins(showMessage).extend({
 							interpolate: { workflows, credentials },
 					  })
 					: workflows || credentials;
-			return this.confirmMessage(
+			const confirm = await this.confirm(
 				this.$locale.baseText('auth.setup.confirmOwnerSetupMessage', {
 					interpolate: {
 						entities,
 					},
 				}),
 				this.$locale.baseText('auth.setup.confirmOwnerSetup'),
-				null,
-				this.$locale.baseText('auth.setup.createAccount'),
-				this.$locale.baseText('auth.setup.goBack'),
+				{
+					confirmButtonText: this.$locale.baseText('auth.setup.createAccount'),
+					cancelButtonText: this.$locale.baseText('auth.setup.goBack'),
+				},
 			);
+
+			return confirm === MODAL_CONFIRM;
 		},
 		async onSubmit(values: { [key: string]: string | boolean }) {
 			try {
@@ -163,19 +172,20 @@ export default mixins(showMessage).extend({
 					await this.$router.push({ name: VIEWS.USERS_SETTINGS });
 				}
 			} catch (error) {
-				this.$showError(error, this.$locale.baseText('auth.setup.settingUpOwnerError'));
+				this.showError(error, this.$locale.baseText('auth.setup.settingUpOwnerError'));
 			}
 			this.loading = false;
 		},
 		async showSkipConfirmation() {
-			const skip = await this.confirmMessage(
+			const skip = await this.confirm(
 				this.$locale.baseText('auth.setup.ownerAccountBenefits'),
 				this.$locale.baseText('auth.setup.skipOwnerSetupQuestion'),
-				null,
-				this.$locale.baseText('auth.setup.skipSetup'),
-				this.$locale.baseText('auth.setup.goBack'),
+				{
+					confirmButtonText: this.$locale.baseText('auth.setup.skipSetup'),
+					cancelButtonText: this.$locale.baseText('auth.setup.goBack'),
+				},
 			);
-			if (skip) {
+			if (skip === MODAL_CONFIRM) {
 				this.onSkip();
 			}
 		},
diff --git a/packages/editor-ui/src/views/SigninView.vue b/packages/editor-ui/src/views/SigninView.vue
index cc10546028..9aa7683875 100644
--- a/packages/editor-ui/src/views/SigninView.vue
+++ b/packages/editor-ui/src/views/SigninView.vue
@@ -9,21 +9,26 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import AuthView from './AuthView.vue';
-import { showMessage } from '@/mixins/showMessage';
+import { useToast } from '@/composables';
 
-import mixins from 'vue-typed-mixins';
 import type { IFormBoxConfig } from '@/Interface';
 import { VIEWS } from '@/constants';
 import { mapStores } from 'pinia';
 import { useUsersStore } from '@/stores/users.store';
 import { useSettingsStore } from '@/stores/settings.store';
 
-export default mixins(showMessage).extend({
+export default defineComponent({
 	name: 'SigninView',
 	components: {
 		AuthView,
 	},
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	data() {
 		return {
 			FORM_CONFIG: {} as IFormBoxConfig,
@@ -97,7 +102,7 @@ export default mixins(showMessage).extend({
 
 				await this.$router.push({ name: VIEWS.HOMEPAGE });
 			} catch (error) {
-				this.$showError(error, this.$locale.baseText('auth.signin.error'));
+				this.showError(error, this.$locale.baseText('auth.signin.error'));
 				this.loading = false;
 			}
 		},
diff --git a/packages/editor-ui/src/views/SignoutView.vue b/packages/editor-ui/src/views/SignoutView.vue
index 1931e30191..4a34341207 100644
--- a/packages/editor-ui/src/views/SignoutView.vue
+++ b/packages/editor-ui/src/views/SignoutView.vue
@@ -2,11 +2,16 @@
 import { VIEWS } from '@/constants';
 import { mapStores } from 'pinia';
 import { useUsersStore } from '@/stores/users.store';
-import mixins from 'vue-typed-mixins';
-import { showMessage } from '@/mixins/showMessage';
+import { defineComponent } from 'vue';
+import { useToast } from '@/composables';
 
-export default mixins(showMessage).extend({
+export default defineComponent({
 	name: 'SignoutView',
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	computed: {
 		...mapStores(useUsersStore),
 	},
@@ -16,7 +21,7 @@ export default mixins(showMessage).extend({
 				await this.usersStore.logout();
 				void this.$router.replace({ name: VIEWS.SIGNIN });
 			} catch (e) {
-				this.$showError(e, this.$locale.baseText('auth.signout.error'));
+				this.showError(e, this.$locale.baseText('auth.signout.error'));
 			}
 		},
 	},
diff --git a/packages/editor-ui/src/views/SignupView.vue b/packages/editor-ui/src/views/SignupView.vue
index e281c64db0..75a4f567aa 100644
--- a/packages/editor-ui/src/views/SignupView.vue
+++ b/packages/editor-ui/src/views/SignupView.vue
@@ -8,21 +8,26 @@
 </template>
 
 <script lang="ts">
-import AuthView from './AuthView.vue';
-import { showMessage } from '@/mixins/showMessage';
+import AuthView from '@/views/AuthView.vue';
+import { useToast } from '@/composables';
 
-import mixins from 'vue-typed-mixins';
+import { defineComponent } from 'vue';
 import type { IFormBoxConfig } from '@/Interface';
 import { VIEWS } from '@/constants';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useUsersStore } from '@/stores/users.store';
 
-export default mixins(showMessage).extend({
+export default defineComponent({
 	name: 'SignupView',
 	components: {
 		AuthView,
 	},
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	data() {
 		const FORM_CONFIG: IFormBoxConfig = {
 			title: this.$locale.baseText('auth.signup.setupYourAccount'),
@@ -96,7 +101,7 @@ export default mixins(showMessage).extend({
 			const invite = await this.usersStore.validateSignupToken({ inviteeId, inviterId });
 			this.inviter = invite.inviter as { firstName: string; lastName: string };
 		} catch (e) {
-			this.$showError(e, this.$locale.baseText('auth.signup.tokenValidationError'));
+			this.showError(e, this.$locale.baseText('auth.signup.tokenValidationError'));
 			void this.$router.replace({ name: VIEWS.SIGNIN });
 		}
 	},
@@ -115,7 +120,7 @@ export default mixins(showMessage).extend({
 	methods: {
 		async onSubmit(values: { [key: string]: string | boolean }) {
 			if (!this.inviterId || !this.inviteeId) {
-				this.$showError(
+				this.showError(
 					new Error(this.$locale.baseText('auth.changePassword.tokenValidationError')),
 					this.$locale.baseText('auth.signup.setupYourAccountError'),
 				);
@@ -144,7 +149,7 @@ export default mixins(showMessage).extend({
 
 				await this.$router.push({ name: VIEWS.NEW_WORKFLOW });
 			} catch (error) {
-				this.$showError(error, this.$locale.baseText('auth.signup.setupYourAccountError'));
+				this.showError(error, this.$locale.baseText('auth.signup.setupYourAccountError'));
 			}
 			this.loading = false;
 		},
diff --git a/packages/editor-ui/src/views/TemplatesSearchView.vue b/packages/editor-ui/src/views/TemplatesSearchView.vue
index cdf2464ef5..679ad71019 100644
--- a/packages/editor-ui/src/views/TemplatesSearchView.vue
+++ b/packages/editor-ui/src/views/TemplatesSearchView.vue
@@ -78,7 +78,7 @@
 import CollectionsCarousel from '@/components/CollectionsCarousel.vue';
 import TemplateFilters from '@/components/TemplateFilters.vue';
 import TemplateList from '@/components/TemplateList.vue';
-import TemplatesView from './TemplatesView.vue';
+import TemplatesView from '@/views/TemplatesView.vue';
 
 import { genericHelpers } from '@/mixins/genericHelpers';
 import type {
@@ -97,6 +97,7 @@ import { useSettingsStore } from '@/stores/settings.store';
 import { useUsersStore } from '@/stores/users.store';
 import { useTemplatesStore } from '@/stores/templates.store';
 import { useUIStore } from '@/stores/ui.store';
+import { useToast } from '@/composables';
 
 interface ISearchEvent {
 	search_string: string;
@@ -114,6 +115,11 @@ export default mixins(genericHelpers, debounceHelper).extend({
 		TemplateList,
 		TemplatesView,
 	},
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	data() {
 		return {
 			areCategoriesPrepopulated: false,
@@ -287,7 +293,7 @@ export default mixins(genericHelpers, debounceHelper).extend({
 					search: this.search,
 				});
 			} catch (e) {
-				this.$showMessage({
+				this.showMessage({
 					title: 'Error',
 					message: 'Could not load more workflows',
 					type: 'error',
diff --git a/packages/editor-ui/src/views/WorkflowsView.vue b/packages/editor-ui/src/views/WorkflowsView.vue
index d9d2b52b02..707571b384 100644
--- a/packages/editor-ui/src/views/WorkflowsView.vue
+++ b/packages/editor-ui/src/views/WorkflowsView.vue
@@ -89,17 +89,10 @@
 </template>
 
 <script lang="ts">
-import { showMessage } from '@/mixins/showMessage';
-import mixins from 'vue-typed-mixins';
-
-import SettingsView from './SettingsView.vue';
+import { defineComponent } from 'vue';
 import ResourcesListLayout from '@/components/layouts/ResourcesListLayout.vue';
-import PageViewLayout from '@/components/layouts/PageViewLayout.vue';
-import PageViewLayoutList from '@/components/layouts/PageViewLayoutList.vue';
 import WorkflowCard from '@/components/WorkflowCard.vue';
-import TemplateCard from '@/components/TemplateCard.vue';
 import { EnterpriseEditionFeature, VIEWS } from '@/constants';
-import { debounceHelper } from '@/mixins/debounce';
 import type Vue from 'vue';
 import type { ITag, IUser, IWorkflowDb } from '@/Interface';
 import TagsDropdown from '@/components/TagsDropdown.vue';
@@ -118,14 +111,10 @@ const StatusFilter = {
 	ALL: '',
 };
 
-const WorkflowsView = mixins(showMessage, debounceHelper).extend({
+const WorkflowsView = defineComponent({
 	name: 'WorkflowsView',
 	components: {
 		ResourcesListLayout,
-		TemplateCard,
-		PageViewLayout,
-		PageViewLayoutList,
-		SettingsView,
 		WorkflowCard,
 		TagsDropdown,
 	},
@@ -157,9 +146,6 @@ const WorkflowsView = mixins(showMessage, debounceHelper).extend({
 		isShareable(): boolean {
 			return this.settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing);
 		},
-		hasActiveWorkflows(): boolean {
-			return !!this.workflowsStore.activeWorkflows.length;
-		},
 		statusFilterOptions(): Array<{ label: string; value: string | boolean }> {
 			return [
 				{