From 62fb924e2d4d963424c23fd40041243bd9053527 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Thu, 20 Apr 2023 14:24:40 +0300
Subject: [PATCH 1/3] refactor: replace Vue.extend with defineComponent in
 editor-ui

---
 packages/editor-ui/src/components/AboutModal.vue     |  4 ++--
 .../editor-ui/src/components/ActivationModal.vue     |  4 ++--
 packages/editor-ui/src/components/AskAiModal.vue     |  4 ++--
 packages/editor-ui/src/components/Banner.vue         |  4 ++--
 .../src/components/CredentialEdit/CredentialInfo.vue |  4 ++--
 .../components/CredentialEdit/CredentialInputs.vue   |  4 ++--
 packages/editor-ui/src/components/CredentialIcon.vue |  4 ++--
 .../editor-ui/src/components/CredentialsSelect.vue   |  4 ++--
 packages/editor-ui/src/components/Draggable.vue      |  4 ++--
 .../editor-ui/src/components/DraggableTarget.vue     |  5 +++--
 .../src/components/EnterpriseEdition.ee.vue          |  4 ++--
 .../editor-ui/src/components/ExecutionsModal.vue     |  4 ++--
 .../ExecutionsView/ExecutionsLandingPage.vue         |  4 ++--
 .../components/ExecutionsView/ExecutionsSidebar.vue  |  4 ++--
 .../ExpandableInput/ExpandableInputBase.vue          |  4 ++--
 .../ExpandableInput/ExpandableInputEdit.vue          |  7 ++++---
 .../ExpandableInput/ExpandableInputPreview.vue       |  4 ++--
 .../ExpressionEditorModalOutput.vue                  |  5 +++--
 .../src/components/ExpressionParameterInput.vue      |  4 ++--
 .../editor-ui/src/components/FeatureComingSoon.vue   |  4 ++--
 .../src/components/FixedCollectionParameter.vue      | 12 ++++++------
 packages/editor-ui/src/components/GoBackButton.vue   |  4 ++--
 .../editor-ui/src/components/HoverableNodeIcon.vue   |  4 ++--
 .../InlineExpressionEditorOutput.vue                 |  6 ++++--
 packages/editor-ui/src/components/InlineTextEdit.vue |  4 ++--
 .../src/components/IntersectionObserver.vue          |  4 ++--
 packages/editor-ui/src/components/Logo.vue           |  4 ++--
 .../editor-ui/src/components/MainHeader/TabBar.vue   |  7 ++++---
 packages/editor-ui/src/components/Modal.vue          |  7 ++++---
 packages/editor-ui/src/components/ModalDrawer.vue    |  7 ++++---
 packages/editor-ui/src/components/ModalRoot.vue      |  4 ++--
 packages/editor-ui/src/components/Modals.vue         |  4 ++--
 .../editor-ui/src/components/MultipleParameter.vue   |  7 ++++---
 .../editor-ui/src/components/Node/NodeCreation.vue   |  4 ++--
 packages/editor-ui/src/components/NodeIcon.vue       |  4 ++--
 packages/editor-ui/src/components/NodeTitle.vue      |  4 ++--
 .../editor-ui/src/components/PageContentWrapper.vue  |  4 ++--
 .../editor-ui/src/components/PanelDragButton.vue     |  4 ++--
 .../src/components/ParameterInputExpanded.vue        |  5 +++--
 .../editor-ui/src/components/ParameterInputHint.vue  |  4 ++--
 .../editor-ui/src/components/ParameterIssues.vue     |  4 ++--
 .../editor-ui/src/components/ParameterOptions.vue    |  7 ++++---
 .../src/components/PushConnectionTracker.vue         |  4 ++--
 .../ResourceLocator/ResourceLocatorDropdown.vue      |  5 +++--
 packages/editor-ui/src/components/RunInfo.vue        |  6 +++---
 packages/editor-ui/src/components/SaveButton.vue     |  4 ++--
 packages/editor-ui/src/components/ScopesNotice.vue   |  4 ++--
 packages/editor-ui/src/components/ShortenName.vue    |  4 ++--
 packages/editor-ui/src/components/TagsContainer.vue  |  4 ++--
 .../src/components/TagsManager/NoTagsView.vue        |  4 ++--
 .../components/TagsManager/TagsView/TagsTable.vue    |  4 ++--
 .../TagsManager/TagsView/TagsTableHeader.vue         |  4 ++--
 .../src/components/TagsManager/TagsView/TagsView.vue |  6 +++---
 .../editor-ui/src/components/TemplateDetails.vue     |  6 ++++--
 .../src/components/TemplateDetailsBlock.vue          |  4 ++--
 packages/editor-ui/src/components/TextEdit.vue       |  6 +++---
 packages/editor-ui/src/components/TimeAgo.vue        |  4 ++--
 packages/editor-ui/src/components/TitledList.vue     |  4 ++--
 packages/editor-ui/src/components/UpdatesPanel.vue   |  4 ++--
 packages/editor-ui/src/components/VersionCard.vue    |  4 ++--
 .../src/components/__tests__/ExecutionsList.test.ts  |  4 ++--
 .../editor-ui/src/components/forms/CodeEditor.vue    |  4 ++--
 .../src/components/forms/ResourceFiltersDropdown.vue |  7 ++++---
 .../components/forms/ResourceOwnershipSelect.ee.vue  |  4 ++--
 .../src/components/layouts/PageViewLayout.vue        |  4 ++--
 .../src/components/transitions/SlideTransition.vue   |  4 ++--
 packages/editor-ui/src/mixins/copyPaste.ts           |  4 ++--
 packages/editor-ui/src/mixins/debounce.ts            |  4 ++--
 .../editor-ui/src/mixins/deviceSupportHelpers.ts     |  4 ++--
 packages/editor-ui/src/mixins/emitter.ts             |  4 ++--
 packages/editor-ui/src/mixins/externalHooks.ts       |  4 ++--
 packages/editor-ui/src/mixins/restApi.ts             |  4 ++--
 packages/editor-ui/src/mixins/titleChange.ts         |  4 ++--
 packages/editor-ui/src/mixins/userHelpers.ts         |  8 ++++----
 packages/editor-ui/src/views/AuthView.vue            |  4 ++--
 packages/editor-ui/src/views/ErrorView.vue           |  4 ++--
 packages/editor-ui/src/views/ExecutionsView.vue      |  4 ++--
 .../editor-ui/src/views/SettingsFakeDoorView.vue     |  4 ++--
 packages/editor-ui/src/views/TemplatesView.vue       |  4 ++--
 79 files changed, 189 insertions(+), 174 deletions(-)

diff --git a/packages/editor-ui/src/components/AboutModal.vue b/packages/editor-ui/src/components/AboutModal.vue
index f23621cea60f3..19b57c1fd0bb7 100644
--- a/packages/editor-ui/src/components/AboutModal.vue
+++ b/packages/editor-ui/src/components/AboutModal.vue
@@ -54,7 +54,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import Modal from './Modal.vue';
 import { ABOUT_MODAL_KEY } from '../constants';
 import { mapStores } from 'pinia';
@@ -62,7 +62,7 @@ import { useSettingsStore } from '@/stores/settings';
 import { useRootStore } from '@/stores/n8nRootStore';
 import { createEventBus } from '@/event-bus';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'About',
 	components: {
 		Modal,
diff --git a/packages/editor-ui/src/components/ActivationModal.vue b/packages/editor-ui/src/components/ActivationModal.vue
index 0e7d2963ef406..5a72229d684c5 100644
--- a/packages/editor-ui/src/components/ActivationModal.vue
+++ b/packages/editor-ui/src/components/ActivationModal.vue
@@ -35,7 +35,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
 import Modal from '@/components/Modal.vue';
 import {
@@ -51,7 +51,7 @@ import { useWorkflowsStore } from '@/stores/workflows';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
 import { createEventBus } from '@/event-bus';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'ActivationModal',
 	components: {
 		Modal,
diff --git a/packages/editor-ui/src/components/AskAiModal.vue b/packages/editor-ui/src/components/AskAiModal.vue
index 1a678394a9854..9cd992f5166b2 100644
--- a/packages/editor-ui/src/components/AskAiModal.vue
+++ b/packages/editor-ui/src/components/AskAiModal.vue
@@ -23,12 +23,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import Modal from './Modal.vue';
 import { ASK_AI_MODAL_KEY, ASK_AI_WAITLIST_URL } from '../constants';
 import { createEventBus } from '@/event-bus';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'AskAI',
 	components: {
 		Modal,
diff --git a/packages/editor-ui/src/components/Banner.vue b/packages/editor-ui/src/components/Banner.vue
index 7ce1710f6c2c2..8b48fe6883af4 100644
--- a/packages/editor-ui/src/components/Banner.vue
+++ b/packages/editor-ui/src/components/Banner.vue
@@ -36,9 +36,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'Banner',
 	data() {
 		return {
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialInfo.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialInfo.vue
index 5b329fd1e1279..0e086633e5d75 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialInfo.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialInfo.vue
@@ -68,12 +68,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
 import TimeAgo from '../TimeAgo.vue';
 import { INodeTypeDescription } from 'n8n-workflow';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'CredentialInfo',
 	props: ['nodesWithAccess', 'nodeAccess', 'currentCredential', 'credentialPermissions'],
 	components: {
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialInputs.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialInputs.vue
index 7b5451f03380a..9b7b01deca7f0 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialInputs.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialInputs.vue
@@ -24,12 +24,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { IParameterLabel } from 'n8n-workflow';
 import { IUpdateInformation } from '@/Interface';
 import ParameterInputExpanded from '../ParameterInputExpanded.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'CredentialsInput',
 	props: [
 		'credentialProperties',
diff --git a/packages/editor-ui/src/components/CredentialIcon.vue b/packages/editor-ui/src/components/CredentialIcon.vue
index b6efc3ca30eb3..593e9dcbecdc7 100644
--- a/packages/editor-ui/src/components/CredentialIcon.vue
+++ b/packages/editor-ui/src/components/CredentialIcon.vue
@@ -12,9 +12,9 @@ import { useRootStore } from '@/stores/n8nRootStore';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
 import { ICredentialType, INodeTypeDescription } from 'n8n-workflow';
 import { mapStores } from 'pinia';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		credentialTypeName: {
 			type: String,
diff --git a/packages/editor-ui/src/components/CredentialsSelect.vue b/packages/editor-ui/src/components/CredentialsSelect.vue
index 559bed74dd1ae..f38973a0bc238 100644
--- a/packages/editor-ui/src/components/CredentialsSelect.vue
+++ b/packages/editor-ui/src/components/CredentialsSelect.vue
@@ -56,13 +56,13 @@
 
 <script lang="ts">
 import { ICredentialType } from 'n8n-workflow';
-import Vue from 'vue';
+import Vue, { defineComponent } from 'vue';
 import ScopesNotice from '@/components/ScopesNotice.vue';
 import NodeCredentials from '@/components/NodeCredentials.vue';
 import { mapStores } from 'pinia';
 import { useCredentialsStore } from '@/stores/credentials';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'CredentialsSelect',
 	components: {
 		ScopesNotice,
diff --git a/packages/editor-ui/src/components/Draggable.vue b/packages/editor-ui/src/components/Draggable.vue
index 0e9631776aae8..a92f3a2490229 100644
--- a/packages/editor-ui/src/components/Draggable.vue
+++ b/packages/editor-ui/src/components/Draggable.vue
@@ -19,12 +19,12 @@
 import { XYPosition } from '@/Interface';
 import { useNDVStore } from '@/stores/ndv';
 import { mapStores } from 'pinia';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
 // @ts-ignore
 import Teleport from 'vue2-teleport';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'draggable',
 	components: {
 		Teleport,
diff --git a/packages/editor-ui/src/components/DraggableTarget.vue b/packages/editor-ui/src/components/DraggableTarget.vue
index 742ff4d515cf4..a4b4318b5dd95 100644
--- a/packages/editor-ui/src/components/DraggableTarget.vue
+++ b/packages/editor-ui/src/components/DraggableTarget.vue
@@ -7,9 +7,10 @@
 <script lang="ts">
 import { useNDVStore } from '@/stores/ndv';
 import { mapStores } from 'pinia';
-import Vue, { PropType } from 'vue';
+import { defineComponent } from 'vue';
+import type { PropType } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		type: {
 			type: String,
diff --git a/packages/editor-ui/src/components/EnterpriseEdition.ee.vue b/packages/editor-ui/src/components/EnterpriseEdition.ee.vue
index dd418473797de..5336d02244fa5 100644
--- a/packages/editor-ui/src/components/EnterpriseEdition.ee.vue
+++ b/packages/editor-ui/src/components/EnterpriseEdition.ee.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { EnterpriseEditionFeature } from '@/constants';
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/settings';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'EnterpriseEdition',
 	props: {
 		features: {
diff --git a/packages/editor-ui/src/components/ExecutionsModal.vue b/packages/editor-ui/src/components/ExecutionsModal.vue
index 7da0c9da3b471..e30fd2b01201c 100644
--- a/packages/editor-ui/src/components/ExecutionsModal.vue
+++ b/packages/editor-ui/src/components/ExecutionsModal.vue
@@ -7,13 +7,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import ExecutionsList from '@/components/ExecutionsList.vue';
 import Modal from '@/components/Modal.vue';
 import { EXECUTIONS_MODAL_KEY } from '@/constants';
 import { createEventBus } from '@/event-bus';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'ExecutionsModal',
 	components: {
 		Modal,
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionsLandingPage.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionsLandingPage.vue
index d41d2c29773a1..2c58834db9f8d 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionsLandingPage.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionsLandingPage.vue
@@ -27,10 +27,10 @@ import { PLACEHOLDER_EMPTY_WORKFLOW_ID, VIEWS } from '@/constants';
 import { useUIStore } from '@/stores/ui';
 import { useWorkflowsStore } from '@/stores/workflows';
 import { mapStores } from 'pinia';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import ExecutionsInfoAccordion from './ExecutionsInfoAccordion.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'executions-landing-page',
 	components: {
 		ExecutionsInfoAccordion,
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue
index 4a126a33d37da..a96db6f128d09 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue
@@ -70,14 +70,14 @@ import ExecutionFilter from '@/components/ExecutionFilter.vue';
 import { VIEWS } from '@/constants';
 import type { IExecutionsSummary } from 'n8n-workflow';
 import { Route } from 'vue-router';
-import Vue from 'vue';
+import Vue, { defineComponent } from 'vue';
 import { PropType } from 'vue';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 import { useWorkflowsStore } from '@/stores/workflows';
 import { ExecutionFilterType } from '@/Interface';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'executions-sidebar',
 	components: {
 		ExecutionCard,
diff --git a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue
index 39bf7a0187348..5d0c57ef24e23 100644
--- a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue
+++ b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue
@@ -6,9 +6,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'ExpandableInputBase',
 	props: ['value', 'placeholder', 'staticSize'],
 	computed: {
diff --git a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue
index 198e64f4d7a00..a7454d79b1dd0 100644
--- a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue
+++ b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue
@@ -16,11 +16,12 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent } from 'vue';
 import ExpandableInputBase from './ExpandableInputBase.vue';
-import { EventBus } from '@/event-bus';
+import type { PropType } from 'vue';
+import type { EventBus } from '@/event-bus';
 
-export default Vue.extend({
+export default defineComponent({
 	components: { ExpandableInputBase },
 	name: 'ExpandableInputEdit',
 	props: {
diff --git a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputPreview.vue b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputPreview.vue
index f30d91b18252d..7b0d23087e882 100644
--- a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputPreview.vue
+++ b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputPreview.vue
@@ -12,10 +12,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import ExpandableInputBase from './ExpandableInputBase.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: { ExpandableInputBase },
 	name: 'ExpandableInputPreview',
 	props: ['value'],
diff --git a/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalOutput.vue b/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalOutput.vue
index 642773e9089d9..8c1d9f3ad3bf1 100644
--- a/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalOutput.vue
+++ b/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalOutput.vue
@@ -3,9 +3,10 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
 import { EditorView } from '@codemirror/view';
 import { EditorState } from '@codemirror/state';
+import { defineComponent } from 'vue';
+import type { PropType } from 'vue';
 
 import { highlighter } from '@/plugins/codemirror/resolvableHighlighter';
 import { outputTheme } from './theme';
@@ -13,7 +14,7 @@ import { outputTheme } from './theme';
 import type { Plaintext, Resolved, Segment } from '@/types/expressions';
 import { forceParse } from '@/utils/forceParse';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'ExpressionEditorModalOutput',
 	props: {
 		segments: {
diff --git a/packages/editor-ui/src/components/ExpressionParameterInput.vue b/packages/editor-ui/src/components/ExpressionParameterInput.vue
index 51e58eef9dc9d..8ff3390976e0f 100644
--- a/packages/editor-ui/src/components/ExpressionParameterInput.vue
+++ b/packages/editor-ui/src/components/ExpressionParameterInput.vue
@@ -66,7 +66,7 @@
 
 <script lang="ts">
 import { mapStores } from 'pinia';
-import Vue from 'vue';
+import Vue, { defineComponent } from 'vue';
 
 import { useNDVStore } from '@/stores/ndv';
 import { useWorkflowsStore } from '@/stores/workflows';
@@ -79,7 +79,7 @@ import { EXPRESSIONS_DOCS_URL } from '@/constants';
 import type { Segment } from '@/types/expressions';
 import type { TargetItem } from '@/Interface';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'ExpressionParameterInput',
 	components: {
 		InlineExpressionEditorInput,
diff --git a/packages/editor-ui/src/components/FeatureComingSoon.vue b/packages/editor-ui/src/components/FeatureComingSoon.vue
index b14c895535e7f..a34205cac75db 100644
--- a/packages/editor-ui/src/components/FeatureComingSoon.vue
+++ b/packages/editor-ui/src/components/FeatureComingSoon.vue
@@ -35,9 +35,9 @@ import { useSettingsStore } from '@/stores/settings';
 import { useUIStore } from '@/stores/ui';
 import { useUsersStore } from '@/stores/users';
 import { mapStores } from 'pinia';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'FeatureComingSoon',
 	props: {
 		featureId: {
diff --git a/packages/editor-ui/src/components/FixedCollectionParameter.vue b/packages/editor-ui/src/components/FixedCollectionParameter.vue
index fdae7a368f466..4d47f6c5cdcd3 100644
--- a/packages/editor-ui/src/components/FixedCollectionParameter.vue
+++ b/packages/editor-ui/src/components/FixedCollectionParameter.vue
@@ -112,21 +112,21 @@
 </template>
 
 <script lang="ts">
-import Vue, { Component, PropType } from 'vue';
-import { IUpdateInformation } from '@/Interface';
+import { defineComponent } from 'vue';
+import type { Component, PropType } from 'vue';
+import type { IUpdateInformation } from '@/Interface';
 
-import {
+import { deepCopy, isINodePropertyCollectionList } from 'n8n-workflow';
+import type {
 	INodeParameters,
 	INodeProperties,
 	INodePropertyCollection,
 	NodeParameterValue,
-	deepCopy,
-	isINodePropertyCollectionList,
 } from 'n8n-workflow';
 
 import { get } from 'lodash-es';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'FixedCollectionParameter',
 	props: {
 		nodeValues: {
diff --git a/packages/editor-ui/src/components/GoBackButton.vue b/packages/editor-ui/src/components/GoBackButton.vue
index 9c54a2157bd31..6dcd409b971be 100644
--- a/packages/editor-ui/src/components/GoBackButton.vue
+++ b/packages/editor-ui/src/components/GoBackButton.vue
@@ -7,9 +7,9 @@
 
 <script lang="ts">
 import { VIEWS } from '@/constants';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'GoBackButton',
 	data() {
 		return {
diff --git a/packages/editor-ui/src/components/HoverableNodeIcon.vue b/packages/editor-ui/src/components/HoverableNodeIcon.vue
index 2dda3cd8af556..3507547aab365 100644
--- a/packages/editor-ui/src/components/HoverableNodeIcon.vue
+++ b/packages/editor-ui/src/components/HoverableNodeIcon.vue
@@ -40,7 +40,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
 import { ITemplatesNode } from '@/Interface';
 import { INodeTypeDescription } from 'n8n-workflow';
@@ -54,7 +54,7 @@ interface NodeIconData {
 	fileBuffer?: string;
 }
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'HoverableNodeIcon',
 	props: {
 		circle: {
diff --git a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue
index 89aa0833528c0..b64a70a2df3ab 100644
--- a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue
+++ b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue
@@ -3,16 +3,18 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
 import { EditorView } from '@codemirror/view';
 import { EditorState } from '@codemirror/state';
 
+import { defineComponent } from 'vue';
+import type { PropType } from 'vue';
+
 import { highlighter } from '@/plugins/codemirror/resolvableHighlighter';
 import { outputTheme } from './theme';
 
 import type { Plaintext, Resolved, Segment } from '@/types/expressions';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'InlineExpressionEditorOutput',
 	props: {
 		segments: {
diff --git a/packages/editor-ui/src/components/InlineTextEdit.vue b/packages/editor-ui/src/components/InlineTextEdit.vue
index 2876ab25b0214..ec2bd9f975e6f 100644
--- a/packages/editor-ui/src/components/InlineTextEdit.vue
+++ b/packages/editor-ui/src/components/InlineTextEdit.vue
@@ -21,12 +21,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import ExpandableInputEdit from '@/components/ExpandableInput/ExpandableInputEdit.vue';
 import ExpandableInputPreview from '@/components/ExpandableInput/ExpandableInputPreview.vue';
 import { createEventBus } from '@/event-bus';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'InlineTextEdit',
 	components: { ExpandableInputEdit, ExpandableInputPreview },
 	props: ['isEditEnabled', 'value', 'placeholder', 'maxLength', 'previewValue'],
diff --git a/packages/editor-ui/src/components/IntersectionObserver.vue b/packages/editor-ui/src/components/IntersectionObserver.vue
index 7632a95ad95d0..e548ec91f6e3a 100644
--- a/packages/editor-ui/src/components/IntersectionObserver.vue
+++ b/packages/editor-ui/src/components/IntersectionObserver.vue
@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'IntersectionObserver',
 	props: ['threshold', 'enabled'],
 	data() {
diff --git a/packages/editor-ui/src/components/Logo.vue b/packages/editor-ui/src/components/Logo.vue
index e72b9640b6fbf..64eeed691369d 100644
--- a/packages/editor-ui/src/components/Logo.vue
+++ b/packages/editor-ui/src/components/Logo.vue
@@ -5,9 +5,9 @@
 <script lang="ts">
 import { useRootStore } from '@/stores/n8nRootStore';
 import { mapStores } from 'pinia';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	computed: {
 		...mapStores(useRootStore),
 		basePath(): string {
diff --git a/packages/editor-ui/src/components/MainHeader/TabBar.vue b/packages/editor-ui/src/components/MainHeader/TabBar.vue
index dadb9b62c3f81..a15f4e6c23496 100644
--- a/packages/editor-ui/src/components/MainHeader/TabBar.vue
+++ b/packages/editor-ui/src/components/MainHeader/TabBar.vue
@@ -12,13 +12,14 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
-import { ITabBarItem } from '@/Interface';
+import { defineComponent } from 'vue';
+import type { PropType } from 'vue';
+import type { ITabBarItem } from '@/Interface';
 import { MAIN_HEADER_TABS } from '@/constants';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'tab-bar',
 	data() {
 		return {
diff --git a/packages/editor-ui/src/components/Modal.vue b/packages/editor-ui/src/components/Modal.vue
index a37ff05d8ec53..0321d9e0d4a95 100644
--- a/packages/editor-ui/src/components/Modal.vue
+++ b/packages/editor-ui/src/components/Modal.vue
@@ -43,12 +43,13 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent } from 'vue';
+import type { PropType } from 'vue';
 import { useUIStore } from '@/stores/ui';
 import { mapStores } from 'pinia';
-import { EventBus } from '@/event-bus';
+import type { EventBus } from '@/event-bus';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'Modal',
 	props: {
 		name: {
diff --git a/packages/editor-ui/src/components/ModalDrawer.vue b/packages/editor-ui/src/components/ModalDrawer.vue
index 25802cbe64951..f3b864851831f 100644
--- a/packages/editor-ui/src/components/ModalDrawer.vue
+++ b/packages/editor-ui/src/components/ModalDrawer.vue
@@ -21,10 +21,11 @@
 <script lang="ts">
 import { useUIStore } from '@/stores/ui';
 import { mapStores } from 'pinia';
-import Vue, { PropType } from 'vue';
-import { EventBus } from '@/event-bus';
+import { defineComponent } from 'vue';
+import type { PropType } from 'vue';
+import type { EventBus } from '@/event-bus';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'ModalDrawer',
 	props: {
 		name: {
diff --git a/packages/editor-ui/src/components/ModalRoot.vue b/packages/editor-ui/src/components/ModalRoot.vue
index 0696e2b706392..a2bfd81016e6c 100644
--- a/packages/editor-ui/src/components/ModalRoot.vue
+++ b/packages/editor-ui/src/components/ModalRoot.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { useUIStore } from '@/stores/ui';
 import { mapStores } from 'pinia';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'ModalRoot',
 	props: {
 		name: {
diff --git a/packages/editor-ui/src/components/Modals.vue b/packages/editor-ui/src/components/Modals.vue
index f9866042bd54d..3c01907bce00d 100644
--- a/packages/editor-ui/src/components/Modals.vue
+++ b/packages/editor-ui/src/components/Modals.vue
@@ -119,7 +119,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import {
 	ABOUT_MODAL_KEY,
 	CHANGE_PASSWORD_MODAL_KEY,
@@ -171,7 +171,7 @@ import WorkflowShareModal from './WorkflowShareModal.ee.vue';
 import WorkflowSuccessModal from './UserActivationSurveyModal.vue';
 import EventDestinationSettingsModal from '@/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'Modals',
 	components: {
 		AboutModal,
diff --git a/packages/editor-ui/src/components/MultipleParameter.vue b/packages/editor-ui/src/components/MultipleParameter.vue
index 3d8e912d0a8f7..7934cb2ddc2f1 100644
--- a/packages/editor-ui/src/components/MultipleParameter.vue
+++ b/packages/editor-ui/src/components/MultipleParameter.vue
@@ -84,15 +84,16 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
-import { IUpdateInformation } from '@/Interface';
+import { defineComponent } from 'vue';
+import type { PropType } from 'vue';
+import type { IUpdateInformation } from '@/Interface';
 import { deepCopy, INodeParameters, INodeProperties } from 'n8n-workflow';
 import CollectionParameter from '@/components/CollectionParameter.vue';
 import ParameterInputFull from '@/components/ParameterInputFull.vue';
 
 import { get } from 'lodash-es';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'MultipleParameter',
 	components: {
 		CollectionParameter,
diff --git a/packages/editor-ui/src/components/Node/NodeCreation.vue b/packages/editor-ui/src/components/Node/NodeCreation.vue
index edae0d921b58d..5c9c587889ae2 100644
--- a/packages/editor-ui/src/components/Node/NodeCreation.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreation.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { getMidCanvasPosition } from '@/utils/nodeViewUtils';
 import {
 	DEFAULT_STICKY_HEIGHT,
@@ -47,7 +47,7 @@ import {
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'node-creation',
 	components: {
 		NodeCreator: () => import('@/components/Node/NodeCreator/NodeCreator.vue'),
diff --git a/packages/editor-ui/src/components/NodeIcon.vue b/packages/editor-ui/src/components/NodeIcon.vue
index 36c1a2b77e630..71ab7776390fb 100644
--- a/packages/editor-ui/src/components/NodeIcon.vue
+++ b/packages/editor-ui/src/components/NodeIcon.vue
@@ -18,7 +18,7 @@ import { IVersionNode } from '@/Interface';
 import { useRootStore } from '@/stores/n8nRootStore';
 import { INodeTypeDescription } from 'n8n-workflow';
 import { mapStores } from 'pinia';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
 interface NodeIconSource {
 	path?: string;
@@ -26,7 +26,7 @@ interface NodeIconSource {
 	icon?: string;
 }
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'NodeIcon',
 	props: {
 		nodeType: {},
diff --git a/packages/editor-ui/src/components/NodeTitle.vue b/packages/editor-ui/src/components/NodeTitle.vue
index a5a045b6be5e2..8340ae57f0ee6 100644
--- a/packages/editor-ui/src/components/NodeTitle.vue
+++ b/packages/editor-ui/src/components/NodeTitle.vue
@@ -40,9 +40,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'NodeTitle',
 	props: {
 		value: {
diff --git a/packages/editor-ui/src/components/PageContentWrapper.vue b/packages/editor-ui/src/components/PageContentWrapper.vue
index 7a70103c6cb87..38a7917aafdeb 100644
--- a/packages/editor-ui/src/components/PageContentWrapper.vue
+++ b/packages/editor-ui/src/components/PageContentWrapper.vue
@@ -9,9 +9,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'PageContentWrapper',
 });
 </script>
diff --git a/packages/editor-ui/src/components/PanelDragButton.vue b/packages/editor-ui/src/components/PanelDragButton.vue
index 6413ff061e9e1..58acc80d9f09f 100644
--- a/packages/editor-ui/src/components/PanelDragButton.vue
+++ b/packages/editor-ui/src/components/PanelDragButton.vue
@@ -42,10 +42,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import Draggable from './Draggable.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		Draggable,
 	},
diff --git a/packages/editor-ui/src/components/ParameterInputExpanded.vue b/packages/editor-ui/src/components/ParameterInputExpanded.vue
index bba92cbbfde30..248bd9e399bf5 100644
--- a/packages/editor-ui/src/components/ParameterInputExpanded.vue
+++ b/packages/editor-ui/src/components/ParameterInputExpanded.vue
@@ -58,14 +58,15 @@
 <script lang="ts">
 import { IUpdateInformation } from '@/Interface';
 import ParameterOptions from './ParameterOptions.vue';
-import Vue, { PropType } from 'vue';
+import Vue, { defineComponent } from 'vue';
+import type { PropType } from 'vue';
 import ParameterInputWrapper from './ParameterInputWrapper.vue';
 import { isValueExpression } from '@/utils';
 import { INodeParameterResourceLocator, INodeProperties, IParameterLabel } from 'n8n-workflow';
 import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'parameter-input-expanded',
 	components: {
 		ParameterOptions,
diff --git a/packages/editor-ui/src/components/ParameterInputHint.vue b/packages/editor-ui/src/components/ParameterInputHint.vue
index f0a39b4e0a1cd..fbbd176d784c3 100644
--- a/packages/editor-ui/src/components/ParameterInputHint.vue
+++ b/packages/editor-ui/src/components/ParameterInputHint.vue
@@ -17,9 +17,9 @@
 
 <script lang="ts">
 import { sanitizeHtml } from '@/utils';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'InputHint',
 	props: {
 		hint: {
diff --git a/packages/editor-ui/src/components/ParameterIssues.vue b/packages/editor-ui/src/components/ParameterIssues.vue
index 0cf6a7e907b94..96da86f7b771c 100644
--- a/packages/editor-ui/src/components/ParameterIssues.vue
+++ b/packages/editor-ui/src/components/ParameterIssues.vue
@@ -10,10 +10,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import TitledList from '@/components/TitledList.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'ParameterIssues',
 	components: {
 		TitledList,
diff --git a/packages/editor-ui/src/components/ParameterOptions.vue b/packages/editor-ui/src/components/ParameterOptions.vue
index abf0c2e2d0143..72a4fdc15dcea 100644
--- a/packages/editor-ui/src/components/ParameterOptions.vue
+++ b/packages/editor-ui/src/components/ParameterOptions.vue
@@ -25,11 +25,12 @@
 </template>
 
 <script lang="ts">
-import { NodeParameterValueType } from 'n8n-workflow';
-import Vue, { PropType } from 'vue';
+import type { NodeParameterValueType } from 'n8n-workflow';
+import { defineComponent } from 'vue';
+import type { PropType } from 'vue';
 import { isValueExpression, isResourceLocatorValue } from '@/utils';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'parameter-options',
 	props: {
 		parameter: {
diff --git a/packages/editor-ui/src/components/PushConnectionTracker.vue b/packages/editor-ui/src/components/PushConnectionTracker.vue
index a6cebe70e79ac..6be7906d253da 100644
--- a/packages/editor-ui/src/components/PushConnectionTracker.vue
+++ b/packages/editor-ui/src/components/PushConnectionTracker.vue
@@ -18,9 +18,9 @@
 <script lang="ts">
 import { useRootStore } from '@/stores/n8nRootStore';
 import { mapStores } from 'pinia';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'PushConnectionTracker',
 	computed: {
 		...mapStores(useRootStore),
diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
index c26e8cbda8596..fcb05b0409a51 100644
--- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
+++ b/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
@@ -79,12 +79,13 @@
 
 <script lang="ts">
 import { IResourceLocatorResultExpanded } from '@/Interface';
-import Vue, { PropType } from 'vue';
+import { defineComponent } from 'vue';
+import type { PropType } from 'vue';
 
 const SEARCH_BAR_HEIGHT_PX = 40;
 const SCROLL_MARGIN_PX = 10;
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'resource-locator-dropdown',
 	props: {
 		value: {
diff --git a/packages/editor-ui/src/components/RunInfo.vue b/packages/editor-ui/src/components/RunInfo.vue
index b6e779773d666..e6a0003393bd6 100644
--- a/packages/editor-ui/src/components/RunInfo.vue
+++ b/packages/editor-ui/src/components/RunInfo.vue
@@ -14,10 +14,10 @@
 </template>
 
 <script lang="ts">
-import { ITaskData } from 'n8n-workflow';
-import Vue from 'vue';
+import type { ITaskData } from 'n8n-workflow';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		taskData: {}, // ITaskData
 	},
diff --git a/packages/editor-ui/src/components/SaveButton.vue b/packages/editor-ui/src/components/SaveButton.vue
index 81f5f5e4bde27..4d78e8844d9fa 100644
--- a/packages/editor-ui/src/components/SaveButton.vue
+++ b/packages/editor-ui/src/components/SaveButton.vue
@@ -14,9 +14,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'SaveButton',
 	props: {
 		saved: {
diff --git a/packages/editor-ui/src/components/ScopesNotice.vue b/packages/editor-ui/src/components/ScopesNotice.vue
index fbe88e2187483..b7a0ddd0f2c71 100644
--- a/packages/editor-ui/src/components/ScopesNotice.vue
+++ b/packages/editor-ui/src/components/ScopesNotice.vue
@@ -5,9 +5,9 @@
 <script lang="ts">
 import { useCredentialsStore } from '@/stores/credentials';
 import { mapStores } from 'pinia';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'ScopesNotice',
 	props: ['activeCredentialType', 'scopes'],
 	computed: {
diff --git a/packages/editor-ui/src/components/ShortenName.vue b/packages/editor-ui/src/components/ShortenName.vue
index 0d7cf9aa629da..a40b6a7ccfd5f 100644
--- a/packages/editor-ui/src/components/ShortenName.vue
+++ b/packages/editor-ui/src/components/ShortenName.vue
@@ -5,13 +5,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { shorten } from '@/utils';
 
 const DEFAULT_WORKFLOW_NAME_LIMIT = 25;
 const WORKFLOW_NAME_END_COUNT_TO_KEEP = 4;
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'ShortenName',
 	props: ['name', 'limit', 'testId'],
 	computed: {
diff --git a/packages/editor-ui/src/components/TagsContainer.vue b/packages/editor-ui/src/components/TagsContainer.vue
index 7b615dc7c385c..364042820e28a 100644
--- a/packages/editor-ui/src/components/TagsContainer.vue
+++ b/packages/editor-ui/src/components/TagsContainer.vue
@@ -39,7 +39,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import Vue, { defineComponent } from 'vue';
 
 import { ITag } from '@/Interface';
 import IntersectionObserver from './IntersectionObserver.vue';
@@ -56,7 +56,7 @@ interface TagEl extends ITag {
 	isCount?: boolean;
 }
 
-export default Vue.extend({
+export default defineComponent({
 	components: { IntersectionObserver, IntersectionObserved },
 	name: 'TagsContainer',
 	props: ['tagIds', 'limit', 'clickable', 'responsive', 'hoverable'],
diff --git a/packages/editor-ui/src/components/TagsManager/NoTagsView.vue b/packages/editor-ui/src/components/TagsManager/NoTagsView.vue
index ed54497024c3a..e9c64f1bd4b9f 100644
--- a/packages/editor-ui/src/components/TagsManager/NoTagsView.vue
+++ b/packages/editor-ui/src/components/TagsManager/NoTagsView.vue
@@ -16,9 +16,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'NoTagsView',
 });
 </script>
diff --git a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue
index 76af2dd73955f..e3142b5ef97b6 100644
--- a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue
+++ b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue
@@ -109,12 +109,12 @@
 <script lang="ts">
 import { MAX_TAG_NAME_LENGTH } from '@/constants';
 import { ITagRow } from '@/Interface';
-import Vue from 'vue';
+import Vue, { defineComponent } from 'vue';
 
 const INPUT_TRANSITION_TIMEOUT = 350;
 const DELETE_TRANSITION_TIMEOUT = 100;
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'TagsTable',
 	props: ['rows', 'isLoading', 'newName', 'isSaving'],
 	data() {
diff --git a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTableHeader.vue b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTableHeader.vue
index a7079d0232e5e..543fd1b213d3e 100644
--- a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTableHeader.vue
+++ b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTableHeader.vue
@@ -29,9 +29,9 @@
 
 <script lang="ts">
 import { MAX_TAG_NAME_LENGTH } from '@/constants';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		disabled: {
 			default: false,
diff --git a/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue b/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue
index d695ecbed1760..39678020d3460 100644
--- a/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue
+++ b/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue
@@ -23,9 +23,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-import { ITag, ITagRow } from '@/Interface';
+import type { ITag, ITagRow } from '@/Interface';
 import TagsTableHeader from '@/components/TagsManager/TagsView/TagsTableHeader.vue';
 import TagsTable from '@/components/TagsManager/TagsView/TagsTable.vue';
 import { mapStores } from 'pinia';
@@ -34,7 +34,7 @@ import { useUsersStore } from '@/stores/users';
 const matches = (name: string, filter: string) =>
 	name.toLowerCase().trim().includes(filter.toLowerCase().trim());
 
-export default Vue.extend({
+export default defineComponent({
 	components: { TagsTableHeader, TagsTable },
 	name: 'TagsView',
 	props: ['tags', 'isLoading'],
diff --git a/packages/editor-ui/src/components/TemplateDetails.vue b/packages/editor-ui/src/components/TemplateDetails.vue
index 814e8e79783aa..f0a430e36330c 100644
--- a/packages/editor-ui/src/components/TemplateDetails.vue
+++ b/packages/editor-ui/src/components/TemplateDetails.vue
@@ -47,14 +47,16 @@
 	</div>
 </template>
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent } from 'vue';
+import type { PropType } from 'vue';
 import TemplateDetailsBlock from '@/components/TemplateDetailsBlock.vue';
 import NodeIcon from '@/components/NodeIcon.vue';
 import { abbreviateNumber, filterTemplateNodes } from '@/utils';
 import { ITemplatesNode, ITemplatesWorkflow, ITemplatesWorkflowFull } from '@/Interface';
 import { mapStores } from 'pinia';
 import { useTemplatesStore } from '@/stores/templates';
-export default Vue.extend({
+
+export default defineComponent({
 	name: 'TemplateDetails',
 	props: {
 		blockTitle: {
diff --git a/packages/editor-ui/src/components/TemplateDetailsBlock.vue b/packages/editor-ui/src/components/TemplateDetailsBlock.vue
index aa6bf787e2b95..d5651f15cfb54 100644
--- a/packages/editor-ui/src/components/TemplateDetailsBlock.vue
+++ b/packages/editor-ui/src/components/TemplateDetailsBlock.vue
@@ -10,9 +10,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'TemplateDetailsBlock',
 	props: {
 		title: {
diff --git a/packages/editor-ui/src/components/TextEdit.vue b/packages/editor-ui/src/components/TextEdit.vue
index b1ab63592c3a5..c1ebda5687ba2 100644
--- a/packages/editor-ui/src/components/TextEdit.vue
+++ b/packages/editor-ui/src/components/TextEdit.vue
@@ -30,9 +30,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { nextTick, defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'TextEdit',
 	props: ['dialogVisible', 'parameter', 'path', 'value', 'isReadOnly'],
 	data() {
@@ -65,7 +65,7 @@ export default Vue.extend({
 	watch: {
 		dialogVisible() {
 			if (this.dialogVisible === true) {
-				Vue.nextTick(() => {
+				nextTick(() => {
 					(this.$refs.inputField as HTMLInputElement).focus();
 				});
 			}
diff --git a/packages/editor-ui/src/components/TimeAgo.vue b/packages/editor-ui/src/components/TimeAgo.vue
index fd2a9869721c3..d49b6e06e9cee 100644
--- a/packages/editor-ui/src/components/TimeAgo.vue
+++ b/packages/editor-ui/src/components/TimeAgo.vue
@@ -7,11 +7,11 @@
 <script lang="ts">
 import { format, LocaleFunc, register } from 'timeago.js';
 import { convertToHumanReadableDate } from '@/utils';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/n8nRootStore';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'TimeAgo',
 	props: {
 		date: {
diff --git a/packages/editor-ui/src/components/TitledList.vue b/packages/editor-ui/src/components/TitledList.vue
index 64d1d64f3e77a..f15337f055f31 100644
--- a/packages/editor-ui/src/components/TitledList.vue
+++ b/packages/editor-ui/src/components/TitledList.vue
@@ -8,9 +8,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'TitledList',
 	props: {
 		title: {
diff --git a/packages/editor-ui/src/components/UpdatesPanel.vue b/packages/editor-ui/src/components/UpdatesPanel.vue
index 9f0f6ded4f446..f145b9352ccd6 100644
--- a/packages/editor-ui/src/components/UpdatesPanel.vue
+++ b/packages/editor-ui/src/components/UpdatesPanel.vue
@@ -43,7 +43,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
 import ModalDrawer from './ModalDrawer.vue';
 import TimeAgo from './TimeAgo.vue';
@@ -53,7 +53,7 @@ import { mapStores } from 'pinia';
 import { useVersionsStore } from '@/stores/versions';
 import { IVersion } from '@/Interface';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'UpdatesPanel',
 	components: {
 		ModalDrawer,
diff --git a/packages/editor-ui/src/components/VersionCard.vue b/packages/editor-ui/src/components/VersionCard.vue
index d3e52bc91fcab..c145be50db2ed 100644
--- a/packages/editor-ui/src/components/VersionCard.vue
+++ b/packages/editor-ui/src/components/VersionCard.vue
@@ -55,7 +55,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import Vue, { defineComponent } from 'vue';
 import NodeIcon from './NodeIcon.vue';
 import TimeAgo from './TimeAgo.vue';
 import Badge from './Badge.vue';
@@ -67,7 +67,7 @@ Vue.component('TimeAgo', TimeAgo);
 Vue.component('Badge', Badge);
 Vue.component('WarningTooltip', WarningTooltip);
 
-export default Vue.extend({
+export default defineComponent({
 	components: { NodeIcon, TimeAgo, Badge, WarningTooltip },
 	name: 'VersionCard',
 	props: ['version'],
diff --git a/packages/editor-ui/src/components/__tests__/ExecutionsList.test.ts b/packages/editor-ui/src/components/__tests__/ExecutionsList.test.ts
index 10faa739409bc..3eea1564f9021 100644
--- a/packages/editor-ui/src/components/__tests__/ExecutionsList.test.ts
+++ b/packages/editor-ui/src/components/__tests__/ExecutionsList.test.ts
@@ -1,5 +1,5 @@
 import { vi, describe, it, expect } from 'vitest';
-import Vue from 'vue';
+import Vue, { defineComponent } from 'vue';
 import { PiniaVuePlugin } from 'pinia';
 import { createTestingPinia } from '@pinia/testing';
 import { render } from '@testing-library/vue';
@@ -47,7 +47,7 @@ const executionsData = Array.from({ length: 2 }, () => ({
 
 let getPastExecutionsSpy = vi.fn().mockResolvedValue({ count: 0, results: [], estimated: false });
 
-const mockRestApiMixin = Vue.extend({
+const mockRestApiMixin = defineComponent({
 	methods: {
 		restApi() {
 			return {
diff --git a/packages/editor-ui/src/components/forms/CodeEditor.vue b/packages/editor-ui/src/components/forms/CodeEditor.vue
index bd105f3809998..3145452786428 100644
--- a/packages/editor-ui/src/components/forms/CodeEditor.vue
+++ b/packages/editor-ui/src/components/forms/CodeEditor.vue
@@ -3,10 +3,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import * as monaco from 'monaco-editor';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		type: {
 			type: String,
diff --git a/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue b/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue
index be77568a94209..0aa5f6b35535f 100644
--- a/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue
+++ b/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue
@@ -63,15 +63,16 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent } from 'vue';
 import { EnterpriseEditionFeature } from '@/constants';
-import { IUser } from '@/Interface';
 import { mapStores } from 'pinia';
 import { useUsersStore } from '@/stores/users';
+import type { PropType } from 'vue';
+import type { IUser } from '@/Interface';
 
 export type IResourceFiltersType = Record<string, boolean | string | string[]>;
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			type: Object as PropType<IResourceFiltersType>,
diff --git a/packages/editor-ui/src/components/forms/ResourceOwnershipSelect.ee.vue b/packages/editor-ui/src/components/forms/ResourceOwnershipSelect.ee.vue
index 8f68a890a318d..c23117f6fd894 100644
--- a/packages/editor-ui/src/components/forms/ResourceOwnershipSelect.ee.vue
+++ b/packages/editor-ui/src/components/forms/ResourceOwnershipSelect.ee.vue
@@ -8,10 +8,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { IMenuItem } from 'n8n-design-system';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			type: Boolean,
diff --git a/packages/editor-ui/src/components/layouts/PageViewLayout.vue b/packages/editor-ui/src/components/layouts/PageViewLayout.vue
index bc670f2b51222..f3340c5983728 100644
--- a/packages/editor-ui/src/components/layouts/PageViewLayout.vue
+++ b/packages/editor-ui/src/components/layouts/PageViewLayout.vue
@@ -14,9 +14,9 @@
 <script lang="ts">
 import { useUIStore } from '@/stores/ui';
 import { mapStores } from 'pinia';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'PageViewLayout',
 	data() {
 		return {
diff --git a/packages/editor-ui/src/components/transitions/SlideTransition.vue b/packages/editor-ui/src/components/transitions/SlideTransition.vue
index e4fa497a20f54..bb5227eb869fc 100644
--- a/packages/editor-ui/src/components/transitions/SlideTransition.vue
+++ b/packages/editor-ui/src/components/transitions/SlideTransition.vue
@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'SlideTransition',
 });
 </script>
diff --git a/packages/editor-ui/src/mixins/copyPaste.ts b/packages/editor-ui/src/mixins/copyPaste.ts
index eee52394d99ac..49c4ae830d233 100644
--- a/packages/editor-ui/src/mixins/copyPaste.ts
+++ b/packages/editor-ui/src/mixins/copyPaste.ts
@@ -2,10 +2,10 @@
  * Captures any pasted data and sends it to method "receivedCopyPasteData" which has to be
  * defined on the component which uses this mixin
  */
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { debounce } from 'lodash-es';
 
-export const copyPaste = Vue.extend({
+export const copyPaste = defineComponent({
 	data() {
 		return {
 			copyPasteElementsGotCreated: false,
diff --git a/packages/editor-ui/src/mixins/debounce.ts b/packages/editor-ui/src/mixins/debounce.ts
index 7c491780aaf3d..217db45d7a66e 100644
--- a/packages/editor-ui/src/mixins/debounce.ts
+++ b/packages/editor-ui/src/mixins/debounce.ts
@@ -1,7 +1,7 @@
 import { debounce } from 'lodash-es';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export const debounceHelper = Vue.extend({
+export const debounceHelper = defineComponent({
 	data() {
 		return {
 			debouncedFunctions: [] as any[],
diff --git a/packages/editor-ui/src/mixins/deviceSupportHelpers.ts b/packages/editor-ui/src/mixins/deviceSupportHelpers.ts
index 6b316bf87d8f1..a8f87f8820aee 100644
--- a/packages/editor-ui/src/mixins/deviceSupportHelpers.ts
+++ b/packages/editor-ui/src/mixins/deviceSupportHelpers.ts
@@ -1,6 +1,6 @@
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export const deviceSupportHelpers = Vue.extend({
+export const deviceSupportHelpers = defineComponent({
 	data() {
 		return {
 			// @ts-ignore msMaxTouchPoints is deprecated but must fix tablet bugs before fixing this.. otherwise breaks touchscreen computers
diff --git a/packages/editor-ui/src/mixins/emitter.ts b/packages/editor-ui/src/mixins/emitter.ts
index ab645d6e10c9a..75579f7094331 100644
--- a/packages/editor-ui/src/mixins/emitter.ts
+++ b/packages/editor-ui/src/mixins/emitter.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import Vue from 'vue';
+import Vue, { defineComponent } from 'vue';
 
 function broadcast(componentName: string, eventName: string, params: any) {
 	// @ts-ignore
@@ -17,7 +17,7 @@ function broadcast(componentName: string, eventName: string, params: any) {
 	});
 }
 
-export default Vue.extend({
+export default defineComponent({
 	methods: {
 		$dispatch(componentName: string, eventName: string, params: any) {
 			let parent = this.$parent || this.$root;
diff --git a/packages/editor-ui/src/mixins/externalHooks.ts b/packages/editor-ui/src/mixins/externalHooks.ts
index 5a336ae125ac8..07e6c2ba5cb92 100644
--- a/packages/editor-ui/src/mixins/externalHooks.ts
+++ b/packages/editor-ui/src/mixins/externalHooks.ts
@@ -2,7 +2,7 @@ import { IExternalHooks } from '@/Interface';
 import { useWebhooksStore } from '@/stores/webhooks';
 import { IDataObject } from 'n8n-workflow';
 import { Store } from 'pinia';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
 declare global {
 	interface Window {
@@ -29,7 +29,7 @@ export async function runExternalHook(eventName: string, store: Store, metadata?
 	}
 }
 
-export const externalHooks = Vue.extend({
+export const externalHooks = defineComponent({
 	methods: {
 		$externalHooks(): IExternalHooks {
 			return {
diff --git a/packages/editor-ui/src/mixins/restApi.ts b/packages/editor-ui/src/mixins/restApi.ts
index f14d197815cc4..7663eb1a7b204 100644
--- a/packages/editor-ui/src/mixins/restApi.ts
+++ b/packages/editor-ui/src/mixins/restApi.ts
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { parse } from 'flatted';
 
 import { Method } from 'axios';
@@ -55,7 +55,7 @@ function unflattenExecutionData(fullExecutionData: IExecutionFlattedResponse): I
 	return returnData;
 }
 
-export const restApi = Vue.extend({
+export const restApi = defineComponent({
 	computed: {
 		...mapStores(useRootStore),
 	},
diff --git a/packages/editor-ui/src/mixins/titleChange.ts b/packages/editor-ui/src/mixins/titleChange.ts
index 63cde777c44e3..450882ac26234 100644
--- a/packages/editor-ui/src/mixins/titleChange.ts
+++ b/packages/editor-ui/src/mixins/titleChange.ts
@@ -1,8 +1,8 @@
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
 import { WorkflowTitleStatus } from '@/Interface';
 
-export const titleChange = Vue.extend({
+export const titleChange = defineComponent({
 	methods: {
 		/**
 		 * Change title of n8n tab
diff --git a/packages/editor-ui/src/mixins/userHelpers.ts b/packages/editor-ui/src/mixins/userHelpers.ts
index 8ac4d45e0341f..ecf4bd6d9da8a 100644
--- a/packages/editor-ui/src/mixins/userHelpers.ts
+++ b/packages/editor-ui/src/mixins/userHelpers.ts
@@ -1,10 +1,10 @@
-import { IPermissions, IUser } from '@/Interface';
+import type { IPermissions } from '@/Interface';
 import { isAuthorized } from '@/utils';
 import { useUsersStore } from '@/stores/users';
-import Vue from 'vue';
-import { Route } from 'vue-router';
+import { defineComponent } from 'vue';
+import type { Route } from 'vue-router';
 
-export const userHelpers = Vue.extend({
+export const userHelpers = defineComponent({
 	methods: {
 		canUserAccessRouteByName(name: string): boolean {
 			const { route } = this.$router.resolve({ name });
diff --git a/packages/editor-ui/src/views/AuthView.vue b/packages/editor-ui/src/views/AuthView.vue
index 611090cbd4cba..7a3fa27ac7f7d 100644
--- a/packages/editor-ui/src/views/AuthView.vue
+++ b/packages/editor-ui/src/views/AuthView.vue
@@ -22,12 +22,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
 import Logo from '@/components/Logo.vue';
 import SSOLogin from '@/components/SSOLogin.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'AuthView',
 	components: {
 		Logo,
diff --git a/packages/editor-ui/src/views/ErrorView.vue b/packages/editor-ui/src/views/ErrorView.vue
index 6da6cab01a395..80a337d73ab86 100644
--- a/packages/editor-ui/src/views/ErrorView.vue
+++ b/packages/editor-ui/src/views/ErrorView.vue
@@ -18,9 +18,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'ErrorView',
 	props: {
 		messageKey: {
diff --git a/packages/editor-ui/src/views/ExecutionsView.vue b/packages/editor-ui/src/views/ExecutionsView.vue
index 21bea4def6679..4530be2933e23 100644
--- a/packages/editor-ui/src/views/ExecutionsView.vue
+++ b/packages/editor-ui/src/views/ExecutionsView.vue
@@ -3,10 +3,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import ExecutionsList from '@/components/ExecutionsList.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'ExecutionsView',
 	components: {
 		ExecutionsList,
diff --git a/packages/editor-ui/src/views/SettingsFakeDoorView.vue b/packages/editor-ui/src/views/SettingsFakeDoorView.vue
index 2df26ff258d3a..b7da2f8c9db2e 100644
--- a/packages/editor-ui/src/views/SettingsFakeDoorView.vue
+++ b/packages/editor-ui/src/views/SettingsFakeDoorView.vue
@@ -4,12 +4,12 @@
 
 <script lang="ts">
 import { IFakeDoor } from '@/Interface';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import FeatureComingSoon from '@/components/FeatureComingSoon.vue';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'SettingsFakeDoorView',
 	components: {
 		FeatureComingSoon,
diff --git a/packages/editor-ui/src/views/TemplatesView.vue b/packages/editor-ui/src/views/TemplatesView.vue
index 9a7f5323124e7..2b5d8a48b14de 100644
--- a/packages/editor-ui/src/views/TemplatesView.vue
+++ b/packages/editor-ui/src/views/TemplatesView.vue
@@ -15,10 +15,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import GoBackButton from '@/components/GoBackButton.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'TemplatesView',
 	components: {
 		GoBackButton,

From 82821d779b4793e1af59355882522446f035ae6b Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Thu, 20 Apr 2023 19:58:59 +0300
Subject: [PATCH 2/3] fix: change $externalHooks extractions from mixins

---
 .../src/components/Node/NodeCreator/CategorizedItems.vue        | 2 +-
 .../editor-ui/src/components/Node/NodeCreator/MainPanel.vue     | 2 +-
 .../editor-ui/src/components/Node/NodeCreator/SearchBar.vue     | 2 +-
 packages/editor-ui/src/stores/nodeCreator.ts                    | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue b/packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue
index 06dd3245d8e9e..4051c42e52728 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue
@@ -148,7 +148,7 @@ const emit = defineEmits<{
 }>();
 
 const instance = getCurrentInstance();
-const { $externalHooks } = new externalHooks();
+const { $externalHooks } = externalHooks.methods;
 
 const { defaultLocale } = useRootStore();
 const { workflowId } = useWorkflowsStore();
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/MainPanel.vue b/packages/editor-ui/src/components/Node/NodeCreator/MainPanel.vue
index 1947318e37b81..4a661608ef693 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/MainPanel.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/MainPanel.vue
@@ -124,7 +124,7 @@ const state = reactive({
 	activeNodeActions: null as INodeTypeDescription | null,
 });
 const { baseUrl } = useRootStore();
-const { $externalHooks } = new externalHooks();
+const { $externalHooks } = externalHooks.methods;
 const {
 	mergedAppNodes,
 	getActionData,
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/SearchBar.vue b/packages/editor-ui/src/components/Node/NodeCreator/SearchBar.vue
index 596b14e3fc7a0..4c6661bbc8fab 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/SearchBar.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/SearchBar.vue
@@ -43,7 +43,7 @@ const emit = defineEmits<{
 	(event: 'input', value: string): void;
 }>();
 
-const { $externalHooks } = new externalHooks();
+const { $externalHooks } = externalHooks.methods;
 
 const state = reactive({
 	inputRef: null as HTMLInputElement | null,
diff --git a/packages/editor-ui/src/stores/nodeCreator.ts b/packages/editor-ui/src/stores/nodeCreator.ts
index 49bf4e0a587dd..35a6caca431e4 100644
--- a/packages/editor-ui/src/stores/nodeCreator.ts
+++ b/packages/editor-ui/src/stores/nodeCreator.ts
@@ -286,7 +286,7 @@ export const useNodeCreatorStore = defineStore(STORES.NODE_CREATOR, {
 			return storeWatcher;
 		},
 		trackActionSelected(action: IUpdateInformation, telemetry?: Telemetry) {
-			const { $externalHooks } = new externalHooks();
+			const { $externalHooks } = externalHooks.methods;
 
 			const payload = {
 				node_type: action.key,

From 7ef2510eb5b284005c29f0f093da85e422097192 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Fri, 21 Apr 2023 16:23:03 +0300
Subject: [PATCH 3/3] fix: refactor externalHooks mixin

---
 packages/editor-ui/src/__tests__/utils.ts     |  8 +++++
 .../Node/NodeCreator/CategorizedItems.vue     |  8 ++---
 .../components/Node/NodeCreator/MainPanel.vue |  9 +++---
 .../components/Node/NodeCreator/SearchBar.vue |  6 ++--
 .../src/components/RunDataSchema.vue          |  3 +-
 .../components/__tests__/VariablesRow.spec.ts | 19 ++++++++----
 .../src/composables/useExternalHooks.ts       |  8 ++---
 packages/editor-ui/src/main.ts                |  6 ++--
 .../editor-ui/src/mixins/externalHooks.ts     | 31 ++-----------------
 packages/editor-ui/src/shims.d.ts             |  6 ++++
 packages/editor-ui/src/stores/nodeCreator.ts  | 11 +++----
 packages/editor-ui/src/utils/externalHooks.ts | 18 +++++++++++
 packages/editor-ui/src/utils/index.ts         |  1 +
 .../src/views/__tests__/VariablesView.spec.ts | 11 ++++---
 14 files changed, 80 insertions(+), 65 deletions(-)
 create mode 100644 packages/editor-ui/src/utils/externalHooks.ts

diff --git a/packages/editor-ui/src/__tests__/utils.ts b/packages/editor-ui/src/__tests__/utils.ts
index 8e0cacf179bc8..9f9a7afb53059 100644
--- a/packages/editor-ui/src/__tests__/utils.ts
+++ b/packages/editor-ui/src/__tests__/utils.ts
@@ -1,4 +1,6 @@
 import { ISettingsState, UserManagementAuthenticationMethod } from '@/Interface';
+import { render } from '@testing-library/vue';
+import { PiniaVuePlugin } from 'pinia';
 
 export const retry = (assertion: () => any, { interval = 20, timeout = 200 } = {}) => {
 	return new Promise((resolve, reject) => {
@@ -18,6 +20,12 @@ export const retry = (assertion: () => any, { interval = 20, timeout = 200 } = {
 	});
 };
 
+type RenderParams = Parameters<typeof render>;
+export const renderComponent = (Component: RenderParams[0], renderOptions: RenderParams[1] = {}) =>
+	render(Component, renderOptions, (vue) => {
+		vue.use(PiniaVuePlugin);
+	});
+
 export const waitAllPromises = () => new Promise((resolve) => setTimeout(resolve));
 
 export const SETTINGS_STORE_DEFAULT_STATE: ISettingsState = {
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue b/packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue
index 4051c42e52728..489834064ab7e 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue
@@ -96,7 +96,6 @@ import {
 	nextTick,
 } from 'vue';
 import { camelCase } from 'lodash-es';
-import { externalHooks } from '@/mixins/externalHooks';
 import { INodeTypeDescription } from 'n8n-workflow';
 import ItemIterator from './ItemIterator.vue';
 import SearchBar from './SearchBar.vue';
@@ -114,6 +113,7 @@ import { sublimeSearch, matchesNodeType, matchesSelectType } from '@/utils';
 import { useWorkflowsStore } from '@/stores/workflows';
 import { useRootStore } from '@/stores/n8nRootStore';
 import { useNodeCreatorStore } from '@/stores/nodeCreator';
+import { useExternalHooks } from '@/composables';
 
 export interface Props {
 	showSubcategoryIcon?: boolean;
@@ -148,7 +148,7 @@ const emit = defineEmits<{
 }>();
 
 const instance = getCurrentInstance();
-const { $externalHooks } = externalHooks.methods;
+const externalHooks = useExternalHooks();
 
 const { defaultLocale } = useRootStore();
 const { workflowId } = useWorkflowsStore();
@@ -549,7 +549,7 @@ onUnmounted(() => {
 });
 
 watch(filteredNodeTypes, (returnItems) => {
-	$externalHooks().run('nodeCreateList.filteredNodeTypesComputed', {
+	externalHooks.run('nodeCreateList.filteredNodeTypesComputed', {
 		nodeFilter: nodeCreatorStore.itemsFilter,
 		result: returnItems,
 		selectedType: nodeCreatorStore.selectedView,
@@ -569,7 +569,7 @@ watch(
 		// Reset the index whenver the filter-value changes
 		state.activeIndex = 0;
 		state.activeSubcategoryIndex = 0;
-		$externalHooks().run('nodeCreateList.nodeFilterChanged', {
+		externalHooks.run('nodeCreateList.nodeFilterChanged', {
 			oldValue,
 			newValue,
 			selectedType: nodeCreatorStore.selectedView,
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/MainPanel.vue b/packages/editor-ui/src/components/Node/NodeCreator/MainPanel.vue
index 4a661608ef693..1837528ba94e9 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/MainPanel.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/MainPanel.vue
@@ -105,12 +105,12 @@ import {
 import CategorizedItems from './CategorizedItems.vue';
 import { useNodeCreatorStore } from '@/stores/nodeCreator';
 import { getCategoriesWithNodes, getCategorizedList } from '@/utils';
-import { externalHooks } from '@/mixins/externalHooks';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
 import { BaseTextKey } from '@/plugins/i18n';
 import NoResults from './NoResults.vue';
 import { useRootStore } from '@/stores/n8nRootStore';
 import useMainPanelView from './useMainPanelView';
+import { useExternalHooks } from '@/composables';
 
 const instance = getCurrentInstance();
 
@@ -124,7 +124,8 @@ const state = reactive({
 	activeNodeActions: null as INodeTypeDescription | null,
 });
 const { baseUrl } = useRootStore();
-const { $externalHooks } = externalHooks.methods;
+const externalHooks = useExternalHooks();
+
 const {
 	mergedAppNodes,
 	getActionData,
@@ -324,7 +325,7 @@ function addHttpNode(isAction: boolean) {
 		setAddedNodeActionParameters(updateData, telemetry, false);
 
 		const app_identifier = state.activeNodeActions?.name;
-		$externalHooks().run('nodeCreateList.onActionsCustmAPIClicked', { app_identifier });
+		externalHooks.run('nodeCreateList.onActionsCustmAPIClicked', { app_identifier });
 		telemetry?.trackNodesPanel('nodeCreateList.onActionsCustmAPIClicked', { app_identifier });
 	}
 }
@@ -362,7 +363,7 @@ function trackActionsView() {
 		trigger_action_count,
 	};
 
-	$externalHooks().run('nodeCreateList.onViewActions', trackingPayload);
+	externalHooks.run('nodeCreateList.onViewActions', trackingPayload);
 	telemetry?.trackNodesPanel('nodeCreateList.onViewActions', trackingPayload);
 }
 
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/SearchBar.vue b/packages/editor-ui/src/components/Node/NodeCreator/SearchBar.vue
index 4c6661bbc8fab..97f19c9d13a14 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/SearchBar.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/SearchBar.vue
@@ -25,8 +25,8 @@
 
 <script setup lang="ts">
 import { onMounted, reactive, toRefs, onBeforeUnmount } from 'vue';
-import { externalHooks } from '@/mixins/externalHooks';
 import { EventBus } from '@/event-bus';
+import { useExternalHooks } from '@/composables';
 
 export interface Props {
 	placeholder: string;
@@ -43,7 +43,7 @@ const emit = defineEmits<{
 	(event: 'input', value: string): void;
 }>();
 
-const { $externalHooks } = externalHooks.methods;
+const externalHooks = useExternalHooks();
 
 const state = reactive({
 	inputRef: null as HTMLInputElement | null,
@@ -63,7 +63,7 @@ function clear() {
 }
 
 onMounted(() => {
-	$externalHooks().run('nodeCreator_searchBar.mount', { inputRef: state.inputRef });
+	externalHooks.run('nodeCreator_searchBar.mount', { inputRef: state.inputRef });
 	setTimeout(focus, 0);
 });
 
diff --git a/packages/editor-ui/src/components/RunDataSchema.vue b/packages/editor-ui/src/components/RunDataSchema.vue
index 086b9b0bff91f..fd8afc8d96587 100644
--- a/packages/editor-ui/src/components/RunDataSchema.vue
+++ b/packages/editor-ui/src/components/RunDataSchema.vue
@@ -6,10 +6,9 @@ import RunDataSchemaItem from '@/components/RunDataSchemaItem.vue';
 import Draggable from '@/components/Draggable.vue';
 import { useNDVStore } from '@/stores/ndv';
 import { useWebhooksStore } from '@/stores/webhooks';
-import { runExternalHook } from '@/mixins/externalHooks';
 import { telemetry } from '@/plugins/telemetry';
 import { IDataObject } from 'n8n-workflow';
-import { getSchema, isEmpty } from '@/utils';
+import { getSchema, isEmpty, runExternalHook } from '@/utils';
 import { i18n } from '@/plugins/i18n';
 import MappingPill from './MappingPill.vue';
 
diff --git a/packages/editor-ui/src/components/__tests__/VariablesRow.spec.ts b/packages/editor-ui/src/components/__tests__/VariablesRow.spec.ts
index ac87e260b0eed..c368370915db8 100644
--- a/packages/editor-ui/src/components/__tests__/VariablesRow.spec.ts
+++ b/packages/editor-ui/src/components/__tests__/VariablesRow.spec.ts
@@ -1,20 +1,23 @@
 import VariablesRow from '../VariablesRow.vue';
 import { EnvironmentVariable } from '@/Interface';
-import { fireEvent, render } from '@testing-library/vue';
+import { fireEvent } from '@testing-library/vue';
 import { createPinia, setActivePinia } from 'pinia';
 import { setupServer } from '@/__tests__/server';
 import { afterAll, beforeAll } from 'vitest';
 import { useSettingsStore, useUsersStore } from '@/stores';
+import { renderComponent } from '@/__tests__/utils';
 
 describe('VariablesRow', () => {
 	let server: ReturnType<typeof setupServer>;
+	let pinia: ReturnType<typeof createPinia>;
 
 	beforeAll(() => {
 		server = setupServer();
 	});
 
 	beforeEach(async () => {
-		setActivePinia(createPinia());
+		pinia = createPinia();
+		setActivePinia(pinia);
 
 		await useSettingsStore().getSettings();
 		await useUsersStore().loginWithCookie();
@@ -33,11 +36,12 @@ describe('VariablesRow', () => {
 	};
 
 	it('should render correctly', () => {
-		const wrapper = render(VariablesRow, {
+		const wrapper = renderComponent(VariablesRow, {
 			props: {
 				data: environmentVariable,
 			},
 			stubs,
+			pinia,
 		});
 
 		expect(wrapper.html()).toMatchSnapshot();
@@ -45,11 +49,12 @@ describe('VariablesRow', () => {
 	});
 
 	it('should show edit and delete buttons on hover', async () => {
-		const wrapper = render(VariablesRow, {
+		const wrapper = renderComponent(VariablesRow, {
 			props: {
 				data: environmentVariable,
 			},
 			stubs,
+			pinia,
 		});
 
 		await fireEvent.mouseEnter(wrapper.container);
@@ -59,12 +64,13 @@ describe('VariablesRow', () => {
 	});
 
 	it('should show key and value inputs in edit mode', async () => {
-		const wrapper = render(VariablesRow, {
+		const wrapper = renderComponent(VariablesRow, {
 			props: {
 				data: environmentVariable,
 				editing: true,
 			},
 			stubs,
+			pinia,
 		});
 
 		await fireEvent.mouseEnter(wrapper.container);
@@ -82,12 +88,13 @@ describe('VariablesRow', () => {
 	});
 
 	it('should show cancel and save buttons in edit mode', async () => {
-		const wrapper = render(VariablesRow, {
+		const wrapper = renderComponent(VariablesRow, {
 			props: {
 				data: environmentVariable,
 				editing: true,
 			},
 			stubs,
+			pinia,
 		});
 
 		await fireEvent.mouseEnter(wrapper.container);
diff --git a/packages/editor-ui/src/composables/useExternalHooks.ts b/packages/editor-ui/src/composables/useExternalHooks.ts
index ff3e3ab48123c..cd9b1049b5060 100644
--- a/packages/editor-ui/src/composables/useExternalHooks.ts
+++ b/packages/editor-ui/src/composables/useExternalHooks.ts
@@ -1,12 +1,12 @@
-import { IExternalHooks } from '@/Interface';
-import { IDataObject } from 'n8n-workflow';
+import type { IExternalHooks } from '@/Interface';
+import type { IDataObject } from 'n8n-workflow';
 import { useWebhooksStore } from '@/stores';
-import { runExternalHook } from '@/mixins/externalHooks';
+import { runExternalHook } from '@/utils';
 
 export function useExternalHooks(): IExternalHooks {
 	return {
 		async run(eventName: string, metadata?: IDataObject): Promise<void> {
-			return await runExternalHook.call(this, eventName, useWebhooksStore(), metadata);
+			return await runExternalHook(eventName, useWebhooksStore(), metadata);
 		},
 	};
 }
diff --git a/packages/editor-ui/src/main.ts b/packages/editor-ui/src/main.ts
index b95beda7f2876..c25f6cc79d1f6 100644
--- a/packages/editor-ui/src/main.ts
+++ b/packages/editor-ui/src/main.ts
@@ -19,16 +19,14 @@ import '@fontsource/open-sans/latin-700.css';
 import App from '@/App.vue';
 import router from './router';
 
-import { runExternalHook } from '@/mixins/externalHooks';
+import { runExternalHook } from '@/utils';
 import { TelemetryPlugin } from './plugins/telemetry';
 import { I18nPlugin, i18nInstance } from './plugins/i18n';
 
 import { createPinia, PiniaVuePlugin } from 'pinia';
 
-import { useWebhooksStore } from './stores/webhooks';
-import { useUsersStore } from './stores/users';
+import { useWebhooksStore, useUsersStore } from '@/stores';
 import { VIEWS } from '@/constants';
-import { useUIStore } from './stores/ui';
 
 Vue.config.productionTip = false;
 
diff --git a/packages/editor-ui/src/mixins/externalHooks.ts b/packages/editor-ui/src/mixins/externalHooks.ts
index 07e6c2ba5cb92..09b180b039641 100644
--- a/packages/editor-ui/src/mixins/externalHooks.ts
+++ b/packages/editor-ui/src/mixins/externalHooks.ts
@@ -1,33 +1,8 @@
-import { IExternalHooks } from '@/Interface';
+import type { IExternalHooks } from '@/Interface';
+import type { IDataObject } from 'n8n-workflow';
 import { useWebhooksStore } from '@/stores/webhooks';
-import { IDataObject } from 'n8n-workflow';
-import { Store } from 'pinia';
 import { defineComponent } from 'vue';
-
-declare global {
-	interface Window {
-		n8nExternalHooks?: Record<
-			string,
-			Record<string, Array<(store: Store, metadata?: IDataObject) => Promise<void>>>
-		>;
-	}
-}
-
-export async function runExternalHook(eventName: string, store: Store, metadata?: IDataObject) {
-	if (!window.n8nExternalHooks) {
-		return;
-	}
-
-	const [resource, operator] = eventName.split('.');
-
-	if (window.n8nExternalHooks[resource]?.[operator]) {
-		const hookMethods = window.n8nExternalHooks[resource][operator];
-
-		for (const hookMethod of hookMethods) {
-			await hookMethod(store, metadata);
-		}
-	}
-}
+import { runExternalHook } from '@/utils';
 
 export const externalHooks = defineComponent({
 	methods: {
diff --git a/packages/editor-ui/src/shims.d.ts b/packages/editor-ui/src/shims.d.ts
index c231305c43c1c..fc95a6f17da9c 100644
--- a/packages/editor-ui/src/shims.d.ts
+++ b/packages/editor-ui/src/shims.d.ts
@@ -1,4 +1,6 @@
 import Vue, { VNode } from 'vue';
+import type { Store } from 'pinia';
+import type { IDataObject } from 'n8n-workflow';
 
 declare module 'markdown-it-link-attributes';
 declare module 'markdown-it-emoji';
@@ -17,6 +19,10 @@ declare global {
 	interface Window {
 		BASE_PATH: string;
 		REST_ENDPOINT: string;
+		n8nExternalHooks?: Record<
+			string,
+			Record<string, Array<(store: Store, metadata?: IDataObject) => Promise<void>>>
+		>;
 	}
 
 	namespace JSX {
diff --git a/packages/editor-ui/src/stores/nodeCreator.ts b/packages/editor-ui/src/stores/nodeCreator.ts
index 35a6caca431e4..f3709cd5e1d35 100644
--- a/packages/editor-ui/src/stores/nodeCreator.ts
+++ b/packages/editor-ui/src/stores/nodeCreator.ts
@@ -20,11 +20,12 @@ import {
 } from '@/constants';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
 import { useWorkflowsStore } from './workflows';
-import { CUSTOM_API_CALL_KEY, ALL_NODE_FILTER } from '@/constants';
+import { CUSTOM_API_CALL_KEY } from '@/constants';
 import { INodeCreatorState, INodeFilterType, IUpdateInformation } from '@/Interface';
-import { BaseTextKey, i18n } from '@/plugins/i18n';
-import { externalHooks } from '@/mixins/externalHooks';
+import { i18n } from '@/plugins/i18n';
 import { Telemetry } from '@/plugins/telemetry';
+import { runExternalHook } from '@/utils';
+import { useWebhooksStore } from '@/stores/webhooks';
 
 const PLACEHOLDER_RECOMMENDED_ACTION_KEY = 'placeholder_recommended';
 
@@ -286,14 +287,12 @@ export const useNodeCreatorStore = defineStore(STORES.NODE_CREATOR, {
 			return storeWatcher;
 		},
 		trackActionSelected(action: IUpdateInformation, telemetry?: Telemetry) {
-			const { $externalHooks } = externalHooks.methods;
-
 			const payload = {
 				node_type: action.key,
 				action: action.name,
 				resource: (action.value as INodeParameters).resource || '',
 			};
-			$externalHooks().run('nodeCreateList.addAction', payload);
+			runExternalHook('nodeCreateList.addAction', useWebhooksStore(), payload);
 			telemetry?.trackNodesPanel('nodeCreateList.addAction', payload);
 		},
 	},
diff --git a/packages/editor-ui/src/utils/externalHooks.ts b/packages/editor-ui/src/utils/externalHooks.ts
new file mode 100644
index 0000000000000..2cb48bc76988d
--- /dev/null
+++ b/packages/editor-ui/src/utils/externalHooks.ts
@@ -0,0 +1,18 @@
+import type { IDataObject } from 'n8n-workflow';
+import type { Store } from 'pinia';
+
+export async function runExternalHook(eventName: string, store: Store, metadata?: IDataObject) {
+	if (!window.n8nExternalHooks) {
+		return;
+	}
+
+	const [resource, operator] = eventName.split('.');
+
+	if (window.n8nExternalHooks[resource]?.[operator]) {
+		const hookMethods = window.n8nExternalHooks[resource][operator];
+
+		for (const hookMethod of hookMethods) {
+			await hookMethod(store, metadata);
+		}
+	}
+}
diff --git a/packages/editor-ui/src/utils/index.ts b/packages/editor-ui/src/utils/index.ts
index 8cb8b0281681a..f5b1bdb5c1ad6 100644
--- a/packages/editor-ui/src/utils/index.ts
+++ b/packages/editor-ui/src/utils/index.ts
@@ -1,5 +1,6 @@
 export * from './apiUtils';
 export * from './canvasUtils';
+export * from './externalHooks';
 export * from './htmlUtils';
 export * from './nodeTypesUtils';
 export * from './sortUtils';
diff --git a/packages/editor-ui/src/views/__tests__/VariablesView.spec.ts b/packages/editor-ui/src/views/__tests__/VariablesView.spec.ts
index d69c98d40eb72..34ecee0a79590 100644
--- a/packages/editor-ui/src/views/__tests__/VariablesView.spec.ts
+++ b/packages/editor-ui/src/views/__tests__/VariablesView.spec.ts
@@ -4,16 +4,19 @@ import { setupServer } from '@/__tests__/server';
 import { render } from '@testing-library/vue';
 import VariablesView from '@/views/VariablesView.vue';
 import { useSettingsStore, useUsersStore } from '@/stores';
+import { renderComponent } from '@/__tests__/utils';
 
 describe('store', () => {
 	let server: ReturnType<typeof setupServer>;
+	let pinia: ReturnType<typeof createPinia>;
 
 	beforeAll(() => {
 		server = setupServer();
 	});
 
 	beforeEach(async () => {
-		setActivePinia(createPinia());
+		pinia = createPinia();
+		setActivePinia(pinia);
 
 		await useSettingsStore().getSettings();
 		await useUsersStore().fetchUsers();
@@ -25,13 +28,13 @@ describe('store', () => {
 	});
 
 	it('should render loading state', () => {
-		const wrapper = render(VariablesView);
+		const wrapper = renderComponent(VariablesView, { pinia });
 
 		expect(wrapper.container.querySelectorAll('.n8n-loading')).toHaveLength(3);
 	});
 
 	it('should render empty state', async () => {
-		const wrapper = render(VariablesView);
+		const wrapper = renderComponent(VariablesView, { pinia });
 
 		await wrapper.findByTestId('empty-resources-list');
 		expect(wrapper.getByTestId('empty-resources-list')).toBeVisible();
@@ -40,7 +43,7 @@ describe('store', () => {
 	it('should render variable entries', async () => {
 		server.createList('variable', 3);
 
-		const wrapper = render(VariablesView);
+		const wrapper = renderComponent(VariablesView, { pinia });
 
 		await wrapper.findByTestId('resources-table');
 		expect(wrapper.getByTestId('resources-table')).toBeVisible();