refactor(editor): Drop vue-typed-mixins (no-changelog) (#6257)

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',
 	},
 };

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"
   }

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"

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',

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,
 	},

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,

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 {

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,

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: {

packages/editor-ui/src/components/CodeNodeEditor/completer.ts

@@ -1,7 +1,8 @@
-import Vue from 'vue';
+import Vue, { defineComponent } from 'vue';
-import mixins from 'vue-typed-mixins';
 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,11 +16,10 @@ 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(
+export const completerExtension = defineComponent({
+	mixins: [
 		Vue as CodeNodeEditorMixin,
 		baseCompletions,
 		requireCompletions,
@@ -31,7 +31,7 @@ export const completerExtension = mixins(
 		itemIndexCompletions,
 		itemFieldCompletions,
 		jsonFieldCompletions,
-).extend({
+	],
 	methods: {
 		autocompletionExtension(language: 'javaScript' | 'python'): Extension {
 			const completions = [];

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,

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

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,

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[]>,

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({
+export default defineComponent({
-	components: { Modal },
 	name: 'ContactPromptModal',
+	mixins: [workflowHelpers],
+	components: { Modal },
 	props: ['modalName'],
 	setup() {
 		return {

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,

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,

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,

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: {

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,
 	},

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,

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: {

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({
+export default defineComponent({
-	components: { TagsDropdown, Modal },
 	name: 'DuplicateWorkflow',
+	mixins: [workflowHelpers],
+	components: { TagsDropdown, Modal },
 	props: ['modalName', 'isActive', 'data'],
 	setup() {
 		return {

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,

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 defineComponent({
-
-export default mixins(genericHelpers).extend({
 	name: 'ExecutionTime',
+	mixins: [genericHelpers],
 	props: ['startTime'],
 	computed: {
 		time(): string {

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,

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,
 	},

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,

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,

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,
 	},

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: {},

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>

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,

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,

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',

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',

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,

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,

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: {

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) {

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({
+export default defineComponent({
-	components: { Modal },
 	name: 'InviteUsersModal',
+	mixins: [copyPaste],
+	components: { Modal },
 	props: {
 		modalName: {
 			type: String,

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: {

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',

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,

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,
 	},

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(
+export default defineComponent({
-	externalHooks,
-	nodeBase,
-	nodeHelpers,
-	workflowHelpers,
-	pinData,
-	debounceHelper,
-).extend({
 	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');

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,

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,

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,

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,

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 defineComponent({
-
-export default mixins(copyPaste, workflowHelpers).extend({
 	name: 'NodeWebhooks',
+	mixins: [copyPaste, workflowHelpers],
 	props: [
 		'node', // NodeUi
 		'nodeType', // INodeTypeDescription

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 {

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: {

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,

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');

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',

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,

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,

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({
+export default defineComponent({
-	components: { Modal },
 	name: 'PersonalizationModal',
+	mixins: [workflowHelpers],
+	components: { Modal },
 	data() {
 		return {
 			isSaving: false,

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',

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,

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,

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,

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>,

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: {

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: {

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',

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[] {

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,

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 {

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: {

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 {

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,

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,

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,

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,

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,

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,

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,
 	},

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;

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 {

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,
 	},

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',

packages/editor-ui/src/components/layouts/ResourcesListLayout.vue

@@ -195,9 +195,11 @@
 </template>
 
 <script lang="ts">
-import type { IUser } from '@/Interface';
+import { defineComponent } from 'vue';
-import mixins from 'vue-typed-mixins';
+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,

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,

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 {

packages/editor-ui/src/mixins/expressionManager.ts

@@ -1,18 +1,20 @@
-import mixins from 'vue-typed-mixins';
+import { defineComponent } from 'vue';
-import { Expression, ExpressionExtensions } from 'n8n-workflow';
+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>,

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],

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) {

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';

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[],

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';

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: {

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,
 	},

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,

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,

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,

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: