feat: add vue 3 eslint rules and fix issues

packages/@n8n_io/eslint-config/frontend.js

@@ -4,7 +4,7 @@
 module.exports = {
 	plugins: ['vue'],
 
-	extends: ['plugin:vue/essential', '@vue/typescript', './base'],
+	extends: ['plugin:vue/vue3-essential', '@vue/typescript', './base'],
 
 	env: {
 		browser: true,
@@ -37,6 +37,12 @@ module.exports = {
 		'vue/no-unused-components': 'error',
 		'vue/multi-word-component-names': 'off',
 
+		// TODO: fix these
+		'@typescript-eslint/no-unsafe-call': 'off',
+		'@typescript-eslint/no-unsafe-assignment': 'off',
+		'@typescript-eslint/restrict-template-expressions': 'off',
+		'@typescript-eslint/unbound-method': 'off',
+
 		// TODO: remove these
 		'vue/no-mutating-props': 'warn',
 		'vue/no-side-effects-in-computed-properties': 'warn',

packages/design-system/src/components/N8nActionToggle/ActionToggle.vue

@@ -4,7 +4,7 @@
 			:placement="placement"
 			:size="size"
 			trigger="click"
-			@click.native.stop
+			@click.stop
 			@command="onCommand"
 			@visible-change="onVisibleChange"
 		>

packages/design-system/src/components/N8nRecycleScroller/RecycleScroller.vue

@@ -164,7 +164,7 @@ export default defineComponent({
 		}
 
 		function onUpdateItemSize(item: { [key: string]: string }) {
-			nextTick(() => {
+			void nextTick(() => {
 				const itemId = item[props.itemKey];
 				const itemRef = itemRefs.value[itemId] as HTMLElement;
 				const previousSize = itemSizeCache.value[itemId];
@@ -186,7 +186,7 @@ export default defineComponent({
 		function onWindowResize() {
 			if (wrapperRef.value) {
 				wrapperHeight.value = wrapperRef.value.offsetHeight;
-				nextTick(() => {
+				void nextTick(() => {
 					updateItemSizeCache(visibleItems.value);
 				});
 			}

packages/design-system/src/components/N8nTabs/Tabs.vue

@@ -88,7 +88,7 @@ export default defineComponent({
 			this.canScrollRight = scrollWidth - width > this.scrollPosition;
 		}
 	},
-	destroyed() {
+	unmounted() {
 		if (this.resizeObserver) {
 			this.resizeObserver.disconnect();
 		}

packages/design-system/src/components/ResizeObserver/ResizeObserver.vue

@@ -68,7 +68,7 @@ export default defineComponent({
 			observer.observe(this.$refs.root as HTMLDivElement);
 		}
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		if (this.enabled) {
 			this.observer?.disconnect(); // eslint-disable-line
 		}

packages/design-system/src/styleguide/ColorCircles.vue

@@ -78,7 +78,7 @@ export default defineComponent({
 			this.observer.observe(body, { attributes: true });
 		}
 	},
-	destroyed() {
+	unmounted() {
 		if (this.observer) {
 			this.observer.disconnect();
 		}

packages/design-system/src/styleguide/Sizes.vue

@@ -68,7 +68,7 @@ export default defineComponent({
 			this.observer.observe(body, { attributes: true });
 		}
 	},
-	destroyed() {
+	unmounted() {
 		if (this.observer) {
 			this.observer.disconnect();
 		}

packages/design-system/src/styleguide/VariableTable.vue

@@ -65,7 +65,7 @@ export default defineComponent({
 			this.observer.observe(body, { attributes: true });
 		}
 	},
-	destroyed() {
+	unmounted() {
 		if (this.observer) {
 			this.observer.disconnect();
 		}

packages/editor-ui/src/components/CopyInput.vue

@@ -20,6 +20,7 @@
 import { defineComponent } from 'vue';
 import { copyPaste } from '@/mixins/copyPaste';
 import { useToast } from '@/composables';
+import { i18n } from '@/plugins/i18n';
 
 export default defineComponent({
 	mixins: [copyPaste],
@@ -36,13 +37,13 @@ export default defineComponent({
 		copyButtonText: {
 			type: String,
 			default(): string {
-				return this.$locale.baseText('generic.copy');
+				return i18n.baseText('generic.copy');
 			},
 		},
 		toastTitle: {
 			type: String,
 			default(): string {
-				return this.$locale.baseText('generic.copiedToClipboard');
+				return i18n.baseText('generic.copiedToClipboard');
 			},
 		},
 		toastMessage: {

packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue

@@ -349,7 +349,9 @@ export default defineComponent({
 		async startAutoRefreshInterval() {
 			if (this.autoRefresh) {
 				await this.loadAutoRefresh();
-				this.autoRefreshTimeout = setTimeout(() => this.startAutoRefreshInterval(), 4000);
+				this.autoRefreshTimeout = setTimeout(() => {
+					void this.startAutoRefreshInterval();
+				}, 4000);
 			}
 		},
 		stopAutoRefreshInterval() {
@@ -363,13 +365,13 @@ export default defineComponent({
 			this.uiStore.executionSidebarAutoRefresh = this.autoRefresh;
 
 			this.stopAutoRefreshInterval(); // Clear any previously existing intervals (if any - there shouldn't)
-			this.startAutoRefreshInterval();
+			void this.startAutoRefreshInterval();
 		},
 		onDocumentVisibilityChange() {
 			if (document.visibilityState === 'hidden') {
-				this.stopAutoRefreshInterval();
+				void this.stopAutoRefreshInterval();
 			} else {
-				this.startAutoRefreshInterval();
+				void this.startAutoRefreshInterval();
 			}
 		},
 		async loadAutoRefresh(): Promise<void> {
@@ -449,7 +451,7 @@ export default defineComponent({
 				return [];
 			}
 			try {
-				return await this.workflowsStore.loadCurrentWorkflowExecutions(this.requestFilter);
+				return this.workflowsStore.loadCurrentWorkflowExecutions(this.requestFilter);
 			} catch (error) {
 				if (error.errorCode === NO_NETWORK_ERROR_CODE) {
 					this.showMessage(

packages/editor-ui/src/components/FixedCollectionParameter.vue

@@ -115,7 +115,7 @@
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
-import type { Component, PropType } from 'vue';
+import type { PropType } from 'vue';
 import type { IUpdateInformation } from '@/Interface';
 
 import type {

packages/editor-ui/src/components/Node/NodeCreator/Modes/ActionsMode.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, getCurrentInstance, onMounted, defineComponent, h } from 'vue';
-import type { VNode, PropType } from 'vue';
+import type { PropType } from 'vue';
 import type {
 	INodeCreateElement,
 	ActionTypeDescription,

packages/editor-ui/src/components/NodeDetailsView.vue

@@ -418,7 +418,7 @@ export default defineComponent({
 				this.avgOutputRowHeight = 0;
 				this.avgInputRowHeight = 0;
 
-				setTimeout(this.ndvStore.setNDVSessionId, 0);
+				setTimeout(() => this.ndvStore.setNDVSessionId(), 0);
 				void this.$externalHooks().run('dataDisplay.nodeTypeChanged', {
 					nodeSubtitle: this.getNodeSubtitle(node, this.activeNodeType, this.getCurrentWorkflow()),
 				});

packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue

@@ -261,7 +261,7 @@ export default defineComponent({
 			}, 0);
 		},
 		loading() {
-			setTimeout(this.onResultsEnd, 0); // in case of filtering
+			setTimeout(() => this.onResultsEnd(), 0); // in case of filtering
 		},
 	},
 });

packages/editor-ui/src/components/RunData.vue

@@ -449,11 +449,11 @@
 			<el-pagination
 				background
 				:hide-on-single-page="true"
-				:current-page.sync="currentPage"
+				:current-page="currentPage"
 				:pager-count="5"
 				:page-size="pageSize"
 				layout="prev, pager, next"
-				@current-change="onCurrentPageChange"
+				@update:current-page="onCurrentPageChange"
 				:total="dataCount"
 			>
 			</el-pagination>
@@ -1134,7 +1134,8 @@ export default defineComponent({
 		unlinkRun() {
 			this.$emit('unlinkRun');
 		},
-		onCurrentPageChange() {
+		onCurrentPageChange(value) {
+			this.currentPage = value;
 			this.$telemetry.track('User changed ndv page', {
 				node_type: this.activeNode?.type,
 				workflow_id: this.workflowsStore.workflowId,

packages/editor-ui/src/components/RunDataJson.vue

@@ -26,10 +26,11 @@
 				:data="jsonData"
 				:deep="10"
 				:showLength="true"
-				:selected-value.sync="selectedJsonPath"
+				:selectedValue="selectedJsonPath"
 				rootPath=""
 				selectableType="single"
 				class="json-data"
+				@update:selectedValue="selectedJsonPath = $event"
 			>
 				<template #renderNodeKey="{ node }">
 					<span

packages/editor-ui/src/components/SqlEditor/SqlEditor.vue

@@ -24,8 +24,8 @@ import {
 	highlightActiveLineGutter,
 	keymap,
 	lineNumbers,
-	ViewUpdate,
 } from '@codemirror/view';
+import type { ViewUpdate } from '@codemirror/view';
 import {
 	MSSQL,
 	MySQL,

packages/editor-ui/src/components/Sticky.vue

@@ -23,7 +23,7 @@
 				v-touch:end="touchEnd"
 			>
 				<n8n-sticky
-					:content.sync="node.parameters.content"
+					:content="node.parameters.content"
 					:height="node.parameters.height"
 					:width="node.parameters.width"
 					:scale="nodeViewScale"
@@ -190,6 +190,7 @@ export default defineComponent({
 			}
 		},
 		onInputChange(content: string) {
+			this.node.parameters.content = content;
 			this.setParameters({ content });
 		},
 		onResizeStart() {

packages/editor-ui/src/declarations/vue-json-pretty.d.ts

@@ -1,5 +0,0 @@
-declare module 'vue-json-pretty' {
-	import { Component } from 'vue';
-	const vueJsonPretty: Component;
-	export default vueJsonPretty;
-}