From ebb3aaf61ea5cbc66d0270d59d019026fe97ed2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E0=A4=95=E0=A4=BE=E0=A4=B0=E0=A4=A4=E0=A5=8B=E0=A4=AB?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=AB=E0=A5=87=E0=A4=B2=E0=A4=B8=E0=A5=8D=E0=A4=95?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=B0=E0=A4=BF=E0=A4=AA=E0=A5=8D=E0=A4=9F=E2=84=A2?=
 <netroy@users.noreply.github.com>
Date: Tue, 16 May 2023 09:43:46 +0000
Subject: [PATCH] refactor(editor): Drop vue-typed-mixins (no-changelog)
 (#6257)

---
 packages/@n8n_io/eslint-config/frontend.js    |  6 ++++
 packages/design-system/package.json           |  2 --
 packages/editor-ui/package.json               |  1 -
 packages/editor-ui/src/App.vue                |  5 +--
 .../src/components/BinaryDataDisplay.vue      |  7 ++--
 .../src/components/BinaryDataDisplayEmbed.vue |  6 ++--
 .../src/components/BreakpointsObserver.vue    |  5 +--
 .../src/components/ChangePasswordModal.vue    |  2 +-
 .../CodeNodeEditor/CodeNodeEditor.vue         |  5 +--
 .../components/CodeNodeEditor/completer.ts    | 34 +++++++++----------
 .../src/components/CollectionCard.vue         |  5 +--
 .../src/components/CollectionParameter.vue    |  9 ++---
 .../src/components/CollectionWorkflowCard.vue |  5 +--
 .../src/components/CollectionsCarousel.vue    |  5 +--
 .../src/components/ContactPromptModal.vue     | 10 +++---
 .../editor-ui/src/components/CopyInput.vue    |  5 +--
 .../CredentialEdit/CredentialConfig.vue       |  7 ++--
 .../CredentialEdit/CredentialEdit.vue         |  7 ++--
 .../src/components/CredentialIcon.vue         |  5 +--
 .../src/components/CredentialsSelectModal.vue |  5 +--
 .../src/components/DeleteUserModal.vue        |  2 +-
 .../src/components/DraggableTarget.vue        |  4 +--
 .../components/DuplicateWorkflowDialog.vue    | 10 +++---
 .../src/components/Error/NodeErrorView.vue    |  7 ++--
 .../src/components/ExecutionTime.vue          |  6 ++--
 .../src/components/ExecutionsList.vue         |  8 ++---
 .../ExecutionsView/ExecutionCard.vue          |  5 +--
 .../ExecutionsView/ExecutionPreview.vue       |  8 +++--
 .../ExecutionsInfoAccordion.vue               |  7 ++--
 .../ExecutionsView/ExecutionsList.vue         |  8 +++--
 .../ExpandableInput/ExpandableInputEdit.vue   |  2 +-
 .../ExpandableInputPreview.vue                |  2 +-
 .../src/components/ExpressionEdit.vue         |  7 ++--
 .../ExpressionEditorModalInput.vue            |  5 +--
 .../src/components/FeatureComingSoon.vue      |  4 +--
 .../editor-ui/src/components/GoBackButton.vue |  2 +-
 .../src/components/HtmlEditor/HtmlEditor.vue  |  5 +--
 .../InlineExpressionEditorInput.vue           |  5 +--
 .../editor-ui/src/components/InputPanel.vue   |  7 ++--
 .../src/components/IntersectionObserved.vue   |  5 +--
 .../src/components/InviteUsersModal.vue       | 10 +++---
 packages/editor-ui/src/components/Logo.vue    |  4 +--
 .../src/components/MainHeader/MainHeader.vue  |  6 ++--
 .../components/MainHeader/WorkflowDetails.vue |  8 +++--
 .../src/components/NDVDraggablePanels.vue     |  7 ++--
 packages/editor-ui/src/components/Node.vue    | 18 +++-------
 .../src/components/NodeCredentials.vue        |  8 ++---
 .../editor-ui/src/components/NodeList.vue     |  6 ++--
 .../editor-ui/src/components/NodeSettings.vue |  8 ++---
 .../src/components/NodeSettingsTabs.vue       |  7 ++--
 .../editor-ui/src/components/NodeWebhooks.vue |  6 ++--
 .../components/OnboardingCallSignupModal.vue  |  2 +-
 .../editor-ui/src/components/OutputPanel.vue  |  5 +--
 .../src/components/ParameterInput.vue         |  7 ++--
 .../src/components/ParameterInputFull.vue     | 13 +++----
 .../src/components/ParameterInputHint.vue     |  2 +-
 .../src/components/ParameterInputList.vue     | 10 +++---
 .../src/components/ParameterInputWrapper.vue  |  7 ++--
 .../src/components/PersonalizationModal.vue   |  9 ++---
 .../src/components/PushConnectionTracker.vue  |  4 +--
 .../ResourceLocator/ResourceLocator.vue       |  8 ++---
 packages/editor-ui/src/components/RunData.vue |  7 ++--
 .../editor-ui/src/components/RunDataJson.vue  |  5 +--
 .../src/components/RunDataJsonActions.vue     |  8 +++--
 .../editor-ui/src/components/RunDataTable.vue |  9 ++---
 packages/editor-ui/src/components/RunInfo.vue |  2 +-
 .../editor-ui/src/components/ScopesNotice.vue |  4 +--
 .../src/components/SettingsSidebar.vue        |  7 ++--
 packages/editor-ui/src/components/Sticky.vue  |  9 ++---
 .../src/components/TagsContainer.vue          |  2 +-
 .../TagsManager/TagsView/TagsTableHeader.vue  |  2 +-
 .../TagsManager/TagsView/TagsView.vue         |  2 +-
 .../editor-ui/src/components/Telemetry.vue    |  7 ++--
 .../editor-ui/src/components/TemplateCard.vue |  5 +--
 .../src/components/TemplateFilters.vue        |  5 +--
 .../editor-ui/src/components/TemplateList.vue |  5 +--
 .../editor-ui/src/components/TriggerPanel.vue |  7 ++--
 .../editor-ui/src/components/ValueSurvey.vue  |  7 ++--
 .../src/components/VariableSelector.vue       |  7 ++--
 .../src/components/VariableSelectorItem.vue   |  5 +--
 .../editor-ui/src/components/VersionCard.vue  |  2 +-
 .../src/components/WorkflowSettings.vue       |  8 ++---
 .../src/components/layouts/PageViewLayout.vue |  4 +--
 .../layouts/ResourcesListLayout.vue           | 11 +++---
 .../editor-ui/src/mixins/completionManager.ts |  5 +--
 .../editor-ui/src/mixins/executionsHelpers.ts |  7 ++--
 .../editor-ui/src/mixins/expressionManager.ts | 10 +++---
 .../editor-ui/src/mixins/moveNodeWorkflow.ts  |  8 +++--
 packages/editor-ui/src/mixins/nodeBase.ts     |  8 +++--
 .../editor-ui/src/mixins/workflowActivate.ts  |  5 +--
 .../editor-ui/src/mixins/workflowHelpers.ts   |  4 +--
 packages/editor-ui/src/mixins/workflowRun.ts  |  4 +--
 .../src/views/SettingsLogStreamingView.vue    |  6 ++--
 .../editor-ui/src/views/SettingsUsersView.vue |  7 ++--
 .../src/views/TemplatesCollectionView.vue     |  8 +++--
 .../src/views/TemplatesSearchView.vue         |  7 ++--
 .../src/views/TemplatesWorkflowView.vue       |  8 +++--
 pnpm-lock.yaml                                | 10 ------
 98 files changed, 340 insertions(+), 287 deletions(-)

diff --git a/packages/@n8n_io/eslint-config/frontend.js b/packages/@n8n_io/eslint-config/frontend.js
index 804f1949b0..c2ad35031a 100644
--- a/packages/@n8n_io/eslint-config/frontend.js
+++ b/packages/@n8n_io/eslint-config/frontend.js
@@ -25,5 +25,11 @@ module.exports = {
 		'vue/no-deprecated-slot-scope-attribute': 'error',
 		'vue/no-multiple-template-root': 'error',
 		'vue/v-slot-style': 'error',
+
+		// TODO: remove these
+		'vue/no-unused-components': 'warn',
+		'vue/return-in-computed-property': 'warn',
+		'vue/no-mutating-props': 'warn',
+		'@typescript-eslint/no-floating-promises': 'warn',
 	},
 };
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index 093fe2f94b..7ccbc291a5 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -35,7 +35,6 @@
     "markdown-it-link-attributes": "^4.0.0",
     "markdown-it-task-lists": "^2.1.1",
     "vue": "^2.7.14",
-    "vue-typed-mixins": "^0.2.0",
     "xss": "^1.0.14"
   },
   "devDependencies": {
@@ -71,7 +70,6 @@
     "markdown-it-task-lists": "^2.1.1",
     "sanitize-html": "2.10.0",
     "vue": "^2.7.14",
-    "vue-typed-mixins": "^0.2.0",
     "vue2-boring-avatars": "^0.3.8",
     "xss": "^1.0.14"
   }
diff --git a/packages/editor-ui/package.json b/packages/editor-ui/package.json
index 9a0fe5f96c..7cd8aa07f0 100644
--- a/packages/editor-ui/package.json
+++ b/packages/editor-ui/package.json
@@ -76,7 +76,6 @@
     "vue-infinite-loading": "^2.4.5",
     "vue-json-pretty": "1.9.3",
     "vue-router": "^3.6.5",
-    "vue-typed-mixins": "^0.2.0",
     "vue2-teleport": "^1.0.1",
     "vue2-touch-events": "^3.2.1",
     "xss": "^1.0.14"
diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index 8639f830ec..d347b11b67 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -27,6 +27,9 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
+
 import Modals from '@/components/Modals.vue';
 import LoadingView from '@/views/LoadingView.vue';
 import Telemetry from '@/components/Telemetry.vue';
@@ -35,7 +38,6 @@ import { CLOUD_TRIAL_CHECK_INTERVAL, HIRING_BANNER, LOCAL_STORAGE_THEME, VIEWS }
 import { userHelpers } from '@/mixins/userHelpers';
 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';
@@ -49,7 +51,6 @@ import { useRoute } from 'vue-router/composables';
 import { useVersionControlStore } from '@/stores/versionControl.store';
 import { useUsageStore } from '@/stores/usage.store';
 import { useExternalHooks } from '@/composables';
-import { defineComponent } from 'vue';
 
 export default defineComponent({
 	name: 'App',
diff --git a/packages/editor-ui/src/components/BinaryDataDisplay.vue b/packages/editor-ui/src/components/BinaryDataDisplay.vue
index f0d1eb599c..a826160d07 100644
--- a/packages/editor-ui/src/components/BinaryDataDisplay.vue
+++ b/packages/editor-ui/src/components/BinaryDataDisplay.vue
@@ -19,18 +19,19 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 import type { IBinaryData, IRunData } from 'n8n-workflow';
 
 import BinaryDataDisplayEmbed from '@/components/BinaryDataDisplayEmbed.vue';
 
 import { nodeHelpers } from '@/mixins/nodeHelpers';
 
-import mixins from 'vue-typed-mixins';
-import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 
-export default mixins(nodeHelpers).extend({
+export default defineComponent({
 	name: 'BinaryDataDisplay',
+	mixins: [nodeHelpers],
 	components: {
 		BinaryDataDisplayEmbed,
 	},
diff --git a/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue b/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue
index 9b534b6f1f..0a0f12480f 100644
--- a/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue
+++ b/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue
@@ -19,15 +19,15 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 import type { IBinaryData } from 'n8n-workflow';
 import { jsonParse } from 'n8n-workflow';
 import type { PropType } from 'vue';
 import VueJsonPretty from 'vue-json-pretty';
-import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores';
-import Vue from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'BinaryDataDisplayEmbed',
 	components: {
 		VueJsonPretty,
diff --git a/packages/editor-ui/src/components/BreakpointsObserver.vue b/packages/editor-ui/src/components/BreakpointsObserver.vue
index 0e639c5566..a0797672b6 100644
--- a/packages/editor-ui/src/components/BreakpointsObserver.vue
+++ b/packages/editor-ui/src/components/BreakpointsObserver.vue
@@ -5,6 +5,7 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { BREAKPOINT_SM, BREAKPOINT_MD, BREAKPOINT_LG, BREAKPOINT_XL } from '@/constants';
 
 /**
@@ -16,12 +17,12 @@ import { BREAKPOINT_SM, BREAKPOINT_MD, BREAKPOINT_LG, BREAKPOINT_XL } from '@/co
  * xl >= 1920
  */
 
-import mixins from 'vue-typed-mixins';
 import { genericHelpers } from '@/mixins/genericHelpers';
 import { debounceHelper } from '@/mixins/debounce';
 
-export default mixins(genericHelpers, debounceHelper).extend({
+export default defineComponent({
 	name: 'BreakpointsObserver',
+	mixins: [genericHelpers, debounceHelper],
 	props: ['valueXS', 'valueXL', 'valueLG', 'valueMD', 'valueSM', 'valueDefault'],
 	data() {
 		return {
diff --git a/packages/editor-ui/src/components/ChangePasswordModal.vue b/packages/editor-ui/src/components/ChangePasswordModal.vue
index 4cc5dee6ef..68af3b4923 100644
--- a/packages/editor-ui/src/components/ChangePasswordModal.vue
+++ b/packages/editor-ui/src/components/ChangePasswordModal.vue
@@ -40,8 +40,8 @@ import { useUsersStore } from '@/stores/users.store';
 import { createEventBus } from '@/event-bus';
 
 export default defineComponent({
-	components: { Modal },
 	name: 'ChangePasswordModal',
+	components: { Modal },
 	props: {
 		modalName: {
 			type: String,
diff --git a/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue b/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
index aea8973ce0..4d6896d8ae 100644
--- a/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
+++ b/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
@@ -19,9 +19,9 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import { mapStores } from 'pinia';
-import mixins from 'vue-typed-mixins';
 
 import type { LanguageSupport } from '@codemirror/language';
 import type { Extension } from '@codemirror/state';
@@ -47,8 +47,9 @@ import { linterExtension } from './linter';
 import { completerExtension } from './completer';
 import { codeNodeEditorTheme } from './theme';
 
-export default mixins(linterExtension, completerExtension, workflowHelpers).extend({
+export default defineComponent({
 	name: 'code-node-editor',
+	mixins: [linterExtension, completerExtension, workflowHelpers],
 	components: { Modal },
 	props: {
 		mode: {
diff --git a/packages/editor-ui/src/components/CodeNodeEditor/completer.ts b/packages/editor-ui/src/components/CodeNodeEditor/completer.ts
index d4a9875d43..e8b70fc30f 100644
--- a/packages/editor-ui/src/components/CodeNodeEditor/completer.ts
+++ b/packages/editor-ui/src/components/CodeNodeEditor/completer.ts
@@ -1,7 +1,8 @@
-import Vue from 'vue';
-import mixins from 'vue-typed-mixins';
+import Vue, { defineComponent } from 'vue';
 import { autocompletion } from '@codemirror/autocomplete';
 import { localCompletionSource } from '@codemirror/lang-javascript';
+import type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
+import type { Extension } from '@codemirror/state';
 
 import { baseCompletions } from './completions/base.completions';
 import { jsSnippets } from './completions/js.snippets';
@@ -15,23 +16,22 @@ import { itemFieldCompletions } from './completions/itemField.completions';
 import { jsonFieldCompletions } from './completions/jsonField.completions';
 import { variablesCompletions } from './completions/variables.completions';
 
-import type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
-import type { Extension } from '@codemirror/state';
 import type { CodeNodeEditorMixin } from './types';
 
-export const completerExtension = mixins(
-	Vue as CodeNodeEditorMixin,
-	baseCompletions,
-	requireCompletions,
-	executionCompletions,
-	workflowCompletions,
-	variablesCompletions,
-	prevNodeCompletions,
-	luxonCompletions,
-	itemIndexCompletions,
-	itemFieldCompletions,
-	jsonFieldCompletions,
-).extend({
+export const completerExtension = defineComponent({
+	mixins: [
+		Vue as CodeNodeEditorMixin,
+		baseCompletions,
+		requireCompletions,
+		executionCompletions,
+		workflowCompletions,
+		variablesCompletions,
+		prevNodeCompletions,
+		luxonCompletions,
+		itemIndexCompletions,
+		itemFieldCompletions,
+		jsonFieldCompletions,
+	],
 	methods: {
 		autocompletionExtension(language: 'javaScript' | 'python'): Extension {
 			const completions = [];
diff --git a/packages/editor-ui/src/components/CollectionCard.vue b/packages/editor-ui/src/components/CollectionCard.vue
index 6421261235..2a0a62fa51 100644
--- a/packages/editor-ui/src/components/CollectionCard.vue
+++ b/packages/editor-ui/src/components/CollectionCard.vue
@@ -11,13 +11,14 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { genericHelpers } from '@/mixins/genericHelpers';
 import Card from '@/components/CollectionWorkflowCard.vue';
-import mixins from 'vue-typed-mixins';
 import NodeList from '@/components/NodeList.vue';
 
-export default mixins(genericHelpers).extend({
+export default defineComponent({
 	name: 'CollectionCard',
+	mixins: [genericHelpers],
 	props: {
 		loading: {
 			type: Boolean,
diff --git a/packages/editor-ui/src/components/CollectionParameter.vue b/packages/editor-ui/src/components/CollectionParameter.vue
index 8fc56e5508..2c743b23cf 100644
--- a/packages/editor-ui/src/components/CollectionParameter.vue
+++ b/packages/editor-ui/src/components/CollectionParameter.vue
@@ -46,6 +46,9 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
+import type { Component } from 'vue';
+import { mapStores } from 'pinia';
 import type { INodeUi, IUpdateInformation } from '@/Interface';
 
 import type { INodeProperties, INodePropertyOptions } from 'n8n-workflow';
@@ -55,13 +58,11 @@ import { nodeHelpers } from '@/mixins/nodeHelpers';
 
 import { get } from 'lodash-es';
 
-import mixins from 'vue-typed-mixins';
-import type { Component } from 'vue';
-import { mapStores } from 'pinia';
 import { useNDVStore } from '@/stores/ndv.store';
 
-export default mixins(nodeHelpers).extend({
+export default defineComponent({
 	name: 'CollectionParameter',
+	mixins: [nodeHelpers],
 	props: [
 		'hideDelete', // boolean
 		'nodeValues', // NodeParameters
diff --git a/packages/editor-ui/src/components/CollectionWorkflowCard.vue b/packages/editor-ui/src/components/CollectionWorkflowCard.vue
index 2826004c69..630d638873 100644
--- a/packages/editor-ui/src/components/CollectionWorkflowCard.vue
+++ b/packages/editor-ui/src/components/CollectionWorkflowCard.vue
@@ -11,11 +11,12 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { genericHelpers } from '@/mixins/genericHelpers';
-import mixins from 'vue-typed-mixins';
 
-export default mixins(genericHelpers).extend({
+export default defineComponent({
 	name: 'Card',
+	mixins: [genericHelpers],
 	props: {
 		loading: {
 			type: Boolean,
diff --git a/packages/editor-ui/src/components/CollectionsCarousel.vue b/packages/editor-ui/src/components/CollectionsCarousel.vue
index 1672ac976e..fcb5108574 100644
--- a/packages/editor-ui/src/components/CollectionsCarousel.vue
+++ b/packages/editor-ui/src/components/CollectionsCarousel.vue
@@ -26,6 +26,7 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import type { ITemplatesCollection } from '@/Interface';
 import Card from '@/components/CollectionWorkflowCard.vue';
@@ -33,12 +34,12 @@ import CollectionCard from '@/components/CollectionCard.vue';
 import VueAgile from 'vue-agile';
 
 import { genericHelpers } from '@/mixins/genericHelpers';
-import mixins from 'vue-typed-mixins';
 
 type SliderRef = InstanceType<typeof VueAgile>;
 
-export default mixins(genericHelpers).extend({
+export default defineComponent({
 	name: 'CollectionsCarousel',
+	mixins: [genericHelpers],
 	props: {
 		collections: {
 			type: Array as PropType<ITemplatesCollection[]>,
diff --git a/packages/editor-ui/src/components/ContactPromptModal.vue b/packages/editor-ui/src/components/ContactPromptModal.vue
index 0a591bee3d..b576b62729 100644
--- a/packages/editor-ui/src/components/ContactPromptModal.vue
+++ b/packages/editor-ui/src/components/ContactPromptModal.vue
@@ -33,21 +33,21 @@
 </template>
 
 <script lang="ts">
-import mixins from 'vue-typed-mixins';
-
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 import type { IN8nPromptResponse } from '@/Interface';
 import { VALID_EMAIL_REGEX } from '@/constants';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 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 },
+export default defineComponent({
 	name: 'ContactPromptModal',
+	mixins: [workflowHelpers],
+	components: { Modal },
 	props: ['modalName'],
 	setup() {
 		return {
diff --git a/packages/editor-ui/src/components/CopyInput.vue b/packages/editor-ui/src/components/CopyInput.vue
index a3c7770ba9..eb2287a4c3 100644
--- a/packages/editor-ui/src/components/CopyInput.vue
+++ b/packages/editor-ui/src/components/CopyInput.vue
@@ -17,11 +17,12 @@
 </template>
 
 <script lang="ts">
-import mixins from 'vue-typed-mixins';
+import { defineComponent } from 'vue';
 import { copyPaste } from '@/mixins/copyPaste';
 import { useToast } from '@/composables';
 
-export default mixins(copyPaste).extend({
+export default defineComponent({
+	mixins: [copyPaste],
 	props: {
 		label: {
 			type: String,
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
index 83b472e9c6..4071970fca 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
@@ -129,6 +129,9 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
+
 import type { ICredentialType, INodeTypeDescription } from 'n8n-workflow';
 import { getAppNameFromCredType, isCommunityPackageName } from '@/utils';
 
@@ -139,7 +142,6 @@ import OauthButton from './OauthButton.vue';
 import { addCredentialTranslation } from '@/plugins/i18n';
 import { BUILTIN_CREDENTIALS_DOCS_URL, DOCS_DOMAIN, EnterpriseEditionFeature } from '@/constants';
 import type { IPermissions } from '@/permissions';
-import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useRootStore } from '@/stores/n8nRoot.store';
@@ -149,9 +151,8 @@ import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import type { ICredentialsResponse } from '@/Interface';
 import AuthTypeSelector from '@/components/CredentialEdit/AuthTypeSelector.vue';
 import GoogleAuthButton from './GoogleAuthButton.vue';
-import Vue from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'CredentialConfig',
 	components: {
 		AuthTypeSelector,
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
index 3e290a7315..13ab9d6125 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
@@ -110,6 +110,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 
 import type { ICredentialsResponse, IUser } from '@/Interface';
 
@@ -129,7 +131,6 @@ import type {
 import { NodeHelpers } from 'n8n-workflow';
 import CredentialIcon from '@/components/CredentialIcon.vue';
 
-import mixins from 'vue-typed-mixins';
 import { nodeHelpers } from '@/mixins/nodeHelpers';
 import { useToast, useMessage } from '@/composables';
 
@@ -146,7 +147,6 @@ import type { IPermissions } from '@/permissions';
 import { getCredentialPermissions } from '@/permissions';
 import type { IMenuItem } from 'n8n-design-system';
 import { createEventBus } from 'n8n-design-system';
-import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUsersStore } from '@/stores/users.store';
@@ -166,8 +166,9 @@ interface NodeAccessMap {
 	[nodeType: string]: ICredentialNodeAccess | null;
 }
 
-export default mixins(nodeHelpers, externalHooks).extend({
+export default defineComponent({
 	name: 'CredentialEdit',
+	mixins: [nodeHelpers, externalHooks],
 	components: {
 		CredentialSharing,
 		CredentialConfig,
diff --git a/packages/editor-ui/src/components/CredentialIcon.vue b/packages/editor-ui/src/components/CredentialIcon.vue
index 6f8b74c87d..a72744256c 100644
--- a/packages/editor-ui/src/components/CredentialIcon.vue
+++ b/packages/editor-ui/src/components/CredentialIcon.vue
@@ -7,12 +7,13 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
+
 import { useCredentialsStore } from '@/stores/credentials.store';
 import { useRootStore } from '@/stores/n8nRoot.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import type { ICredentialType, INodeTypeDescription } from 'n8n-workflow';
-import { mapStores } from 'pinia';
-import { defineComponent } from 'vue';
 
 export default defineComponent({
 	props: {
diff --git a/packages/editor-ui/src/components/CredentialsSelectModal.vue b/packages/editor-ui/src/components/CredentialsSelectModal.vue
index 26d9f059a8..d33c47875c 100644
--- a/packages/editor-ui/src/components/CredentialsSelectModal.vue
+++ b/packages/editor-ui/src/components/CredentialsSelectModal.vue
@@ -58,7 +58,7 @@
 </template>
 
 <script lang="ts">
-import mixins from 'vue-typed-mixins';
+import { defineComponent } from 'vue';
 import Modal from './Modal.vue';
 import { CREDENTIAL_SELECT_MODAL_KEY } from '../constants';
 import { externalHooks } from '@/mixins/externalHooks';
@@ -68,8 +68,9 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useCredentialsStore } from '@/stores/credentials.store';
 import { createEventBus } from '@/event-bus';
 
-export default mixins(externalHooks).extend({
+export default defineComponent({
 	name: 'CredentialsSelectModal',
+	mixins: [externalHooks],
 	components: {
 		Modal,
 	},
diff --git a/packages/editor-ui/src/components/DeleteUserModal.vue b/packages/editor-ui/src/components/DeleteUserModal.vue
index 3131b87192..a9085e3063 100644
--- a/packages/editor-ui/src/components/DeleteUserModal.vue
+++ b/packages/editor-ui/src/components/DeleteUserModal.vue
@@ -79,10 +79,10 @@ import { useUsersStore } from '@/stores/users.store';
 import { createEventBus } from '@/event-bus';
 
 export default defineComponent({
+	name: 'DeleteUserModal',
 	components: {
 		Modal,
 	},
-	name: 'DeleteUserModal',
 	props: {
 		modalName: {
 			type: String,
diff --git a/packages/editor-ui/src/components/DraggableTarget.vue b/packages/editor-ui/src/components/DraggableTarget.vue
index b6af24c51d..224107b492 100644
--- a/packages/editor-ui/src/components/DraggableTarget.vue
+++ b/packages/editor-ui/src/components/DraggableTarget.vue
@@ -5,10 +5,10 @@
 </template>
 
 <script lang="ts">
-import { useNDVStore } from '@/stores/ndv.store';
-import { mapStores } from 'pinia';
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
+import { mapStores } from 'pinia';
+import { useNDVStore } from '@/stores/ndv.store';
 
 export default defineComponent({
 	props: {
diff --git a/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue b/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
index 9c4dee6281..e546bc4580 100644
--- a/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
+++ b/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
@@ -49,14 +49,13 @@
 </template>
 
 <script lang="ts">
-import mixins from 'vue-typed-mixins';
-
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 import { MAX_WORKFLOW_NAME_LENGTH, PLACEHOLDER_EMPTY_WORKFLOW_ID } from '@/constants';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { useToast } from '@/composables';
 import TagsDropdown from '@/components/TagsDropdown.vue';
 import Modal from '@/components/Modal.vue';
-import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import type { IWorkflowDataUpdate } from '@/Interface';
@@ -66,9 +65,10 @@ import { useUsersStore } from '@/stores/users.store';
 import { createEventBus } from '@/event-bus';
 import { useCredentialsStore } from '@/stores';
 
-export default mixins(workflowHelpers).extend({
-	components: { TagsDropdown, Modal },
+export default defineComponent({
 	name: 'DuplicateWorkflow',
+	mixins: [workflowHelpers],
+	components: { TagsDropdown, Modal },
 	props: ['modalName', 'isActive', 'data'],
 	setup() {
 		return {
diff --git a/packages/editor-ui/src/components/Error/NodeErrorView.vue b/packages/editor-ui/src/components/Error/NodeErrorView.vue
index b6661ab60f..03c6268e0e 100644
--- a/packages/editor-ui/src/components/Error/NodeErrorView.vue
+++ b/packages/editor-ui/src/components/Error/NodeErrorView.vue
@@ -118,20 +118,21 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 import VueJsonPretty from 'vue-json-pretty';
 import { copyPaste } from '@/mixins/copyPaste';
 import { useToast } from '@/composables';
-import mixins from 'vue-typed-mixins';
 import { MAX_DISPLAY_DATA_SIZE } from '@/constants';
 
 import type { INodeProperties, INodePropertyCollection, INodePropertyOptions } from 'n8n-workflow';
 import { sanitizeHtml } from '@/utils';
-import { mapStores } from 'pinia';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 
-export default mixins(copyPaste).extend({
+export default defineComponent({
 	name: 'NodeErrorView',
+	mixins: [copyPaste],
 	props: ['error'],
 	components: {
 		VueJsonPretty,
diff --git a/packages/editor-ui/src/components/ExecutionTime.vue b/packages/editor-ui/src/components/ExecutionTime.vue
index 955467313b..729b3566c8 100644
--- a/packages/editor-ui/src/components/ExecutionTime.vue
+++ b/packages/editor-ui/src/components/ExecutionTime.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { genericHelpers } from '@/mixins/genericHelpers';
 
-import mixins from 'vue-typed-mixins';
-
-export default mixins(genericHelpers).extend({
+export default defineComponent({
 	name: 'ExecutionTime',
+	mixins: [genericHelpers],
 	props: ['startTime'],
 	computed: {
 		time(): string {
diff --git a/packages/editor-ui/src/components/ExecutionsList.vue b/packages/editor-ui/src/components/ExecutionsList.vue
index 810e84f667..31ddcf60df 100644
--- a/packages/editor-ui/src/components/ExecutionsList.vue
+++ b/packages/editor-ui/src/components/ExecutionsList.vue
@@ -280,7 +280,8 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import Vue, { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 import ExecutionTime from '@/components/ExecutionTime.vue';
 import WorkflowActivator from '@/components/WorkflowActivator.vue';
 import ExecutionFilter from '@/components/ExecutionFilter.vue';
@@ -299,15 +300,14 @@ import type {
 } from '@/Interface';
 import type { IExecutionsSummary, ExecutionStatus } from 'n8n-workflow';
 import { range as _range } from 'lodash-es';
-import mixins from 'vue-typed-mixins';
-import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { isEmpty, setPageTitle } from '@/utils';
 import { executionFilterToQueryFilter } from '@/utils/executionUtils';
 
-export default mixins(externalHooks, genericHelpers, executionHelpers).extend({
+export default defineComponent({
 	name: 'ExecutionsList',
+	mixins: [externalHooks, genericHelpers, executionHelpers],
 	components: {
 		ExecutionTime,
 		WorkflowActivator,
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue
index 908b2d9c61..b1fbf8064d 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue
@@ -81,15 +81,16 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import type { IExecutionsSummary } from '@/Interface';
-import mixins from 'vue-typed-mixins';
 import type { IExecutionUIData } from '@/mixins/executionsHelpers';
 import { executionHelpers } from '@/mixins/executionsHelpers';
 import { VIEWS } from '@/constants';
 import ExecutionTime from '@/components/ExecutionTime.vue';
 
-export default mixins(executionHelpers).extend({
+export default defineComponent({
 	name: 'execution-card',
+	mixins: [executionHelpers],
 	components: {
 		ExecutionTime,
 	},
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
index 5e91da16e8..b342b469bb 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
@@ -126,20 +126,22 @@
 </template>
 
 <script lang="ts">
-import mixins from 'vue-typed-mixins';
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
+
 import { useMessage } from '@/composables';
 import WorkflowPreview from '@/components/WorkflowPreview.vue';
 import type { IExecutionUIData } from '@/mixins/executionsHelpers';
 import { executionHelpers } from '@/mixins/executionsHelpers';
 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(executionHelpers).extend({
+export default defineComponent({
 	name: 'execution-preview',
+	mixins: [executionHelpers],
 	components: {
 		ElDropdown,
 		WorkflowPreview,
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionsInfoAccordion.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionsInfoAccordion.vue
index 13a27484b0..f0112edd1d 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionsInfoAccordion.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionsInfoAccordion.vue
@@ -36,15 +36,15 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/n8nRoot.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
-import { mapStores } from 'pinia';
 import { PLACEHOLDER_EMPTY_WORKFLOW_ID, WORKFLOW_SETTINGS_MODAL_KEY } from '@/constants';
 import type { IWorkflowSettings } from 'n8n-workflow';
 import { deepCopy } from 'n8n-workflow';
-import mixins from 'vue-typed-mixins';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 
 interface IWorkflowSaveSettings {
@@ -53,8 +53,9 @@ interface IWorkflowSaveSettings {
 	saveTestExecutions: boolean;
 }
 
-export default mixins(workflowHelpers).extend({
+export default defineComponent({
 	name: 'executions-info-accordion',
+	mixins: [workflowHelpers],
 	props: {
 		initiallyExpanded: {
 			type: Boolean,
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue
index fd90019ca9..2576230a34 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue
@@ -23,6 +23,9 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
+
 import ExecutionsSidebar from '@/components/ExecutionsView/ExecutionsSidebar.vue';
 import {
 	MAIN_HEADER_TABS,
@@ -48,7 +51,6 @@ import type {
 	INodeTypeNameVersion,
 } from 'n8n-workflow';
 import { NodeHelpers } from 'n8n-workflow';
-import mixins from 'vue-typed-mixins';
 import { useToast, useMessage } from '@/composables';
 import { v4 as uuid } from 'uuid';
 import type { Route } from 'vue-router';
@@ -57,7 +59,6 @@ import { range as _range } from 'lodash-es';
 import { debounceHelper } from '@/mixins/debounce';
 import { getNodeViewTab, NO_NETWORK_ERROR_CODE } from '@/utils';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
-import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useUIStore } from '@/stores/ui.store';
 import { useSettingsStore } from '@/stores/settings.store';
@@ -70,8 +71,9 @@ const MAX_LOADING_ATTEMPTS = 5;
 // Number of executions fetched on each page
 const LOAD_MORE_PAGE_SIZE = 100;
 
-export default mixins(executionHelpers, debounceHelper, workflowHelpers).extend({
+export default defineComponent({
 	name: 'executions-list',
+	mixins: [executionHelpers, debounceHelper, workflowHelpers],
 	components: {
 		ExecutionsSidebar,
 	},
diff --git a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue
index a7454d79b1..befd3e2f44 100644
--- a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue
+++ b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue
@@ -22,8 +22,8 @@ import type { PropType } from 'vue';
 import type { EventBus } from '@/event-bus';
 
 export default defineComponent({
-	components: { ExpandableInputBase },
 	name: 'ExpandableInputEdit',
+	components: { ExpandableInputBase },
 	props: {
 		value: {},
 		placeholder: {},
diff --git a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputPreview.vue b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputPreview.vue
index 7b0d23087e..4820297941 100644
--- a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputPreview.vue
+++ b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputPreview.vue
@@ -16,8 +16,8 @@ import { defineComponent } from 'vue';
 import ExpandableInputBase from './ExpandableInputBase.vue';
 
 export default defineComponent({
-	components: { ExpandableInputBase },
 	name: 'ExpandableInputPreview',
+	components: { ExpandableInputBase },
 	props: ['value'],
 });
 </script>
diff --git a/packages/editor-ui/src/components/ExpressionEdit.vue b/packages/editor-ui/src/components/ExpressionEdit.vue
index db23d82aa3..51d17d6690 100644
--- a/packages/editor-ui/src/components/ExpressionEdit.vue
+++ b/packages/editor-ui/src/components/ExpressionEdit.vue
@@ -74,6 +74,8 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 import ExpressionEditorModalInput from '@/components/ExpressionEditorModal/ExpressionEditorModalInput.vue';
 import ExpressionEditorModalOutput from '@/components/ExpressionEditorModal/ExpressionEditorModalOutput.vue';
 import VariableSelector from '@/components/VariableSelector.vue';
@@ -85,17 +87,16 @@ import { genericHelpers } from '@/mixins/genericHelpers';
 
 import { EXPRESSIONS_DOCS_URL } from '@/constants';
 
-import mixins from 'vue-typed-mixins';
 import { debounceHelper } from '@/mixins/debounce';
-import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import { createExpressionTelemetryPayload } from '@/utils/telemetryUtils';
 
 import type { Segment } from '@/types/expressions';
 
-export default mixins(externalHooks, genericHelpers, debounceHelper).extend({
+export default defineComponent({
 	name: 'ExpressionEdit',
+	mixins: [externalHooks, genericHelpers, debounceHelper],
 	props: ['dialogVisible', 'parameter', 'path', 'value', 'eventSource'],
 	components: {
 		ExpressionEditorModalInput,
diff --git a/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue b/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue
index ad790ff2fa..88cf944b74 100644
--- a/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue
+++ b/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import mixins from 'vue-typed-mixins';
+import { defineComponent } from 'vue';
 import { EditorView, keymap } from '@codemirror/view';
 import { EditorState, Prec } from '@codemirror/state';
 import { history, redo } from '@codemirror/commands';
@@ -20,8 +20,9 @@ import { acceptCompletion, autocompletion } from '@codemirror/autocomplete';
 
 import type { IVariableItemSelected } from '@/Interface';
 
-export default mixins(expressionManager, completionManager, workflowHelpers).extend({
+export default defineComponent({
 	name: 'ExpressionEditorModalInput',
+	mixins: [expressionManager, completionManager, workflowHelpers],
 	props: {
 		value: {
 			type: String,
diff --git a/packages/editor-ui/src/components/FeatureComingSoon.vue b/packages/editor-ui/src/components/FeatureComingSoon.vue
index d08a89f095..994a0043cf 100644
--- a/packages/editor-ui/src/components/FeatureComingSoon.vue
+++ b/packages/editor-ui/src/components/FeatureComingSoon.vue
@@ -29,13 +29,13 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 import type { IFakeDoor } from '@/Interface';
 import { useRootStore } from '@/stores/n8nRoot.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUIStore } from '@/stores/ui.store';
 import { useUsersStore } from '@/stores/users.store';
-import { mapStores } from 'pinia';
-import { defineComponent } from 'vue';
 
 export default defineComponent({
 	name: 'FeatureComingSoon',
diff --git a/packages/editor-ui/src/components/GoBackButton.vue b/packages/editor-ui/src/components/GoBackButton.vue
index d9623fb3f6..56f7a433f8 100644
--- a/packages/editor-ui/src/components/GoBackButton.vue
+++ b/packages/editor-ui/src/components/GoBackButton.vue
@@ -6,8 +6,8 @@
 </template>
 
 <script lang="ts">
-import { VIEWS } from '@/constants';
 import { defineComponent } from 'vue';
+import { VIEWS } from '@/constants';
 
 export default defineComponent({
 	name: 'GoBackButton',
diff --git a/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue b/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
index 0d6488d9b8..04c6b0dfc6 100644
--- a/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
+++ b/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import mixins from 'vue-typed-mixins';
+import { defineComponent } from 'vue';
 import prettier from 'prettier/standalone';
 import htmlParser from 'prettier/parser-html';
 import cssParser from 'prettier/parser-postcss';
@@ -39,8 +39,9 @@ import { theme } from './theme';
 import { nonTakenRanges } from './utils';
 import type { Range, Section } from './types';
 
-export default mixins(expressionManager).extend({
+export default defineComponent({
 	name: 'HtmlEditor',
+	mixins: [expressionManager],
 	props: {
 		html: {
 			type: String,
diff --git a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
index 8b2e930962..891c8279f9 100644
--- a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
+++ b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import mixins from 'vue-typed-mixins';
+import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
 import { EditorView, keymap } from '@codemirror/view';
 import { EditorState, Prec } from '@codemirror/state';
@@ -19,8 +19,9 @@ import { inputTheme } from './theme';
 import { n8nLang } from '@/plugins/codemirror/n8nLang';
 import { completionManager } from '@/mixins/completionManager';
 
-export default mixins(completionManager, expressionManager, workflowHelpers).extend({
+export default defineComponent({
 	name: 'InlineExpressionEditorInput',
+	mixins: [completionManager, expressionManager, workflowHelpers],
 	props: {
 		value: {
 			type: String,
diff --git a/packages/editor-ui/src/components/InputPanel.vue b/packages/editor-ui/src/components/InputPanel.vue
index 3afedc696c..25d62b3657 100644
--- a/packages/editor-ui/src/components/InputPanel.vue
+++ b/packages/editor-ui/src/components/InputPanel.vue
@@ -131,11 +131,12 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 import type { INodeUi } from '@/Interface';
 import type { IConnectedNode, INodeTypeDescription, Workflow } from 'n8n-workflow';
 import RunData from './RunData.vue';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
-import mixins from 'vue-typed-mixins';
 import NodeExecuteButton from './NodeExecuteButton.vue';
 import WireMeUp from './WireMeUp.vue';
 import {
@@ -144,13 +145,13 @@ import {
 	MANUAL_TRIGGER_NODE_TYPE,
 	START_NODE_TYPE,
 } from '@/constants';
-import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 
-export default mixins(workflowHelpers).extend({
+export default defineComponent({
 	name: 'InputPanel',
+	mixins: [workflowHelpers],
 	components: { RunData, NodeExecuteButton, WireMeUp },
 	props: {
 		currentNodeName: {
diff --git a/packages/editor-ui/src/components/IntersectionObserved.vue b/packages/editor-ui/src/components/IntersectionObserved.vue
index 88402d4ae7..e171fb5b29 100644
--- a/packages/editor-ui/src/components/IntersectionObserved.vue
+++ b/packages/editor-ui/src/components/IntersectionObserved.vue
@@ -5,11 +5,12 @@
 </template>
 
 <script lang="ts">
-import mixins from 'vue-typed-mixins';
+import { defineComponent } from 'vue';
 import emitter from '@/mixins/emitter';
 
-export default mixins(emitter).extend({
+export default defineComponent({
 	name: 'IntersectionObserved',
+	mixins: [emitter],
 	props: ['enabled'],
 	mounted() {
 		if (!this.enabled) {
diff --git a/packages/editor-ui/src/components/InviteUsersModal.vue b/packages/editor-ui/src/components/InviteUsersModal.vue
index 8f7a5d1d58..54a4e01c9b 100644
--- a/packages/editor-ui/src/components/InviteUsersModal.vue
+++ b/packages/editor-ui/src/components/InviteUsersModal.vue
@@ -64,15 +64,14 @@
 </template>
 
 <script lang="ts">
-import mixins from 'vue-typed-mixins';
-
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 import { useToast } from '@/composables';
 import { copyPaste } from '@/mixins/copyPaste';
 import Modal from './Modal.vue';
 import type { IFormInputs, IInviteResponse, IUser } from '@/Interface';
 import { VALID_EMAIL_REGEX, INVITE_USER_MODAL_KEY } from '@/constants';
 import { ROLE } from '@/utils';
-import { mapStores } from 'pinia';
 import { useUsersStore } from '@/stores/users.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { createEventBus } from '@/event-bus';
@@ -90,9 +89,10 @@ function getEmail(email: string): string {
 	return parsed;
 }
 
-export default mixins(copyPaste).extend({
-	components: { Modal },
+export default defineComponent({
 	name: 'InviteUsersModal',
+	mixins: [copyPaste],
+	components: { Modal },
 	props: {
 		modalName: {
 			type: String,
diff --git a/packages/editor-ui/src/components/Logo.vue b/packages/editor-ui/src/components/Logo.vue
index 14ac76fe6f..df9ab0c04b 100644
--- a/packages/editor-ui/src/components/Logo.vue
+++ b/packages/editor-ui/src/components/Logo.vue
@@ -3,9 +3,9 @@
 </template>
 
 <script lang="ts">
-import { useRootStore } from '@/stores/n8nRoot.store';
-import { mapStores } from 'pinia';
 import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
+import { useRootStore } from '@/stores/n8nRoot.store';
 
 export default defineComponent({
 	computed: {
diff --git a/packages/editor-ui/src/components/MainHeader/MainHeader.vue b/packages/editor-ui/src/components/MainHeader/MainHeader.vue
index 15f78be0e3..7eeb20fb09 100644
--- a/packages/editor-ui/src/components/MainHeader/MainHeader.vue
+++ b/packages/editor-ui/src/components/MainHeader/MainHeader.vue
@@ -15,6 +15,9 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
+import type { Route } from 'vue-router';
+import { mapStores } from 'pinia';
 import { pushConnection } from '@/mixins/pushConnection';
 import WorkflowDetails from '@/components/MainHeader/WorkflowDetails.vue';
 import TabBar from '@/components/MainHeader/TabBar.vue';
@@ -26,11 +29,8 @@ import {
 } from '@/constants';
 import type { IExecutionsSummary, INodeUi, ITabBarItem } from '@/Interface';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
-import type { Route } from 'vue-router';
-import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useNDVStore } from '@/stores/ndv.store';
-import { defineComponent } from 'vue';
 
 export default defineComponent({
 	name: 'MainHeader',
diff --git a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
index 122c667f16..915a4594b5 100644
--- a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
+++ b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@@ -123,7 +123,9 @@
 </template>
 
 <script lang="ts">
-import mixins from 'vue-typed-mixins';
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
+
 import {
 	DUPLICATE_MODAL_KEY,
 	EnterpriseEditionFeature,
@@ -150,7 +152,6 @@ import type { IUser, IWorkflowDataUpdate, IWorkflowDb, IWorkflowToShare } from '
 import { saveAs } from 'file-saver';
 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';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
@@ -171,8 +172,9 @@ const hasChanged = (prev: string[], curr: string[]) => {
 	return curr.reduce((accu, val) => accu || !set.has(val), false);
 };
 
-export default mixins(workflowHelpers).extend({
+export default defineComponent({
 	name: 'WorkflowDetails',
+	mixins: [workflowHelpers],
 	components: {
 		TagsContainer,
 		PushConnectionTracker,
diff --git a/packages/editor-ui/src/components/NDVDraggablePanels.vue b/packages/editor-ui/src/components/NDVDraggablePanels.vue
index c3e0bd3f8b..bd822b28c9 100644
--- a/packages/editor-ui/src/components/NDVDraggablePanels.vue
+++ b/packages/editor-ui/src/components/NDVDraggablePanels.vue
@@ -37,16 +37,16 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
+import { mapStores } from 'pinia';
 import { get } from 'lodash-es';
 
 import type { INodeTypeDescription } from 'n8n-workflow';
 import PanelDragButton from './PanelDragButton.vue';
 
 import { LOCAL_STORAGE_MAIN_PANEL_RELATIVE_WIDTH, MAIN_NODE_PANEL_WIDTH } from '@/constants';
-import mixins from 'vue-typed-mixins';
 import { debounceHelper } from '@/mixins/debounce';
-import { mapStores } from 'pinia';
 import { useNDVStore } from '@/stores/ndv.store';
 
 const SIDE_MARGIN = 24;
@@ -63,8 +63,9 @@ const initialMainPanelWidth: { [key: string]: number } = {
 	wide: MAIN_NODE_PANEL_WIDTH * 2,
 };
 
-export default mixins(debounceHelper).extend({
+export default defineComponent({
 	name: 'NDVDraggablePanels',
+	mixins: [debounceHelper],
 	components: {
 		PanelDragButton,
 	},
diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
index 22612d9815..9ef728f102 100644
--- a/packages/editor-ui/src/components/Node.vue
+++ b/packages/editor-ui/src/components/Node.vue
@@ -169,7 +169,8 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import Vue, { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 import {
 	CUSTOM_API_CALL_KEY,
 	LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG,
@@ -188,13 +189,10 @@ import { NodeHelpers } from 'n8n-workflow';
 import NodeIcon from '@/components/NodeIcon.vue';
 import TitledList from '@/components/TitledList.vue';
 
-import mixins from 'vue-typed-mixins';
-
 import { get } from 'lodash-es';
 import { getStyleTokenValue, getTriggerNodeServiceName } from '@/utils';
 import type { IExecutionsSummary, INodeUi, XYPosition } from '@/Interface';
 import { debounceHelper } from '@/mixins/debounce';
-import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNDVStore } from '@/stores/ndv.store';
@@ -202,15 +200,9 @@ import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { EnableNodeToggleCommand } from '@/models/history';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
-export default mixins(
-	externalHooks,
-	nodeBase,
-	nodeHelpers,
-	workflowHelpers,
-	pinData,
-	debounceHelper,
-).extend({
+export default defineComponent({
 	name: 'Node',
+	mixins: [externalHooks, nodeBase, nodeHelpers, workflowHelpers, pinData, debounceHelper],
 	components: {
 		TitledList,
 		FontAwesomeIcon,
@@ -408,7 +400,7 @@ export default mixins(
 				}
 			}
 
-			return;
+			return undefined;
 		},
 		workflowRunning(): boolean {
 			return this.uiStore.isActionActive('workflowRunning');
diff --git a/packages/editor-ui/src/components/NodeCredentials.vue b/packages/editor-ui/src/components/NodeCredentials.vue
index 44fd3fd213..69a6998b6a 100644
--- a/packages/editor-ui/src/components/NodeCredentials.vue
+++ b/packages/editor-ui/src/components/NodeCredentials.vue
@@ -97,7 +97,9 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
+import { mapStores } from 'pinia';
 import type {
 	ICredentialsResponse,
 	INodeUi,
@@ -118,9 +120,6 @@ import { nodeHelpers } from '@/mixins/nodeHelpers';
 import { useToast } from '@/composables';
 
 import TitledList from '@/components/TitledList.vue';
-
-import mixins from 'vue-typed-mixins';
-import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useUsersStore } from '@/stores/users.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
@@ -141,8 +140,9 @@ interface CredentialDropdownOption extends ICredentialsResponse {
 	typeDisplayName: string;
 }
 
-export default mixins(genericHelpers, nodeHelpers).extend({
+export default defineComponent({
 	name: 'NodeCredentials',
+	mixins: [genericHelpers, nodeHelpers],
 	props: {
 		readonly: {
 			type: Boolean,
diff --git a/packages/editor-ui/src/components/NodeList.vue b/packages/editor-ui/src/components/NodeList.vue
index 39254c975e..dcaf54b022 100644
--- a/packages/editor-ui/src/components/NodeList.vue
+++ b/packages/editor-ui/src/components/NodeList.vue
@@ -13,13 +13,15 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import NodeIcon from '@/components/NodeIcon.vue';
 import { genericHelpers } from '@/mixins/genericHelpers';
 import type { ITemplatesNode } from '@/Interface';
-import mixins from 'vue-typed-mixins';
 import { filterTemplateNodes } from '@/utils';
-export default mixins(genericHelpers).extend({
+
+export default defineComponent({
 	name: 'NodeList',
+	mixins: [genericHelpers],
 	props: {
 		nodes: {
 			type: Array,
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 3ccf38be75..1716e6c01a 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -158,7 +158,8 @@
 
 <script lang="ts">
 import type { PropType } from 'vue';
-import Vue from 'vue';
+import Vue, { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 import type {
 	INodeTypeDescription,
 	INodeParameters,
@@ -191,10 +192,8 @@ import { get, set, unset } from 'lodash-es';
 import { externalHooks } from '@/mixins/externalHooks';
 import { nodeHelpers } from '@/mixins/nodeHelpers';
 
-import mixins from 'vue-typed-mixins';
 import NodeExecuteButton from './NodeExecuteButton.vue';
 import { isCommunityPackageName } from '@/utils';
-import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNDVStore } from '@/stores/ndv.store';
@@ -205,8 +204,9 @@ import useWorkflowsEEStore from '@/stores/workflows.ee.store';
 import { useCredentialsStore } from '@/stores/credentials.store';
 import type { EventBus } from '@/event-bus';
 
-export default mixins(externalHooks, nodeHelpers).extend({
+export default defineComponent({
 	name: 'NodeSettings',
+	mixins: [externalHooks, nodeHelpers],
 	components: {
 		NodeTitle,
 		NodeCredentials,
diff --git a/packages/editor-ui/src/components/NodeSettingsTabs.vue b/packages/editor-ui/src/components/NodeSettingsTabs.vue
index c8328814ea..2f4d9bee31 100644
--- a/packages/editor-ui/src/components/NodeSettingsTabs.vue
+++ b/packages/editor-ui/src/components/NodeSettingsTabs.vue
@@ -3,6 +3,8 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 import { externalHooks } from '@/mixins/externalHooks';
 import {
 	BUILTIN_NODES_DOCS_URL,
@@ -13,13 +15,12 @@ import type { INodeUi, ITab } from '@/Interface';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import type { INodeTypeDescription } from 'n8n-workflow';
-import { mapStores } from 'pinia';
 
-import mixins from 'vue-typed-mixins';
 import { isCommunityPackageName } from '@/utils';
 
-export default mixins(externalHooks).extend({
+export default defineComponent({
 	name: 'NodeSettingsTabs',
+	mixins: [externalHooks],
 	props: {
 		value: {
 			type: String,
diff --git a/packages/editor-ui/src/components/NodeWebhooks.vue b/packages/editor-ui/src/components/NodeWebhooks.vue
index 4ad9082ab3..d4b502c2f7 100644
--- a/packages/editor-ui/src/components/NodeWebhooks.vue
+++ b/packages/editor-ui/src/components/NodeWebhooks.vue
@@ -58,6 +58,7 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import type { INodeTypeDescription, IWebhookDescription } from 'n8n-workflow';
 
 import { WEBHOOK_NODE_TYPE } from '@/constants';
@@ -65,10 +66,9 @@ import { copyPaste } from '@/mixins/copyPaste';
 import { useToast } from '@/composables';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 
-import mixins from 'vue-typed-mixins';
-
-export default mixins(copyPaste, workflowHelpers).extend({
+export default defineComponent({
 	name: 'NodeWebhooks',
+	mixins: [copyPaste, workflowHelpers],
 	props: [
 		'node', // NodeUi
 		'nodeType', // INodeTypeDescription
diff --git a/packages/editor-ui/src/components/OnboardingCallSignupModal.vue b/packages/editor-ui/src/components/OnboardingCallSignupModal.vue
index 98a783b58b..e189f9add0 100644
--- a/packages/editor-ui/src/components/OnboardingCallSignupModal.vue
+++ b/packages/editor-ui/src/components/OnboardingCallSignupModal.vue
@@ -58,10 +58,10 @@ import { useUIStore } from '@/stores/ui.store';
 import { createEventBus } from '@/event-bus';
 
 export default defineComponent({
+	name: 'OnboardingCallSignupModal',
 	components: {
 		Modal,
 	},
-	name: 'OnboardingCallSignupModal',
 	props: ['modalName'],
 	setup() {
 		return {
diff --git a/packages/editor-ui/src/components/OutputPanel.vue b/packages/editor-ui/src/components/OutputPanel.vue
index f2983cee5d..8a97d23d94 100644
--- a/packages/editor-ui/src/components/OutputPanel.vue
+++ b/packages/editor-ui/src/components/OutputPanel.vue
@@ -98,12 +98,12 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import type { IExecutionResponse, INodeUi } from '@/Interface';
 import type { INodeTypeDescription, IRunData, IRunExecutionData, ITaskData } from 'n8n-workflow';
 import RunData from './RunData.vue';
 import RunInfo from './RunInfo.vue';
 import { pinData } from '@/mixins/pinData';
-import mixins from 'vue-typed-mixins';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
@@ -112,8 +112,9 @@ import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 
 type RunDataRef = InstanceType<typeof RunData>;
 
-export default mixins(pinData).extend({
+export default defineComponent({
 	name: 'OutputPanel',
+	mixins: [pinData],
 	components: { RunData, RunInfo },
 	props: {
 		runIndex: {
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index e79b3725cb..a10111d99e 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -347,6 +347,8 @@
 
 <script lang="ts">
 /* eslint-disable prefer-spread */
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 
 import { get } from 'lodash-es';
 
@@ -382,11 +384,9 @@ import { nodeHelpers } from '@/mixins/nodeHelpers';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { hasExpressionMapping, isValueExpression, isResourceLocatorValue } from '@/utils';
 
-import mixins from 'vue-typed-mixins';
 import { CODE_NODE_TYPE, CUSTOM_API_CALL_KEY, HTML_NODE_TYPE } from '@/constants';
 import type { PropType } from 'vue';
 import { debounceHelper } from '@/mixins/debounce';
-import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
@@ -396,8 +396,9 @@ import Vue from 'vue';
 
 type ResourceLocatorRef = InstanceType<typeof ResourceLocator>;
 
-export default mixins(externalHooks, nodeHelpers, workflowHelpers, debounceHelper).extend({
+export default defineComponent({
 	name: 'parameter-input',
+	mixins: [externalHooks, nodeHelpers, workflowHelpers, debounceHelper],
 	components: {
 		CodeNodeEditor,
 		HtmlEditor,
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index a464537a41..22970613a3 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -69,13 +69,14 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
+import { mapStores } from 'pinia';
 
 import type { IN8nButton, INodeUi, IRunDataDisplayMode, IUpdateInformation } from '@/Interface';
 
 import ParameterOptions from '@/components/ParameterOptions.vue';
 import DraggableTarget from '@/components/DraggableTarget.vue';
-import mixins from 'vue-typed-mixins';
 import { useToast } from '@/composables';
 import {
 	hasExpressionMapping,
@@ -91,18 +92,18 @@ import type {
 	IParameterLabel,
 } from 'n8n-workflow';
 import type { BaseTextKey } from '@/plugins/i18n';
-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';
 
-type ParamterInputWrapperRef = InstanceType<typeof ParameterInputWrapper>;
+type ParameterInputWrapperRef = InstanceType<typeof ParameterInputWrapper>;
 
 const DISPLAY_MODES_WITH_DATA_MAPPING = ['table', 'json', 'schema'];
 
-export default mixins(externalHooks).extend({
+export default defineComponent({
 	name: 'parameter-input-full',
+	mixins: [externalHooks],
 	components: {
 		ParameterOptions,
 		DraggableTarget,
@@ -231,14 +232,14 @@ export default mixins(externalHooks).extend({
 			this.menuExpanded = expanded;
 		},
 		optionSelected(command: string) {
-			const paramRef = this.$refs.param as ParamterInputWrapperRef | undefined;
+			const paramRef = this.$refs.param as ParameterInputWrapperRef | undefined;
 			paramRef?.$emit('optionSelected', command);
 		},
 		valueChanged(parameterData: IUpdateInformation) {
 			this.$emit('valueChanged', parameterData);
 		},
 		onTextInput(parameterData: IUpdateInformation) {
-			const paramRef = this.$refs.param as ParamterInputWrapperRef | undefined;
+			const paramRef = this.$refs.param as ParameterInputWrapperRef | undefined;
 
 			if (isValueExpression(this.parameter, parameterData.value)) {
 				paramRef?.$emit('optionSelected', 'addExpression');
diff --git a/packages/editor-ui/src/components/ParameterInputHint.vue b/packages/editor-ui/src/components/ParameterInputHint.vue
index 99aba8dbc2..21b840693a 100644
--- a/packages/editor-ui/src/components/ParameterInputHint.vue
+++ b/packages/editor-ui/src/components/ParameterInputHint.vue
@@ -11,8 +11,8 @@
 </template>
 
 <script lang="ts">
-import { sanitizeHtml } from '@/utils';
 import { defineComponent } from 'vue';
+import { sanitizeHtml } from '@/utils';
 
 export default defineComponent({
 	name: 'InputHint',
diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 738f2a536d..3e93153e92 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -115,6 +115,9 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
+import type { PropType } from 'vue';
+import { mapStores } from 'pinia';
 import type { INodeParameters, INodeProperties, NodeParameterValue } from 'n8n-workflow';
 import { deepCopy } from 'n8n-workflow';
 
@@ -126,17 +129,14 @@ import ParameterInputFull from '@/components/ParameterInputFull.vue';
 import ImportParameter from '@/components/ImportParameter.vue';
 
 import { get, set } from 'lodash-es';
-
-import mixins from 'vue-typed-mixins';
-import type { PropType } from 'vue';
-import { mapStores } from 'pinia';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { isAuthRelatedParameter, getNodeAuthFields, getMainAuthField } from '@/utils';
 import { KEEP_AUTH_IN_NDV_FOR_NODES } from '@/constants';
 
-export default mixins(workflowHelpers).extend({
+export default defineComponent({
 	name: 'ParameterInputList',
+	mixins: [workflowHelpers],
 	components: {
 		MultipleParameter,
 		ParameterInputFull,
diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index e2be625087..5bb8c286e0 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -42,11 +42,12 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
+import { mapStores } from 'pinia';
 
 import ParameterInput from '@/components/ParameterInput.vue';
 import InputHint from '@/components/ParameterInputHint.vue';
-import mixins from 'vue-typed-mixins';
 import type {
 	INodeProperties,
 	INodePropertyMode,
@@ -57,13 +58,13 @@ import { isResourceLocatorValue } from 'n8n-workflow';
 import type { INodeUi, IUpdateInformation, TargetItem } from '@/Interface';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { isValueExpression } from '@/utils';
-import { mapStores } from 'pinia';
 import { useNDVStore } from '@/stores/ndv.store';
 
 type ParamRef = InstanceType<typeof ParameterInput>;
 
-export default mixins(workflowHelpers).extend({
+export default defineComponent({
 	name: 'parameter-input-wrapper',
+	mixins: [workflowHelpers],
 	components: {
 		ParameterInput,
 		InputHint,
diff --git a/packages/editor-ui/src/components/PersonalizationModal.vue b/packages/editor-ui/src/components/PersonalizationModal.vue
index 2d14f99448..57d5ca6535 100644
--- a/packages/editor-ui/src/components/PersonalizationModal.vue
+++ b/packages/editor-ui/src/components/PersonalizationModal.vue
@@ -36,7 +36,8 @@
 </template>
 
 <script lang="ts">
-import mixins from 'vue-typed-mixins';
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 
 const SURVEY_VERSION = 'v4';
 
@@ -130,16 +131,16 @@ import Modal from '@/components/Modal.vue';
 import type { IFormInputs, IPersonalizationLatestVersion, IUser } from '@/Interface';
 import { getAccountAge } from '@/utils';
 import type { GenericValue } from 'n8n-workflow';
-import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useRootStore } from '@/stores/n8nRoot.store';
 import { useUsersStore } from '@/stores/users.store';
 import { createEventBus } from '@/event-bus';
 
-export default mixins(workflowHelpers).extend({
-	components: { Modal },
+export default defineComponent({
 	name: 'PersonalizationModal',
+	mixins: [workflowHelpers],
+	components: { Modal },
 	data() {
 		return {
 			isSaving: false,
diff --git a/packages/editor-ui/src/components/PushConnectionTracker.vue b/packages/editor-ui/src/components/PushConnectionTracker.vue
index 36267db23f..5722c1500b 100644
--- a/packages/editor-ui/src/components/PushConnectionTracker.vue
+++ b/packages/editor-ui/src/components/PushConnectionTracker.vue
@@ -16,9 +16,9 @@
 </template>
 
 <script lang="ts">
-import { useRootStore } from '@/stores/n8nRoot.store';
-import { mapStores } from 'pinia';
 import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
+import { useRootStore } from '@/stores/n8nRoot.store';
 
 export default defineComponent({
 	name: 'PushConnectionTracker',
diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
index d1a1ebe256..69c036a1ff 100644
--- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
+++ b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
@@ -142,8 +142,8 @@
 </template>
 
 <script lang="ts">
-import mixins from 'vue-typed-mixins';
-
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 import type {
 	ILoadOptions,
 	INode,
@@ -172,7 +172,6 @@ import {
 	hasOnlyListMode,
 	getMainAuthField,
 } from '@/utils';
-import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useRootStore } from '@/stores/n8nRoot.store';
@@ -188,8 +187,9 @@ interface IResourceLocatorQuery {
 	loading: boolean;
 }
 
-export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
+export default defineComponent({
 	name: 'resource-locator',
+	mixins: [debounceHelper, workflowHelpers, nodeHelpers],
 	components: {
 		DraggableTarget,
 		ExpressionEdit,
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 6c58b09f11..05bea0b0e7 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -464,8 +464,9 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
-import mixins from 'vue-typed-mixins';
+import { mapStores } from 'pinia';
 import { saveAs } from 'file-saver';
 import type {
 	IBinaryData,
@@ -510,7 +511,6 @@ import CodeNodeEditor from '@/components/CodeNodeEditor/CodeNodeEditor.vue';
 import { dataPinningEventBus } from '@/event-bus';
 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';
@@ -524,8 +524,9 @@ export type EnterEditModeArgs = {
 	origin: 'editIconButton' | 'insertTestDataLink';
 };
 
-export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).extend({
+export default defineComponent({
 	name: 'RunData',
+	mixins: [externalHooks, genericHelpers, nodeHelpers, pinData],
 	components: {
 		BinaryDataDisplay,
 		NodeErrorView,
diff --git a/packages/editor-ui/src/components/RunDataJson.vue b/packages/editor-ui/src/components/RunDataJson.vue
index 064821f94e..6f4a8d7d9f 100644
--- a/packages/editor-ui/src/components/RunDataJson.vue
+++ b/packages/editor-ui/src/components/RunDataJson.vue
@@ -70,8 +70,8 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
-import mixins from 'vue-typed-mixins';
 import VueJsonPretty from 'vue-json-pretty';
 import type { IDataObject, INodeExecutionData } from 'n8n-workflow';
 import Draggable from '@/components/Draggable.vue';
@@ -87,8 +87,9 @@ import { nonExistingJsonPath } from '@/components/RunDataJsonActions.vue';
 
 const runDataJsonActions = async () => import('@/components/RunDataJsonActions.vue');
 
-export default mixins(externalHooks).extend({
+export default defineComponent({
 	name: 'run-data-json',
+	mixins: [externalHooks],
 	components: {
 		VueJsonPretty,
 		Draggable,
diff --git a/packages/editor-ui/src/components/RunDataJsonActions.vue b/packages/editor-ui/src/components/RunDataJsonActions.vue
index 1f679fb4a0..4d94fd6911 100644
--- a/packages/editor-ui/src/components/RunDataJsonActions.vue
+++ b/packages/editor-ui/src/components/RunDataJsonActions.vue
@@ -35,8 +35,9 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
-import mixins from 'vue-typed-mixins';
+import { mapStores } from 'pinia';
 import jp from 'jsonpath';
 import type { INodeUi } from '@/Interface';
 import type { IDataObject } from 'n8n-workflow';
@@ -45,7 +46,6 @@ import { pinData } from '@/mixins/pinData';
 import { nodeHelpers } from '@/mixins/nodeHelpers';
 import { genericHelpers } from '@/mixins/genericHelpers';
 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';
@@ -58,8 +58,10 @@ type JsonPathData = {
 // A path that does not exist so that nothing is selected by default
 export const nonExistingJsonPath = '_!^&*';
 
-export default mixins(genericHelpers, nodeHelpers, pinData, copyPaste).extend({
+export default defineComponent({
 	name: 'run-data-json-actions',
+	mixins: [genericHelpers, nodeHelpers, pinData, copyPaste],
+
 	props: {
 		node: {
 			type: Object as PropType<INodeUi>,
diff --git a/packages/editor-ui/src/components/RunDataTable.vue b/packages/editor-ui/src/components/RunDataTable.vue
index 85d9a0a614..f6852c679b 100644
--- a/packages/editor-ui/src/components/RunDataTable.vue
+++ b/packages/editor-ui/src/components/RunDataTable.vue
@@ -162,15 +162,15 @@
 
 <script lang="ts">
 /* eslint-disable prefer-spread */
+import { defineComponent } from 'vue';
+import type { PropType } from 'vue';
+import { mapStores } from 'pinia';
 import type { INodeUi, ITableData, NDVState } from '@/Interface';
 import { getPairedItemId } from '@/utils';
-import type { PropType } from 'vue';
-import mixins from 'vue-typed-mixins';
 import type { GenericValue, IDataObject, INodeExecutionData } from 'n8n-workflow';
 import Draggable from './Draggable.vue';
 import { shorten } from '@/utils';
 import { externalHooks } from '@/mixins/externalHooks';
-import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import MappingPill from './MappingPill.vue';
@@ -180,8 +180,9 @@ const MAX_COLUMNS_LIMIT = 40;
 
 type DraggableRef = InstanceType<typeof Draggable>;
 
-export default mixins(externalHooks).extend({
+export default defineComponent({
 	name: 'run-data-table',
+	mixins: [externalHooks],
 	components: { Draggable, MappingPill },
 	props: {
 		node: {
diff --git a/packages/editor-ui/src/components/RunInfo.vue b/packages/editor-ui/src/components/RunInfo.vue
index e6a0003393..5f2136a771 100644
--- a/packages/editor-ui/src/components/RunInfo.vue
+++ b/packages/editor-ui/src/components/RunInfo.vue
@@ -14,8 +14,8 @@
 </template>
 
 <script lang="ts">
-import type { ITaskData } from 'n8n-workflow';
 import { defineComponent } from 'vue';
+import type { ITaskData } from 'n8n-workflow';
 
 export default defineComponent({
 	props: {
diff --git a/packages/editor-ui/src/components/ScopesNotice.vue b/packages/editor-ui/src/components/ScopesNotice.vue
index 9f113451f8..0f7a0bcbf1 100644
--- a/packages/editor-ui/src/components/ScopesNotice.vue
+++ b/packages/editor-ui/src/components/ScopesNotice.vue
@@ -3,9 +3,9 @@
 </template>
 
 <script lang="ts">
-import { useCredentialsStore } from '@/stores/credentials.store';
-import { mapStores } from 'pinia';
 import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
+import { useCredentialsStore } from '@/stores/credentials.store';
 
 export default defineComponent({
 	name: 'ScopesNotice',
diff --git a/packages/editor-ui/src/components/SettingsSidebar.vue b/packages/editor-ui/src/components/SettingsSidebar.vue
index af0797c853..826d3bfaf6 100644
--- a/packages/editor-ui/src/components/SettingsSidebar.vue
+++ b/packages/editor-ui/src/components/SettingsSidebar.vue
@@ -21,19 +21,20 @@
 </template>
 
 <script lang="ts">
-import mixins from 'vue-typed-mixins';
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 import { ABOUT_MODAL_KEY, VERSIONS_MODAL_KEY, VIEWS } from '@/constants';
 import { userHelpers } from '@/mixins/userHelpers';
 import type { IFakeDoor } from '@/Interface';
 import type { IMenuItem } from 'n8n-design-system';
 import type { BaseTextKey } from '@/plugins/i18n';
-import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useRootStore } from '@/stores/n8nRoot.store';
 
-export default mixins(userHelpers).extend({
+export default defineComponent({
 	name: 'SettingsSidebar',
+	mixins: [userHelpers],
 	computed: {
 		...mapStores(useRootStore, useSettingsStore, useUIStore),
 		settingsFakeDoorFeatures(): IFakeDoor[] {
diff --git a/packages/editor-ui/src/components/Sticky.vue b/packages/editor-ui/src/components/Sticky.vue
index a04c9b2c2a..5f51032e3f 100644
--- a/packages/editor-ui/src/components/Sticky.vue
+++ b/packages/editor-ui/src/components/Sticky.vue
@@ -56,9 +56,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import Vue, { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 
-import mixins from 'vue-typed-mixins';
 import { externalHooks } from '@/mixins/externalHooks';
 import { nodeBase } from '@/mixins/nodeBase';
 import { nodeHelpers } from '@/mixins/nodeHelpers';
@@ -73,14 +73,15 @@ import type {
 
 import type { INodeTypeDescription } from 'n8n-workflow';
 import { QUICKSTART_NOTE_NAME } from '@/constants';
-import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 
-export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).extend({
+export default defineComponent({
 	name: 'Sticky',
+	mixins: [externalHooks, nodeBase, nodeHelpers, workflowHelpers],
+
 	props: {
 		nodeViewScale: {
 			type: Number,
diff --git a/packages/editor-ui/src/components/TagsContainer.vue b/packages/editor-ui/src/components/TagsContainer.vue
index 4c643a5732..30d8c7065f 100644
--- a/packages/editor-ui/src/components/TagsContainer.vue
+++ b/packages/editor-ui/src/components/TagsContainer.vue
@@ -57,8 +57,8 @@ interface TagEl extends ITag {
 }
 
 export default defineComponent({
-	components: { IntersectionObserver, IntersectionObserved },
 	name: 'TagsContainer',
+	components: { IntersectionObserver, IntersectionObserved },
 	props: ['tagIds', 'limit', 'clickable', 'responsive', 'hoverable'],
 	data() {
 		return {
diff --git a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTableHeader.vue b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTableHeader.vue
index 543fd1b213..32f4da6975 100644
--- a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTableHeader.vue
+++ b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTableHeader.vue
@@ -28,8 +28,8 @@
 </template>
 
 <script lang="ts">
-import { MAX_TAG_NAME_LENGTH } from '@/constants';
 import { defineComponent } from 'vue';
+import { MAX_TAG_NAME_LENGTH } from '@/constants';
 
 export default defineComponent({
 	props: {
diff --git a/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue b/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue
index 37b2c192d7..a44d6b55fd 100644
--- a/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue
+++ b/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue
@@ -35,8 +35,8 @@ const matches = (name: string, filter: string) =>
 	name.toLowerCase().trim().includes(filter.toLowerCase().trim());
 
 export default defineComponent({
-	components: { TagsTableHeader, TagsTable },
 	name: 'TagsView',
+	components: { TagsTableHeader, TagsTable },
 	props: ['tags', 'isLoading'],
 	data() {
 		return {
diff --git a/packages/editor-ui/src/components/Telemetry.vue b/packages/editor-ui/src/components/Telemetry.vue
index a239dca27f..55467a9d54 100644
--- a/packages/editor-ui/src/components/Telemetry.vue
+++ b/packages/editor-ui/src/components/Telemetry.vue
@@ -3,16 +3,17 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/n8nRoot.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUsersStore } from '@/stores/users.store';
 import type { ITelemetrySettings } from 'n8n-workflow';
-import { mapStores } from 'pinia';
-import mixins from 'vue-typed-mixins';
 import { externalHooks } from '@/mixins/externalHooks';
 
-export default mixins(externalHooks).extend({
+export default defineComponent({
 	name: 'Telemetry',
+	mixins: [externalHooks],
 	data() {
 		return {
 			isTelemetryInitialized: false,
diff --git a/packages/editor-ui/src/components/TemplateCard.vue b/packages/editor-ui/src/components/TemplateCard.vue
index 7167e183ea..4228a82093 100644
--- a/packages/editor-ui/src/components/TemplateCard.vue
+++ b/packages/editor-ui/src/components/TemplateCard.vue
@@ -45,13 +45,14 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { genericHelpers } from '@/mixins/genericHelpers';
-import mixins from 'vue-typed-mixins';
 import { filterTemplateNodes, abbreviateNumber } from '@/utils';
 import NodeList from './NodeList.vue';
 
-export default mixins(genericHelpers).extend({
+export default defineComponent({
 	name: 'TemplateCard',
+	mixins: [genericHelpers],
 	props: {
 		lastItem: {
 			type: Boolean,
diff --git a/packages/editor-ui/src/components/TemplateFilters.vue b/packages/editor-ui/src/components/TemplateFilters.vue
index 14a5d13b68..741b5bc13b 100644
--- a/packages/editor-ui/src/components/TemplateFilters.vue
+++ b/packages/editor-ui/src/components/TemplateFilters.vue
@@ -37,12 +37,13 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { genericHelpers } from '@/mixins/genericHelpers';
 import type { ITemplatesCategory } from '@/Interface';
-import mixins from 'vue-typed-mixins';
 
-export default mixins(genericHelpers).extend({
+export default defineComponent({
 	name: 'TemplateFilters',
+	mixins: [genericHelpers],
 	props: {
 		sortOnPopulate: {
 			type: Boolean,
diff --git a/packages/editor-ui/src/components/TemplateList.vue b/packages/editor-ui/src/components/TemplateList.vue
index 62e7fe7d8a..c1aba56d91 100644
--- a/packages/editor-ui/src/components/TemplateList.vue
+++ b/packages/editor-ui/src/components/TemplateList.vue
@@ -32,12 +32,13 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { genericHelpers } from '@/mixins/genericHelpers';
-import mixins from 'vue-typed-mixins';
 import TemplateCard from './TemplateCard.vue';
 
-export default mixins(genericHelpers).extend({
+export default defineComponent({
 	name: 'TemplateList',
+	mixins: [genericHelpers],
 	props: {
 		infiniteScrollEnabled: {
 			type: Boolean,
diff --git a/packages/editor-ui/src/components/TriggerPanel.vue b/packages/editor-ui/src/components/TriggerPanel.vue
index 451301a3fe..f0f9cb266f 100644
--- a/packages/editor-ui/src/components/TriggerPanel.vue
+++ b/packages/editor-ui/src/components/TriggerPanel.vue
@@ -102,17 +102,17 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 import { EXECUTIONS_MODAL_KEY, WEBHOOK_NODE_TYPE, WORKFLOW_SETTINGS_MODAL_KEY } from '@/constants';
 import type { INodeUi } from '@/Interface';
 import type { INodeTypeDescription } from 'n8n-workflow';
 import { getTriggerNodeServiceName } from '@/utils';
 import NodeExecuteButton from '@/components/NodeExecuteButton.vue';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
-import mixins from 'vue-typed-mixins';
 import CopyInput from '@/components/CopyInput.vue';
 import NodeIcon from '@/components/NodeIcon.vue';
 import { copyPaste } from '@/mixins/copyPaste';
-import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNDVStore } from '@/stores/ndv.store';
@@ -121,8 +121,9 @@ import type { N8nInfoAccordion } from 'n8n-design-system';
 
 type HelpRef = InstanceType<typeof N8nInfoAccordion>;
 
-export default mixins(workflowHelpers, copyPaste).extend({
+export default defineComponent({
 	name: 'TriggerPanel',
+	mixins: [workflowHelpers, copyPaste],
 	components: {
 		NodeExecuteButton,
 		CopyInput,
diff --git a/packages/editor-ui/src/components/ValueSurvey.vue b/packages/editor-ui/src/components/ValueSurvey.vue
index c40642b333..f9824d227b 100644
--- a/packages/editor-ui/src/components/ValueSurvey.vue
+++ b/packages/editor-ui/src/components/ValueSurvey.vue
@@ -56,14 +56,14 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 import { VALID_EMAIL_REGEX, VALUE_SURVEY_MODAL_KEY } from '@/constants';
 import type { IN8nPromptResponse } from '@/Interface';
 
 import ModalDrawer from '@/components/ModalDrawer.vue';
 
-import mixins from 'vue-typed-mixins';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
-import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useRootStore } from '@/stores/n8nRoot.store';
 import { createEventBus } from '@/event-bus';
@@ -75,8 +75,9 @@ const GREAT_FEEDBACK_TITLE =
 const DEFAULT_FEEDBACK_TITLE =
 	"Thanks for your feedback! We'd love to understand how we can improve. Can we reach out?";
 
-export default mixins(workflowHelpers).extend({
+export default defineComponent({
 	name: 'ValueSurvey',
+	mixins: [workflowHelpers],
 	props: ['isActive'],
 	components: {
 		ModalDrawer,
diff --git a/packages/editor-ui/src/components/VariableSelector.vue b/packages/editor-ui/src/components/VariableSelector.vue
index f200fc89dd..ed9de7342a 100644
--- a/packages/editor-ui/src/components/VariableSelector.vue
+++ b/packages/editor-ui/src/components/VariableSelector.vue
@@ -24,6 +24,8 @@
 
 <script lang="ts">
 /* eslint-disable prefer-spread */
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 import { PLACEHOLDER_FILLED_AT_EXECUTION_TIME, STICKY_NODE_TYPE } from '@/constants';
 
 import type {
@@ -44,8 +46,6 @@ import type { INodeUi, IVariableItemSelected, IVariableSelectorOption } from '@/
 
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 
-import mixins from 'vue-typed-mixins';
-import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useRootStore } from '@/stores/n8nRoot.store';
 import { useNDVStore } from '@/stores/ndv.store';
@@ -53,8 +53,9 @@ import { useNDVStore } from '@/stores/ndv.store';
 // Node types that should not be displayed in variable selector
 const SKIPPED_NODE_TYPES = [STICKY_NODE_TYPE];
 
-export default mixins(workflowHelpers).extend({
+export default defineComponent({
 	name: 'VariableSelector',
+	mixins: [workflowHelpers],
 	components: {
 		VariableSelectorItem,
 	},
diff --git a/packages/editor-ui/src/components/VariableSelectorItem.vue b/packages/editor-ui/src/components/VariableSelectorItem.vue
index 138ab476fc..a944483fea 100644
--- a/packages/editor-ui/src/components/VariableSelectorItem.vue
+++ b/packages/editor-ui/src/components/VariableSelectorItem.vue
@@ -59,12 +59,13 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import type { IVariableSelectorOption, IVariableItemSelected } from '@/Interface';
 import { externalHooks } from '@/mixins/externalHooks';
-import mixins from 'vue-typed-mixins';
 
-export default mixins(externalHooks).extend({
+export default defineComponent({
 	name: 'VariableSelectorItem',
+	mixins: [externalHooks],
 	props: ['allowParentSelect', 'extendAll', 'item'],
 	mounted() {
 		if (this.extended) return;
diff --git a/packages/editor-ui/src/components/VersionCard.vue b/packages/editor-ui/src/components/VersionCard.vue
index a444786e3b..080530ac0a 100644
--- a/packages/editor-ui/src/components/VersionCard.vue
+++ b/packages/editor-ui/src/components/VersionCard.vue
@@ -68,8 +68,8 @@ Vue.component('Badge', Badge);
 Vue.component('WarningTooltip', WarningTooltip);
 
 export default defineComponent({
-	components: { NodeIcon, TimeAgo, Badge, WarningTooltip },
 	name: 'VersionCard',
+	components: { NodeIcon, TimeAgo, Badge, WarningTooltip },
 	props: ['version'],
 	// @ts-ignore
 	nodeName(node: IVersionNode): string {
diff --git a/packages/editor-ui/src/components/WorkflowSettings.vue b/packages/editor-ui/src/components/WorkflowSettings.vue
index 6f5cccd67c..7218e93c2c 100644
--- a/packages/editor-ui/src/components/WorkflowSettings.vue
+++ b/packages/editor-ui/src/components/WorkflowSettings.vue
@@ -325,6 +325,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 
 import { externalHooks } from '@/mixins/externalHooks';
 import { genericHelpers } from '@/mixins/genericHelpers';
@@ -344,11 +346,8 @@ import {
 	WORKFLOW_SETTINGS_MODAL_KEY,
 } from '@/constants';
 
-import mixins from 'vue-typed-mixins';
-
 import type { WorkflowSettings } from 'n8n-workflow';
 import { deepCopy } from 'n8n-workflow';
-import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useRootStore } from '@/stores/n8nRoot.store';
@@ -356,8 +355,9 @@ import useWorkflowsEEStore from '@/stores/workflows.ee.store';
 import { useUsersStore } from '@/stores/users.store';
 import { createEventBus } from '@/event-bus';
 
-export default mixins(externalHooks, genericHelpers).extend({
+export default defineComponent({
 	name: 'WorkflowSettings',
+	mixins: [externalHooks, genericHelpers],
 	components: {
 		Modal,
 	},
diff --git a/packages/editor-ui/src/components/layouts/PageViewLayout.vue b/packages/editor-ui/src/components/layouts/PageViewLayout.vue
index 4d8887336a..5edb1d2e2b 100644
--- a/packages/editor-ui/src/components/layouts/PageViewLayout.vue
+++ b/packages/editor-ui/src/components/layouts/PageViewLayout.vue
@@ -12,9 +12,9 @@
 </template>
 
 <script lang="ts">
-import { useUIStore } from '@/stores/ui.store';
-import { mapStores } from 'pinia';
 import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui.store';
 
 export default defineComponent({
 	name: 'PageViewLayout',
diff --git a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
index 6e00e71b88..647699118a 100644
--- a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
+++ b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
@@ -195,9 +195,11 @@
 </template>
 
 <script lang="ts">
-import type { IUser } from '@/Interface';
-import mixins from 'vue-typed-mixins';
+import { defineComponent } from 'vue';
+import type { PropType } from 'vue';
+import { mapStores } from 'pinia';
 
+import type { IUser } from '@/Interface';
 import PageViewLayout from '@/components/layouts/PageViewLayout.vue';
 import PageViewLayoutList from '@/components/layouts/PageViewLayoutList.vue';
 import {
@@ -206,11 +208,9 @@ import {
 	MAIN_REPOSITORY_URL,
 } from '@/constants';
 import TemplateCard from '@/components/TemplateCard.vue';
-import type { PropType } from 'vue';
 import { debounceHelper } from '@/mixins/debounce';
 import ResourceOwnershipSelect from '@/components/forms/ResourceOwnershipSelect.ee.vue';
 import ResourceFiltersDropdown from '@/components/forms/ResourceFiltersDropdown.vue';
-import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUsersStore } from '@/stores/users.store';
 import type { N8nInput } from 'n8n-design-system';
@@ -236,8 +236,9 @@ interface IFilters {
 type IResourceKeyType = 'credentials' | 'workflows';
 type SearchRef = InstanceType<typeof N8nInput>;
 
-export default mixins(debounceHelper).extend({
+export default defineComponent({
 	name: 'resources-list-layout',
+	mixins: [debounceHelper],
 	components: {
 		TemplateCard,
 		PageViewLayout,
diff --git a/packages/editor-ui/src/mixins/completionManager.ts b/packages/editor-ui/src/mixins/completionManager.ts
index 6b73ea645b..e24a9f101b 100644
--- a/packages/editor-ui/src/mixins/completionManager.ts
+++ b/packages/editor-ui/src/mixins/completionManager.ts
@@ -1,10 +1,11 @@
-import mixins from 'vue-typed-mixins';
+import { defineComponent } from 'vue';
 import { ExpressionExtensions } from 'n8n-workflow';
 import type { EditorView, ViewUpdate } from '@codemirror/view';
 
 import { expressionManager } from './expressionManager';
 
-export const completionManager = mixins(expressionManager).extend({
+export const completionManager = defineComponent({
+	mixins: [expressionManager],
 	data() {
 		return {
 			editor: {} as EditorView,
diff --git a/packages/editor-ui/src/mixins/executionsHelpers.ts b/packages/editor-ui/src/mixins/executionsHelpers.ts
index bec98455f2..7d2ab2a578 100644
--- a/packages/editor-ui/src/mixins/executionsHelpers.ts
+++ b/packages/editor-ui/src/mixins/executionsHelpers.ts
@@ -1,7 +1,7 @@
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { i18n as locale } from '@/plugins/i18n';
-import { mapStores } from 'pinia';
-import mixins from 'vue-typed-mixins';
 import { genericHelpers } from './genericHelpers';
 import type { IExecutionsSummary } from 'n8n-workflow';
 
@@ -12,7 +12,8 @@ export interface IExecutionUIData {
 	runningTime: string;
 }
 
-export const executionHelpers = mixins(genericHelpers).extend({
+export const executionHelpers = defineComponent({
+	mixins: [genericHelpers],
 	computed: {
 		...mapStores(useWorkflowsStore),
 		executionId(): string {
diff --git a/packages/editor-ui/src/mixins/expressionManager.ts b/packages/editor-ui/src/mixins/expressionManager.ts
index b49ebbf4c0..e4a8128a83 100644
--- a/packages/editor-ui/src/mixins/expressionManager.ts
+++ b/packages/editor-ui/src/mixins/expressionManager.ts
@@ -1,18 +1,20 @@
-import mixins from 'vue-typed-mixins';
-import { Expression, ExpressionExtensions } from 'n8n-workflow';
+import { defineComponent } from 'vue';
+import type { PropType } from 'vue';
 import { mapStores } from 'pinia';
+
+import { Expression, ExpressionExtensions } from 'n8n-workflow';
 import { ensureSyntaxTree } from '@codemirror/language';
 
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { useNDVStore } from '@/stores/ndv.store';
 import { EXPRESSION_EDITOR_PARSER_TIMEOUT } from '@/constants';
 
-import type { PropType } from 'vue';
 import type { EditorView } from '@codemirror/view';
 import type { TargetItem } from '@/Interface';
 import type { Html, Plaintext, RawSegment, Resolvable, Segment } from '@/types/expressions';
 
-export const expressionManager = mixins(workflowHelpers).extend({
+export const expressionManager = defineComponent({
+	mixins: [workflowHelpers],
 	props: {
 		targetItem: {
 			type: Object as PropType<TargetItem | null>,
diff --git a/packages/editor-ui/src/mixins/moveNodeWorkflow.ts b/packages/editor-ui/src/mixins/moveNodeWorkflow.ts
index 0c8ce48537..2b2edb2d78 100644
--- a/packages/editor-ui/src/mixins/moveNodeWorkflow.ts
+++ b/packages/editor-ui/src/mixins/moveNodeWorkflow.ts
@@ -1,10 +1,12 @@
-import mixins from 'vue-typed-mixins';
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
+
 import { deviceSupportHelpers } from '@/mixins/deviceSupportHelpers';
 import { getMousePosition } from '@/utils/nodeViewUtils';
-import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 
-export const moveNodeWorkflow = mixins(deviceSupportHelpers).extend({
+export const moveNodeWorkflow = defineComponent({
+	mixins: [deviceSupportHelpers],
 	data() {
 		return {
 			moveLastPosition: [0, 0],
diff --git a/packages/editor-ui/src/mixins/nodeBase.ts b/packages/editor-ui/src/mixins/nodeBase.ts
index 903ab62bbf..2f43f6c463 100644
--- a/packages/editor-ui/src/mixins/nodeBase.ts
+++ b/packages/editor-ui/src/mixins/nodeBase.ts
@@ -1,11 +1,12 @@
+import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
-import mixins from 'vue-typed-mixins';
+import { mapStores } from 'pinia';
+
 import type { INodeUi } from '@/Interface';
 import { deviceSupportHelpers } from '@/mixins/deviceSupportHelpers';
 import { NO_OP_NODE_TYPE } from '@/constants';
 
 import type { INodeTypeDescription } from 'n8n-workflow';
-import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
@@ -15,7 +16,8 @@ import * as NodeViewUtils from '@/utils/nodeViewUtils';
 import { useHistoryStore } from '@/stores/history.store';
 import { useCanvasStore } from '@/stores/canvas.store';
 
-export const nodeBase = mixins(deviceSupportHelpers).extend({
+export const nodeBase = defineComponent({
+	mixins: [deviceSupportHelpers],
 	mounted() {
 		// Initialize the node
 		if (this.data !== null) {
diff --git a/packages/editor-ui/src/mixins/workflowActivate.ts b/packages/editor-ui/src/mixins/workflowActivate.ts
index bf01f74742..fd2f804bd6 100644
--- a/packages/editor-ui/src/mixins/workflowActivate.ts
+++ b/packages/editor-ui/src/mixins/workflowActivate.ts
@@ -1,14 +1,15 @@
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
+
 import { externalHooks } from '@/mixins/externalHooks';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { useToast } from '@/composables';
 
-import { defineComponent } from 'vue';
 import {
 	LOCAL_STORAGE_ACTIVATION_FLAG,
 	PLACEHOLDER_EMPTY_WORKFLOW_ID,
 	WORKFLOW_ACTIVE_MODAL_KEY,
 } from '@/constants';
-import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
diff --git a/packages/editor-ui/src/mixins/workflowHelpers.ts b/packages/editor-ui/src/mixins/workflowHelpers.ts
index 147f17c5dc..914f1dc0bb 100644
--- a/packages/editor-ui/src/mixins/workflowHelpers.ts
+++ b/packages/editor-ui/src/mixins/workflowHelpers.ts
@@ -1,3 +1,5 @@
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 import {
 	PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
 	PLACEHOLDER_EMPTY_WORKFLOW_ID,
@@ -47,7 +49,6 @@ import { isEqual } from 'lodash-es';
 
 import { v4 as uuid } from 'uuid';
 import { getSourceItems } from '@/utils';
-import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useRootStore } from '@/stores/n8nRoot.store';
@@ -61,7 +62,6 @@ import type { IPermissions } from '@/permissions';
 import { getWorkflowPermissions } from '@/permissions';
 import type { ICredentialsResponse } from '@/Interface';
 import { useEnvironmentsStore } from '@/stores';
-import { defineComponent } from 'vue';
 
 export function resolveParameter(
 	parameter: NodeParameterValue | INodeParameters | NodeParameterValue[] | INodeParameters[],
diff --git a/packages/editor-ui/src/mixins/workflowRun.ts b/packages/editor-ui/src/mixins/workflowRun.ts
index f2b777f974..170f2ed0c5 100644
--- a/packages/editor-ui/src/mixins/workflowRun.ts
+++ b/packages/editor-ui/src/mixins/workflowRun.ts
@@ -1,3 +1,5 @@
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 import type { IExecutionPushResponse, IExecutionResponse, IStartRunData } from '@/Interface';
 
 import type { IRunData, IRunExecutionData, IWorkflowBase } from 'n8n-workflow';
@@ -7,9 +9,7 @@ import { externalHooks } from '@/mixins/externalHooks';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { useToast } from '@/composables';
 
-import { defineComponent } from 'vue';
 import { useTitleChange } from '@/composables/useTitleChange';
-import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useRootStore } from '@/stores/n8nRoot.store';
diff --git a/packages/editor-ui/src/views/SettingsLogStreamingView.vue b/packages/editor-ui/src/views/SettingsLogStreamingView.vue
index 8b9b4e0fe1..dc217b2168 100644
--- a/packages/editor-ui/src/views/SettingsLogStreamingView.vue
+++ b/packages/editor-ui/src/views/SettingsLogStreamingView.vue
@@ -79,9 +79,9 @@
 </template>
 
 <script lang="ts">
-import { v4 as uuid } from 'uuid';
+import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
-import mixins from 'vue-typed-mixins';
+import { v4 as uuid } from 'uuid';
 import { useWorkflowsStore } from '../stores/workflows.store';
 import { useUsersStore } from '../stores/users.store';
 import { useCredentialsStore } from '../stores/credentials.store';
@@ -95,7 +95,7 @@ import PageViewLayout from '@/components/layouts/PageViewLayout.vue';
 import EventDestinationCard from '@/components/SettingsLogStreaming/EventDestinationCard.ee.vue';
 import { createEventBus } from '@/event-bus';
 
-export default mixins().extend({
+export default defineComponent({
 	name: 'SettingsLogStreamingView',
 	props: {},
 	components: {
diff --git a/packages/editor-ui/src/views/SettingsUsersView.vue b/packages/editor-ui/src/views/SettingsUsersView.vue
index 5c34609b95..1909ca1104 100644
--- a/packages/editor-ui/src/views/SettingsUsersView.vue
+++ b/packages/editor-ui/src/views/SettingsUsersView.vue
@@ -59,22 +59,23 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 import { EnterpriseEditionFeature, INVITE_USER_MODAL_KEY, VIEWS } from '@/constants';
 
 import PageAlert from '@/components/PageAlert.vue';
 import type { IUser, IUserListAction } from '@/Interface';
-import mixins from 'vue-typed-mixins';
 import { useToast } from '@/composables';
 import { copyPaste } from '@/mixins/copyPaste';
-import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUsersStore } from '@/stores/users.store';
 import { useUsageStore } from '@/stores/usage.store';
 import { useSSOStore } from '@/stores/sso.store';
 
-export default mixins(copyPaste).extend({
+export default defineComponent({
 	name: 'SettingsUsersView',
+	mixins: [copyPaste],
 	components: {
 		PageAlert,
 	},
diff --git a/packages/editor-ui/src/views/TemplatesCollectionView.vue b/packages/editor-ui/src/views/TemplatesCollectionView.vue
index f60ffc805a..45acfe2626 100644
--- a/packages/editor-ui/src/views/TemplatesCollectionView.vue
+++ b/packages/editor-ui/src/views/TemplatesCollectionView.vue
@@ -50,6 +50,9 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
+
 import TemplateDetails from '@/components/TemplateDetails.vue';
 import TemplateList from '@/components/TemplateList.vue';
 import TemplatesView from './TemplatesView.vue';
@@ -62,14 +65,13 @@ import type {
 	ITemplatesWorkflowFull,
 } from '@/Interface';
 
-import mixins from 'vue-typed-mixins';
 import { setPageTitle } from '@/utils';
 import { VIEWS } from '@/constants';
-import { mapStores } from 'pinia';
 import { useTemplatesStore } from '@/stores/templates.store';
 
-export default mixins(workflowHelpers).extend({
+export default defineComponent({
 	name: 'TemplatesCollectionView',
+	mixins: [workflowHelpers],
 	components: {
 		TemplateDetails,
 		TemplateList,
diff --git a/packages/editor-ui/src/views/TemplatesSearchView.vue b/packages/editor-ui/src/views/TemplatesSearchView.vue
index 679ad71019..b55da07844 100644
--- a/packages/editor-ui/src/views/TemplatesSearchView.vue
+++ b/packages/editor-ui/src/views/TemplatesSearchView.vue
@@ -75,6 +75,8 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 import CollectionsCarousel from '@/components/CollectionsCarousel.vue';
 import TemplateFilters from '@/components/TemplateFilters.vue';
 import TemplateList from '@/components/TemplateList.vue';
@@ -87,12 +89,10 @@ import type {
 	ITemplatesQuery,
 	ITemplatesCategory,
 } from '@/Interface';
-import mixins from 'vue-typed-mixins';
 import type { IDataObject } from 'n8n-workflow';
 import { setPageTitle } from '@/utils';
 import { VIEWS } from '@/constants';
 import { debounceHelper } from '@/mixins/debounce';
-import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUsersStore } from '@/stores/users.store';
 import { useTemplatesStore } from '@/stores/templates.store';
@@ -107,8 +107,9 @@ interface ISearchEvent {
 	wf_template_repo_session_id: string;
 }
 
-export default mixins(genericHelpers, debounceHelper).extend({
+export default defineComponent({
 	name: 'TemplatesSearchView',
+	mixins: [genericHelpers, debounceHelper],
 	components: {
 		CollectionsCarousel,
 		TemplateFilters,
diff --git a/packages/editor-ui/src/views/TemplatesWorkflowView.vue b/packages/editor-ui/src/views/TemplatesWorkflowView.vue
index 7d6d99126d..cb45aa60e7 100644
--- a/packages/editor-ui/src/views/TemplatesWorkflowView.vue
+++ b/packages/editor-ui/src/views/TemplatesWorkflowView.vue
@@ -55,20 +55,22 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
+
 import TemplateDetails from '@/components/TemplateDetails.vue';
 import TemplatesView from './TemplatesView.vue';
 import WorkflowPreview from '@/components/WorkflowPreview.vue';
 
 import type { ITemplatesWorkflow, ITemplatesWorkflowFull } from '@/Interface';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
-import mixins from 'vue-typed-mixins';
 import { setPageTitle } from '@/utils';
 import { VIEWS } from '@/constants';
-import { mapStores } from 'pinia';
 import { useTemplatesStore } from '@/stores/templates.store';
 
-export default mixins(workflowHelpers).extend({
+export default defineComponent({
 	name: 'TemplatesWorkflowView',
+	mixins: [workflowHelpers],
 	components: {
 		TemplateDetails,
 		TemplatesView,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b25ba2fd35..34f063fb3c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -738,9 +738,6 @@ importers:
       vue:
         specifier: ^2.7.14
         version: 2.7.14
-      vue-typed-mixins:
-        specifier: ^0.2.0
-        version: 0.2.0
       vue2-boring-avatars:
         specifier: ^0.3.8
         version: 0.3.8
@@ -970,9 +967,6 @@ importers:
       vue-router:
         specifier: ^3.6.5
         version: 3.6.5(vue@2.7.14)
-      vue-typed-mixins:
-        specifier: ^0.2.0
-        version: 0.2.0
       vue2-teleport:
         specifier: ^1.0.1
         version: 1.0.1
@@ -22820,10 +22814,6 @@ packages:
       typescript: 5.0.3
     dev: true
 
-  /vue-typed-mixins@0.2.0:
-    resolution: {integrity: sha512-0OxuinandPWv3nm5k/reYkuKtX3jjPZ40Sy9roJz0ih8PUzmI7zSRiXFEJ62LsyRegw9Tqy+qMkajk7ipKP8Vg==}
-    dev: false
-
   /vue2-boring-avatars@0.3.8:
     resolution: {integrity: sha512-8vNN+zhCIiIMnSQDu0DwhJ11e9r3t4t12dromXmXDtRryBhV58NPn4XgMb4JKrBlfNK92KFrY/cxRy3nzhQfpQ==}
     dependencies: