diff --git a/packages/@n8n_io/eslint-config/frontend.js b/packages/@n8n_io/eslint-config/frontend.js
index 9e202c14a5..f4aae5fa26 100644
--- a/packages/@n8n_io/eslint-config/frontend.js
+++ b/packages/@n8n_io/eslint-config/frontend.js
@@ -4,7 +4,7 @@
 module.exports = {
 	plugins: ['vue'],
 
-	extends: ['plugin:vue/vue3-essential', '@vue/typescript', './base'],
+	extends: ['plugin:vue/vue3-recommended', '@vue/typescript', './base'],
 
 	env: {
 		browser: true,
@@ -37,6 +37,22 @@ module.exports = {
 		'vue/no-unused-components': 'error',
 		'vue/multi-word-component-names': 'off',
 		'@typescript-eslint/no-explicit-any': 'error',
+		'vue/component-name-in-template-casing': [
+			'error',
+			'PascalCase',
+			{
+				registeredComponentsOnly: true,
+			},
+		],
+		'vue/no-reserved-component-names': [
+			'error',
+			{
+				disallowVueBuiltInComponents: true,
+				disallowVue3BuiltInComponents: false,
+			},
+		],
+		'vue/prop-name-casing': ['error', 'camelCase'],
+		'vue/attribute-hyphenation': ['error', 'always'],
 
 		// TODO: fix these
 		'@typescript-eslint/no-unsafe-call': 'off',
diff --git a/packages/design-system/src/components/N8nActionBox/ActionBox.vue b/packages/design-system/src/components/N8nActionBox/ActionBox.vue
index d3ec2bb29f..8230d1fbc5 100644
--- a/packages/design-system/src/components/N8nActionBox/ActionBox.vue
+++ b/packages/design-system/src/components/N8nActionBox/ActionBox.vue
@@ -1,37 +1,37 @@
 <template>
 	<div :class="['n8n-action-box', $style.container]" data-test-id="action-box">
-		<div :class="$style.emoji" v-if="emoji">
+		<div v-if="emoji" :class="$style.emoji">
 			{{ emoji }}
 		</div>
-		<div :class="$style.heading" v-if="heading || $slots.heading">
-			<n8n-heading size="xlarge" align="center">
+		<div v-if="heading || $slots.heading" :class="$style.heading">
+			<N8nHeading size="xlarge" align="center">
 				<slot name="heading">{{ heading }}</slot>
-			</n8n-heading>
+			</N8nHeading>
 		</div>
 		<div :class="$style.description" @click="$emit('descriptionClick', $event)">
-			<n8n-text color="text-base">
+			<N8nText color="text-base">
 				<slot name="description">
 					<span v-html="description"></span>
 				</slot>
-			</n8n-text>
+			</N8nText>
 		</div>
-		<n8n-button
+		<N8nButton
 			v-if="buttonText"
 			:label="buttonText"
 			:type="buttonType"
 			size="large"
 			@click="$emit('click:button', $event)"
 		/>
-		<n8n-callout
+		<N8nCallout
 			v-if="calloutText"
 			:theme="calloutTheme"
 			:icon="calloutIcon"
 			:class="$style.callout"
 		>
-			<n8n-text color="text-base">
+			<N8nText color="text-base">
 				<span size="small" v-html="calloutText"></span>
-			</n8n-text>
-		</n8n-callout>
+			</N8nText>
+		</N8nCallout>
 	</div>
 </template>
 
@@ -43,7 +43,7 @@ import N8nCallout from '../N8nCallout';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-	name: 'n8n-action-box',
+	name: 'N8nActionBox',
 	components: {
 		N8nButton,
 		N8nHeading,
diff --git a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
index 77a212c20c..db7487f655 100644
--- a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
+++ b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
@@ -1,27 +1,27 @@
 <template>
 	<div :class="['action-dropdown-container', $style.actionDropdownContainer]">
-		<el-dropdown
+		<ElDropdown
+			ref="elementDropdown"
 			:placement="placement"
 			:trigger="trigger"
-			@command="onSelect"
 			:popper-class="{ [$style.shadow]: true, [$style.hideArrow]: hideArrow }"
+			@command="onSelect"
 			@visible-change="onVisibleChange"
-			ref="elementDropdown"
 		>
 			<slot v-if="$slots.activator" name="activator" />
 			<n8n-icon-button
 				v-else
-				@blur="onButtonBlur"
 				type="tertiary"
 				text
 				:class="$style.activator"
 				:size="activatorSize"
 				:icon="activatorIcon"
+				@blur="onButtonBlur"
 			/>
 
 			<template #dropdown>
-				<el-dropdown-menu :class="$style.userActionsMenu">
-					<el-dropdown-item
+				<ElDropdownMenu :class="$style.userActionsMenu">
+					<ElDropdownItem
 						v-for="item in items"
 						:key="item.id"
 						:command="item.id"
@@ -31,22 +31,22 @@
 					>
 						<div :class="getItemClasses(item)" :data-test-id="`${testIdPrefix}-item-${item.id}`">
 							<span v-if="item.icon" :class="$style.icon">
-								<n8n-icon :icon="item.icon" :size="iconSize" />
+								<N8nIcon :icon="item.icon" :size="iconSize" />
 							</span>
 							<span :class="$style.label">
 								{{ item.label }}
 							</span>
-							<n8n-keyboard-shortcut
+							<N8nKeyboardShortcut
 								v-if="item.shortcut"
 								v-bind="item.shortcut"
 								:class="$style.shortcut"
 							>
-							</n8n-keyboard-shortcut>
+							</N8nKeyboardShortcut>
 						</div>
-					</el-dropdown-item>
-				</el-dropdown-menu>
+					</ElDropdownItem>
+				</ElDropdownMenu>
 			</template>
-		</el-dropdown>
+		</ElDropdown>
 	</div>
 </template>
 
@@ -75,7 +75,7 @@ export interface IActionDropdownItem {
 // It can be used in different parts of editor UI while ActionToggle
 // is designed to be used in card components.
 export default defineComponent({
-	name: 'n8n-action-dropdown',
+	name: 'N8nActionDropdown',
 	components: {
 		ElDropdown,
 		ElDropdownMenu,
@@ -83,10 +83,6 @@ export default defineComponent({
 		N8nIcon,
 		N8nKeyboardShortcut,
 	},
-	data() {
-		const testIdPrefix = this.$attrs['data-test-id'];
-		return { testIdPrefix };
-	},
 	props: {
 		items: {
 			type: Array as PropType<IActionDropdownItem[]>,
@@ -121,6 +117,10 @@ export default defineComponent({
 			default: false,
 		},
 	},
+	data() {
+		const testIdPrefix = this.$attrs['data-test-id'];
+		return { testIdPrefix };
+	},
 	methods: {
 		getItemClasses(item: IActionDropdownItem): Record<string, boolean> {
 			return {
diff --git a/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue b/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue
index 29087d9b6a..799f4c09c4 100644
--- a/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue
+++ b/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue
@@ -1,6 +1,6 @@
 <template>
-	<span @click.stop.prevent :class="$style.container" data-test-id="action-toggle">
-		<el-dropdown
+	<span :class="$style.container" data-test-id="action-toggle" @click.stop.prevent>
+		<ElDropdown
 			:placement="placement"
 			:size="size"
 			trigger="click"
@@ -9,7 +9,7 @@
 		>
 			<slot>
 				<span :class="{ [$style.button]: true, [$style[theme]]: !!theme }">
-					<n8n-icon
+					<N8nIcon
 						:icon="iconOrientation === 'horizontal' ? 'ellipsis-h' : 'ellipsis-v'"
 						:size="iconSize"
 					/>
@@ -17,8 +17,8 @@
 			</slot>
 
 			<template #dropdown>
-				<el-dropdown-menu data-test-id="action-toggle-dropdown">
-					<el-dropdown-item
+				<ElDropdownMenu data-test-id="action-toggle-dropdown">
+					<ElDropdownItem
 						v-for="action in actions"
 						:key="action.value"
 						:command="action.value"
@@ -27,17 +27,17 @@
 					>
 						{{ action.label }}
 						<div :class="$style.iconContainer">
-							<n8n-icon
+							<N8nIcon
 								v-if="action.type === 'external-link'"
 								icon="external-link-alt"
 								size="xsmall"
 								color="text-base"
 							/>
 						</div>
-					</el-dropdown-item>
-				</el-dropdown-menu>
+					</ElDropdownItem>
+				</ElDropdownMenu>
 			</template>
-		</el-dropdown>
+		</ElDropdown>
 	</span>
 </template>
 
@@ -49,7 +49,7 @@ import N8nIcon from '../N8nIcon';
 import type { UserAction } from '@/types';
 
 export default defineComponent({
-	name: 'n8n-action-toggle',
+	name: 'N8nActionToggle',
 	components: {
 		ElDropdown,
 		ElDropdownMenu,
diff --git a/packages/design-system/src/components/N8nAlert/Alert.vue b/packages/design-system/src/components/N8nAlert/Alert.vue
index b48be58892..c2f64a245b 100644
--- a/packages/design-system/src/components/N8nAlert/Alert.vue
+++ b/packages/design-system/src/components/N8nAlert/Alert.vue
@@ -2,7 +2,7 @@
 	<div :class="alertBoxClassNames" role="alert">
 		<div :class="$style.content">
 			<span v-if="showIcon || $slots.icon" :class="$style.icon">
-				<n8n-icon v-if="showIcon" :icon="icon" />
+				<N8nIcon v-if="showIcon" :icon="icon" />
 				<slot v-else-if="$slots.icon" name="icon" />
 			</span>
 			<div :class="$style.text">
diff --git a/packages/design-system/src/components/N8nAvatar/Avatar.vue b/packages/design-system/src/components/N8nAvatar/Avatar.vue
index a8f49733c0..5460717d4c 100644
--- a/packages/design-system/src/components/N8nAvatar/Avatar.vue
+++ b/packages/design-system/src/components/N8nAvatar/Avatar.vue
@@ -24,7 +24,10 @@ const sizes: { [size: string]: number } = {
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-	name: 'n8n-avatar',
+	name: 'N8nAvatar',
+	components: {
+		Avatar,
+	},
 	props: {
 		firstName: {
 			type: String,
@@ -48,9 +51,6 @@ export default defineComponent({
 			],
 		},
 	},
-	components: {
-		Avatar,
-	},
 	computed: {
 		initials() {
 			return (
diff --git a/packages/design-system/src/components/N8nBadge/Badge.vue b/packages/design-system/src/components/N8nBadge/Badge.vue
index 7c6aed8b2f..b370b138cb 100644
--- a/packages/design-system/src/components/N8nBadge/Badge.vue
+++ b/packages/design-system/src/components/N8nBadge/Badge.vue
@@ -1,8 +1,8 @@
 <template>
 	<span :class="['n8n-badge', $style[theme]]">
-		<n8n-text :size="size" :bold="bold" :compact="true">
+		<N8nText :size="size" :bold="bold" :compact="true">
 			<slot></slot>
-		</n8n-text>
+		</N8nText>
 	</span>
 </template>
 
@@ -12,6 +12,9 @@ import N8nText from '../N8nText';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
+	components: {
+		N8nText,
+	},
 	props: {
 		theme: {
 			type: String,
@@ -30,9 +33,6 @@ export default defineComponent({
 			default: false,
 		},
 	},
-	components: {
-		N8nText,
-	},
 });
 </script>
 
diff --git a/packages/design-system/src/components/N8nButton/Button.vue b/packages/design-system/src/components/N8nButton/Button.vue
index bc794cf01d..779a7add0f 100644
--- a/packages/design-system/src/components/N8nButton/Button.vue
+++ b/packages/design-system/src/components/N8nButton/Button.vue
@@ -9,9 +9,9 @@
 		aria-live="polite"
 		v-bind="$attrs"
 	>
-		<span :class="$style.icon" v-if="loading || icon">
-			<n8n-spinner v-if="loading" :size="size" />
-			<n8n-icon v-else-if="icon" :icon="icon" :size="size" />
+		<span v-if="loading || icon" :class="$style.icon">
+			<N8nSpinner v-if="loading" :size="size" />
+			<N8nIcon v-else-if="icon" :icon="icon" :size="size" />
 		</span>
 		<span v-if="label || $slots.default">
 			<slot>{{ label }}</slot>
diff --git a/packages/design-system/src/components/N8nCallout/Callout.vue b/packages/design-system/src/components/N8nCallout/Callout.vue
index dfb98ab612..3c93e3bfac 100644
--- a/packages/design-system/src/components/N8nCallout/Callout.vue
+++ b/packages/design-system/src/components/N8nCallout/Callout.vue
@@ -1,12 +1,12 @@
 <template>
 	<div :class="classes" role="alert">
 		<div :class="$style.messageSection">
-			<div :class="$style.icon" v-if="!iconless">
-				<n8n-icon :icon="getIcon" :size="getIconSize" />
+			<div v-if="!iconless" :class="$style.icon">
+				<N8nIcon :icon="getIcon" :size="getIconSize" />
 			</div>
-			<n8n-text size="small">
+			<N8nText size="small">
 				<slot />
-			</n8n-text>
+			</N8nText>
 			&nbsp;
 			<slot name="actions" />
 		</div>
@@ -28,7 +28,7 @@ const CALLOUT_DEFAULT_ICONS: { [key: string]: string } = {
 };
 
 export default defineComponent({
-	name: 'n8n-callout',
+	name: 'N8nCallout',
 	components: {
 		N8nText,
 		N8nIcon,
diff --git a/packages/design-system/src/components/N8nCard/Card.vue b/packages/design-system/src/components/N8nCard/Card.vue
index a922f78228..b85fabb105 100644
--- a/packages/design-system/src/components/N8nCard/Card.vue
+++ b/packages/design-system/src/components/N8nCard/Card.vue
@@ -1,16 +1,16 @@
 <template>
 	<div :class="classes" v-bind="$attrs">
-		<div :class="$style.icon" v-if="$slots.prepend">
+		<div v-if="$slots.prepend" :class="$style.icon">
 			<slot name="prepend" />
 		</div>
 		<div :class="$style.content">
-			<div :class="$style.header" v-if="$slots.header">
+			<div v-if="$slots.header" :class="$style.header">
 				<slot name="header" />
 			</div>
-			<div :class="$style.body" v-if="$slots.default">
+			<div v-if="$slots.default" :class="$style.body">
 				<slot />
 			</div>
-			<div :class="$style.footer" v-if="$slots.footer">
+			<div v-if="$slots.footer" :class="$style.footer">
 				<slot name="footer" />
 			</div>
 		</div>
@@ -24,7 +24,7 @@
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-	name: 'n8n-card',
+	name: 'N8nCard',
 	inheritAttrs: true,
 	props: {
 		hoverable: {
diff --git a/packages/design-system/src/components/N8nCheckbox/Checkbox.vue b/packages/design-system/src/components/N8nCheckbox/Checkbox.vue
index 0c0f32ee96..186c45669a 100644
--- a/packages/design-system/src/components/N8nCheckbox/Checkbox.vue
+++ b/packages/design-system/src/components/N8nCheckbox/Checkbox.vue
@@ -1,23 +1,23 @@
 <template>
-	<el-checkbox
+	<ElCheckbox
 		v-bind="$props"
 		ref="checkbox"
 		:class="['n8n-checkbox', $style.n8nCheckbox]"
 		:disabled="disabled"
 		:indeterminate="indeterminate"
-		:modelValue="modelValue"
+		:model-value="modelValue"
 		@update:modelValue="onUpdateModelValue"
 	>
 		<slot></slot>
-		<n8n-input-label
+		<N8nInputLabel
 			v-if="label"
 			:label="label"
-			:tooltipText="tooltipText"
+			:tooltip-text="tooltipText"
 			:bold="false"
 			:size="labelSize"
 			@click.prevent="onLabelClick"
 		/>
-	</el-checkbox>
+	</ElCheckbox>
 </template>
 
 <script lang="ts">
@@ -26,7 +26,7 @@ import { ElCheckbox } from 'element-plus';
 import N8nInputLabel from '../N8nInputLabel';
 
 export default defineComponent({
-	name: 'n8n-checkbox',
+	name: 'N8nCheckbox',
 	components: {
 		ElCheckbox,
 		N8nInputLabel,
diff --git a/packages/design-system/src/components/N8nColorPicker/ColorPicker.vue b/packages/design-system/src/components/N8nColorPicker/ColorPicker.vue
index e6682a8568..712e2ac972 100644
--- a/packages/design-system/src/components/N8nColorPicker/ColorPicker.vue
+++ b/packages/design-system/src/components/N8nColorPicker/ColorPicker.vue
@@ -64,21 +64,21 @@ const onActiveChange = (value: string) => {
 </script>
 <template>
 	<span :class="['n8n-color-picker', $style.component]">
-		<el-color-picker
+		<ElColorPicker
 			v-model="model"
 			v-bind="colorPickerProps"
 			@change="onChange"
 			@active-change="onActiveChange"
 		/>
-		<n8n-input
+		<N8nInput
 			v-if="showInput"
 			:class="$style.input"
 			:disabled="props.disabled"
 			:size="props.size"
-			:modelValue="color"
+			:model-value="color"
 			:name="name"
-			@update:modelValue="onInput"
 			type="text"
+			@update:modelValue="onInput"
 		/>
 	</span>
 </template>
diff --git a/packages/design-system/src/components/N8nDatatable/Datatable.vue b/packages/design-system/src/components/N8nDatatable/Datatable.vue
index 14d1b21655..e3d3afbd17 100644
--- a/packages/design-system/src/components/N8nDatatable/Datatable.vue
+++ b/packages/design-system/src/components/N8nDatatable/Datatable.vue
@@ -9,13 +9,12 @@ import N8nOption from '../N8nOption';
 import N8nPagination from '../N8nPagination';
 
 export default defineComponent({
-	name: 'n8n-datatable',
+	name: 'N8nDatatable',
 	components: {
 		N8nSelect,
 		N8nOption,
 		N8nPagination,
 	},
-	emits: ['update:currentPage', 'update:rowsPerPage'],
 	props: {
 		columns: {
 			type: Array as PropType<DatatableColumn[]>,
@@ -38,6 +37,7 @@ export default defineComponent({
 			default: 10,
 		},
 	},
+	emits: ['update:currentPage', 'update:rowsPerPage'],
 	setup(props, { emit }) {
 		const { t } = useI18n();
 		const rowsPerPageOptions = ref([10, 25, 50, 100]);
@@ -130,10 +130,10 @@ export default defineComponent({
 			</thead>
 			<tbody>
 				<template v-for="row in visibleRows">
-					<slot name="row" :columns="columns" :row="row" :getTdValue="getTdValue">
+					<slot name="row" :columns="columns" :row="row" :get-td-value="getTdValue">
 						<tr :key="row.id">
 							<td v-for="column in columns" :key="column.id" :class="column.classes">
-								<component v-if="column.render" :is="column.render" :row="row" :column="column" />
+								<component :is="column.render" v-if="column.render" :row="row" :column="column" />
 								<span v-else>{{ getTdValue(row, column) }}</span>
 							</td>
 						</tr>
@@ -143,33 +143,33 @@ export default defineComponent({
 		</table>
 
 		<div :class="$style.pagination">
-			<n8n-pagination
+			<N8nPagination
 				v-if="totalPages > 1"
 				background
 				:pager-count="5"
 				:page-size="rowsPerPage"
 				layout="prev, pager, next"
 				:total="totalRows"
-				:currentPage="currentPage"
+				:current-page="currentPage"
 				@update:currentPage="onUpdateCurrentPage"
 			/>
 
 			<div :class="$style.pageSizeSelector">
-				<n8n-select
+				<N8nSelect
 					size="mini"
-					:modelValue="rowsPerPage"
-					@update:modelValue="onRowsPerPageChange"
+					:model-value="rowsPerPage"
 					teleported
+					@update:modelValue="onRowsPerPageChange"
 				>
 					<template #prepend>{{ t('datatable.pageSize') }}</template>
-					<n8n-option
+					<N8nOption
 						v-for="size in rowsPerPageOptions"
 						:key="size"
 						:label="`${size}`"
 						:value="size"
 					/>
-					<n8n-option :label="`All`" value="*"> </n8n-option>
-				</n8n-select>
+					<N8nOption :label="`All`" value="*"> </N8nOption>
+				</N8nSelect>
 			</div>
 		</div>
 	</div>
diff --git a/packages/design-system/src/components/N8nFormBox/FormBox.vue b/packages/design-system/src/components/N8nFormBox/FormBox.vue
index 0c6fa4b3f9..f36a2dee0e 100644
--- a/packages/design-system/src/components/N8nFormBox/FormBox.vue
+++ b/packages/design-system/src/components/N8nFormBox/FormBox.vue
@@ -1,26 +1,26 @@
 <template>
 	<div :class="['n8n-form-box', $style.container]">
 		<div v-if="title" :class="$style.heading">
-			<n8n-heading size="xlarge">
+			<N8nHeading size="xlarge">
 				{{ title }}
-			</n8n-heading>
+			</N8nHeading>
 		</div>
 		<div :class="$style.inputsContainer">
-			<n8n-form-inputs
+			<N8nFormInputs
 				:inputs="inputs"
-				:eventBus="formBus"
-				:columnView="true"
+				:event-bus="formBus"
+				:column-view="true"
 				@update="onUpdateModelValue"
 				@submit="onSubmit"
 			/>
 		</div>
-		<div :class="$style.buttonsContainer" v-if="secondaryButtonText || buttonText">
+		<div v-if="secondaryButtonText || buttonText" :class="$style.buttonsContainer">
 			<span v-if="secondaryButtonText" :class="$style.secondaryButtonContainer">
-				<n8n-link size="medium" theme="text" @click="onSecondaryButtonClick">
+				<N8nLink size="medium" theme="text" @click="onSecondaryButtonClick">
 					{{ secondaryButtonText }}
-				</n8n-link>
+				</N8nLink>
 			</span>
-			<n8n-button
+			<N8nButton
 				v-if="buttonText"
 				:label="buttonText"
 				:loading="buttonLoading"
@@ -30,9 +30,9 @@
 			/>
 		</div>
 		<div :class="$style.actionContainer">
-			<n8n-link v-if="redirectText && redirectLink" :to="redirectLink">
+			<N8nLink v-if="redirectText && redirectLink" :to="redirectLink">
 				{{ redirectText }}
-			</n8n-link>
+			</N8nLink>
 		</div>
 		<slot></slot>
 	</div>
@@ -47,7 +47,7 @@ import N8nButton from '../N8nButton';
 import { createEventBus } from '../../utils';
 
 export default defineComponent({
-	name: 'n8n-form-box',
+	name: 'N8nFormBox',
 	components: {
 		N8nHeading,
 		N8nFormInputs,
diff --git a/packages/design-system/src/components/N8nFormInput/FormInput.vue b/packages/design-system/src/components/N8nFormInput/FormInput.vue
index 6f418e72a9..89bf61b57b 100644
--- a/packages/design-system/src/components/N8nFormInput/FormInput.vue
+++ b/packages/design-system/src/components/N8nFormInput/FormInput.vue
@@ -1,52 +1,52 @@
 <template>
-	<n8n-checkbox
+	<N8nCheckbox
 		v-if="type === 'checkbox'"
 		v-bind="$props"
+		ref="inputRef"
 		@update:modelValue="onUpdateModelValue"
 		@focus="onFocus"
-		ref="inputRef"
 	/>
-	<n8n-input-label
+	<N8nInputLabel
 		v-else-if="type === 'toggle'"
-		:inputName="name"
+		:input-name="name"
 		:label="label"
-		:tooltipText="tooltipText"
+		:tooltip-text="tooltipText"
 		:required="required && showRequiredAsterisk"
 	>
 		<template #content>
 			{{ tooltipText }}
 		</template>
-		<el-switch
-			:modelValue="modelValue"
+		<ElSwitch
+			:model-value="modelValue"
 			:active-color="activeColor"
 			:inactive-color="inactiveColor"
 			@update:modelValue="onUpdateModelValue"
-		></el-switch>
-	</n8n-input-label>
-	<n8n-input-label
+		></ElSwitch>
+	</N8nInputLabel>
+	<N8nInputLabel
 		v-else
-		:inputName="name"
+		:input-name="name"
 		:label="label"
-		:tooltipText="tooltipText"
+		:tooltip-text="tooltipText"
 		:required="required && showRequiredAsterisk"
 	>
 		<div :class="showErrors ? $style.errorInput : ''" @keydown.stop @keydown.enter="onEnter">
 			<slot v-if="hasDefaultSlot" />
-			<n8n-select
-				:class="{ [$style.multiSelectSmallTags]: tagSize === 'small' }"
+			<N8nSelect
 				v-else-if="type === 'select' || type === 'multi-select'"
-				:modelValue="modelValue"
+				:class="{ [$style.multiSelectSmallTags]: tagSize === 'small' }"
+				:model-value="modelValue"
 				:placeholder="placeholder"
 				:multiple="type === 'multi-select'"
+				ref="inputRef"
 				:disabled="disabled"
+				:name="name"
+				:teleported="teleported"
 				@update:modelValue="onUpdateModelValue"
 				@focus="onFocus"
 				@blur="onBlur"
-				:name="name"
-				:teleported="teleported"
-				ref="inputRef"
 			>
-				<n8n-option
+				<N8nOption
 					v-for="option in options || []"
 					:key="option.value"
 					:value="option.value"
@@ -54,38 +54,38 @@
 					:disabled="!!option.disabled"
 					size="small"
 				/>
-			</n8n-select>
-			<n8n-input
+			</N8nSelect>
+			<N8nInput
 				v-else
 				:name="name"
+				ref="inputRef"
 				:type="type"
 				:placeholder="placeholder"
-				:modelValue="modelValue"
+				:model-value="modelValue"
 				:maxlength="maxlength"
 				:autocomplete="autocomplete"
 				:disabled="disabled"
 				@update:modelValue="onUpdateModelValue"
 				@blur="onBlur"
 				@focus="onFocus"
-				ref="inputRef"
 			/>
 		</div>
-		<div :class="$style.errors" v-if="showErrors">
+		<div v-if="showErrors" :class="$style.errors">
 			<span v-text="validationError" />
 			<n8n-link
 				v-if="documentationUrl && documentationText"
 				:to="documentationUrl"
-				:newWindow="true"
+				:new-window="true"
 				size="small"
 				theme="danger"
 			>
 				{{ documentationText }}
 			</n8n-link>
 		</div>
-		<div :class="$style.infoText" v-else-if="infoText">
+		<div v-else-if="infoText" :class="$style.infoText">
 			<span size="small" v-text="infoText" />
 		</div>
-	</n8n-input-label>
+	</N8nInputLabel>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/design-system/src/components/N8nFormInputs/FormInputs.vue b/packages/design-system/src/components/N8nFormInputs/FormInputs.vue
index cade81d9d1..14c3c8927b 100644
--- a/packages/design-system/src/components/N8nFormInputs/FormInputs.vue
+++ b/packages/design-system/src/components/N8nFormInputs/FormInputs.vue
@@ -8,8 +8,8 @@
 					:class="{ [`mt-${verticalSpacing}`]: verticalSpacing && index > 0 }"
 				>
 					<n8n-text
-						color="text-base"
 						v-if="input.properties.type === 'info'"
+						color="text-base"
 						tag="div"
 						:size="input.properties.labelSize"
 						:align="input.properties.labelAlignment"
@@ -17,16 +17,16 @@
 					>
 						{{ input.properties.label }}
 					</n8n-text>
-					<n8n-form-input
+					<N8nFormInput
 						v-else
 						v-bind="input.properties"
 						:name="input.name"
 						:label="input.properties.label || ''"
-						:modelValue="values[input.name]"
+						:model-value="values[input.name]"
 						:data-test-id="input.name"
-						:showValidationWarnings="showValidationWarnings"
+						:show-validation-warnings="showValidationWarnings"
 						:teleported="teleported"
-						:tagSize="tagSize"
+						:tag-size="tagSize"
 						@update:modelValue="(value) => onUpdateModelValue(input.name, value)"
 						@validate="(value) => onValidate(input.name, value)"
 						@enter="onSubmit"
@@ -47,7 +47,7 @@ import type { EventBus } from '../../utils';
 import { createEventBus } from '../../utils';
 
 export default defineComponent({
-	name: 'n8n-form-inputs',
+	name: 'N8nFormInputs',
 	components: {
 		N8nFormInput,
 		ResizeObserver,
@@ -87,20 +87,6 @@ export default defineComponent({
 			validity: {} as { [key: string]: boolean },
 		};
 	},
-	mounted() {
-		this.inputs.forEach((input) => {
-			if (input.hasOwnProperty('initialValue')) {
-				this.values = {
-					...this.values,
-					[input.name]: input.initialValue,
-				};
-			}
-		});
-
-		if (this.eventBus) {
-			this.eventBus.on('submit', () => this.onSubmit());
-		}
-	},
 	computed: {
 		filteredInputs(): IFormInput[] {
 			return this.inputs.filter((input) =>
@@ -117,6 +103,25 @@ export default defineComponent({
 			return true;
 		},
 	},
+	watch: {
+		isReadyToSubmit(ready: boolean) {
+			this.$emit('ready', ready);
+		},
+	},
+	mounted() {
+		this.inputs.forEach((input) => {
+			if (input.hasOwnProperty('initialValue')) {
+				this.values = {
+					...this.values,
+					[input.name]: input.initialValue,
+				};
+			}
+		});
+
+		if (this.eventBus) {
+			this.eventBus.on('submit', () => this.onSubmit());
+		}
+	},
 	methods: {
 		onUpdateModelValue(name: string, value: unknown) {
 			this.values = {
@@ -146,11 +151,6 @@ export default defineComponent({
 			}
 		},
 	},
-	watch: {
-		isReadyToSubmit(ready: boolean) {
-			this.$emit('ready', ready);
-		},
-	},
 });
 </script>
 
diff --git a/packages/design-system/src/components/N8nHeading/Heading.vue b/packages/design-system/src/components/N8nHeading/Heading.vue
index 24ad2c2a09..5a4a0c2783 100644
--- a/packages/design-system/src/components/N8nHeading/Heading.vue
+++ b/packages/design-system/src/components/N8nHeading/Heading.vue
@@ -8,7 +8,7 @@
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-	name: 'n8n-heading',
+	name: 'N8nHeading',
 	props: {
 		tag: {
 			type: String,
diff --git a/packages/design-system/src/components/N8nIcon/Icon.vue b/packages/design-system/src/components/N8nIcon/Icon.vue
index 9b2d2204f3..07224f7d80 100644
--- a/packages/design-system/src/components/N8nIcon/Icon.vue
+++ b/packages/design-system/src/components/N8nIcon/Icon.vue
@@ -1,7 +1,7 @@
 <template>
-	<n8n-text :size="size" :color="color" :compact="true" class="n8n-icon" v-bind="$attrs">
-		<font-awesome-icon :icon="icon" :spin="spin" :class="$style[size]" />
-	</n8n-text>
+	<N8nText :size="size" :color="color" :compact="true" class="n8n-icon" v-bind="$attrs">
+		<FontAwesomeIcon :icon="icon" :spin="spin" :class="$style[size]" />
+	</N8nText>
 </template>
 
 <script lang="ts">
@@ -11,7 +11,7 @@ import N8nText from '../N8nText';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-	name: 'n8n-icon',
+	name: 'N8nIcon',
 	components: {
 		FontAwesomeIcon,
 		N8nText,
diff --git a/packages/design-system/src/components/N8nIconButton/IconButton.vue b/packages/design-system/src/components/N8nIconButton/IconButton.vue
index 249ee4ff0f..7d2798a4e7 100644
--- a/packages/design-system/src/components/N8nIconButton/IconButton.vue
+++ b/packages/design-system/src/components/N8nIconButton/IconButton.vue
@@ -1,5 +1,5 @@
 <template>
-	<n8n-button square v-bind="{ ...$attrs, ...$props }" />
+	<N8nButton square v-bind="{ ...$attrs, ...$props }" />
 </template>
 
 <script lang="ts">
@@ -8,7 +8,7 @@ import N8nButton from '../N8nButton';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-	name: 'n8n-icon-button',
+	name: 'N8nIconButton',
 	components: {
 		N8nButton,
 	},
diff --git a/packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue b/packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue
index ee3b292d5a..740ad5ef2f 100644
--- a/packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue
+++ b/packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue
@@ -1,17 +1,17 @@
 <template>
 	<div :class="['accordion', $style.container]">
 		<div :class="{ [$style.header]: true, [$style.expanded]: expanded }" @click="toggle">
-			<n8n-icon
+			<N8nIcon
 				v-if="headerIcon"
 				:icon="headerIcon.icon"
 				:color="headerIcon.color"
 				size="small"
 				class="mr-2xs"
 			/>
-			<n8n-text :class="$style.headerText" color="text-base" size="small" align="left" bold>{{
+			<N8nText :class="$style.headerText" color="text-base" size="small" align="left" bold>{{
 				title
-			}}</n8n-text>
-			<n8n-icon :icon="expanded ? 'chevron-up' : 'chevron-down'" bold />
+			}}</N8nText>
+			<N8nIcon :icon="expanded ? 'chevron-up' : 'chevron-down'" bold />
 		</div>
 		<div
 			v-if="expanded"
@@ -23,16 +23,16 @@
 				<div v-for="item in items" :key="item.id" :class="$style.accordionItem">
 					<n8n-tooltip :disabled="!item.tooltip">
 						<template #content>
-							<div v-html="item.tooltip" @click="onTooltipClick(item.id, $event)"></div>
+							<div @click="onTooltipClick(item.id, $event)" v-html="item.tooltip"></div>
 						</template>
-						<n8n-icon :icon="item.icon" :color="item.iconColor" size="small" class="mr-2xs" />
+						<N8nIcon :icon="item.icon" :color="item.iconColor" size="small" class="mr-2xs" />
 					</n8n-tooltip>
-					<n8n-text size="small" color="text-base">{{ item.label }}</n8n-text>
+					<N8nText size="small" color="text-base">{{ item.label }}</N8nText>
 				</div>
 			</div>
-			<n8n-text color="text-base" size="small" align="left">
+			<N8nText color="text-base" size="small" align="left">
 				<span v-html="description"></span>
-			</n8n-text>
+			</N8nText>
 			<slot name="customContent"></slot>
 		</div>
 	</div>
@@ -55,7 +55,7 @@ export interface IAccordionItem {
 }
 
 export default defineComponent({
-	name: 'n8n-info-accordion',
+	name: 'N8nInfoAccordion',
 	components: {
 		N8nText,
 		N8nIcon,
@@ -84,17 +84,17 @@ export default defineComponent({
 			default: () => createEventBus(),
 		},
 	},
+	data() {
+		return {
+			expanded: false,
+		};
+	},
 	mounted() {
 		this.eventBus.on('expand', () => {
 			this.expanded = true;
 		});
 		this.expanded = this.initiallyExpanded;
 	},
-	data() {
-		return {
-			expanded: false,
-		};
-	},
 	methods: {
 		toggle() {
 			this.expanded = !this.expanded;
diff --git a/packages/design-system/src/components/N8nInfoTip/InfoTip.vue b/packages/design-system/src/components/N8nInfoTip/InfoTip.vue
index 394b994c8e..c69a6959f3 100644
--- a/packages/design-system/src/components/N8nInfoTip/InfoTip.vue
+++ b/packages/design-system/src/components/N8nInfoTip/InfoTip.vue
@@ -8,23 +8,23 @@
 			[$style.bold]: bold,
 		}"
 	>
-		<n8n-tooltip
+		<N8nTooltip
 			v-if="type === 'tooltip'"
 			:placement="tooltipPlacement"
-			:popperClass="$style.tooltipPopper"
+			:popper-class="$style.tooltipPopper"
 			:disabled="type !== 'tooltip'"
 		>
 			<span :class="$style.iconText" :style="{ color: iconData.color }">
-				<n8n-icon :icon="iconData.icon" />
+				<N8nIcon :icon="iconData.icon" />
 			</span>
 			<template #content>
 				<span>
 					<slot />
 				</span>
 			</template>
-		</n8n-tooltip>
-		<span :class="$style.iconText" v-else>
-			<n8n-icon :icon="iconData.icon" />
+		</N8nTooltip>
+		<span v-else :class="$style.iconText">
+			<N8nIcon :icon="iconData.icon" />
 			<span>
 				<slot />
 			</span>
@@ -39,7 +39,7 @@ import N8nTooltip from '../N8nTooltip';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-	name: 'n8n-info-tip',
+	name: 'N8nInfoTip',
 	components: {
 		N8nIcon,
 		N8nTooltip,
diff --git a/packages/design-system/src/components/N8nInput/Input.vue b/packages/design-system/src/components/N8nInput/Input.vue
index efe1f7b3e1..6b2d140ce6 100644
--- a/packages/design-system/src/components/N8nInput/Input.vue
+++ b/packages/design-system/src/components/N8nInput/Input.vue
@@ -1,25 +1,25 @@
 <template>
-	<el-input
+	<ElInput
+		ref="innerInput"
 		:size="computedSize"
 		:class="['n8n-input', ...classes]"
-		:autoComplete="autocomplete"
+		:autocomplete="autocomplete"
 		:name="name"
-		ref="innerInput"
 		v-bind="{ ...$props, ...$attrs }"
 	>
-		<template #prepend v-if="$slots.prepend">
+		<template v-if="$slots.prepend" #prepend>
 			<slot name="prepend" />
 		</template>
-		<template #append v-if="$slots.append">
+		<template v-if="$slots.append" #append>
 			<slot name="append" />
 		</template>
-		<template #prefix v-if="$slots.prefix">
+		<template v-if="$slots.prefix" #prefix>
 			<slot name="prefix" />
 		</template>
-		<template #suffix v-if="$slots.suffix">
+		<template v-if="$slots.suffix" #suffix>
 			<slot name="suffix" />
 		</template>
-	</el-input>
+	</ElInput>
 </template>
 
 <script lang="ts">
@@ -31,7 +31,7 @@ import { uid } from '../../utils';
 type InputRef = InstanceType<typeof ElInput>;
 
 export default defineComponent({
-	name: 'n8n-input',
+	name: 'N8nInput',
 	components: {
 		ElInput,
 	},
diff --git a/packages/design-system/src/components/N8nInput/__tests__/__snapshots__/Input.spec.ts.snap b/packages/design-system/src/components/N8nInput/__tests__/__snapshots__/Input.spec.ts.snap
index 4571133d9a..c31cd8185e 100644
--- a/packages/design-system/src/components/N8nInput/__tests__/__snapshots__/Input.spec.ts.snap
+++ b/packages/design-system/src/components/N8nInput/__tests__/__snapshots__/Input.spec.ts.snap
@@ -7,7 +7,7 @@ exports[`N8nInput > should render correctly 1`] = `
   <!--v-if-->
   <div class="el-input__wrapper">
     <!-- prefix slot -->
-    <!--v-if--><input class="el-input__inner" autocomplete="off" name="input" rows="2" maxlength="Infinity" title="" type="text" tabindex="0" placeholder=""><!-- suffix slot -->
+    <!--v-if--><input class="el-input__inner" name="input" rows="2" maxlength="Infinity" title="" type="text" autocomplete="off" tabindex="0" placeholder=""><!-- suffix slot -->
     <!--v-if-->
   </div><!-- append slot -->
   <!--v-if-->
diff --git a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
index 11278557c3..3445ba29fc 100644
--- a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
+++ b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
@@ -12,22 +12,22 @@
 				[$style.overflow]: !!$slots.options,
 			}"
 		>
-			<div :class="$style.title" v-if="label">
-				<n8n-text :bold="bold" :size="size" :compact="compact" :color="color">
+			<div v-if="label" :class="$style.title">
+				<N8nText :bold="bold" :size="size" :compact="compact" :color="color">
 					{{ label }}
-					<n8n-text color="primary" :bold="bold" :size="size" v-if="required">*</n8n-text>
-				</n8n-text>
+					<N8nText v-if="required" color="primary" :bold="bold" :size="size">*</N8nText>
+				</N8nText>
 			</div>
 			<span
-				:class="[$style.infoIcon, showTooltip ? $style.visible : $style.hidden]"
 				v-if="tooltipText && label"
+				:class="[$style.infoIcon, showTooltip ? $style.visible : $style.hidden]"
 			>
-				<n8n-tooltip placement="top" :popper-class="$style.tooltipPopper">
-					<n8n-icon icon="question-circle" size="small" />
+				<N8nTooltip placement="top" :popper-class="$style.tooltipPopper">
+					<N8nIcon icon="question-circle" size="small" />
 					<template #content>
 						<div v-html="addTargetBlank(tooltipText)" />
 					</template>
-				</n8n-tooltip>
+				</N8nTooltip>
 			</span>
 			<div
 				v-if="$slots.options && label"
@@ -55,7 +55,7 @@ import { addTargetBlank } from '../utils/helpers';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-	name: 'n8n-input-label',
+	name: 'N8nInputLabel',
 	components: {
 		N8nText,
 		N8nIcon,
diff --git a/packages/design-system/src/components/N8nInputNumber/InputNumber.vue b/packages/design-system/src/components/N8nInputNumber/InputNumber.vue
index 4c1b3bd60a..fa659ab598 100644
--- a/packages/design-system/src/components/N8nInputNumber/InputNumber.vue
+++ b/packages/design-system/src/components/N8nInputNumber/InputNumber.vue
@@ -4,15 +4,15 @@ import { defineComponent } from 'vue';
 
 export default defineComponent({
 	name: 'N8nInputNumber',
-	props: {
-		...ElInputNumber.props,
-	},
 	components: {
 		ElInputNumber,
 	},
+	props: {
+		...ElInputNumber.props,
+	},
 });
 </script>
 
 <template>
-	<el-input-number v-bind="{ ...$props, ...$attrs }" />
+	<ElInputNumber v-bind="{ ...$props, ...$attrs }" />
 </template>
diff --git a/packages/design-system/src/components/N8nKeyboardShortcut/N8nKeyboardShortcut.vue b/packages/design-system/src/components/N8nKeyboardShortcut/N8nKeyboardShortcut.vue
index 8dc809755a..5ca8d64b8a 100644
--- a/packages/design-system/src/components/N8nKeyboardShortcut/N8nKeyboardShortcut.vue
+++ b/packages/design-system/src/components/N8nKeyboardShortcut/N8nKeyboardShortcut.vue
@@ -31,7 +31,7 @@ const keys = computed(() => {
 
 <template>
 	<div :class="$style.shortcut">
-		<div v-for="key of keys" :class="$style.keyWrapper" :key="key">
+		<div v-for="key of keys" :key="key" :class="$style.keyWrapper">
 			<div :class="$style.key">{{ key }}</div>
 		</div>
 	</div>
diff --git a/packages/design-system/src/components/N8nLink/Link.vue b/packages/design-system/src/components/N8nLink/Link.vue
index 23639df8fd..84989f9e79 100644
--- a/packages/design-system/src/components/N8nLink/Link.vue
+++ b/packages/design-system/src/components/N8nLink/Link.vue
@@ -1,11 +1,11 @@
 <template>
-	<n8n-route :to="to" :newWindow="newWindow" v-bind="$attrs" class="n8n-link">
+	<N8nRoute :to="to" :new-window="newWindow" v-bind="$attrs" class="n8n-link">
 		<span :class="$style[`${underline ? `${theme}-underline` : theme}`]">
-			<n8n-text :size="size" :bold="bold">
+			<N8nText :size="size" :bold="bold">
 				<slot></slot>
-			</n8n-text>
+			</N8nText>
 		</span>
-	</n8n-route>
+	</N8nRoute>
 </template>
 
 <script lang="ts">
@@ -14,7 +14,11 @@ import N8nText from '../N8nText';
 import N8nRoute from '../N8nRoute';
 
 export default defineComponent({
-	name: 'n8n-link',
+	name: 'N8nLink',
+	components: {
+		N8nText,
+		N8nRoute,
+	},
 	props: {
 		size: {
 			type: String,
@@ -41,10 +45,6 @@ export default defineComponent({
 				['primary', 'danger', 'text', 'secondary'].includes(value),
 		},
 	},
-	components: {
-		N8nText,
-		N8nRoute,
-	},
 });
 </script>
 
diff --git a/packages/design-system/src/components/N8nLoading/Loading.vue b/packages/design-system/src/components/N8nLoading/Loading.vue
index 29b62cba92..843a6d05ac 100644
--- a/packages/design-system/src/components/N8nLoading/Loading.vue
+++ b/packages/design-system/src/components/N8nLoading/Loading.vue
@@ -1,5 +1,5 @@
 <template>
-	<el-skeleton
+	<ElSkeleton
 		:loading="loading"
 		:animated="animated"
 		:class="['n8n-loading', `n8n-loading-${variant}`]"
@@ -13,7 +13,7 @@
 						[$style.h1Last]: item === rows && rows > 1 && shrinkLast,
 					}"
 				>
-					<el-skeleton-item :variant="variant" />
+					<ElSkeletonItem :variant="variant" />
 				</div>
 			</div>
 			<div v-else-if="variant === 'p'">
@@ -24,15 +24,15 @@
 						[$style.pLast]: item === rows && rows > 1 && shrinkLast,
 					}"
 				>
-					<el-skeleton-item :variant="variant" />
+					<ElSkeletonItem :variant="variant" />
 				</div>
 			</div>
-			<div :class="$style.custom" v-else-if="variant === 'custom'">
-				<el-skeleton-item />
+			<div v-else-if="variant === 'custom'" :class="$style.custom">
+				<ElSkeletonItem />
 			</div>
-			<el-skeleton-item v-else :variant="variant" />
+			<ElSkeletonItem v-else :variant="variant" />
 		</template>
-	</el-skeleton>
+	</ElSkeleton>
 </template>
 
 <script lang="ts">
@@ -40,7 +40,7 @@ import { ElSkeleton, ElSkeletonItem } from 'element-plus';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-	name: 'n8n-loading',
+	name: 'N8nLoading',
 	components: {
 		ElSkeleton,
 		ElSkeletonItem,
diff --git a/packages/design-system/src/components/N8nMarkdown/Markdown.vue b/packages/design-system/src/components/N8nMarkdown/Markdown.vue
index 55a508b826..8d2363bc5b 100644
--- a/packages/design-system/src/components/N8nMarkdown/Markdown.vue
+++ b/packages/design-system/src/components/N8nMarkdown/Markdown.vue
@@ -4,12 +4,12 @@
 			v-if="!loading"
 			ref="editor"
 			:class="$style[theme]"
-			v-html="htmlContent"
 			@click="onClick"
+			v-html="htmlContent"
 		/>
 		<div v-else :class="$style.markdown">
 			<div v-for="(block, index) in loadingBlocks" :key="index">
-				<n8n-loading :loading="loading" :rows="loadingRows" animated variant="p" />
+				<N8nLoading :loading="loading" :rows="loadingRows" animated variant="p" />
 				<div :class="$style.spacer" />
 			</div>
 		</div>
@@ -62,10 +62,10 @@ export interface Options {
 }
 
 export default defineComponent({
+	name: 'N8nMarkdown',
 	components: {
 		N8nLoading,
 	},
-	name: 'n8n-markdown',
 	props: {
 		content: {
 			type: String,
diff --git a/packages/design-system/src/components/N8nMenu/Menu.vue b/packages/design-system/src/components/N8nMenu/Menu.vue
index cbdce32f1b..36e7dfbc98 100644
--- a/packages/design-system/src/components/N8nMenu/Menu.vue
+++ b/packages/design-system/src/components/N8nMenu/Menu.vue
@@ -15,33 +15,33 @@
 				<div v-if="$slots.menuPrefix" :class="$style.menuPrefix">
 					<slot name="menuPrefix"></slot>
 				</div>
-				<el-menu :defaultActive="defaultActive" :collapse="collapsed">
-					<n8n-menu-item
+				<ElMenu :default-active="defaultActive" :collapse="collapsed">
+					<N8nMenuItem
 						v-for="item in upperMenuItems"
 						:key="item.id"
 						:item="item"
 						:compact="collapsed"
-						:tooltipDelay="tooltipDelay"
+						:tooltip-delay="tooltipDelay"
 						:mode="mode"
-						:activeTab="activeTab"
+						:active-tab="activeTab"
 						:handle-select="onSelect"
 					/>
-				</el-menu>
+				</ElMenu>
 			</div>
 			<div :class="[$style.lowerContent, 'pb-2xs']">
 				<slot name="beforeLowerMenu"></slot>
-				<el-menu :defaultActive="defaultActive" :collapse="collapsed">
-					<n8n-menu-item
+				<ElMenu :default-active="defaultActive" :collapse="collapsed">
+					<N8nMenuItem
 						v-for="item in lowerMenuItems"
 						:key="item.id"
 						:item="item"
 						:compact="collapsed"
-						:tooltipDelay="tooltipDelay"
+						:tooltip-delay="tooltipDelay"
 						:mode="mode"
-						:activeTab="activeTab"
+						:active-tab="activeTab"
 						:handle-select="onSelect"
 					/>
-				</el-menu>
+				</ElMenu>
 				<div v-if="$slots.menuSuffix" :class="$style.menuSuffix">
 					<slot name="menuSuffix"></slot>
 				</div>
@@ -61,16 +61,11 @@ import { defineComponent } from 'vue';
 import type { IMenuItem, RouteObject } from '../../types';
 
 export default defineComponent({
-	name: 'n8n-menu',
+	name: 'N8nMenu',
 	components: {
 		ElMenu,
 		N8nMenuItem,
 	},
-	data() {
-		return {
-			activeTab: this.value,
-		};
-	},
 	props: {
 		type: {
 			type: String,
@@ -106,22 +101,10 @@ export default defineComponent({
 			default: '',
 		},
 	},
-	mounted() {
-		if (this.mode === 'router') {
-			const found = this.items.find((item) => {
-				return (
-					(Array.isArray(item.activateOnRouteNames) &&
-						item.activateOnRouteNames.includes(this.currentRoute.name || '')) ||
-					(Array.isArray(item.activateOnRoutePaths) &&
-						item.activateOnRoutePaths.includes(this.currentRoute.path))
-				);
-			});
-			this.activeTab = found ? found.id : '';
-		} else {
-			this.activeTab = this.items.length > 0 ? this.items[0].id : '';
-		}
-
-		this.$emit('update:modelValue', this.activeTab);
+	data() {
+		return {
+			activeTab: this.value,
+		};
 	},
 	computed: {
 		upperMenuItems(): IMenuItem[] {
@@ -143,6 +126,23 @@ export default defineComponent({
 			);
 		},
 	},
+	mounted() {
+		if (this.mode === 'router') {
+			const found = this.items.find((item) => {
+				return (
+					(Array.isArray(item.activateOnRouteNames) &&
+						item.activateOnRouteNames.includes(this.currentRoute.name || '')) ||
+					(Array.isArray(item.activateOnRoutePaths) &&
+						item.activateOnRoutePaths.includes(this.currentRoute.path))
+				);
+			});
+			this.activeTab = found ? found.id : '';
+		} else {
+			this.activeTab = this.items.length > 0 ? this.items[0].id : '';
+		}
+
+		this.$emit('update:modelValue', this.activeTab);
+	},
 	methods: {
 		onSelect(item: IMenuItem): void {
 			if (item && item.type === 'link' && item.properties) {
diff --git a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
index 2e9cfe8581..290b363b3d 100644
--- a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
+++ b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
@@ -1,6 +1,6 @@
 <template>
 	<div :class="['n8n-menu-item', $style.item]">
-		<el-sub-menu
+		<ElSubMenu
 			v-if="item.children?.length"
 			:id="item.id"
 			:class="{
@@ -13,7 +13,7 @@
 			:popper-class="submenuPopperClass"
 		>
 			<template #title>
-				<n8n-icon
+				<N8nIcon
 					v-if="item.icon"
 					:class="$style.icon"
 					:icon="item.icon"
@@ -26,21 +26,21 @@
 				:key="child.id"
 				:item="child"
 				:compact="false"
-				:tooltipDelay="tooltipDelay"
-				:popperClass="popperClass"
+				:tooltip-delay="tooltipDelay"
+				:popper-class="popperClass"
 				:mode="mode"
-				:activeTab="activeTab"
+				:active-tab="activeTab"
 				:handle-select="handleSelect"
 			/>
-		</el-sub-menu>
-		<n8n-tooltip
+		</ElSubMenu>
+		<N8nTooltip
 			v-else
 			placement="right"
 			:content="item.label"
 			:disabled="!compact"
 			:show-after="tooltipDelay"
 		>
-			<el-menu-item
+			<ElMenuItem
 				:id="item.id"
 				:class="{
 					[$style.menuItem]: true,
@@ -53,14 +53,14 @@
 				:index="item.id"
 				@click="handleSelect(item)"
 			>
-				<n8n-icon
+				<N8nIcon
 					v-if="item.icon"
 					:class="$style.icon"
 					:icon="item.icon"
 					:size="item.customIconSize || 'large'"
 				/>
 				<span :class="$style.label">{{ item.label }}</span>
-				<n8n-tooltip
+				<N8nTooltip
 					v-if="item.secondaryIcon"
 					:class="$style.secondaryIcon"
 					:placement="item.secondaryIcon?.tooltip?.placement || 'right'"
@@ -68,10 +68,10 @@
 					:disabled="compact || !item.secondaryIcon?.tooltip?.content"
 					:show-after="tooltipDelay"
 				>
-					<n8n-icon :icon="item.secondaryIcon.name" :size="item.secondaryIcon.size || 'small'" />
-				</n8n-tooltip>
-			</el-menu-item>
-		</n8n-tooltip>
+					<N8nIcon :icon="item.secondaryIcon.name" :size="item.secondaryIcon.size || 'small'" />
+				</N8nTooltip>
+			</ElMenuItem>
+		</N8nTooltip>
 	</div>
 </template>
 
@@ -84,7 +84,7 @@ import { defineComponent } from 'vue';
 import type { IMenuItem, RouteObject } from '../../types';
 
 export default defineComponent({
-	name: 'n8n-menu-item',
+	name: 'N8nMenuItem',
 	components: {
 		ElSubMenu,
 		ElMenuItem,
diff --git a/packages/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.vue b/packages/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.vue
index af445b6996..da24b0ff5b 100644
--- a/packages/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.vue
+++ b/packages/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.vue
@@ -36,18 +36,18 @@ const i18n = useI18n();
 		</div>
 		<div>
 			<div :class="$style.details">
-				<span :class="$style.name" v-text="title" data-test-id="node-creator-item-name" />
-				<el-tag v-if="tag" :class="$style.tag" size="small" round type="success">
+				<span :class="$style.name" data-test-id="node-creator-item-name" v-text="title" />
+				<ElTag v-if="tag" :class="$style.tag" size="small" round type="success">
 					{{ tag }}
-				</el-tag>
-				<font-awesome-icon
-					icon="bolt"
+				</ElTag>
+				<FontAwesomeIcon
 					v-if="isTrigger"
+					icon="bolt"
 					size="xs"
 					:title="i18n.baseText('nodeCreator.nodeItem.triggerIconTitle')"
 					:class="$style.triggerIcon"
 				/>
-				<n8n-tooltip
+				<N8nTooltip
 					v-if="!!$slots.tooltip"
 					placement="top"
 					data-test-id="node-creator-item-tooltip"
@@ -56,7 +56,7 @@ const i18n = useI18n();
 						<slot name="tooltip" />
 					</template>
 					<n8n-icon :class="$style.tooltipIcon" icon="cube" />
-				</n8n-tooltip>
+				</N8nTooltip>
 			</div>
 			<p
 				v-if="description"
@@ -66,8 +66,8 @@ const i18n = useI18n();
 			/>
 		</div>
 		<slot name="dragContent" />
-		<button :class="$style.panelIcon" v-if="showActionArrow">
-			<font-awesome-icon :class="$style.panelArrow" icon="arrow-right" />
+		<button v-if="showActionArrow" :class="$style.panelIcon">
+			<FontAwesomeIcon :class="$style.panelArrow" icon="arrow-right" />
 		</button>
 	</div>
 </template>
diff --git a/packages/design-system/src/components/N8nNodeIcon/NodeIcon.vue b/packages/design-system/src/components/N8nNodeIcon/NodeIcon.vue
index b0fa4ef80b..db7a4a3729 100644
--- a/packages/design-system/src/components/N8nNodeIcon/NodeIcon.vue
+++ b/packages/design-system/src/components/N8nNodeIcon/NodeIcon.vue
@@ -9,20 +9,20 @@
 			:style="iconStyleData"
 		>
 			<!-- ElementUI tooltip is prone to memory-leaking so we only render it if we really need it -->
-			<n8n-tooltip :placement="tooltipPosition" :disabled="!showTooltip" v-if="showTooltip">
+			<N8nTooltip v-if="showTooltip" :placement="tooltipPosition" :disabled="!showTooltip">
 				<template #content>{{ nodeTypeName }}</template>
 				<div v-if="type !== 'unknown'" :class="$style.icon">
 					<img v-if="type === 'file'" :src="src" :class="$style.nodeIconImage" />
-					<font-awesome-icon v-else :icon="name" :class="$style.iconFa" :style="fontStyleData" />
+					<FontAwesomeIcon v-else :icon="name" :class="$style.iconFa" :style="fontStyleData" />
 				</div>
 				<div v-else :class="$style.nodeIconPlaceholder">
 					{{ nodeTypeName ? nodeTypeName.charAt(0) : '?' }}
 				</div>
-			</n8n-tooltip>
+			</N8nTooltip>
 			<template v-else>
 				<div v-if="type !== 'unknown'" :class="$style.icon">
 					<img v-if="type === 'file'" :src="src" :class="$style.nodeIconImage" />
-					<font-awesome-icon v-else :icon="name" :style="fontStyleData" />
+					<FontAwesomeIcon v-else :icon="name" :style="fontStyleData" />
 					<div v-if="badge" :class="$style.badge" :style="badgeStyleData">
 						<n8n-node-icon :type="badge.type" :src="badge.src" :size="badgeSize"></n8n-node-icon>
 					</div>
@@ -41,7 +41,7 @@ import { defineComponent, type PropType } from 'vue';
 import N8nTooltip from '../N8nTooltip';
 
 export default defineComponent({
-	name: 'n8n-node-icon',
+	name: 'N8nNodeIcon',
 	components: {
 		N8nTooltip,
 		FontAwesomeIcon,
diff --git a/packages/design-system/src/components/N8nNotice/Notice.vue b/packages/design-system/src/components/N8nNotice/Notice.vue
index cc53164f05..7cb20334f2 100644
--- a/packages/design-system/src/components/N8nNotice/Notice.vue
+++ b/packages/design-system/src/components/N8nNotice/Notice.vue
@@ -1,16 +1,16 @@
 <template>
 	<div :id="id" :class="classes" role="alert" @click="onClick">
 		<div class="notice-content">
-			<n8n-text size="small" :compact="true">
+			<N8nText size="small" :compact="true">
 				<slot>
 					<span
-						:class="showFullContent ? $style['expanded'] : $style['truncated']"
 						:id="`${id}-content`"
+						:class="showFullContent ? $style['expanded'] : $style['truncated']"
 						role="region"
 						v-html="sanitizeHtml(showFullContent ? fullContent : content)"
 					/>
 				</slot>
-			</n8n-text>
+			</N8nText>
 		</div>
 	</div>
 </template>
@@ -23,8 +23,11 @@ import Locale from '../../mixins/locale';
 import { uid } from '../../utils';
 
 export default defineComponent({
-	name: 'n8n-notice',
+	name: 'N8nNotice',
 	directives: {},
+	components: {
+		N8nText,
+	},
 	mixins: [Locale],
 	props: {
 		id: {
@@ -44,9 +47,6 @@ export default defineComponent({
 			default: '',
 		},
 	},
-	components: {
-		N8nText,
-	},
 	data() {
 		return {
 			showFullContent: false,
diff --git a/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap b/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap
index 2060ad2511..4a15f3a480 100644
--- a/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap
+++ b/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`components > N8nNotice > props > content > should render HTML 1`] = `
 "<div id="notice" class="notice notice warning" role="alert">
-  <div class="notice-content"><span class="n8n-text compact size-small regular"><span class="truncated" id="notice-content" role="region"><strong>Hello world!</strong> This is a notice.</span></span></div>
+  <div class="notice-content"><span class="n8n-text compact size-small regular"><span id="notice-content" class="truncated" role="region"><strong>Hello world!</strong> This is a notice.</span></span></div>
 </div>"
 `;
 
diff --git a/packages/design-system/src/components/N8nOption/Option.vue b/packages/design-system/src/components/N8nOption/Option.vue
index de11bf11e3..6dd193b341 100644
--- a/packages/design-system/src/components/N8nOption/Option.vue
+++ b/packages/design-system/src/components/N8nOption/Option.vue
@@ -3,15 +3,15 @@ import { ElOption } from 'element-plus';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-	props: {
-		...ElOption.props,
-	},
 	components: {
 		ElOption,
 	},
+	props: {
+		...ElOption.props,
+	},
 });
 </script>
 
 <template>
-	<el-option v-bind="{ ...$props, ...$attrs }"><slot /></el-option>
+	<ElOption v-bind="{ ...$props, ...$attrs }"><slot /></ElOption>
 </template>
diff --git a/packages/design-system/src/components/N8nPagination/Pagination.vue b/packages/design-system/src/components/N8nPagination/Pagination.vue
index 7394a4eb31..6a50bee508 100644
--- a/packages/design-system/src/components/N8nPagination/Pagination.vue
+++ b/packages/design-system/src/components/N8nPagination/Pagination.vue
@@ -3,17 +3,17 @@ import { defineComponent } from 'vue';
 import { ElPagination } from 'element-plus';
 
 export default defineComponent({
-	props: {
-		...ElPagination.props,
-	},
 	components: {
 		ElPagination,
 	},
+	props: {
+		...ElPagination.props,
+	},
 });
 </script>
 
 <template>
-	<el-pagination
+	<ElPagination
 		class="is-background"
 		layout="prev, pager, next"
 		v-bind="{ ...$props, ...$attrs }"
diff --git a/packages/design-system/src/components/N8nPopover/Popover.vue b/packages/design-system/src/components/N8nPopover/Popover.vue
index c853e7ab80..533d42fbf4 100644
--- a/packages/design-system/src/components/N8nPopover/Popover.vue
+++ b/packages/design-system/src/components/N8nPopover/Popover.vue
@@ -4,22 +4,22 @@ import { defineComponent } from 'vue';
 
 export default defineComponent({
 	name: 'N8nPopover',
-	props: {
-		...ElPopover.props,
-	},
 	components: {
 		ElPopover,
 	},
+	props: {
+		...ElPopover.props,
+	},
 });
 </script>
 
 <template>
 	<span>
-		<el-popover v-bind="{ ...$props, ...$attrs }">
+		<ElPopover v-bind="{ ...$props, ...$attrs }">
 			<template #reference>
 				<slot name="reference" />
 			</template>
 			<slot />
-		</el-popover>
+		</ElPopover>
 	</span>
 </template>
diff --git a/packages/design-system/src/components/N8nPulse/Pulse.vue b/packages/design-system/src/components/N8nPulse/Pulse.vue
index 3e3f2daf2e..625c538d93 100644
--- a/packages/design-system/src/components/N8nPulse/Pulse.vue
+++ b/packages/design-system/src/components/N8nPulse/Pulse.vue
@@ -12,7 +12,7 @@
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-	name: 'n8n-pulse',
+	name: 'N8nPulse',
 });
 </script>
 
diff --git a/packages/design-system/src/components/N8nRadioButtons/RadioButton.vue b/packages/design-system/src/components/N8nRadioButtons/RadioButton.vue
index 8d4ea4fca8..0ebe128de4 100644
--- a/packages/design-system/src/components/N8nRadioButtons/RadioButton.vue
+++ b/packages/design-system/src/components/N8nRadioButtons/RadioButton.vue
@@ -27,7 +27,7 @@
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-	name: 'n8n-radio-button',
+	name: 'N8nRadioButton',
 	props: {
 		label: {
 			type: String,
diff --git a/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue b/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue
index 4ff7d63e91..b4cdb732b5 100644
--- a/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue
+++ b/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue
@@ -28,7 +28,10 @@ export interface RadioOption {
 }
 
 export default defineComponent({
-	name: 'n8n-radio-buttons',
+	name: 'N8nRadioButtons',
+	components: {
+		RadioButton,
+	},
 	props: {
 		modelValue: {
 			type: String,
@@ -44,9 +47,6 @@ export default defineComponent({
 			type: Boolean,
 		},
 	},
-	components: {
-		RadioButton,
-	},
 	methods: {
 		onClick(option: { label: string; value: string; disabled?: boolean }) {
 			if (this.disabled || option.disabled) {
diff --git a/packages/design-system/src/components/N8nRecycleScroller/RecycleScroller.vue b/packages/design-system/src/components/N8nRecycleScroller/RecycleScroller.vue
index 5e67f23660..ee5a50c4c3 100644
--- a/packages/design-system/src/components/N8nRecycleScroller/RecycleScroller.vue
+++ b/packages/design-system/src/components/N8nRecycleScroller/RecycleScroller.vue
@@ -5,7 +5,7 @@ import type { PropType, ComponentPublicInstance } from 'vue';
 import { computed, defineComponent, onMounted, onBeforeMount, ref, nextTick, watch } from 'vue';
 
 export default defineComponent({
-	name: 'n8n-recycle-scroller',
+	name: 'N8nRecycleScroller',
 	props: {
 		itemSize: {
 			type: Number,
@@ -223,16 +223,16 @@ export default defineComponent({
 </script>
 
 <template>
-	<div class="recycle-scroller-wrapper" ref="wrapperRef">
-		<div class="recycle-scroller" :style="scrollerStyles" ref="scrollerRef">
-			<div class="recycle-scroller-items-wrapper" :style="itemsStyles" ref="itemsRef">
+	<div ref="wrapperRef" class="recycle-scroller-wrapper">
+		<div ref="scrollerRef" class="recycle-scroller" :style="scrollerStyles">
+			<div ref="itemsRef" class="recycle-scroller-items-wrapper" :style="itemsStyles">
 				<div
 					v-for="item in itemsVisible"
 					:key="item[itemKey]"
-					class="recycle-scroller-item"
 					:ref="(element) => (itemRefs[item[itemKey]] = element)"
+					class="recycle-scroller-item"
 				>
-					<slot :item="item" :updateItemSize="onUpdateItemSize" />
+					<slot :item="item" :update-item-size="onUpdateItemSize" />
 				</div>
 			</div>
 		</div>
diff --git a/packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.vue b/packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.vue
index d9259431da..0cf4c941fb 100644
--- a/packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.vue
+++ b/packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.vue
@@ -47,7 +47,7 @@ const directionsCursorMaps: { [key: string]: string } = {
 };
 
 export default defineComponent({
-	name: 'n8n-resize',
+	name: 'N8nResize',
 	props: {
 		isResizingEnabled: {
 			type: Boolean,
diff --git a/packages/design-system/src/components/N8nRoute/Route.vue b/packages/design-system/src/components/N8nRoute/Route.vue
index 4352d70cdc..fc786cd0d1 100644
--- a/packages/design-system/src/components/N8nRoute/Route.vue
+++ b/packages/design-system/src/components/N8nRoute/Route.vue
@@ -11,7 +11,7 @@
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-	name: 'n8n-route',
+	name: 'N8nRoute',
 	props: {
 		to: {
 			type: String || Object,
diff --git a/packages/design-system/src/components/N8nSelect/Select.vue b/packages/design-system/src/components/N8nSelect/Select.vue
index 1fcd5ba7ce..6961d7ebfa 100644
--- a/packages/design-system/src/components/N8nSelect/Select.vue
+++ b/packages/design-system/src/components/N8nSelect/Select.vue
@@ -9,22 +9,22 @@
 		<div v-if="$slots.prepend" :class="$style.prepend">
 			<slot name="prepend" />
 		</div>
-		<el-select
+		<ElSelect
 			v-bind="{ ...$props, ...listeners }"
-			:modelValue="modelValue"
+			ref="innerSelect"
+			:model-value="modelValue"
 			:size="computedSize"
 			:class="$style[classes]"
 			:popper-class="popperClass"
-			ref="innerSelect"
 		>
-			<template #prefix v-if="$slots.prefix">
+			<template v-if="$slots.prefix" #prefix>
 				<slot name="prefix" />
 			</template>
-			<template #suffix v-if="$slots.suffix">
+			<template v-if="$slots.suffix" #suffix>
 				<slot name="suffix" />
 			</template>
 			<slot></slot>
-		</el-select>
+		</ElSelect>
 	</div>
 </template>
 
@@ -41,7 +41,7 @@ export interface IProps {
 }
 
 export default defineComponent({
-	name: 'n8n-select',
+	name: 'N8nSelect',
 	components: {
 		ElSelect,
 	},
diff --git a/packages/design-system/src/components/N8nSelect/__tests__/Select.spec.ts b/packages/design-system/src/components/N8nSelect/__tests__/Select.spec.ts
index 26d1fa5275..b17c51b700 100644
--- a/packages/design-system/src/components/N8nSelect/__tests__/Select.spec.ts
+++ b/packages/design-system/src/components/N8nSelect/__tests__/Select.spec.ts
@@ -26,11 +26,6 @@ describe('components', () => {
 
 		it('should select an option', async () => {
 			const n8nSelectTestComponent = defineComponent({
-				template: `
-					<n8n-select v-model="selected">
-						<n8n-option v-for="o in options" :key="o" :value="o" :label="o" />
-					</n8n-select>
-				`,
 				setup() {
 					const options = ref(['1', '2', '3']);
 					const selected = ref('');
@@ -40,6 +35,11 @@ describe('components', () => {
 						selected,
 					};
 				},
+				template: `
+					<n8n-select v-model="selected">
+						<n8n-option v-for="o in options" :key="o" :value="o" :label="o" />
+					</n8n-select>
+				`,
 			});
 
 			const { container } = render(n8nSelectTestComponent, {
diff --git a/packages/design-system/src/components/N8nSpinner/Spinner.vue b/packages/design-system/src/components/N8nSpinner/Spinner.vue
index a3f4559cc2..ff8fa6e327 100644
--- a/packages/design-system/src/components/N8nSpinner/Spinner.vue
+++ b/packages/design-system/src/components/N8nSpinner/Spinner.vue
@@ -6,7 +6,7 @@
 			<div></div>
 			<div></div>
 		</div>
-		<n8n-icon v-else icon="spinner" :size="size" spin />
+		<N8nIcon v-else icon="spinner" :size="size" spin />
 	</span>
 </template>
 
@@ -16,7 +16,7 @@ import N8nIcon from '../N8nIcon';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-	name: 'n8n-spinner',
+	name: 'N8nSpinner',
 	components: {
 		N8nIcon,
 	},
diff --git a/packages/design-system/src/components/N8nSticky/Sticky.vue b/packages/design-system/src/components/N8nSticky/Sticky.vue
index 70cf5983db..478df80dda 100644
--- a/packages/design-system/src/components/N8nSticky/Sticky.vue
+++ b/packages/design-system/src/components/N8nSticky/Sticky.vue
@@ -9,51 +9,51 @@
 		:style="styles"
 		@keydown.prevent
 	>
-		<n8n-resize-wrapper
-			:isResizingEnabled="!readOnly"
+		<N8nResizeWrapper
+			:is-resizing-enabled="!readOnly"
 			:height="height"
 			:width="width"
-			:minHeight="minHeight"
-			:minWidth="minWidth"
+			:min-height="minHeight"
+			:min-width="minWidth"
 			:scale="scale"
-			:gridSize="gridSize"
+			:grid-size="gridSize"
 			@resizeend="onResizeEnd"
 			@resize="onResize"
 			@resizestart="onResizeStart"
 		>
 			<div v-show="!editMode" :class="$style.wrapper" @dblclick.stop="onDoubleClick">
-				<n8n-markdown
+				<N8nMarkdown
 					theme="sticky"
 					:content="modelValue"
-					:withMultiBreaks="true"
+					:with-multi-breaks="true"
 					@markdown-click="onMarkdownClick"
 				/>
 			</div>
 			<div
 				v-show="editMode"
+				:class="{ 'full-height': !shouldShowFooter, 'sticky-textarea': true }"
 				@click.stop
 				@mousedown.stop
 				@mouseup.stop
 				@keydown.esc="onInputBlur"
 				@keydown.stop
-				:class="{ 'full-height': !shouldShowFooter, 'sticky-textarea': true }"
 			>
-				<n8n-input
-					:modelValue="modelValue"
+				<N8nInput
+					ref="input"
+					:model-value="modelValue"
 					type="textarea"
 					:rows="5"
 					@blur="onInputBlur"
 					@update:modelValue="onUpdateModelValue"
 					@wheel="onInputScroll"
-					ref="input"
 				/>
 			</div>
 			<div v-if="editMode && shouldShowFooter" :class="$style.footer">
-				<n8n-text size="xsmall" aligh="right">
+				<N8nText size="xsmall" aligh="right">
 					<span v-html="t('sticky.markdownHint')"></span>
-				</n8n-text>
+				</N8nText>
 			</div>
-		</n8n-resize-wrapper>
+		</N8nResizeWrapper>
 	</div>
 </template>
 
@@ -66,7 +66,13 @@ import Locale from '../../mixins/locale';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-	name: 'n8n-sticky',
+	name: 'N8nSticky',
+	components: {
+		N8nInput,
+		N8nMarkdown,
+		N8nResizeWrapper,
+		N8nText,
+	},
 	mixins: [Locale],
 	props: {
 		modelValue: {
@@ -116,12 +122,6 @@ export default defineComponent({
 			default: 1,
 		},
 	},
-	components: {
-		N8nInput,
-		N8nMarkdown,
-		N8nResizeWrapper,
-		N8nText,
-	},
 	data() {
 		return {
 			isResizing: false,
@@ -152,6 +152,19 @@ export default defineComponent({
 			return this.resHeight > 100 && this.resWidth > 155;
 		},
 	},
+	watch: {
+		editMode(newMode, prevMode) {
+			setTimeout(() => {
+				if (newMode && !prevMode && this.$refs.input) {
+					const textarea = this.$refs.input as HTMLTextAreaElement;
+					if (this.defaultText === this.modelValue) {
+						textarea.select();
+					}
+					textarea.focus();
+				}
+			}, 100);
+		},
+	},
 	methods: {
 		onDoubleClick() {
 			if (!this.readOnly) {
@@ -187,19 +200,6 @@ export default defineComponent({
 			}
 		},
 	},
-	watch: {
-		editMode(newMode, prevMode) {
-			setTimeout(() => {
-				if (newMode && !prevMode && this.$refs.input) {
-					const textarea = this.$refs.input as HTMLTextAreaElement;
-					if (this.defaultText === this.modelValue) {
-						textarea.select();
-					}
-					textarea.focus();
-				}
-			}, 100);
-		},
-	},
 });
 </script>
 
diff --git a/packages/design-system/src/components/N8nTabs/Tabs.vue b/packages/design-system/src/components/N8nTabs/Tabs.vue
index 84243ddd1f..41faefcfdd 100644
--- a/packages/design-system/src/components/N8nTabs/Tabs.vue
+++ b/packages/design-system/src/components/N8nTabs/Tabs.vue
@@ -1,21 +1,21 @@
 <template>
 	<div :class="['n8n-tabs', $style.container]">
-		<div :class="$style.back" v-if="scrollPosition > 0" @click="scrollLeft">
-			<n8n-icon icon="chevron-left" size="small" />
+		<div v-if="scrollPosition > 0" :class="$style.back" @click="scrollLeft">
+			<N8nIcon icon="chevron-left" size="small" />
 		</div>
-		<div :class="$style.next" v-if="canScrollRight" @click="scrollRight">
-			<n8n-icon icon="chevron-right" size="small" />
+		<div v-if="canScrollRight" :class="$style.next" @click="scrollRight">
+			<N8nIcon icon="chevron-right" size="small" />
 		</div>
 		<div ref="tabs" :class="$style.tabs">
 			<div
 				v-for="option in options"
-				:key="option.value"
 				:id="option.value"
+				:key="option.value"
 				:class="{ [$style.alignRight]: option.align === 'right' }"
 			>
 				<n8n-tooltip :disabled="!option.tooltip" placement="bottom">
 					<template #content>
-						<div v-html="option.tooltip" @click="handleTooltipClick(option.value, $event)" />
+						<div @click="handleTooltipClick(option.value, $event)" v-html="option.tooltip" />
 					</template>
 					<a
 						v-if="option.href"
@@ -27,7 +27,7 @@
 						<div>
 							{{ option.label }}
 							<span :class="$style.external"
-								><n8n-icon icon="external-link-alt" size="small"
+								><N8nIcon icon="external-link-alt" size="small"
 							/></span>
 						</div>
 					</a>
@@ -38,7 +38,7 @@
 						:data-test-id="`tab-${option.value}`"
 						@click="() => handleTabClick(option.value)"
 					>
-						<n8n-icon v-if="option.icon" :icon="option.icon" size="medium" />
+						<N8nIcon v-if="option.icon" :icon="option.icon" size="medium" />
 						<span v-if="option.label">{{ option.label }}</span>
 					</div>
 				</n8n-tooltip>
@@ -66,6 +66,23 @@ export default defineComponent({
 	components: {
 		N8nIcon,
 	},
+	props: {
+		modelValue: {
+			type: String,
+			default: '',
+		},
+		options: {
+			type: Array as PropType<N8nTabOptions[]>,
+			default: (): N8nTabOptions[] => [],
+		},
+	},
+	data() {
+		return {
+			scrollPosition: 0,
+			canScrollRight: false,
+			resizeObserver: null as ResizeObserver | null,
+		};
+	},
 	mounted() {
 		const container = this.$refs.tabs as HTMLDivElement | undefined;
 		if (container) {
@@ -94,23 +111,6 @@ export default defineComponent({
 			this.resizeObserver.disconnect();
 		}
 	},
-	data() {
-		return {
-			scrollPosition: 0,
-			canScrollRight: false,
-			resizeObserver: null as ResizeObserver | null,
-		};
-	},
-	props: {
-		modelValue: {
-			type: String,
-			default: '',
-		},
-		options: {
-			type: Array as PropType<N8nTabOptions[]>,
-			default: (): N8nTabOptions[] => [],
-		},
-	},
 	methods: {
 		handleTooltipClick(tab: string, event: MouseEvent) {
 			this.$emit('tooltipClick', tab, event);
diff --git a/packages/design-system/src/components/N8nTag/Tag.vue b/packages/design-system/src/components/N8nTag/Tag.vue
index 29849d1223..95b2982673 100644
--- a/packages/design-system/src/components/N8nTag/Tag.vue
+++ b/packages/design-system/src/components/N8nTag/Tag.vue
@@ -8,7 +8,7 @@
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-	name: 'n8n-tag',
+	name: 'N8nTag',
 	props: {
 		text: {
 			type: String,
diff --git a/packages/design-system/src/components/N8nTags/Tags.vue b/packages/design-system/src/components/N8nTags/Tags.vue
index 96012f44f0..3bf8ec56ba 100644
--- a/packages/design-system/src/components/N8nTags/Tags.vue
+++ b/packages/design-system/src/components/N8nTags/Tags.vue
@@ -1,12 +1,12 @@
 <template>
 	<div :class="['n8n-tags', $style.tags]">
-		<n8n-tag
+		<N8nTag
 			v-for="tag in visibleTags"
 			:key="tag.id"
 			:text="tag.name"
 			@click="$emit('click:tag', tag.id, $event)"
 		/>
-		<n8n-link
+		<N8nLink
 			v-if="truncate && !showAll && hiddenTagsLength > 0"
 			theme="text"
 			underline
@@ -14,7 +14,7 @@
 			@click.stop.prevent="onExpand"
 		>
 			{{ t('tags.showMore', `${hiddenTagsLength}`) }}
-		</n8n-link>
+		</N8nLink>
 	</div>
 </template>
 
@@ -31,17 +31,12 @@ export interface ITag {
 }
 
 export default defineComponent({
-	name: 'n8n-tags',
-	mixins: [Locale],
+	name: 'N8nTags',
 	components: {
 		N8nTag,
 		N8nLink,
 	},
-	data() {
-		return {
-			showAll: false,
-		};
-	},
+	mixins: [Locale],
 	props: {
 		tags: {
 			type: Array as PropType<ITag[]>,
@@ -56,6 +51,11 @@ export default defineComponent({
 			default: 3,
 		},
 	},
+	data() {
+		return {
+			showAll: false,
+		};
+	},
 	computed: {
 		visibleTags(): ITag[] {
 			if (this.truncate && !this.showAll && this.tags.length > this.truncateAt) {
diff --git a/packages/design-system/src/components/N8nText/Text.vue b/packages/design-system/src/components/N8nText/Text.vue
index 7599828431..2415675138 100644
--- a/packages/design-system/src/components/N8nText/Text.vue
+++ b/packages/design-system/src/components/N8nText/Text.vue
@@ -7,7 +7,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 export default defineComponent({
-	name: 'n8n-text',
+	name: 'N8nText',
 	props: {
 		bold: {
 			type: Boolean,
diff --git a/packages/design-system/src/components/N8nTooltip/Tooltip.vue b/packages/design-system/src/components/N8nTooltip/Tooltip.vue
index c49df41184..a338ea8744 100644
--- a/packages/design-system/src/components/N8nTooltip/Tooltip.vue
+++ b/packages/design-system/src/components/N8nTooltip/Tooltip.vue
@@ -1,5 +1,5 @@
 <template>
-	<el-tooltip v-bind="{ ...$props, ...$attrs }" :popperClass="$props.popperClass ?? 'n8n-tooltip'">
+	<ElTooltip v-bind="{ ...$props, ...$attrs }" :popper-class="$props.popperClass ?? 'n8n-tooltip'">
 		<slot />
 		<template #content>
 			<slot name="content">
@@ -10,14 +10,14 @@
 				:class="$style.buttons"
 				:style="{ justifyContent: justifyButtons }"
 			>
-				<n8n-button
+				<N8nButton
 					v-for="button in buttons"
 					:key="button.attrs.label"
 					v-bind="{ ...button.attrs, ...button.listeners }"
 				/>
 			</div>
 		</template>
-	</el-tooltip>
+	</ElTooltip>
 </template>
 
 <script lang="ts">
@@ -28,12 +28,12 @@ import type { IN8nButton } from '@/types';
 import N8nButton from '../N8nButton';
 
 export default defineComponent({
-	name: 'n8n-tooltip',
-	inheritAttrs: false,
+	name: 'N8nTooltip',
 	components: {
 		ElTooltip,
 		N8nButton,
 	},
+	inheritAttrs: false,
 	props: {
 		...ElTooltip.props,
 		content: {
diff --git a/packages/design-system/src/components/N8nTree/Tree.vue b/packages/design-system/src/components/N8nTree/Tree.vue
index 743fb609e8..16ffbf1daf 100644
--- a/packages/design-system/src/components/N8nTree/Tree.vue
+++ b/packages/design-system/src/components/N8nTree/Tree.vue
@@ -1,21 +1,21 @@
 <template>
 	<div class="n8n-tree">
 		<div v-for="(label, i) in Object.keys(value)" :key="i" :class="classes">
-			<div :class="$style.simple" v-if="isSimple(value[label])">
-				<slot v-if="$slots.label" name="label" v-bind:label="label" v-bind:path="getPath(label)" />
+			<div v-if="isSimple(value[label])" :class="$style.simple">
+				<slot v-if="$slots.label" name="label" :label="label" :path="getPath(label)" />
 				<span v-else>{{ label }}</span>
 				<span>:</span>
-				<slot v-if="$slots.value" name="value" v-bind:value="value[label]" />
+				<slot v-if="$slots.value" name="value" :value="value[label]" />
 				<span v-else>{{ value[label] }}</span>
 			</div>
 			<div v-else>
-				<slot v-if="$slots.label" name="label" v-bind:label="label" v-bind:path="getPath(label)" />
+				<slot v-if="$slots.label" name="label" :label="label" :path="getPath(label)" />
 				<span v-else>{{ label }}</span>
 				<n8n-tree
 					:path="getPath(label)"
 					:depth="depth + 1"
 					:value="value[label]"
-					:nodeClass="nodeClass"
+					:node-class="nodeClass"
 				>
 					<template v-for="(index, name) in $slots" #[name]="data">
 						<slot :name="name" v-bind="data"></slot>
@@ -31,7 +31,7 @@ import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-	name: 'n8n-tree',
+	name: 'N8nTree',
 	components: {},
 	props: {
 		value: {
diff --git a/packages/design-system/src/components/N8nUserInfo/UserInfo.vue b/packages/design-system/src/components/N8nUserInfo/UserInfo.vue
index de1ff1c5af..553e822766 100644
--- a/packages/design-system/src/components/N8nUserInfo/UserInfo.vue
+++ b/packages/design-system/src/components/N8nUserInfo/UserInfo.vue
@@ -1,25 +1,25 @@
 <template>
 	<div :class="classes">
 		<div :class="$style.avatarContainer">
-			<n8n-avatar :firstName="firstName" :lastName="lastName" />
+			<N8nAvatar :first-name="firstName" :last-name="lastName" />
 		</div>
 
 		<div v-if="isPendingUser" :class="$style.pendingUser">
-			<n8n-text :bold="true">{{ email }}</n8n-text>
-			<span :class="$style.pendingBadge"><n8n-badge :bold="true">Pending</n8n-badge></span>
+			<N8nText :bold="true">{{ email }}</N8nText>
+			<span :class="$style.pendingBadge"><N8nBadge :bold="true">Pending</N8nBadge></span>
 		</div>
 		<div v-else :class="$style.infoContainer">
 			<div>
-				<n8n-text :bold="true" color="text-dark">
+				<N8nText :bold="true" color="text-dark">
 					{{ firstName }} {{ lastName }}
 					{{ isCurrentUser ? t('nds.userInfo.you') : '' }}
-				</n8n-text>
+				</N8nText>
 				<span v-if="disabled" :class="$style.pendingBadge">
-					<n8n-badge :bold="true">Disabled</n8n-badge>
+					<N8nBadge :bold="true">Disabled</N8nBadge>
 				</span>
 			</div>
 			<div>
-				<n8n-text data-test-id="user-email" size="small" color="text-light">{{ email }}</n8n-text>
+				<N8nText data-test-id="user-email" size="small" color="text-light">{{ email }}</N8nText>
 			</div>
 		</div>
 	</div>
@@ -33,13 +33,13 @@ import Locale from '../../mixins/locale';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-	name: 'n8n-users-info',
-	mixins: [Locale],
+	name: 'N8nUsersInfo',
 	components: {
 		N8nAvatar,
 		N8nText,
 		N8nBadge,
 	},
+	mixins: [Locale],
 	props: {
 		firstName: {
 			type: String,
diff --git a/packages/design-system/src/components/N8nUserSelect/UserSelect.vue b/packages/design-system/src/components/N8nUserSelect/UserSelect.vue
index b79bc2e7df..0106633d8c 100644
--- a/packages/design-system/src/components/N8nUserSelect/UserSelect.vue
+++ b/packages/design-system/src/components/N8nUserSelect/UserSelect.vue
@@ -1,23 +1,23 @@
 <template>
-	<n8n-select
+	<N8nSelect
 		data-test-id="user-select-trigger"
 		v-bind="$attrs"
-		:modelValue="modelValue"
+		:model-value="modelValue"
 		:filterable="true"
-		:filterMethod="setFilter"
+		:filter-method="setFilter"
 		:placeholder="placeholder"
 		:default-first-option="true"
 		teleported
 		:popper-class="$style.limitPopperWidth"
-		:noDataText="t('nds.userSelect.noMatchingUsers')"
+		:no-data-text="t('nds.userSelect.noMatchingUsers')"
 		:size="size"
 		@blur="onBlur"
 		@focus="onFocus"
 	>
-		<template #prefix v-if="$slots.prefix">
+		<template v-if="$slots.prefix" #prefix>
 			<slot name="prefix" />
 		</template>
-		<n8n-option
+		<N8nOption
 			v-for="user in sortedUsers"
 			:key="user.id"
 			:value="user.id"
@@ -25,9 +25,9 @@
 			:label="getLabel(user)"
 			:disabled="user.disabled"
 		>
-			<n8n-user-info v-bind="user" :isCurrentUser="currentUserId === user.id" />
-		</n8n-option>
-	</n8n-select>
+			<N8nUserInfo v-bind="user" :is-current-user="currentUserId === user.id" />
+		</N8nOption>
+	</N8nSelect>
 </template>
 
 <script lang="ts">
@@ -41,13 +41,13 @@ import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-	name: 'n8n-user-select',
-	mixins: [Locale],
+	name: 'N8nUserSelect',
 	components: {
 		N8nUserInfo,
 		N8nSelect,
 		N8nOption,
 	},
+	mixins: [Locale],
 	props: {
 		users: {
 			type: Array as PropType<IUser[]>,
diff --git a/packages/design-system/src/components/N8nUserStack/UserStack.vue b/packages/design-system/src/components/N8nUserStack/UserStack.vue
index 6f4e7b174d..cffc641730 100644
--- a/packages/design-system/src/components/N8nUserStack/UserStack.vue
+++ b/packages/design-system/src/components/N8nUserStack/UserStack.vue
@@ -76,11 +76,11 @@ const menuHeight = computed(() => {
 			popper-class="user-stack-popper"
 		>
 			<div :class="$style.avatars" data-test-id="user-stack-avatars">
-				<n8n-avatar
+				<N8nAvatar
 					v-for="user in flatUserList.slice(0, visibleAvatarCount)"
 					:key="user.id"
-					:firstName="user.firstName"
-					:lastName="user.lastName"
+					:first-name="user.firstName"
+					:last-name="user.lastName"
 					:class="$style.avatar"
 					:data-test-id="`user-stack-avatar-${user.id}`"
 					size="small"
@@ -101,9 +101,9 @@ const menuHeight = computed(() => {
 									:data-test-id="`user-stack-info-${user.id}`"
 									:class="$style.userInfoContainer"
 								>
-									<n8n-user-info
+									<N8nUserInfo
 										v-bind="user"
-										:isCurrentUser="user.email === props.currentUserEmail"
+										:is-current-user="user.email === props.currentUserEmail"
 									/>
 								</el-dropdown-item>
 							</div>
diff --git a/packages/design-system/src/components/N8nUsersList/UsersList.vue b/packages/design-system/src/components/N8nUsersList/UsersList.vue
index 64d3f13d58..a3e2000a96 100644
--- a/packages/design-system/src/components/N8nUsersList/UsersList.vue
+++ b/packages/design-system/src/components/N8nUsersList/UsersList.vue
@@ -6,17 +6,17 @@
 			:class="i === sortedUsers.length - 1 ? $style.itemContainer : $style.itemWithBorder"
 			:data-test-id="`user-list-item-${user.email}`"
 		>
-			<n8n-user-info
+			<N8nUserInfo
 				v-bind="user"
-				:isCurrentUser="currentUserId === user.id"
-				:isSamlLoginEnabled="isSamlLoginEnabled"
+				:is-current-user="currentUserId === user.id"
+				:is-saml-login-enabled="isSamlLoginEnabled"
 			/>
 			<div :class="$style.badgeContainer">
-				<n8n-badge v-if="user.isOwner" theme="tertiary" bold>
+				<N8nBadge v-if="user.isOwner" theme="tertiary" bold>
 					{{ t('nds.auth.roles.owner') }}
-				</n8n-badge>
+				</N8nBadge>
 				<slot v-if="!user.isOwner && !readonly" name="actions" :user="user" />
-				<n8n-action-toggle
+				<N8nActionToggle
 					v-if="
 						!user.isOwner &&
 						user.signInType !== 'ldap' &&
@@ -44,13 +44,13 @@ import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-	name: 'n8n-users-list',
-	mixins: [Locale],
+	name: 'N8nUsersList',
 	components: {
 		N8nActionToggle,
 		N8nBadge,
 		N8nUserInfo,
 	},
+	mixins: [Locale],
 	props: {
 		readonly: {
 			type: Boolean,
diff --git a/packages/design-system/src/plugin.ts b/packages/design-system/src/plugin.ts
index f06d4cf4bb..493fde38ec 100644
--- a/packages/design-system/src/plugin.ts
+++ b/packages/design-system/src/plugin.ts
@@ -1,118 +1,12 @@
-import type { Plugin } from 'vue';
-import {
-	N8nActionBox,
-	N8nActionDropdown,
-	N8nActionToggle,
-	N8nAlert,
-	N8nAvatar,
-	N8nBadge,
-	N8nBlockUi,
-	N8nButton,
-	N8nCallout,
-	N8nCard,
-	N8nCheckbox,
-	N8nCircleLoader,
-	N8nColorPicker,
-	N8nDatatable,
-	N8nFormBox,
-	N8nFormInputs,
-	N8nFormInput,
-	N8nHeading,
-	N8nIcon,
-	N8nIconButton,
-	N8nInfoAccordion,
-	N8nInfoTip,
-	N8nInput,
-	N8nInputLabel,
-	N8nInputNumber,
-	N8nLink,
-	N8nLoading,
-	N8nMarkdown,
-	N8nMenu,
-	N8nMenuItem,
-	N8nNodeCreatorNode,
-	N8nNodeIcon,
-	N8nNotice,
-	N8nOption,
-	N8nPopover,
-	N8nPulse,
-	N8nRadioButtons,
-	N8nRecycleScroller,
-	N8nResizeWrapper,
-	N8nSelect,
-	N8nSpinner,
-	N8nSticky,
-	N8nTabs,
-	N8nTag,
-	N8nTags,
-	N8nText,
-	N8nTooltip,
-	N8nTree,
-	N8nUserInfo,
-	N8nUserSelect,
-	N8nUsersList,
-	N8nResizeObserver,
-	N8nKeyboardShortcut,
-	N8nUserStack,
-} from './components';
+import type { Component, Plugin } from 'vue';
+import * as components from './components';
 
 export interface N8nPluginOptions {}
 
 export const N8nPlugin: Plugin<N8nPluginOptions> = {
 	install: (app) => {
-		app.component('n8n-action-box', N8nActionBox);
-		app.component('n8n-action-dropdown', N8nActionDropdown);
-		app.component('n8n-action-toggle', N8nActionToggle);
-		app.component('n8n-alert', N8nAlert);
-		app.component('n8n-avatar', N8nAvatar);
-		app.component('n8n-badge', N8nBadge);
-		app.component('n8n-block-ui', N8nBlockUi);
-		app.component('n8n-button', N8nButton);
-		app.component('n8n-callout', N8nCallout);
-		app.component('n8n-card', N8nCard);
-		app.component('n8n-checkbox', N8nCheckbox);
-		app.component('n8n-circle-loader', N8nCircleLoader);
-		app.component('n8n-color-picker', N8nColorPicker);
-		app.component('n8n-datatable', N8nDatatable);
-		app.component('n8n-form-box', N8nFormBox);
-		app.component('n8n-form-inputs', N8nFormInputs);
-		app.component('n8n-form-input', N8nFormInput);
-		app.component('n8n-heading', N8nHeading);
-		app.component('n8n-icon', N8nIcon);
-		app.component('n8n-icon-button', N8nIconButton);
-		app.component('n8n-info-accordion', N8nInfoAccordion);
-		app.component('n8n-info-tip', N8nInfoTip);
-		app.component('n8n-input', N8nInput);
-		app.component('n8n-input-label', N8nInputLabel);
-		app.component('n8n-input-number', N8nInputNumber);
-		app.component('n8n-link', N8nLink);
-		app.component('n8n-loading', N8nLoading);
-		app.component('n8n-markdown', N8nMarkdown);
-		app.component('n8n-menu', N8nMenu);
-		app.component('n8n-menu-item', N8nMenuItem);
-		app.component('n8n-node-creator-node', N8nNodeCreatorNode);
-		app.component('n8n-node-icon', N8nNodeIcon);
-		app.component('n8n-notice', N8nNotice);
-		app.component('n8n-option', N8nOption);
-		app.component('n8n-popover', N8nPopover);
-		app.component('n8n-pulse', N8nPulse);
-		app.component('n8n-radio-buttons', N8nRadioButtons);
-		app.component('n8n-recycle-scroller', N8nRecycleScroller);
-		app.component('n8n-resize-wrapper', N8nResizeWrapper);
-		app.component('n8n-select', N8nSelect);
-		app.component('n8n-spinner', N8nSpinner);
-		app.component('n8n-sticky', N8nSticky);
-		app.component('n8n-tabs', N8nTabs);
-		app.component('n8n-tag', N8nTag);
-		app.component('n8n-tags', N8nTags);
-		app.component('n8n-text', N8nText);
-		app.component('n8n-tooltip', N8nTooltip);
-		app.component('n8n-tree', N8nTree);
-		app.component('n8n-user-stack', N8nUserStack);
-		app.component('n8n-user-info', N8nUserInfo);
-		app.component('n8n-users-list', N8nUsersList);
-		app.component('n8n-user-select', N8nUserSelect);
-		app.component('n8n-resize-observer', N8nResizeObserver);
-		app.component('n8n-keyboard-shortcut', N8nKeyboardShortcut);
+		for (const [name, component] of Object.entries(components)) {
+			app.component(name, component as unknown as Component);
+		}
 	},
 };
diff --git a/packages/design-system/src/styleguide/ColorCircles.vue b/packages/design-system/src/styleguide/ColorCircles.vue
index e8efc3d9a7..0643883ac4 100644
--- a/packages/design-system/src/styleguide/ColorCircles.vue
+++ b/packages/design-system/src/styleguide/ColorCircles.vue
@@ -53,19 +53,19 @@ function getHex(hsl: string): string {
 }
 
 export default defineComponent({
-	name: 'color-circles',
-	data() {
-		return {
-			observer: null as null | MutationObserver,
-			hsl: {} as { [color: string]: string },
-		};
-	},
+	name: 'ColorCircles',
 	props: {
 		colors: {
 			type: Array as PropType<string[]>,
 			required: true,
 		},
 	},
+	data() {
+		return {
+			observer: null as null | MutationObserver,
+			hsl: {} as { [color: string]: string },
+		};
+	},
 	created() {
 		const setColors = () => {
 			this.colors.forEach((color) => {
diff --git a/packages/design-system/src/styleguide/Sizes.vue b/packages/design-system/src/styleguide/Sizes.vue
index a22de96cd3..da638f1088 100644
--- a/packages/design-system/src/styleguide/Sizes.vue
+++ b/packages/design-system/src/styleguide/Sizes.vue
@@ -22,13 +22,7 @@ import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-	name: 'sizes',
-	data() {
-		return {
-			observer: null as null | MutationObserver,
-			sizes: {} as Record<string, { rem: string; px: number }>,
-		};
-	},
+	name: 'Sizes',
 	props: {
 		variables: {
 			type: Array as PropType<string[]>,
@@ -39,6 +33,12 @@ export default defineComponent({
 			default: '',
 		},
 	},
+	data() {
+		return {
+			observer: null as null | MutationObserver,
+			sizes: {} as Record<string, { rem: string; px: number }>,
+		};
+	},
 	created() {
 		const setSizes = () => {
 			this.variables.forEach((variable: string) => {
diff --git a/packages/design-system/src/styleguide/VariableTable.vue b/packages/design-system/src/styleguide/VariableTable.vue
index 5548a2f481..7fba9432d6 100644
--- a/packages/design-system/src/styleguide/VariableTable.vue
+++ b/packages/design-system/src/styleguide/VariableTable.vue
@@ -20,13 +20,7 @@ import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-	name: 'variable-table',
-	data() {
-		return {
-			observer: null as null | MutationObserver,
-			values: {} as Record<string, string>,
-		};
-	},
+	name: 'VariableTable',
 	props: {
 		variables: {
 			type: Array as PropType<string[]>,
@@ -37,6 +31,12 @@ export default defineComponent({
 			default: '',
 		},
 	},
+	data() {
+		return {
+			observer: null as null | MutationObserver,
+			values: {} as Record<string, string>,
+		};
+	},
 	created() {
 		const setValues = () => {
 			this.variables.forEach((variable) => {
diff --git a/packages/design-system/src/styleguide/components/SpacingPreview.vue b/packages/design-system/src/styleguide/components/SpacingPreview.vue
index e9b9eb7626..4fe2e25046 100644
--- a/packages/design-system/src/styleguide/components/SpacingPreview.vue
+++ b/packages/design-system/src/styleguide/components/SpacingPreview.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<div v-for="size in sizes" class="spacing-group" :key="size">
+		<div v-for="size in sizes" :key="size" class="spacing-group">
 			<div class="spacing-example" :class="`${property[0]}${side ? side[0] : ''}-${size}`">
 				<div class="spacing-box" />
 				<div class="label">{{ property[0] }}{{ side ? side[0] : '' }}-{{ size }}</div>
diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index d16eb6f664..ef2a3738ea 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -10,7 +10,7 @@
 			}"
 		>
 			<div id="banners" :class="$style.banners">
-				<banner-stack v-if="!isDemoMode" />
+				<BannerStack v-if="!isDemoMode" />
 			</div>
 			<div id="header" :class="$style.header">
 				<router-view name="header"></router-view>
@@ -23,7 +23,7 @@
 					<keep-alive v-if="$route.meta.keepWorkflowAlive" include="NodeView" :max="1">
 						<component :is="Component" />
 					</keep-alive>
-					<component v-else :is="Component" />
+					<component :is="Component" v-else />
 				</router-view>
 			</div>
 			<Modals />
@@ -102,12 +102,16 @@ export default defineComponent({
 			loading: true,
 		};
 	},
-	methods: {
-		logHiringBanner() {
-			if (this.settingsStore.isHiringBannerEnabled && !this.isDemoMode) {
-				console.log(HIRING_BANNER);
+	watch: {
+		// eslint-disable-next-line @typescript-eslint/naming-convention
+		async 'usersStore.currentUser'(currentValue, previousValue) {
+			if (currentValue && !previousValue) {
+				await initializeAuthenticatedFeatures();
 			}
 		},
+		defaultLocale(newLocale) {
+			void loadLanguage(newLocale);
+		},
 	},
 	async mounted() {
 		this.logHiringBanner();
@@ -117,16 +121,12 @@ export default defineComponent({
 		void useExternalHooks().run('app.mount');
 		this.loading = false;
 	},
-	watch: {
-		// eslint-disable-next-line @typescript-eslint/naming-convention
-		async 'usersStore.currentUser'(currentValue, previousValue) {
-			if (currentValue && !previousValue) {
-				await initializeAuthenticatedFeatures();
+	methods: {
+		logHiringBanner() {
+			if (this.settingsStore.isHiringBannerEnabled && !this.isDemoMode) {
+				console.log(HIRING_BANNER);
 			}
 		},
-		defaultLocale(newLocale) {
-			void loadLanguage(newLocale);
-		},
 	},
 });
 </script>
diff --git a/packages/editor-ui/src/components/AboutModal.vue b/packages/editor-ui/src/components/AboutModal.vue
index 4893e4e62e..067c3daa81 100644
--- a/packages/editor-ui/src/components/AboutModal.vue
+++ b/packages/editor-ui/src/components/AboutModal.vue
@@ -2,7 +2,7 @@
 	<Modal
 		max-width="540px"
 		:title="$locale.baseText('about.aboutN8n')"
-		:eventBus="modalBus"
+		:event-bus="modalBus"
 		:name="ABOUT_MODAL_KEY"
 		:center="true"
 	>
@@ -48,10 +48,10 @@
 		<template #footer>
 			<div class="action-buttons">
 				<n8n-button
-					@click="closeDialog"
 					float="right"
 					:label="$locale.baseText('about.close')"
 					data-test-id="close-about-modal-button"
+					@click="closeDialog"
 				/>
 			</div>
 		</template>
diff --git a/packages/editor-ui/src/components/ActivationModal.vue b/packages/editor-ui/src/components/ActivationModal.vue
index 7bd7d56db4..cfed924a45 100644
--- a/packages/editor-ui/src/components/ActivationModal.vue
+++ b/packages/editor-ui/src/components/ActivationModal.vue
@@ -25,10 +25,10 @@
 
 		<template #footer="{ close }">
 			<div :class="$style.footer">
-				<el-checkbox :modelValue="checked" @update:modelValue="handleCheckboxChange">{{
+				<el-checkbox :model-value="checked" @update:modelValue="handleCheckboxChange">{{
 					$locale.baseText('generic.dontShowAgain')
 				}}</el-checkbox>
-				<n8n-button @click="close" :label="$locale.baseText('activationModal.gotIt')" />
+				<n8n-button :label="$locale.baseText('activationModal.gotIt')" @click="close" />
 			</div>
 		</template>
 	</Modal>
diff --git a/packages/editor-ui/src/components/Banner.vue b/packages/editor-ui/src/components/Banner.vue
index c451fe5ef7..27188e535b 100644
--- a/packages/editor-ui/src/components/Banner.vue
+++ b/packages/editor-ui/src/components/Banner.vue
@@ -16,7 +16,7 @@
 				</div>
 			</div>
 
-			<slot name="button" v-if="$slots.button" />
+			<slot v-if="$slots.button" name="button" />
 			<n8n-button
 				v-else-if="buttonLabel"
 				:label="buttonLoading && buttonLoadingLabel ? buttonLoadingLabel : buttonLabel"
@@ -40,11 +40,6 @@ import { defineComponent } from 'vue';
 
 export default defineComponent({
 	name: 'Banner',
-	data() {
-		return {
-			expanded: false,
-		};
-	},
 	props: {
 		theme: {
 			type: String,
@@ -70,6 +65,11 @@ export default defineComponent({
 			default: false,
 		},
 	},
+	data() {
+		return {
+			expanded: false,
+		};
+	},
 	methods: {
 		expand() {
 			this.expanded = true;
diff --git a/packages/editor-ui/src/components/BinaryDataDisplay.vue b/packages/editor-ui/src/components/BinaryDataDisplay.vue
index f15d98acfb..7119233975 100644
--- a/packages/editor-ui/src/components/BinaryDataDisplay.vue
+++ b/packages/editor-ui/src/components/BinaryDataDisplay.vue
@@ -1,19 +1,19 @@
 <template>
 	<div v-if="windowVisible" :class="['binary-data-window', binaryData?.fileType]">
 		<n8n-button
-			@click.stop="closeWindow"
 			size="small"
 			class="binary-data-window-back"
 			:title="$locale.baseText('binaryDataDisplay.backToOverviewPage')"
 			icon="arrow-left"
 			:label="$locale.baseText('binaryDataDisplay.backToList')"
+			@click.stop="closeWindow"
 		/>
 
 		<div class="binary-data-window-wrapper">
 			<div v-if="!binaryData">
 				{{ $locale.baseText('binaryDataDisplay.noDataFoundToDisplay') }}
 			</div>
-			<BinaryDataDisplayEmbed v-else :binaryData="binaryData" />
+			<BinaryDataDisplayEmbed v-else :binary-data="binaryData" />
 		</div>
 	</div>
 </template>
@@ -34,6 +34,10 @@ export default defineComponent({
 	components: {
 		BinaryDataDisplayEmbed,
 	},
+	props: [
+		'displayData', // IBinaryData
+		'windowVisible', // boolean
+	],
 	setup() {
 		const nodeHelpers = useNodeHelpers();
 
@@ -41,10 +45,6 @@ export default defineComponent({
 			nodeHelpers,
 		};
 	},
-	props: [
-		'displayData', // IBinaryData
-		'windowVisible', // boolean
-	],
 	computed: {
 		...mapStores(useWorkflowsStore),
 		binaryData(): IBinaryData | null {
diff --git a/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue b/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue
index c364622e46..719cb53b7d 100644
--- a/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue
+++ b/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue
@@ -11,13 +11,13 @@
 				<source :src="embedSource" :type="binaryData.mimeType" />
 				{{ $locale.baseText('binaryDataDisplay.yourBrowserDoesNotSupport') }}
 			</audio>
-			<vue-json-pretty
+			<VueJsonPretty
 				v-else-if="binaryData.fileType === 'json'"
 				:data="data"
 				:deep="3"
-				:showLength="true"
+				:show-length="true"
 			/>
-			<run-data-html v-else-if="binaryData.fileType === 'html'" :inputHtml="data" />
+			<RunDataHtml v-else-if="binaryData.fileType === 'html'" :input-html="data" />
 			<embed v-else :src="embedSource" class="binary-data" :class="embedClass()" />
 		</span>
 	</span>
diff --git a/packages/editor-ui/src/components/BreakpointsObserver.vue b/packages/editor-ui/src/components/BreakpointsObserver.vue
index 3850f38a64..fb5e1e9530 100644
--- a/packages/editor-ui/src/components/BreakpointsObserver.vue
+++ b/packages/editor-ui/src/components/BreakpointsObserver.vue
@@ -1,6 +1,6 @@
 <template>
 	<span>
-		<slot v-bind:bp="bp" v-bind:value="value" />
+		<slot :bp="bp" :value="value" />
 	</span>
 </template>
 
@@ -31,24 +31,6 @@ export default defineComponent({
 			width: window.innerWidth,
 		};
 	},
-	created() {
-		window.addEventListener('resize', this.onResize);
-	},
-	beforeUnmount() {
-		window.removeEventListener('resize', this.onResize);
-	},
-	methods: {
-		onResize() {
-			void this.callDebounced('onResizeEnd', { debounceTime: 50 });
-		},
-		async onResizeEnd() {
-			this.width = window.innerWidth;
-			await this.$nextTick();
-
-			const bannerHeight = await getBannerRowHeight();
-			useUIStore().updateBannersHeight(bannerHeight);
-		},
-	},
 	computed: {
 		bp(): string {
 			if (this.width < BREAKPOINT_SM) {
@@ -94,5 +76,23 @@ export default defineComponent({
 			return this.valueDefault;
 		},
 	},
+	created() {
+		window.addEventListener('resize', this.onResize);
+	},
+	beforeUnmount() {
+		window.removeEventListener('resize', this.onResize);
+	},
+	methods: {
+		onResize() {
+			void this.callDebounced('onResizeEnd', { debounceTime: 50 });
+		},
+		async onResizeEnd() {
+			this.width = window.innerWidth;
+			await this.$nextTick();
+
+			const bannerHeight = await getBannerRowHeight();
+			useUIStore().updateBannersHeight(bannerHeight);
+		},
+	},
 });
 </script>
diff --git a/packages/editor-ui/src/components/CanvasControls.vue b/packages/editor-ui/src/components/CanvasControls.vue
index c241adcd69..b35ce6f752 100644
--- a/packages/editor-ui/src/components/CanvasControls.vue
+++ b/packages/editor-ui/src/components/CanvasControls.vue
@@ -6,55 +6,55 @@
 			[$style.demoZoomMenu]: isDemo,
 		}"
 	>
-		<keyboard-shortcut-tooltip
+		<KeyboardShortcutTooltip
 			:label="$locale.baseText('nodeView.zoomToFit')"
 			:shortcut="{ keys: ['1'] }"
 		>
 			<n8n-icon-button
-				@click="zoomToFit"
 				type="tertiary"
 				size="large"
 				icon="expand"
 				data-test-id="zoom-to-fit"
+				@click="zoomToFit"
 			/>
-		</keyboard-shortcut-tooltip>
-		<keyboard-shortcut-tooltip
+		</KeyboardShortcutTooltip>
+		<KeyboardShortcutTooltip
 			:label="$locale.baseText('nodeView.zoomIn')"
 			:shortcut="{ keys: ['+'] }"
 		>
 			<n8n-icon-button
-				@click="zoomIn"
 				type="tertiary"
 				size="large"
 				icon="search-plus"
 				data-test-id="zoom-in-button"
+				@click="zoomIn"
 			/>
-		</keyboard-shortcut-tooltip>
-		<keyboard-shortcut-tooltip
+		</KeyboardShortcutTooltip>
+		<KeyboardShortcutTooltip
 			:label="$locale.baseText('nodeView.zoomOut')"
 			:shortcut="{ keys: ['-'] }"
 		>
 			<n8n-icon-button
-				@click="zoomOut"
 				type="tertiary"
 				size="large"
 				icon="search-minus"
 				data-test-id="zoom-out-button"
+				@click="zoomOut"
 			/>
-		</keyboard-shortcut-tooltip>
-		<keyboard-shortcut-tooltip
+		</KeyboardShortcutTooltip>
+		<KeyboardShortcutTooltip
 			:label="$locale.baseText('nodeView.resetZoom')"
 			:shortcut="{ keys: ['0'] }"
 		>
 			<n8n-icon-button
 				v-if="nodeViewScale !== 1 && !isDemo"
-				@click="resetZoom"
 				type="tertiary"
 				size="large"
 				icon="undo"
 				data-test-id="reset-zoom-button"
+				@click="resetZoom"
 			/>
-		</keyboard-shortcut-tooltip>
+		</KeyboardShortcutTooltip>
 	</div>
 </template>
 <script lang="ts" setup>
diff --git a/packages/editor-ui/src/components/ChangePasswordModal.vue b/packages/editor-ui/src/components/ChangePasswordModal.vue
index 6a58d92b3b..978ec9cedb 100644
--- a/packages/editor-ui/src/components/ChangePasswordModal.vue
+++ b/packages/editor-ui/src/components/ChangePasswordModal.vue
@@ -1,17 +1,17 @@
 <template>
 	<Modal
 		:name="CHANGE_PASSWORD_MODAL_KEY"
-		@enter="onSubmit"
 		:title="$locale.baseText('auth.changePassword')"
 		:center="true"
 		width="460px"
-		:eventBus="modalBus"
+		:event-bus="modalBus"
+		@enter="onSubmit"
 	>
 		<template #content>
 			<n8n-form-inputs
 				:inputs="config"
-				:eventBus="formBus"
-				:columnView="true"
+				:event-bus="formBus"
+				:column-view="true"
 				@update="onInput"
 				@submit="onSubmit"
 			/>
@@ -20,9 +20,9 @@
 			<n8n-button
 				:loading="loading"
 				:label="$locale.baseText('auth.changePassword')"
-				@click="onSubmitClick"
 				float="right"
 				data-test-id="change-password-button"
+				@click="onSubmitClick"
 			/>
 		</template>
 	</Modal>
diff --git a/packages/editor-ui/src/components/ChatEmbedModal.vue b/packages/editor-ui/src/components/ChatEmbedModal.vue
index 0304acb11d..2d74bd337c 100644
--- a/packages/editor-ui/src/components/ChatEmbedModal.vue
+++ b/packages/editor-ui/src/components/ChatEmbedModal.vue
@@ -117,19 +117,19 @@ function closeDialog() {
 	<Modal
 		max-width="960px"
 		:title="i18n.baseText('chatEmbed.title')"
-		:eventBus="modalBus"
+		:event-bus="modalBus"
 		:name="CHAT_EMBED_MODAL_KEY"
 		:center="true"
 	>
 		<template #content>
 			<div :class="$style.container">
-				<n8n-tabs :options="tabs" v-model="currentTab" />
+				<n8n-tabs v-model="currentTab" :options="tabs" />
 
 				<div v-if="currentTab !== 'cdn'">
 					<n8n-text>
 						{{ i18n.baseText('chatEmbed.install') }}
 					</n8n-text>
-					<CodeNodeEditor :modelValue="commonCode.install" isReadOnly />
+					<CodeNodeEditor :model-value="commonCode.install" is-read-only />
 				</div>
 
 				<n8n-text>
@@ -139,10 +139,10 @@ function closeDialog() {
 						</template>
 					</i18n-t>
 				</n8n-text>
-				<HtmlEditor v-if="currentTab === 'cdn'" :modelValue="cdnCode" isReadOnly />
-				<HtmlEditor v-if="currentTab === 'vue'" :modelValue="vueCode" isReadOnly />
-				<CodeNodeEditor v-if="currentTab === 'react'" :modelValue="reactCode" isReadOnly />
-				<CodeNodeEditor v-if="currentTab === 'other'" :modelValue="otherCode" isReadOnly />
+				<HtmlEditor v-if="currentTab === 'cdn'" :model-value="cdnCode" is-read-only />
+				<HtmlEditor v-if="currentTab === 'vue'" :model-value="vueCode" is-read-only />
+				<CodeNodeEditor v-if="currentTab === 'react'" :model-value="reactCode" is-read-only />
+				<CodeNodeEditor v-if="currentTab === 'other'" :model-value="otherCode" is-read-only />
 
 				<n8n-info-tip>
 					{{ i18n.baseText('chatEmbed.packageInfo.description') }}
@@ -155,7 +155,7 @@ function closeDialog() {
 
 		<template #footer>
 			<div class="action-buttons">
-				<n8n-button @click="closeDialog" float="right" :label="i18n.baseText('chatEmbed.close')" />
+				<n8n-button float="right" :label="i18n.baseText('chatEmbed.close')" @click="closeDialog" />
 			</div>
 		</template>
 	</Modal>
diff --git a/packages/editor-ui/src/components/CodeNodeEditor/AskAI/AskAI.vue b/packages/editor-ui/src/components/CodeNodeEditor/AskAI/AskAI.vue
index c7dc07de92..515d22e2e7 100644
--- a/packages/editor-ui/src/components/CodeNodeEditor/AskAI/AskAI.vue
+++ b/packages/editor-ui/src/components/CodeNodeEditor/AskAI/AskAI.vue
@@ -249,8 +249,8 @@ onMounted(() => {
 				<span
 					v-show="prompt.length > 1"
 					:class="$style.counter"
-					v-text="`${prompt.length} / ${ASK_AI_MAX_PROMPT_LENGTH}`"
 					data-test-id="ask-ai-prompt-counter"
+					v-text="`${prompt.length} / ${ASK_AI_MAX_PROMPT_LENGTH}`"
 				/>
 				<a href="https://docs.n8n.io/code-examples/ai-code" target="_blank" :class="$style.help">
 					<n8n-icon icon="question-circle" color="text-light" size="large" />{{
@@ -260,29 +260,29 @@ onMounted(() => {
 			</div>
 			<N8nInput
 				v-model="prompt"
-				@input="onPromptInput"
 				:class="$style.input"
 				type="textarea"
 				:rows="6"
 				:maxlength="ASK_AI_MAX_PROMPT_LENGTH"
 				:placeholder="i18n.baseText('codeNodeEditor.askAi.placeholder')"
 				data-test-id="ask-ai-prompt-input"
+				@input="onPromptInput"
 			/>
 		</div>
 		<div :class="$style.controls">
-			<div :class="$style.loader" v-if="isLoading">
+			<div v-if="isLoading" :class="$style.loader">
 				<transition name="text-fade-in-out" mode="out-in">
-					<div v-text="loadingString" :key="loadingPhraseIndex" />
+					<div :key="loadingPhraseIndex" v-text="loadingString" />
 				</transition>
 				<n8n-circle-loader :radius="8" :progress="loaderProgress" :stroke-width="3" />
 			</div>
-			<n8n-tooltip :disabled="isSubmitEnabled" v-else>
+			<N8nTooltip v-else :disabled="isSubmitEnabled">
 				<div>
 					<N8nButton
 						:disabled="!isSubmitEnabled"
-						@click="onSubmit"
 						size="small"
 						data-test-id="ask-ai-cta"
+						@click="onSubmit"
 					>
 						{{ i18n.baseText('codeNodeEditor.askAi.generateCode') }}
 					</N8nButton>
@@ -290,18 +290,18 @@ onMounted(() => {
 				<template #content>
 					<span
 						v-if="!hasExecutionData"
-						v-text="i18n.baseText('codeNodeEditor.askAi.noInputData')"
 						data-test-id="ask-ai-cta-tooltip-no-input-data"
+						v-text="i18n.baseText('codeNodeEditor.askAi.noInputData')"
 					/>
 					<span
 						v-else-if="prompt.length === 0"
-						v-text="i18n.baseText('codeNodeEditor.askAi.noPrompt')"
 						data-test-id="ask-ai-cta-tooltip-no-prompt"
+						v-text="i18n.baseText('codeNodeEditor.askAi.noPrompt')"
 					/>
 					<span
 						v-else-if="isEachItemMode"
-						v-text="i18n.baseText('codeNodeEditor.askAi.onlyAllItemsMode')"
 						data-test-id="ask-ai-cta-tooltip-only-all-items-mode"
+						v-text="i18n.baseText('codeNodeEditor.askAi.onlyAllItemsMode')"
 					/>
 					<span
 						v-else-if="prompt.length < ASK_AI_MIN_PROMPT_LENGTH"
@@ -313,7 +313,7 @@ onMounted(() => {
 						"
 					/>
 				</template>
-			</n8n-tooltip>
+			</N8nTooltip>
 		</div>
 	</div>
 </template>
diff --git a/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue b/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
index abc21ff4a6..b2ca1e8a47 100644
--- a/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
+++ b/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
@@ -1,15 +1,15 @@
 <template>
 	<div
+		ref="codeNodeEditorContainer"
 		:class="['code-node-editor', $style['code-node-editor-container'], language]"
 		@mouseover="onMouseOver"
 		@mouseout="onMouseOut"
-		ref="codeNodeEditorContainer"
 	>
 		<el-tabs
-			type="card"
+			v-if="aiEnabled"
 			ref="tabs"
 			v-model="activeTab"
-			v-if="aiEnabled"
+			type="card"
 			:before-leave="onBeforeTabLeave"
 		>
 			<el-tab-pane
@@ -26,9 +26,9 @@
 			>
 				<!-- Key the AskAI tab to make sure it re-mounts when changing tabs -->
 				<AskAI
-					@replaceCode="onReplaceCode"
-					:has-changes="hasChanges"
 					:key="activeTab"
+					:has-changes="hasChanges"
+					@replaceCode="onReplaceCode"
 					@started-loading="isLoadingAIResponse = true"
 					@finished-loading="isLoadingAIResponse = false"
 				/>
@@ -73,11 +73,11 @@ import { useMessage } from '@/composables/useMessage';
 import { useSettingsStore } from '@/stores/settings.store';
 
 export default defineComponent({
-	name: 'code-node-editor',
-	mixins: [linterExtension, completerExtension, workflowHelpers],
+	name: 'CodeNodeEditor',
 	components: {
 		AskAI,
 	},
+	mixins: [linterExtension, completerExtension, workflowHelpers],
 	props: {
 		aiButtonEnabled: {
 			type: Boolean,
@@ -184,6 +184,67 @@ export default defineComponent({
 			}
 		},
 	},
+	beforeUnmount() {
+		if (!this.isReadOnly) codeNodeEditorEventBus.off('error-line-number', this.highlightLine);
+	},
+	mounted() {
+		if (!this.isReadOnly) codeNodeEditorEventBus.on('error-line-number', this.highlightLine);
+
+		const { isReadOnly, language } = this;
+		const extensions: Extension[] = [
+			...readOnlyEditorExtensions,
+			EditorState.readOnly.of(isReadOnly),
+			EditorView.editable.of(!isReadOnly),
+			codeNodeEditorTheme({ isReadOnly, customMinHeight: this.rows }),
+		];
+
+		if (!isReadOnly) {
+			const linter = this.createLinter(language);
+			if (linter) {
+				extensions.push(this.linterCompartment.of(linter));
+			}
+
+			extensions.push(
+				...writableEditorExtensions,
+				EditorView.domEventHandlers({
+					focus: () => {
+						this.isEditorFocused = true;
+					},
+					blur: () => {
+						this.isEditorFocused = false;
+					},
+				}),
+
+				EditorView.updateListener.of((viewUpdate) => {
+					if (!viewUpdate.docChanged) return;
+
+					this.trackCompletion(viewUpdate);
+
+					this.$emit('update:modelValue', this.editor?.state.doc.toString());
+					this.hasChanges = true;
+				}),
+			);
+		}
+
+		const [languageSupport, ...otherExtensions] = this.languageExtensions;
+		extensions.push(this.languageCompartment.of(languageSupport), ...otherExtensions);
+
+		const state = EditorState.create({
+			doc: this.modelValue ?? this.placeholder,
+			extensions,
+		});
+
+		this.editor = new EditorView({
+			parent: this.$refs.codeNodeEditor as HTMLDivElement,
+			state,
+		});
+
+		// empty on first load, default param value
+		if (!this.modelValue) {
+			this.refreshPlaceholder();
+			this.$emit('update:modelValue', this.placeholder);
+		}
+	},
 	methods: {
 		getCurrentEditorContent() {
 			return this.editor?.state.doc.toString() ?? '';
@@ -311,67 +372,6 @@ export default defineComponent({
 			} catch {}
 		},
 	},
-	beforeUnmount() {
-		if (!this.isReadOnly) codeNodeEditorEventBus.off('error-line-number', this.highlightLine);
-	},
-	mounted() {
-		if (!this.isReadOnly) codeNodeEditorEventBus.on('error-line-number', this.highlightLine);
-
-		const { isReadOnly, language } = this;
-		const extensions: Extension[] = [
-			...readOnlyEditorExtensions,
-			EditorState.readOnly.of(isReadOnly),
-			EditorView.editable.of(!isReadOnly),
-			codeNodeEditorTheme({ isReadOnly, customMinHeight: this.rows }),
-		];
-
-		if (!isReadOnly) {
-			const linter = this.createLinter(language);
-			if (linter) {
-				extensions.push(this.linterCompartment.of(linter));
-			}
-
-			extensions.push(
-				...writableEditorExtensions,
-				EditorView.domEventHandlers({
-					focus: () => {
-						this.isEditorFocused = true;
-					},
-					blur: () => {
-						this.isEditorFocused = false;
-					},
-				}),
-
-				EditorView.updateListener.of((viewUpdate) => {
-					if (!viewUpdate.docChanged) return;
-
-					this.trackCompletion(viewUpdate);
-
-					this.$emit('update:modelValue', this.editor?.state.doc.toString());
-					this.hasChanges = true;
-				}),
-			);
-		}
-
-		const [languageSupport, ...otherExtensions] = this.languageExtensions;
-		extensions.push(this.languageCompartment.of(languageSupport), ...otherExtensions);
-
-		const state = EditorState.create({
-			doc: this.modelValue ?? this.placeholder,
-			extensions,
-		});
-
-		this.editor = new EditorView({
-			parent: this.$refs.codeNodeEditor as HTMLDivElement,
-			state,
-		});
-
-		// empty on first load, default param value
-		if (!this.modelValue) {
-			this.refreshPlaceholder();
-			this.$emit('update:modelValue', this.placeholder);
-		}
-	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/CollectionParameter.vue b/packages/editor-ui/src/components/CollectionParameter.vue
index 4b414f38d3..67994ef43c 100644
--- a/packages/editor-ui/src/components/CollectionParameter.vue
+++ b/packages/editor-ui/src/components/CollectionParameter.vue
@@ -1,18 +1,18 @@
 <template>
-	<div @keydown.stop class="collection-parameter">
+	<div class="collection-parameter" @keydown.stop>
 		<div class="collection-parameter-wrapper">
 			<div v-if="getProperties.length === 0" class="no-items-exist">
 				<n8n-text size="small">{{ $locale.baseText('collectionParameter.noProperties') }}</n8n-text>
 			</div>
 
 			<Suspense>
-				<parameter-input-list
+				<ParameterInputList
 					:parameters="getProperties"
-					:nodeValues="nodeValues"
+					:node-values="nodeValues"
 					:path="path"
-					:hideDelete="hideDelete"
+					:hide-delete="hideDelete"
 					:indent="true"
-					:isReadOnly="isReadOnly"
+					:is-read-only="isReadOnly"
 					@valueChanged="valueChanged"
 				/>
 			</Suspense>
@@ -22,16 +22,16 @@
 					v-if="(parameter.options ?? []).length === 1"
 					type="tertiary"
 					block
-					@click="optionSelected((parameter.options ?? [])[0].name)"
 					:label="getPlaceholderText"
+					@click="optionSelected((parameter.options ?? [])[0].name)"
 				/>
 				<div v-else class="add-option">
 					<n8n-select
 						v-model="selectedOption"
 						:placeholder="getPlaceholderText"
 						size="small"
-						@update:modelValue="optionSelected"
 						filterable
+						@update:modelValue="optionSelected"
 					>
 						<n8n-option
 							v-for="item in parameterOptions"
diff --git a/packages/editor-ui/src/components/CollectionWorkflowCard.vue b/packages/editor-ui/src/components/CollectionWorkflowCard.vue
index ed7c951daf..957a18980a 100644
--- a/packages/editor-ui/src/components/CollectionWorkflowCard.vue
+++ b/packages/editor-ui/src/components/CollectionWorkflowCard.vue
@@ -1,10 +1,10 @@
 <template>
 	<n8n-card :class="$style.card" v-bind="$attrs">
-		<template #header v-if="!loading">
-			<span v-text="title" :class="$style.title" />
+		<template v-if="!loading" #header>
+			<span :class="$style.title" v-text="title" />
 		</template>
 		<n8n-loading :loading="loading" :rows="3" variant="p" />
-		<template #footer v-if="!loading">
+		<template v-if="!loading" #footer>
 			<slot name="footer" />
 		</template>
 	</n8n-card>
diff --git a/packages/editor-ui/src/components/CommunityPackageInstallModal.vue b/packages/editor-ui/src/components/CommunityPackageInstallModal.vue
index 420919e6a6..a281c99697 100644
--- a/packages/editor-ui/src/components/CommunityPackageInstallModal.vue
+++ b/packages/editor-ui/src/components/CommunityPackageInstallModal.vue
@@ -3,10 +3,10 @@
 		width="540px"
 		:name="COMMUNITY_PACKAGE_INSTALL_MODAL_KEY"
 		:title="$locale.baseText('settings.communityNodes.installModal.title')"
-		:eventBus="modalBus"
+		:event-bus="modalBus"
 		:center="true"
-		:beforeClose="onModalClose"
-		:showClose="!loading"
+		:before-close="onModalClose"
+		:show-close="!loading"
 	>
 		<template #content>
 			<div :class="[$style.descriptionContainer, 'p-s']">
@@ -30,15 +30,15 @@
 				<n8n-input-label
 					:class="$style.labelTooltip"
 					:label="$locale.baseText('settings.communityNodes.installModal.packageName.label')"
-					:tooltipText="
+					:tooltip-text="
 						$locale.baseText('settings.communityNodes.installModal.packageName.tooltip', {
 							interpolate: { npmURL: NPM_KEYWORD_SEARCH_URL },
 						})
 					"
 				>
 					<n8n-input
-						name="packageNameInput"
 						v-model="packageName"
+						name="packageNameInput"
 						type="text"
 						:maxlength="214"
 						:placeholder="
@@ -60,8 +60,8 @@
 					v-model="userAgreed"
 					:class="[$style.checkbox, checkboxWarning ? $style.error : '', 'mt-l']"
 					:disabled="loading"
-					@update:modelValue="onCheckboxChecked"
 					data-test-id="user-agreement-checkbox"
+					@update:modelValue="onCheckboxChecked"
 				>
 					<n8n-text>
 						{{ $locale.baseText('settings.communityNodes.installModal.checkbox.label') }} </n8n-text
@@ -83,8 +83,8 @@
 				"
 				size="large"
 				float="right"
-				@click="onInstallClick"
 				data-test-id="install-community-package-button"
+				@click="onInstallClick"
 			/>
 		</template>
 	</Modal>
diff --git a/packages/editor-ui/src/components/CommunityPackageManageConfirmModal.vue b/packages/editor-ui/src/components/CommunityPackageManageConfirmModal.vue
index 19b10eadfb..16ce302695 100644
--- a/packages/editor-ui/src/components/CommunityPackageManageConfirmModal.vue
+++ b/packages/editor-ui/src/components/CommunityPackageManageConfirmModal.vue
@@ -3,16 +3,16 @@
 		width="540px"
 		:name="COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY"
 		:title="getModalContent.title"
-		:eventBus="modalBus"
+		:event-bus="modalBus"
 		:center="true"
-		:showClose="!loading"
-		:beforeClose="onModalClose"
+		:show-close="!loading"
+		:before-close="onModalClose"
 	>
 		<template #content>
 			<n8n-text>{{ getModalContent.message }}</n8n-text>
 			<div
-				:class="$style.descriptionContainer"
 				v-if="mode === COMMUNITY_PACKAGE_MANAGE_ACTIONS.UPDATE"
+				:class="$style.descriptionContainer"
 			>
 				<n8n-info-tip theme="info" type="note" :bold="false">
 					<span v-text="getModalContent.description"></span>
diff --git a/packages/editor-ui/src/components/ContactPromptModal.vue b/packages/editor-ui/src/components/ContactPromptModal.vue
index b27a9478a5..c0ee2f70da 100644
--- a/packages/editor-ui/src/components/ContactPromptModal.vue
+++ b/packages/editor-ui/src/components/ContactPromptModal.vue
@@ -1,11 +1,11 @@
 <template>
 	<Modal
 		:name="modalName"
-		:eventBus="modalBus"
+		:event-bus="modalBus"
 		:center="true"
-		:closeOnPressEscape="false"
-		:beforeClose="closeDialog"
-		customClass="contact-prompt-modal"
+		:close-on-press-escape="false"
+		:before-close="closeDialog"
+		custom-class="contact-prompt-modal"
 		width="460px"
 	>
 		<template #header>
@@ -26,7 +26,7 @@
 		</template>
 		<template #footer>
 			<div :class="$style.footer">
-				<n8n-button label="Send" float="right" @click="send" :disabled="!isEmailValid" />
+				<n8n-button label="Send" float="right" :disabled="!isEmailValid" @click="send" />
 			</div>
 		</template>
 	</Modal>
@@ -46,8 +46,8 @@ import { useToast } from '@/composables/useToast';
 
 export default defineComponent({
 	name: 'ContactPromptModal',
-	mixins: [workflowHelpers],
 	components: { Modal },
+	mixins: [workflowHelpers],
 	props: ['modalName'],
 	setup() {
 		return {
diff --git a/packages/editor-ui/src/components/ContextMenu/ContextMenu.vue b/packages/editor-ui/src/components/ContextMenu/ContextMenu.vue
index 8d5f7ffb95..761e40ef94 100644
--- a/packages/editor-ui/src/components/ContextMenu/ContextMenu.vue
+++ b/packages/editor-ui/src/components/ContextMenu/ContextMenu.vue
@@ -43,19 +43,19 @@ function onVisibleChange(open: boolean) {
 				top: `${position[1]}px`,
 			}"
 		>
-			<n8n-action-dropdown
+			<N8nActionDropdown
 				ref="dropdown"
 				:items="actions"
 				placement="bottom-start"
 				data-test-id="context-menu"
-				:hideArrow="target.source !== 'node-button'"
+				:hide-arrow="target.source !== 'node-button'"
 				@select="onActionSelect"
 				@visibleChange="onVisibleChange"
 			>
 				<template #activator>
 					<div :class="$style.activator"></div>
 				</template>
-			</n8n-action-dropdown>
+			</N8nActionDropdown>
 		</div>
 	</Teleport>
 </template>
diff --git a/packages/editor-ui/src/components/CopyInput.vue b/packages/editor-ui/src/components/CopyInput.vue
index 4e0f1f9bd4..e8f1ec0a2c 100644
--- a/packages/editor-ui/src/components/CopyInput.vue
+++ b/packages/editor-ui/src/components/CopyInput.vue
@@ -8,8 +8,8 @@
 					[$style.collapsed]: collapse,
 					'ph-no-capture': redactValue,
 				}"
-				@click="copy"
 				data-test-id="copy-input"
+				@click="copy"
 			>
 				<span ref="copyInputValue">{{ value }}</span>
 				<div :class="$style.copyButton">
diff --git a/packages/editor-ui/src/components/CredentialCard.vue b/packages/editor-ui/src/components/CredentialCard.vue
index 31189d5afa..c589f9829e 100644
--- a/packages/editor-ui/src/components/CredentialCard.vue
+++ b/packages/editor-ui/src/components/CredentialCard.vue
@@ -1,7 +1,7 @@
 <template>
 	<n8n-card :class="$style.cardLink" @click="onClick">
 		<template #prepend>
-			<credential-icon :credential-type-name="credentialType ? credentialType.name : ''" />
+			<CredentialIcon :credential-type-name="credentialType ? credentialType.name : ''" />
 		</template>
 		<template #header>
 			<n8n-heading tag="h2" bold :class="$style.cardHeading">
@@ -12,7 +12,7 @@
 			<n8n-text color="text-light" size="small">
 				<span v-if="credentialType">{{ credentialType.displayName }} | </span>
 				<span v-show="data"
-					>{{ $locale.baseText('credentials.item.updated') }} <time-ago :date="data.updatedAt" /> |
+					>{{ $locale.baseText('credentials.item.updated') }} <TimeAgo :date="data.updatedAt" /> |
 				</span>
 				<span v-show="data"
 					>{{ $locale.baseText('credentials.item.created') }} {{ formattedCreatedAtDate }}
@@ -20,7 +20,7 @@
 			</n8n-text>
 		</div>
 		<template #append>
-			<div :class="$style.cardActions" ref="cardActions">
+			<div ref="cardActions" :class="$style.cardActions">
 				<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]">
 					<n8n-badge v-if="credentialPermissions.isOwner" class="mr-xs" theme="tertiary" bold>
 						{{ $locale.baseText('credentials.item.owner') }}
@@ -54,16 +54,6 @@ export const CREDENTIAL_LIST_ITEM_ACTIONS = {
 };
 
 export default defineComponent({
-	data() {
-		return {
-			EnterpriseEditionFeature,
-		};
-	},
-	setup() {
-		return {
-			...useMessage(),
-		};
-	},
 	components: {
 		TimeAgo,
 		CredentialIcon,
@@ -88,6 +78,16 @@ export default defineComponent({
 			default: false,
 		},
 	},
+	setup() {
+		return {
+			...useMessage(),
+		};
+	},
+	data() {
+		return {
+			EnterpriseEditionFeature,
+		};
+	},
 	computed: {
 		...mapStores(useCredentialsStore, useUIStore, useUsersStore),
 		currentUser(): IUser | null {
diff --git a/packages/editor-ui/src/components/CredentialEdit/AuthTypeSelector.vue b/packages/editor-ui/src/components/CredentialEdit/AuthTypeSelector.vue
index d766897415..be2e1963fb 100644
--- a/packages/editor-ui/src/components/CredentialEdit/AuthTypeSelector.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/AuthTypeSelector.vue
@@ -118,18 +118,18 @@ defineExpose({
 <template>
 	<div v-if="filteredNodeAuthOptions.length > 0" data-test-id="node-auth-type-selector">
 		<div v-for="parameter in authRelatedFields" :key="parameter.name" class="mb-l">
-			<parameter-input-full
+			<ParameterInputFull
 				:parameter="parameter"
 				:value="authRelatedFieldsValues[parameter.name] || parameter.default"
 				:path="parameter.name"
-				:displayOptions="false"
+				:display-options="false"
 				@update="valueChanged"
 			/>
 		</div>
 		<div>
 			<n8n-input-label
 				:label="$locale.baseText('credentialEdit.credentialConfig.authTypeSelectorLabel')"
-				:tooltipText="$locale.baseText('credentialEdit.credentialConfig.authTypeSelectorTooltip')"
+				:tooltip-text="$locale.baseText('credentialEdit.credentialConfig.authTypeSelectorTooltip')"
 				:required="true"
 			/>
 		</div>
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
index ee8c687701..78e8cb09d9 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
@@ -1,6 +1,6 @@
 <template>
 	<div :class="$style.container" data-test-id="node-credentials-config-container">
-		<banner
+		<Banner
 			v-show="showValidationWarning"
 			theme="danger"
 			:message="
@@ -13,7 +13,7 @@
 			"
 		/>
 
-		<banner
+		<Banner
 			v-if="authError && !showValidationWarning"
 			theme="danger"
 			:message="
@@ -25,40 +25,40 @@
 				)
 			"
 			:details="authError"
-			:buttonLabel="$locale.baseText('credentialEdit.credentialConfig.retry')"
-			buttonLoadingLabel="Retrying"
-			:buttonTitle="$locale.baseText('credentialEdit.credentialConfig.retryCredentialTest')"
-			:buttonLoading="isRetesting"
+			:button-label="$locale.baseText('credentialEdit.credentialConfig.retry')"
+			button-loading-label="Retrying"
+			:button-title="$locale.baseText('credentialEdit.credentialConfig.retryCredentialTest')"
+			:button-loading="isRetesting"
 			@click="$emit('retest')"
 		/>
 
-		<banner
+		<Banner
 			v-show="showOAuthSuccessBanner && !showValidationWarning"
 			theme="success"
 			:message="$locale.baseText('credentialEdit.credentialConfig.accountConnected')"
-			:buttonLabel="$locale.baseText('credentialEdit.credentialConfig.reconnect')"
-			:buttonTitle="$locale.baseText('credentialEdit.credentialConfig.reconnectOAuth2Credential')"
+			:button-label="$locale.baseText('credentialEdit.credentialConfig.reconnect')"
+			:button-title="$locale.baseText('credentialEdit.credentialConfig.reconnectOAuth2Credential')"
 			@click="$emit('oauth')"
 		>
-			<template #button v-if="isGoogleOAuthType">
+			<template v-if="isGoogleOAuthType" #button>
 				<p
-					v-text="`${$locale.baseText('credentialEdit.credentialConfig.reconnect')}:`"
 					:class="$style.googleReconnectLabel"
+					v-text="`${$locale.baseText('credentialEdit.credentialConfig.reconnect')}:`"
 				/>
 				<GoogleAuthButton @click="$emit('oauth')" />
 			</template>
-		</banner>
+		</Banner>
 
-		<banner
+		<Banner
 			v-show="testedSuccessfully && !showValidationWarning"
 			theme="success"
 			:message="$locale.baseText('credentialEdit.credentialConfig.connectionTestedSuccessfully')"
-			:buttonLabel="$locale.baseText('credentialEdit.credentialConfig.retry')"
-			:buttonLoadingLabel="$locale.baseText('credentialEdit.credentialConfig.retrying')"
-			:buttonTitle="$locale.baseText('credentialEdit.credentialConfig.retryCredentialTest')"
-			:buttonLoading="isRetesting"
-			@click="$emit('retest')"
+			:button-label="$locale.baseText('credentialEdit.credentialConfig.retry')"
+			:button-loading-label="$locale.baseText('credentialEdit.credentialConfig.retrying')"
+			:button-title="$locale.baseText('credentialEdit.credentialConfig.retryCredentialTest')"
+			:button-loading="isRetesting"
 			data-test-id="credentials-config-container-test-success"
+			@click="$emit('retest')"
 		/>
 
 		<template v-if="credentialPermissions.update">
@@ -73,7 +73,7 @@
 
 			<AuthTypeSelector
 				v-if="showAuthTypeSelector && isNewCredential"
-				:credentialType="credentialType"
+				:credential-type="credentialType"
 				@authTypeChanged="onAuthTypeChange"
 			/>
 
@@ -81,17 +81,17 @@
 				v-if="isOAuthType && credentialProperties.length"
 				:label="$locale.baseText('credentialEdit.credentialConfig.oAuthRedirectUrl')"
 				:value="oAuthCallbackUrl"
-				:copyButtonText="$locale.baseText('credentialEdit.credentialConfig.clickToCopy')"
+				:copy-button-text="$locale.baseText('credentialEdit.credentialConfig.clickToCopy')"
 				:hint="
 					$locale.baseText('credentialEdit.credentialConfig.subtitle', { interpolate: { appName } })
 				"
-				:toastTitle="
+				:toast-title="
 					$locale.baseText('credentialEdit.credentialConfig.redirectUrlCopiedToClipboard')
 				"
-				:redactValue="true"
+				:redact-value="true"
 			/>
 		</template>
-		<enterprise-edition v-else :features="[EnterpriseEditionFeature.Sharing]">
+		<EnterpriseEdition v-else :features="[EnterpriseEditionFeature.Sharing]">
 			<div>
 				<n8n-info-tip :bold="false">
 					{{
@@ -101,14 +101,14 @@
 					}}
 				</n8n-info-tip>
 			</div>
-		</enterprise-edition>
+		</EnterpriseEdition>
 
 		<CredentialInputs
 			v-if="credentialType && credentialPermissions.update"
-			:credentialData="credentialData"
-			:credentialProperties="credentialProperties"
-			:documentationUrl="documentationUrl"
-			:showValidationWarnings="showValidationWarning"
+			:credential-data="credentialData"
+			:credential-properties="credentialProperties"
+			:documentation-url="documentationUrl"
+			:show-validation-warnings="showValidationWarning"
 			@update="onDataChange"
 		/>
 
@@ -119,7 +119,7 @@
 				!isOAuthConnected &&
 				credentialPermissions.isOwner
 			"
-			:isGoogleOAuthType="isGoogleOAuthType"
+			:is-google-o-auth-type="isGoogleOAuthType"
 			@click="$emit('oauth')"
 		/>
 
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
index d71e914662..f494c1c663 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
@@ -1,10 +1,10 @@
 <template>
 	<Modal
 		:name="modalName"
-		:customClass="$style.credentialModal"
-		:eventBus="modalBus"
+		:custom-class="$style.credentialModal"
+		:event-bus="modalBus"
 		:loading="loading"
-		:beforeClose="beforeClose"
+		:before-close="beforeClose"
 		width="70%"
 		height="80%"
 	>
@@ -12,15 +12,15 @@
 			<div :class="$style.header">
 				<div :class="$style.credInfo">
 					<div :class="$style.credIcon">
-						<CredentialIcon :credentialTypeName="defaultCredentialTypeName" />
+						<CredentialIcon :credential-type-name="defaultCredentialTypeName" />
 					</div>
 					<InlineNameEdit
-						:modelValue="credentialName"
+						:model-value="credentialName"
 						:subtitle="credentialType ? credentialType.displayName : ''"
 						:readonly="!credentialPermissions.update || !credentialType"
 						type="Credential"
-						@update:modelValue="onNameEdit"
 						data-test-id="credential-name"
+						@update:modelValue="onNameEdit"
 					/>
 				</div>
 				<div :class="$style.credActions">
@@ -31,20 +31,20 @@
 						type="tertiary"
 						:disabled="isSaving"
 						:loading="isDeleting"
-						@click="deleteCredential"
 						data-test-id="credential-delete-button"
+						@click="deleteCredential"
 					/>
 					<SaveButton
 						v-if="(hasUnsavedChanges || credentialId) && credentialPermissions.save"
 						:saved="!hasUnsavedChanges && !isTesting"
-						:isSaving="isSaving || isTesting"
-						:savingLabel="
+						:is-saving="isSaving || isTesting"
+						:saving-label="
 							isTesting
 								? $locale.baseText('credentialEdit.credentialEdit.testing')
 								: $locale.baseText('credentialEdit.credentialEdit.saving')
 						"
-						@click="saveCredential"
 						data-test-id="credential-save-button"
+						@click="saveCredential"
 					/>
 				</div>
 			</div>
@@ -56,28 +56,28 @@
 					<n8n-menu
 						mode="tabs"
 						:items="sidebarItems"
-						:transparentBackground="true"
+						:transparent-background="true"
 						@select="onTabSelect"
 					></n8n-menu>
 				</div>
-				<div v-if="activeTab === 'connection'" :class="$style.mainContent" ref="content">
+				<div v-if="activeTab === 'connection'" ref="content" :class="$style.mainContent">
 					<CredentialConfig
-						:credentialType="credentialType"
-						:credentialProperties="credentialProperties"
-						:credentialData="credentialData"
-						:credentialId="credentialId"
-						:showValidationWarning="showValidationWarning"
-						:authError="authError"
-						:testedSuccessfully="testedSuccessfully"
-						:isOAuthType="isOAuthType"
-						:isOAuthConnected="isOAuthConnected"
-						:isRetesting="isRetesting"
-						:parentTypes="parentTypes"
-						:requiredPropertiesFilled="requiredPropertiesFilled"
-						:credentialPermissions="credentialPermissions"
+						:credential-type="credentialType"
+						:credential-properties="credentialProperties"
+						:credential-data="credentialData"
+						:credential-id="credentialId"
+						:show-validation-warning="showValidationWarning"
+						:auth-error="authError"
+						:tested-successfully="testedSuccessfully"
+						:is-o-auth-type="isOAuthType"
+						:is-o-auth-connected="isOAuthConnected"
+						:is-retesting="isRetesting"
+						:parent-types="parentTypes"
+						:required-properties-filled="requiredPropertiesFilled"
+						:credential-permissions="credentialPermissions"
 						:mode="mode"
-						:selectedCredential="selectedCredential"
-						:showAuthTypeSelector="requiredCredentials"
+						:selected-credential="selectedCredential"
+						:show-auth-type-selector="requiredCredentials"
 						@update="onDataChange"
 						@oauth="oAuthCredentialAuthorize"
 						@retest="retestCredential"
@@ -88,24 +88,24 @@
 				<div v-else-if="activeTab === 'sharing' && credentialType" :class="$style.mainContent">
 					<CredentialSharing
 						:credential="currentCredential"
-						:credentialData="credentialData"
-						:credentialId="credentialId"
-						:credentialPermissions="credentialPermissions"
-						:modalBus="modalBus"
+						:credential-data="credentialData"
+						:credential-id="credentialId"
+						:credential-permissions="credentialPermissions"
+						:modal-bus="modalBus"
 						@update:modelValue="onChangeSharedWith"
 					/>
 				</div>
 				<div v-else-if="activeTab === 'details' && credentialType" :class="$style.mainContent">
 					<CredentialInfo
-						:nodeAccess="nodeAccess"
-						:nodesWithAccess="nodesWithAccess"
-						:currentCredential="currentCredential"
-						:credentialPermissions="credentialPermissions"
+						:node-access="nodeAccess"
+						:nodes-with-access="nodesWithAccess"
+						:current-credential="currentCredential"
+						:credential-permissions="credentialPermissions"
 						@accessChange="onNodeAccessChange"
 					/>
 				</div>
 				<div v-else-if="activeTab.startsWith('coming-soon')" :class="$style.mainContent">
-					<FeatureComingSoon :featureId="activeTab.split('/')[1]"></FeatureComingSoon>
+					<FeatureComingSoon :feature-id="activeTab.split('/')[1]"></FeatureComingSoon>
 				</div>
 			</div>
 		</template>
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialInfo.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialInfo.vue
index 3948e31a43..da3c2f971d 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialInfo.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialInfo.vue
@@ -16,7 +16,7 @@
 								fallback: node.displayName,
 							})
 						"
-						:modelValue="!!nodeAccess[node.name]"
+						:model-value="!!nodeAccess[node.name]"
 						@update:modelValue="(val) => onNodeAccessChange(node.name, val)"
 					/>
 					<n8n-text v-else>
@@ -75,10 +75,10 @@ import type { INodeTypeDescription } from 'n8n-workflow';
 
 export default defineComponent({
 	name: 'CredentialInfo',
-	props: ['nodesWithAccess', 'nodeAccess', 'currentCredential', 'credentialPermissions'],
 	components: {
 		TimeAgo,
 	},
+	props: ['nodesWithAccess', 'nodeAccess', 'currentCredential', 'credentialPermissions'],
 	methods: {
 		onNodeAccessChange(name: string, value: string) {
 			this.$emit('accessChange', {
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialInputs.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialInputs.vue
index a75068d142..7ff4aeac07 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialInputs.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialInputs.vue
@@ -1,5 +1,5 @@
 <template>
-	<div @keydown.stop :class="$style.container" v-if="credentialProperties.length">
+	<div v-if="credentialProperties.length" :class="$style.container" @keydown.stop>
 		<form
 			v-for="parameter in credentialProperties"
 			:key="parameter.name"
@@ -9,14 +9,14 @@
 		>
 			<!-- Why form? to break up inputs, to prevent Chrome autofill -->
 			<n8n-notice v-if="parameter.type === 'notice'" :content="parameter.displayName" />
-			<parameter-input-expanded
+			<ParameterInputExpanded
 				v-else
 				:parameter="parameter"
 				:value="credentialData[parameter.name]"
-				:documentationUrl="documentationUrl"
-				:showValidationWarnings="showValidationWarnings"
+				:documentation-url="documentationUrl"
+				:show-validation-warnings="showValidationWarnings"
 				:label="label"
-				eventSource="credentials"
+				event-source="credentials"
 				@update="valueChanged"
 			/>
 		</form>
@@ -31,15 +31,15 @@ import ParameterInputExpanded from '../ParameterInputExpanded.vue';
 
 export default defineComponent({
 	name: 'CredentialsInput',
+	components: {
+		ParameterInputExpanded,
+	},
 	props: [
 		'credentialProperties',
 		'credentialData', // ICredentialsDecryptedResponse
 		'documentationUrl',
 		'showValidationWarnings',
 	],
-	components: {
-		ParameterInputExpanded,
-	},
 	data(): { label: IParameterLabel } {
 		return {
 			label: {
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue
index b44d24a515..c26ccec625 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue
@@ -12,7 +12,7 @@
 						uiStore.contextBasedTranslationKeys.credentials.sharing.unavailable.description,
 					)
 				"
-				:buttonText="
+				:button-text="
 					$locale.baseText(
 						uiStore.contextBasedTranslationKeys.credentials.sharing.unavailable.button,
 					)
@@ -26,7 +26,7 @@
 				:description="
 					$locale.baseText('credentialEdit.credentialSharing.isDefaultUser.description')
 				"
-				:buttonText="$locale.baseText('credentialEdit.credentialSharing.isDefaultUser.button')"
+				:button-text="$locale.baseText('credentialEdit.credentialSharing.isDefaultUser.button')"
 				@click:button="goToUsersSettings"
 			/>
 		</div>
@@ -61,7 +61,7 @@
 				class="mb-s"
 				size="large"
 				:users="usersList"
-				:currentUserId="usersStore.currentUser.id"
+				:current-user-id="usersStore.currentUser.id"
 				:placeholder="$locale.baseText('credentialEdit.credentialSharing.select.placeholder')"
 				data-test-id="credential-sharing-modal-users-select"
 				@update:modelValue="onAddSharee"
@@ -73,7 +73,7 @@
 			<n8n-users-list
 				:actions="usersListActions"
 				:users="sharedWithList"
-				:currentUserId="usersStore.currentUser.id"
+				:current-user-id="usersStore.currentUser.id"
 				:readonly="!credentialPermissions.share"
 				@delete="onRemoveSharee"
 			/>
@@ -151,6 +151,9 @@ export default defineComponent({
 			});
 		},
 	},
+	mounted() {
+		void this.loadUsers();
+	},
 	methods: {
 		async onAddSharee(userId: string) {
 			const sharee = { ...this.usersStore.getUserById(userId), isOwner: false };
@@ -196,9 +199,6 @@ export default defineComponent({
 			void this.uiStore.goToUpgrade('credential_sharing', 'upgrade-credentials-sharing');
 		},
 	},
-	mounted() {
-		void this.loadUsers();
-	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/CredentialIcon.vue b/packages/editor-ui/src/components/CredentialIcon.vue
index bbe47e104d..43cdcd32fb 100644
--- a/packages/editor-ui/src/components/CredentialIcon.vue
+++ b/packages/editor-ui/src/components/CredentialIcon.vue
@@ -1,8 +1,8 @@
 <template>
 	<div>
 		<img v-if="filePath" :class="$style.credIcon" :src="filePath" />
-		<NodeIcon v-else-if="relevantNode" :nodeType="relevantNode" :size="28" />
-		<span :class="$style.fallback" v-else></span>
+		<NodeIcon v-else-if="relevantNode" :node-type="relevantNode" :size="28" />
+		<span v-else :class="$style.fallback"></span>
 	</div>
 </template>
 
diff --git a/packages/editor-ui/src/components/CredentialPicker/CredentialPicker.vue b/packages/editor-ui/src/components/CredentialPicker/CredentialPicker.vue
index 4a65f49e5c..4ffb4d431d 100644
--- a/packages/editor-ui/src/components/CredentialPicker/CredentialPicker.vue
+++ b/packages/editor-ui/src/components/CredentialPicker/CredentialPicker.vue
@@ -104,16 +104,16 @@ listenForCredentialChanges({
 					[$style.invisible]: !props.selectedCredentialId,
 				}"
 				:title="i18n.baseText('nodeCredentials.updateCredential')"
-				@click="editCredential()"
 				data-test-id="credential-edit-button"
+				@click="editCredential()"
 			/>
 		</div>
 
 		<n8n-button
 			v-else
 			:label="`Create new ${props.appName} credential`"
-			@click="createNewCredential"
 			data-test-id="create-credential"
+			@click="createNewCredential"
 		/>
 	</div>
 </template>
diff --git a/packages/editor-ui/src/components/CredentialPicker/CredentialsDropdown.vue b/packages/editor-ui/src/components/CredentialPicker/CredentialsDropdown.vue
index 8b0e03534c..f6de2de573 100644
--- a/packages/editor-ui/src/components/CredentialPicker/CredentialsDropdown.vue
+++ b/packages/editor-ui/src/components/CredentialPicker/CredentialsDropdown.vue
@@ -40,13 +40,13 @@ const onCredentialSelected = (credentialId: string) => {
 <template>
 	<n8n-select
 		size="small"
-		:modelValue="props.selectedCredentialId"
+		:model-value="props.selectedCredentialId"
 		@update:modelValue="onCredentialSelected"
 	>
 		<n8n-option
 			v-for="item in props.credentialOptions"
-			:data-test-id="`node-credentials-select-item-${item.id}`"
 			:key="item.id"
+			:data-test-id="`node-credentials-select-item-${item.id}`"
 			:label="item.name"
 			:value="item.id"
 		>
@@ -56,8 +56,8 @@ const onCredentialSelected = (credentialId: string) => {
 			</div>
 		</n8n-option>
 		<n8n-option
-			data-test-id="node-credentials-select-item-new"
 			:key="NEW_CREDENTIALS_TEXT"
+			data-test-id="node-credentials-select-item-new"
 			:value="NEW_CREDENTIALS_TEXT"
 			:label="NEW_CREDENTIALS_TEXT"
 		>
diff --git a/packages/editor-ui/src/components/CredentialsSelect.vue b/packages/editor-ui/src/components/CredentialsSelect.vue
index 245787cad0..c87e34a129 100644
--- a/packages/editor-ui/src/components/CredentialsSelect.vue
+++ b/packages/editor-ui/src/components/CredentialsSelect.vue
@@ -2,25 +2,25 @@
 	<div>
 		<div :class="$style['parameter-value-container']">
 			<n8n-select
+				ref="innerSelect"
 				:size="inputSize"
 				filterable
-				:modelValue="displayValue"
+				:model-value="displayValue"
 				:placeholder="
 					parameter.placeholder ? getPlaceholder() : $locale.baseText('parameterInput.select')
 				"
 				:title="displayTitle"
 				:disabled="isReadOnly"
-				ref="innerSelect"
+				data-test-id="credential-select"
 				@update:modelValue="(value) => $emit('update:modelValue', value)"
 				@keydown.stop
 				@focus="$emit('setFocus')"
 				@blur="$emit('onBlur')"
-				data-test-id="credential-select"
 			>
 				<n8n-option
 					v-for="credType in supportedCredentialTypes"
-					:value="credType.name"
 					:key="credType.name"
+					:value="credType.name"
 					:label="credType.displayName"
 					data-test-id="credential-select-option"
 				>
@@ -39,15 +39,15 @@
 			<slot name="issues-and-options" />
 		</div>
 
-		<scopes-notice
+		<ScopesNotice
 			v-if="scopes.length > 0"
-			:activeCredentialType="activeCredentialType"
+			:active-credential-type="activeCredentialType"
 			:scopes="scopes"
 		/>
 		<div>
-			<node-credentials
+			<NodeCredentials
 				:node="node"
-				:overrideCredType="node.parameters[parameter.name]"
+				:override-cred-type="node.parameters[parameter.name]"
 				@credentialSelected="(updateInformation) => $emit('credentialSelected', updateInformation)"
 			/>
 		</div>
diff --git a/packages/editor-ui/src/components/CredentialsSelectModal.vue b/packages/editor-ui/src/components/CredentialsSelectModal.vue
index 4a64cca222..5bef0b6311 100644
--- a/packages/editor-ui/src/components/CredentialsSelectModal.vue
+++ b/packages/editor-ui/src/components/CredentialsSelectModal.vue
@@ -1,12 +1,12 @@
 <template>
 	<Modal
 		:name="CREDENTIAL_SELECT_MODAL_KEY"
-		:eventBus="modalBus"
+		:event-bus="modalBus"
 		width="50%"
 		:center="true"
 		:loading="loading"
-		maxWidth="460px"
-		minHeight="250px"
+		max-width="460px"
+		min-height="250px"
 	>
 		<template #header>
 			<h2 :class="$style.title">
@@ -19,22 +19,22 @@
 					{{ $locale.baseText('credentialSelectModal.selectAnAppOrServiceToConnectTo') }}
 				</div>
 				<n8n-select
+					ref="select"
 					filterable
-					defaultFirstOption
+					default-first-option
 					:placeholder="$locale.baseText('credentialSelectModal.searchForApp')"
 					size="xlarge"
-					ref="select"
-					:modelValue="selected"
-					@update:modelValue="onSelect"
+					:model-value="selected"
 					data-test-id="new-credential-type-select"
+					@update:modelValue="onSelect"
 				>
 					<template #prefix>
 						<font-awesome-icon icon="search" />
 					</template>
 					<n8n-option
 						v-for="credential in credentialsStore.allCredentialTypes"
-						:value="credential.name"
 						:key="credential.name"
+						:value="credential.name"
 						:label="credential.displayName"
 						filterable
 						data-test-id="new-credential-type-select-option"
@@ -49,8 +49,8 @@
 					float="right"
 					size="large"
 					:disabled="!selected"
-					@click="openCredentialType"
 					data-test-id="new-credential-type-button"
+					@click="openCredentialType"
 				/>
 			</div>
 		</template>
@@ -79,6 +79,14 @@ export default defineComponent({
 			externalHooks,
 		};
 	},
+	data() {
+		return {
+			modalBus: createEventBus(),
+			selected: '',
+			loading: true,
+			CREDENTIAL_SELECT_MODAL_KEY,
+		};
+	},
 	async mounted() {
 		try {
 			await this.credentialsStore.fetchCredentialTypes(false);
@@ -92,14 +100,6 @@ export default defineComponent({
 			}
 		}, 0);
 	},
-	data() {
-		return {
-			modalBus: createEventBus(),
-			selected: '',
-			loading: true,
-			CREDENTIAL_SELECT_MODAL_KEY,
-		};
-	},
 	computed: {
 		...mapStores(useCredentialsStore, useUIStore, useWorkflowsStore),
 	},
diff --git a/packages/editor-ui/src/components/DeleteUserModal.vue b/packages/editor-ui/src/components/DeleteUserModal.vue
index 4249884752..4e8c360625 100644
--- a/packages/editor-ui/src/components/DeleteUserModal.vue
+++ b/packages/editor-ui/src/components/DeleteUserModal.vue
@@ -1,11 +1,11 @@
 <template>
 	<Modal
 		:name="modalName"
-		@enter="onSubmit"
 		:title="title"
 		:center="true"
 		width="460px"
-		:eventBus="modalBus"
+		:event-bus="modalBus"
+		@enter="onSubmit"
 	>
 		<template #content>
 			<div>
@@ -14,14 +14,14 @@
 						$locale.baseText('settings.users.confirmUserDeletion')
 					}}</n8n-text>
 				</div>
-				<div :class="$style.content" v-else>
+				<div v-else :class="$style.content">
 					<div>
 						<n8n-text color="text-base">{{
 							$locale.baseText('settings.users.confirmDataHandlingAfterDeletion')
 						}}</n8n-text>
 					</div>
 					<el-radio
-						:modelValue="operation"
+						:model-value="operation"
 						label="transfer"
 						@update:modelValue="() => setOperation('transfer')"
 					>
@@ -29,19 +29,19 @@
 							$locale.baseText('settings.users.transferWorkflowsAndCredentials')
 						}}</n8n-text>
 					</el-radio>
-					<div :class="$style.optionInput" v-if="operation === 'transfer'">
+					<div v-if="operation === 'transfer'" :class="$style.optionInput">
 						<n8n-input-label :label="$locale.baseText('settings.users.userToTransferTo')">
 							<n8n-user-select
 								:users="usersStore.allUsers"
-								:modelValue="transferId"
-								:ignoreIds="ignoreIds"
-								:currentUserId="usersStore.currentUserId"
+								:model-value="transferId"
+								:ignore-ids="ignoreIds"
+								:current-user-id="usersStore.currentUserId"
 								@update:modelValue="setTransferId"
 							/>
 						</n8n-input-label>
 					</div>
 					<el-radio
-						:modelValue="operation"
+						:model-value="operation"
 						label="delete"
 						@update:modelValue="() => setOperation('delete')"
 					>
@@ -50,13 +50,13 @@
 						}}</n8n-text>
 					</el-radio>
 					<div
-						:class="$style.optionInput"
 						v-if="operation === 'delete'"
+						:class="$style.optionInput"
 						data-test-id="delete-data-input"
 					>
 						<n8n-input-label :label="$locale.baseText('settings.users.deleteConfirmationMessage')">
 							<n8n-input
-								:modelValue="deleteConfirmText"
+								:model-value="deleteConfirmText"
 								:placeholder="$locale.baseText('settings.users.deleteConfirmationText')"
 								@update:modelValue="setConfirmText"
 							/>
@@ -70,8 +70,8 @@
 				:loading="loading"
 				:disabled="!enabled"
 				:label="$locale.baseText('settings.users.delete')"
-				@click="onSubmit"
 				float="right"
+				@click="onSubmit"
 			/>
 		</template>
 	</Modal>
diff --git a/packages/editor-ui/src/components/Draggable.vue b/packages/editor-ui/src/components/Draggable.vue
index c9a67b3a44..91e8e996a6 100644
--- a/packages/editor-ui/src/components/Draggable.vue
+++ b/packages/editor-ui/src/components/Draggable.vue
@@ -1,15 +1,15 @@
 <template>
 	<component
 		:is="tag"
+		ref="wrapper"
 		:class="{ [$style.dragging]: isDragging }"
 		@mousedown="onDragStart"
-		ref="wrapper"
 	>
-		<slot :isDragging="isDragging"></slot>
+		<slot :is-dragging="isDragging"></slot>
 
 		<Teleport to="body">
-			<div ref="draggable" :class="$style.draggable" :style="draggableStyle" v-show="isDragging">
-				<slot name="preview" :canDrop="canDrop" :el="draggingEl"></slot>
+			<div v-show="isDragging" ref="draggable" :class="$style.draggable" :style="draggableStyle">
+				<slot name="preview" :can-drop="canDrop" :el="draggingEl"></slot>
 			</div>
 		</Teleport>
 	</component>
@@ -22,7 +22,7 @@ import { mapStores } from 'pinia';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-	name: 'draggable',
+	name: 'Draggable',
 	props: {
 		disabled: {
 			type: Boolean,
diff --git a/packages/editor-ui/src/components/DraggableTarget.vue b/packages/editor-ui/src/components/DraggableTarget.vue
index a36b4aa9ff..0cc331d6b8 100644
--- a/packages/editor-ui/src/components/DraggableTarget.vue
+++ b/packages/editor-ui/src/components/DraggableTarget.vue
@@ -1,6 +1,6 @@
 <template>
 	<div ref="target">
-		<slot :droppable="droppable" :activeDrop="activeDrop"></slot>
+		<slot :droppable="droppable" :active-drop="activeDrop"></slot>
 	</div>
 </template>
 
diff --git a/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue b/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
index d260567ea4..d769d8955f 100644
--- a/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
+++ b/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
@@ -1,46 +1,46 @@
 <template>
 	<Modal
 		:name="modalName"
-		:eventBus="modalBus"
-		@enter="save"
+		:event-bus="modalBus"
 		:title="$locale.baseText('duplicateWorkflowDialog.duplicateWorkflow')"
 		:center="true"
 		width="420px"
+		@enter="save"
 	>
 		<template #content>
 			<div :class="$style.content">
 				<n8n-input
-					v-model="name"
 					ref="nameInput"
+					v-model="name"
 					:placeholder="$locale.baseText('duplicateWorkflowDialog.enterWorkflowName')"
 					:maxlength="MAX_WORKFLOW_NAME_LENGTH"
 				/>
 				<TagsDropdown
 					v-if="settingsStore.areTagsEnabled"
+					ref="dropdown"
 					v-model="currentTagIds"
-					:createEnabled="true"
-					:eventBus="dropdownBus"
+					:create-enabled="true"
+					:event-bus="dropdownBus"
+					:placeholder="$locale.baseText('duplicateWorkflowDialog.chooseOrCreateATag')"
 					@blur="onTagsBlur"
 					@esc="onTagsEsc"
-					:placeholder="$locale.baseText('duplicateWorkflowDialog.chooseOrCreateATag')"
-					ref="dropdown"
 				/>
 			</div>
 		</template>
 		<template #footer="{ close }">
 			<div :class="$style.footer">
 				<n8n-button
-					@click="save"
 					:loading="isSaving"
 					:label="$locale.baseText('duplicateWorkflowDialog.save')"
 					float="right"
+					@click="save"
 				/>
 				<n8n-button
 					type="secondary"
-					@click="close"
 					:disabled="isSaving"
 					:label="$locale.baseText('duplicateWorkflowDialog.cancel')"
 					float="right"
+					@click="close"
 				/>
 			</div>
 		</template>
@@ -66,8 +66,8 @@ import { useCredentialsStore } from '@/stores/credentials.store';
 
 export default defineComponent({
 	name: 'DuplicateWorkflow',
-	mixins: [workflowHelpers],
 	components: { TagsDropdown, Modal },
+	mixins: [workflowHelpers],
 	props: ['modalName', 'isActive', 'data'],
 	setup() {
 		return {
diff --git a/packages/editor-ui/src/components/EnterpriseEdition.ee.vue b/packages/editor-ui/src/components/EnterpriseEdition.ee.vue
index aea5a52f2b..f2056a0b23 100644
--- a/packages/editor-ui/src/components/EnterpriseEdition.ee.vue
+++ b/packages/editor-ui/src/components/EnterpriseEdition.ee.vue
@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<slot v-if="canAccess" />
-		<slot name="fallback" v-else />
+		<slot v-else name="fallback" />
 	</div>
 </template>
 
diff --git a/packages/editor-ui/src/components/Error/NodeErrorView.vue b/packages/editor-ui/src/components/Error/NodeErrorView.vue
index eda0d667d5..34433d7d2a 100644
--- a/packages/editor-ui/src/components/Error/NodeErrorView.vue
+++ b/packages/editor-ui/src/components/Error/NodeErrorView.vue
@@ -2,7 +2,7 @@
 	<div>
 		<div class="error-header">
 			<div class="error-message" v-text="getErrorMessage()" />
-			<div class="error-description" v-if="error.description" v-html="getErrorDescription()"></div>
+			<div v-if="error.description" class="error-description" v-html="getErrorDescription()"></div>
 		</div>
 		<details>
 			<summary class="error-details__summary">
@@ -76,19 +76,19 @@
 							</div>
 						</template>
 						<div>
-							<div class="copy-button" v-if="displayCause">
+							<div v-if="displayCause" class="copy-button">
 								<n8n-icon-button
-									@click="copyCause"
 									:title="$locale.baseText('nodeErrorView.copyToClipboard')"
 									icon="copy"
+									@click="copyCause"
 								/>
 							</div>
-							<vue-json-pretty
+							<VueJsonPretty
 								v-if="displayCause"
 								:data="error.cause"
 								:deep="3"
-								:showLength="true"
-								selectableType="single"
+								:show-length="true"
+								selectable-type="single"
 								path="error"
 								class="json-data"
 							/>
@@ -137,11 +137,11 @@ import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 
 export default defineComponent({
 	name: 'NodeErrorView',
-	mixins: [copyPaste],
-	props: ['error'],
 	components: {
 		VueJsonPretty,
 	},
+	mixins: [copyPaste],
+	props: ['error'],
 	setup() {
 		return {
 			...useToast(),
diff --git a/packages/editor-ui/src/components/ExecutionFilter.vue b/packages/editor-ui/src/components/ExecutionFilter.vue
index bb1ef35d1a..1c265ffbc4 100644
--- a/packages/editor-ui/src/components/ExecutionFilter.vue
+++ b/packages/editor-ui/src/components/ExecutionFilter.vue
@@ -194,10 +194,10 @@ onBeforeMount(() => {
 				<TagsDropdown
 					id="execution-filter-tags"
 					:placeholder="locale.baseText('workflowOpen.filterWorkflows')"
-					:modelValue="filter.tags"
-					:createEnabled="false"
-					@update:modelValue="onTagsChange"
+					:model-value="filter.tags"
+					:create-enabled="false"
 					data-test-id="executions-filter-tags-select"
+					@update:modelValue="onTagsChange"
 				/>
 			</div>
 			<div :class="$style.group">
@@ -225,9 +225,9 @@ onBeforeMount(() => {
 				<div :class="$style.dates">
 					<el-date-picker
 						id="execution-filter-start-date"
+						v-model="vModel.startDate"
 						type="datetime"
 						:teleported="false"
-						v-model="vModel.startDate"
 						:format="DATE_TIME_MASK"
 						:placeholder="locale.baseText('executionsFilter.startDate')"
 						data-test-id="executions-filter-start-date-picker"
@@ -235,9 +235,9 @@ onBeforeMount(() => {
 					<span :class="$style.divider">to</span>
 					<el-date-picker
 						id="execution-filter-end-date"
+						v-model="vModel.endDate"
 						type="datetime"
 						:teleported="false"
-						v-model="vModel.endDate"
 						:format="DATE_TIME_MASK"
 						:placeholder="locale.baseText('executionsFilter.endDate')"
 						data-test-id="executions-filter-end-date-picker"
@@ -273,8 +273,8 @@ onBeforeMount(() => {
 								<template #link>
 									<a
 										href="#"
-										@click.prevent="goToUpgrade"
 										data-test-id="executions-filter-view-plans-link"
+										@click.prevent="goToUpgrade"
 										>{{ locale.baseText('executionsFilter.customData.inputTooltip.link') }}</a
 									>
 								</template>
@@ -286,9 +286,9 @@ onBeforeMount(() => {
 							type="text"
 							:disabled="!isAdvancedExecutionFilterEnabled"
 							:placeholder="locale.baseText('executionsFilter.savedDataKeyPlaceholder')"
-							:modelValue="filter.metadata[0]?.key"
-							@update:modelValue="onFilterMetaChange(0, 'key', $event)"
+							:model-value="filter.metadata[0]?.key"
 							data-test-id="execution-filter-saved-data-key-input"
+							@update:modelValue="onFilterMetaChange(0, 'key', $event)"
 						/>
 					</n8n-tooltip>
 					<label for="execution-filter-saved-data-value">{{
@@ -310,9 +310,9 @@ onBeforeMount(() => {
 							type="text"
 							:disabled="!isAdvancedExecutionFilterEnabled"
 							:placeholder="locale.baseText('executionsFilter.savedDataValuePlaceholder')"
-							:modelValue="filter.metadata[0]?.value"
-							@update:modelValue="onFilterMetaChange(0, 'value', $event)"
+							:model-value="filter.metadata[0]?.value"
 							data-test-id="execution-filter-saved-data-value-input"
+							@update:modelValue="onFilterMetaChange(0, 'value', $event)"
 						/>
 					</n8n-tooltip>
 				</div>
@@ -320,10 +320,10 @@ onBeforeMount(() => {
 			<n8n-button
 				v-if="!!countSelectedFilterProps"
 				:class="$style.resetBtn"
-				@click="onFilterReset"
 				size="large"
 				text
 				data-test-id="executions-filter-reset-button"
+				@click="onFilterReset"
 			>
 				{{ locale.baseText('executionsFilter.reset') }}
 			</n8n-button>
diff --git a/packages/editor-ui/src/components/ExecutionTime.vue b/packages/editor-ui/src/components/ExecutionTime.vue
index 012b01365f..fc971693a2 100644
--- a/packages/editor-ui/src/components/ExecutionTime.vue
+++ b/packages/editor-ui/src/components/ExecutionTime.vue
@@ -12,6 +12,12 @@ export default defineComponent({
 	name: 'ExecutionTime',
 	mixins: [genericHelpers],
 	props: ['startTime'],
+	data() {
+		return {
+			nowTime: -1,
+			intervalTimer: null as null | NodeJS.Timeout,
+		};
+	},
 	computed: {
 		time(): string {
 			if (!this.startTime) {
@@ -21,12 +27,6 @@ export default defineComponent({
 			return this.displayTimer(msPassed);
 		},
 	},
-	data() {
-		return {
-			nowTime: -1,
-			intervalTimer: null as null | NodeJS.Timeout,
-		};
-	},
 	mounted() {
 		this.setNow();
 		this.intervalTimer = setInterval(() => {
diff --git a/packages/editor-ui/src/components/ExecutionsList.vue b/packages/editor-ui/src/components/ExecutionsList.vue
index d62756daae..b62aca72f2 100644
--- a/packages/editor-ui/src/components/ExecutionsList.vue
+++ b/packages/editor-ui/src/components/ExecutionsList.vue
@@ -2,19 +2,19 @@
 	<div :class="$style.execListWrapper">
 		<div :class="$style.execList">
 			<div :class="$style.execListHeader">
-				<n8n-heading tag="h1" size="2xlarge">{{ this.pageTitle }}</n8n-heading>
+				<n8n-heading tag="h1" size="2xlarge">{{ pageTitle }}</n8n-heading>
 				<div :class="$style.execListHeaderControls">
 					<n8n-loading v-if="isMounting" :class="$style.filterLoader" variant="custom" />
 					<el-checkbox
 						v-else
-						class="mr-xl"
 						v-model="autoRefresh"
-						@update:modelValue="handleAutoRefreshToggle"
+						class="mr-xl"
 						data-test-id="execution-auto-refresh-checkbox"
+						@update:modelValue="handleAutoRefreshToggle"
 					>
 						{{ i18n.baseText('executionsList.autoRefresh') }}
 					</el-checkbox>
-					<execution-filter
+					<ExecutionFilter
 						v-show="!isMounting"
 						:workflows="workflows"
 						@filterChanged="onFilterChanged"
@@ -31,9 +31,9 @@
 						interpolate: { executionNum: finishedExecutionsCount },
 					})
 				"
-				:modelValue="allExistingSelected"
-				@update:modelValue="handleCheckAllExistingChange"
+				:model-value="allExistingSelected"
 				data-test-id="select-all-executions-checkbox"
+				@update:modelValue="handleCheckAllExistingChange"
 			/>
 
 			<div v-if="isMounting">
@@ -46,11 +46,11 @@
 					<tr>
 						<th>
 							<el-checkbox
-								:modelValue="allVisibleSelected"
-								@update:modelValue="handleCheckAllVisibleChange"
+								:model-value="allVisibleSelected"
 								:disabled="finishedExecutionsCount < 1"
 								label=""
 								data-test-id="select-visible-executions-checkbox"
+								@update:modelValue="handleCheckAllVisibleChange"
 							/>
 						</th>
 						<th>{{ i18n.baseText('executionsList.name') }}</th>
@@ -72,10 +72,10 @@
 						<td>
 							<el-checkbox
 								v-if="execution.stoppedAt !== undefined && execution.id"
-								:modelValue="selectedItems[execution.id] || allExistingSelected"
-								@update:modelValue="handleCheckboxChanged(execution.id)"
+								:model-value="selectedItems[execution.id] || allExistingSelected"
 								label=""
 								data-test-id="select-execution-checkbox"
+								@update:modelValue="handleCheckboxChanged(execution.id)"
 							/>
 						</td>
 						<td>
@@ -114,7 +114,7 @@
 												)
 											}}
 										</span>
-										<execution-time v-else :start-time="execution.startedAt" />
+										<ExecutionTime v-else :start-time="execution.startedAt" />
 									</template>
 								</i18n-t>
 								<n8n-tooltip v-else placement="top">
@@ -168,8 +168,8 @@
 									size="small"
 									outline
 									:label="i18n.baseText('executionsList.stop')"
-									@click.stop="stopExecution(execution.id)"
 									:loading="stoppingExecutions.includes(execution.id)"
+									@click.stop="stopExecution(execution.id)"
 								/>
 							</div>
 						</td>
@@ -231,18 +231,18 @@
 				{{ i18n.baseText('executionsList.empty') }}
 			</div>
 			<div
-				:class="$style.loadMore"
 				v-else-if="
 					finishedExecutionsCount > finishedExecutions.length || finishedExecutionsCountEstimated
 				"
+				:class="$style.loadMore"
 			>
 				<n8n-button
 					icon="sync"
 					:title="i18n.baseText('executionsList.loadMore')"
 					:label="i18n.baseText('executionsList.loadMore')"
-					@click="loadMore()"
 					:loading="isDataLoading"
 					data-test-id="load-more-button"
+					@click="loadMore()"
 				/>
 			</div>
 			<div
@@ -269,14 +269,14 @@
 			<n8n-button
 				:label="i18n.baseText('generic.delete')"
 				type="tertiary"
-				@click="handleDeleteSelected"
 				data-test-id="delete-selected-button"
+				@click="handleDeleteSelected"
 			/>
 			<n8n-button
 				:label="i18n.baseText('executionsList.clearSelection')"
 				type="tertiary"
-				@click="handleClearSelection"
 				data-test-id="clear-selection-button"
+				@click="handleClearSelection"
 			/>
 		</div>
 	</div>
@@ -314,11 +314,11 @@ import { useRoute } from 'vue-router';
 
 export default defineComponent({
 	name: 'ExecutionsList',
-	mixins: [genericHelpers, executionHelpers],
 	components: {
 		ExecutionTime,
 		ExecutionFilter,
 	},
+	mixins: [genericHelpers, executionHelpers],
 	props: {
 		autoRefreshEnabled: {
 			type: Boolean,
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue
index 54058f63e8..8d6923956a 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue
@@ -37,7 +37,7 @@
 						size="small"
 					>
 						{{ $locale.baseText('executionDetails.runningTimeRunning') }}
-						<execution-time :start-time="execution.startedAt" />
+						<ExecutionTime :start-time="execution.startedAt" />
 					</n8n-text>
 					<n8n-text
 						v-else-if="executionUIDetails.runningTime !== ''"
@@ -62,7 +62,7 @@
 					v-if="executionUIDetails.name === 'error'"
 					:class="[$style.icon, $style.retry]"
 					:items="retryExecutionActions"
-					activatorIcon="redo"
+					activator-icon="redo"
 					data-test-id="retry-execution-button"
 					@select="onRetryMenuItemSelect"
 				/>
@@ -90,16 +90,11 @@ import { VIEWS } from '@/constants';
 import ExecutionTime from '@/components/ExecutionTime.vue';
 
 export default defineComponent({
-	name: 'execution-card',
-	mixins: [executionHelpers],
+	name: 'ExecutionCard',
 	components: {
 		ExecutionTime,
 	},
-	data() {
-		return {
-			VIEWS,
-		};
-	},
+	mixins: [executionHelpers],
 	props: {
 		execution: {
 			type: Object as () => IExecutionsSummary,
@@ -114,6 +109,11 @@ export default defineComponent({
 			default: false,
 		},
 	},
+	data() {
+		return {
+			VIEWS,
+		};
+	},
 	computed: {
 		retryExecutionActions(): object[] {
 			return [
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
index 4a2e4a68a8..b18cb6ebd1 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
@@ -12,8 +12,8 @@
 	</div>
 	<div v-else :class="$style.previewContainer">
 		<div
-			:class="$style.executionDetails"
 			v-if="activeExecution"
+			:class="$style.executionDetails"
 			:data-test-id="`execution-preview-details-${executionId}`"
 		>
 			<div>
@@ -96,18 +96,18 @@
 							},
 						}"
 					>
-						<span @click="handleDebugLinkClick" data-test-id="execution-debug-button">{{
+						<span data-test-id="execution-debug-button" @click="handleDebugLinkClick">{{
 							debugButtonData.text
 						}}</span>
 					</router-link>
 				</n8n-button>
 
-				<el-dropdown
+				<ElDropdown
 					v-if="executionUIDetails?.name === 'error'"
+					ref="retryDropdown"
 					trigger="click"
 					class="mr-xs"
 					@command="handleRetryClick"
-					ref="retryDropdown"
 				>
 					<span class="retry-button">
 						<n8n-icon-button
@@ -129,7 +129,7 @@
 							</el-dropdown-item>
 						</el-dropdown-menu>
 					</template>
-				</el-dropdown>
+				</ElDropdown>
 				<n8n-icon-button
 					:title="$locale.baseText('executionDetails.deleteExecution')"
 					icon="trash"
@@ -140,11 +140,11 @@
 				/>
 			</div>
 		</div>
-		<workflow-preview
+		<WorkflowPreview
 			mode="execution"
-			loaderType="spinner"
-			:executionId="executionId"
-			:executionMode="executionMode"
+			loader-type="spinner"
+			:execution-id="executionId"
+			:execution-mode="executionMode"
 		/>
 	</div>
 </template>
@@ -162,23 +162,23 @@ import { MODAL_CONFIRM, VIEWS } from '@/constants';
 type RetryDropdownRef = InstanceType<typeof ElDropdown> & { hide: () => void };
 
 export default defineComponent({
-	name: 'execution-preview',
-	mixins: [executionHelpers],
+	name: 'ExecutionPreview',
 	components: {
 		ElDropdown,
 		WorkflowPreview,
 	},
-	data() {
-		return {
-			VIEWS,
-		};
-	},
+	mixins: [executionHelpers],
 	setup() {
 		return {
 			...useMessage(),
 			...useExecutionDebugging(),
 		};
 	},
+	data() {
+		return {
+			VIEWS,
+		};
+	},
 	computed: {
 		executionUIDetails(): IExecutionUIData | null {
 			return this.activeExecution ? this.getExecutionUIDetails(this.activeExecution) : null;
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionsInfoAccordion.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionsInfoAccordion.vue
index 950b825798..318ff4f5ba 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionsInfoAccordion.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionsInfoAccordion.vue
@@ -3,8 +3,8 @@
 		:class="[$style.accordion, 'mt-2xl']"
 		:title="$locale.baseText('executionsLandingPage.emptyState.accordion.title')"
 		:items="accordionItems"
-		:initiallyExpanded="shouldExpandAccordion"
-		:headerIcon="accordionIcon"
+		:initially-expanded="shouldExpandAccordion"
+		:header-icon="accordionIcon"
 		@click:body="onAccordionClick"
 		@tooltipClick="onItemTooltipClick"
 	>
@@ -23,9 +23,9 @@
 						</div>
 					</template>
 					<n8n-link
-						@click.prevent="openWorkflowSettings"
 						:class="{ [$style.disabled]: isNewWorkflow }"
 						size="small"
+						@click.prevent="openWorkflowSettings"
 					>
 						{{ $locale.baseText('executionsLandingPage.emptyState.accordion.footer.settingsLink') }}
 					</n8n-link>
@@ -54,7 +54,7 @@ interface IWorkflowSaveSettings {
 }
 
 export default defineComponent({
-	name: 'executions-info-accordion',
+	name: 'ExecutionsInfoAccordion',
 	mixins: [workflowHelpers],
 	props: {
 		initiallyExpanded: {
@@ -76,17 +76,17 @@ export default defineComponent({
 			} as IWorkflowSaveSettings,
 		};
 	},
+	watch: {
+		workflowSettings(newSettings: IWorkflowSettings) {
+			this.updateSettings(newSettings);
+		},
+	},
 	mounted() {
 		this.defaultValues.saveFailedExecutions = this.settingsStore.saveDataErrorExecution;
 		this.defaultValues.saveSuccessfulExecutions = this.settingsStore.saveDataSuccessExecution;
 		this.defaultValues.saveManualExecutions = this.settingsStore.saveManualExecutions;
 		this.updateSettings(this.workflowSettings);
 	},
-	watch: {
-		workflowSettings(newSettings: IWorkflowSettings) {
-			this.updateSettings(newSettings);
-		},
-	},
 	computed: {
 		...mapStores(useRootStore, useSettingsStore, useUIStore, useWorkflowsStore),
 		accordionItems(): object[] {
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionsLandingPage.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionsLandingPage.vue
index a55fb1328e..12d3f80d93 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionsLandingPage.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionsLandingPage.vue
@@ -16,7 +16,7 @@
 				<n8n-heading tag="h2" size="xlarge" color="text-dark" class="mb-2xs">
 					{{ $locale.baseText('executionsLandingPage.emptyState.heading') }}
 				</n8n-heading>
-				<executions-info-accordion />
+				<ExecutionsInfoAccordion />
 			</div>
 		</div>
 	</div>
@@ -31,7 +31,7 @@ import { defineComponent } from 'vue';
 import ExecutionsInfoAccordion from './ExecutionsInfoAccordion.vue';
 
 export default defineComponent({
-	name: 'executions-landing-page',
+	name: 'ExecutionsLandingPage',
 	components: {
 		ExecutionsInfoAccordion,
 	},
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue
index d553e42933..e83389889f 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue
@@ -1,10 +1,10 @@
 <template>
 	<div :class="$style.container">
-		<executions-sidebar
+		<ExecutionsSidebar
 			:executions="executions"
 			:loading="loading && !executions.length"
-			:loadingMore="loadingMore"
-			:temporaryExecution="temporaryExecution"
+			:loading-more="loadingMore"
+			:temporary-execution="temporaryExecution"
 			:auto-refresh="autoRefresh"
 			@update:autoRefresh="onAutoRefreshToggle"
 			@reloadExecutions="setExecutions"
@@ -12,7 +12,7 @@
 			@loadMore="onLoadMore"
 			@retryExecution="onRetryExecution"
 		/>
-		<div :class="$style.content" v-if="!hidePreview">
+		<div v-if="!hidePreview" :class="$style.content">
 			<router-view
 				name="executionPreview"
 				@deleteCurrentExecution="onDeleteCurrentExecution"
@@ -76,11 +76,20 @@ const MAX_LOADING_ATTEMPTS = 5;
 const LOAD_MORE_PAGE_SIZE = 100;
 
 export default defineComponent({
-	name: 'executions-list',
-	mixins: [executionHelpers, debounceHelper, workflowHelpers],
+	name: 'ExecutionsList',
 	components: {
 		ExecutionsSidebar,
 	},
+	mixins: [executionHelpers, debounceHelper, workflowHelpers],
+	setup() {
+		const externalHooks = useExternalHooks();
+
+		return {
+			externalHooks,
+			...useToast(),
+			...useMessage(),
+		};
+	},
 	data() {
 		return {
 			loading: false,
@@ -91,15 +100,6 @@ export default defineComponent({
 			autoRefreshTimeout: undefined as undefined | NodeJS.Timer,
 		};
 	},
-	setup() {
-		const externalHooks = useExternalHooks();
-
-		return {
-			externalHooks,
-			...useToast(),
-			...useMessage(),
-		};
-	},
 	computed: {
 		...mapStores(useTagsStore, useNodeTypesStore, useSettingsStore, useUIStore, useWorkflowsStore),
 		hidePreview(): boolean {
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue
index 2f6b482b73..3778d91b3f 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue
@@ -1,7 +1,7 @@
 <template>
 	<div
-		:class="['executions-sidebar', $style.container]"
 		ref="container"
+		:class="['executions-sidebar', $style.container]"
 		data-test-id="executions-sidebar"
 	>
 		<div :class="$style.heading">
@@ -11,17 +11,17 @@
 		</div>
 		<div :class="$style.controls">
 			<el-checkbox
-				:modelValue="autoRefresh"
-				@update:modelValue="$emit('update:autoRefresh', $event)"
+				:model-value="autoRefresh"
 				data-test-id="auto-refresh-checkbox"
+				@update:modelValue="$emit('update:autoRefresh', $event)"
 			>
 				{{ $locale.baseText('executionsList.autoRefresh') }}
 			</el-checkbox>
-			<execution-filter popover-placement="left-start" @filterChanged="onFilterChanged" />
+			<ExecutionFilter popover-placement="left-start" @filterChanged="onFilterChanged" />
 		</div>
 		<div
-			:class="$style.executionList"
 			ref="executionList"
+			:class="$style.executionList"
 			data-test-id="current-executions-list"
 			@scroll="loadMore(20)"
 		>
@@ -33,19 +33,19 @@
 					{{ $locale.baseText('executionsLandingPage.noResults') }}
 				</n8n-text>
 			</div>
-			<execution-card
+			<ExecutionCard
 				v-else-if="temporaryExecution"
-				:execution="temporaryExecution"
 				:ref="`execution-${temporaryExecution.id}`"
+				:execution="temporaryExecution"
 				:data-test-id="`execution-details-${temporaryExecution.id}`"
-				:showGap="true"
+				:show-gap="true"
 				@retryExecution="onRetryExecution"
 			/>
-			<execution-card
+			<ExecutionCard
 				v-for="execution in executions"
 				:key="execution.id"
-				:execution="execution"
 				:ref="`execution-${execution.id}`"
+				:execution="execution"
 				:data-test-id="`execution-details-${execution.id}`"
 				@retryExecution="onRetryExecution"
 			/>
@@ -54,7 +54,7 @@
 			</div>
 		</div>
 		<div :class="$style.infoAccordion">
-			<executions-info-accordion :initiallyExpanded="false" />
+			<ExecutionsInfoAccordion :initially-expanded="false" />
 		</div>
 	</div>
 </template>
@@ -76,7 +76,7 @@ import type { ExecutionFilterType } from '@/Interface';
 type ExecutionCardRef = InstanceType<typeof ExecutionCard>;
 
 export default defineComponent({
-	name: 'executions-sidebar',
+	name: 'ExecutionsSidebar',
 	components: {
 		ExecutionCard,
 		ExecutionsInfoAccordion,
diff --git a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue
index 9c0ac148ea..ec9838d429 100644
--- a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue
+++ b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue
@@ -1,16 +1,16 @@
 <template>
-	<ExpandableInputBase :modelValue="modelValue" :placeholder="placeholder">
+	<ExpandableInputBase :model-value="modelValue" :placeholder="placeholder">
 		<input
+			ref="input"
+			v-on-click-outside="onClickOutside"
 			class="el-input__inner"
 			:value="modelValue"
 			:placeholder="placeholder"
 			:maxlength="maxlength"
+			size="4"
 			@input="onInput"
 			@keydown.enter="onEnter"
 			@keydown.esc="onEscape"
-			ref="input"
-			size="4"
-			v-on-click-outside="onClickOutside"
 		/>
 	</ExpandableInputBase>
 </template>
diff --git a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputPreview.vue b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputPreview.vue
index b0451dda46..6700198b87 100644
--- a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputPreview.vue
+++ b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputPreview.vue
@@ -1,5 +1,5 @@
 <template>
-	<ExpandableInputBase :modelValue="modelValue" :staticSize="true">
+	<ExpandableInputBase :model-value="modelValue" :static-size="true">
 		<input
 			:class="{ 'el-input__inner': true, clickable: true }"
 			:value="modelValue"
diff --git a/packages/editor-ui/src/components/ExpressionEdit.vue b/packages/editor-ui/src/components/ExpressionEdit.vue
index a904380cc0..f9254c895d 100644
--- a/packages/editor-ui/src/components/ExpressionEdit.vue
+++ b/packages/editor-ui/src/components/ExpressionEdit.vue
@@ -1,7 +1,7 @@
 <template>
-	<div class="expression-edit" v-if="dialogVisible" @keydown.stop>
+	<div v-if="dialogVisible" class="expression-edit" @keydown.stop>
 		<el-dialog
-			:modelValue="dialogVisible"
+			:model-value="dialogVisible"
 			class="expression-dialog classic"
 			width="80%"
 			:title="$locale.baseText('expressionEdit.editExpression')"
@@ -19,11 +19,11 @@
 					</div>
 
 					<div class="variable-selector">
-						<variable-selector
+						<VariableSelector
 							:path="path"
-							:redactValues="redactValues"
+							:redact-values="redactValues"
 							@itemSelected="itemSelected"
-						></variable-selector>
+						></VariableSelector>
 					</div>
 				</el-col>
 				<el-col :span="16" class="right-side">
@@ -48,14 +48,14 @@
 						</div>
 						<div class="expression-editor">
 							<ExpressionEditorModalInput
-								:modelValue="modelValue"
-								:isReadOnly="isReadOnlyRoute"
+								ref="inputFieldExpression"
+								:model-value="modelValue"
+								:is-read-only="isReadOnlyRoute"
 								:path="path"
 								:class="{ 'ph-no-capture': redactValues }"
+								data-test-id="expression-modal-input"
 								@change="valueChanged"
 								@close="closeDialog"
-								ref="inputFieldExpression"
-								data-test-id="expression-modal-input"
 							/>
 						</div>
 					</div>
@@ -66,8 +66,8 @@
 						</div>
 						<div :class="{ 'ph-no-capture': redactValues }">
 							<ExpressionEditorModalOutput
-								:segments="segments"
 								ref="expressionResult"
+								:segments="segments"
 								data-test-id="expression-modal-output"
 							/>
 						</div>
@@ -101,6 +101,11 @@ import type { Segment } from '@/types/expressions';
 
 export default defineComponent({
 	name: 'ExpressionEdit',
+	components: {
+		ExpressionEditorModalInput,
+		ExpressionEditorModalOutput,
+		VariableSelector,
+	},
 	mixins: [genericHelpers, debounceHelper],
 	props: ['dialogVisible', 'parameter', 'path', 'modelValue', 'eventSource', 'redactValues'],
 	setup() {
@@ -109,11 +114,6 @@ export default defineComponent({
 			externalHooks,
 		};
 	},
-	components: {
-		ExpressionEditorModalInput,
-		ExpressionEditorModalOutput,
-		VariableSelector,
-	},
 	data() {
 		return {
 			displayValue: '',
@@ -125,6 +125,38 @@ export default defineComponent({
 	computed: {
 		...mapStores(useNDVStore, useWorkflowsStore),
 	},
+	watch: {
+		dialogVisible(newValue) {
+			this.displayValue = this.modelValue;
+			this.latestValue = this.modelValue;
+
+			const resolvedExpressionValue =
+				(
+					this.$refs.expressionResult as {
+						getValue: () => string;
+					}
+				)?.getValue() || '';
+			void this.externalHooks.run('expressionEdit.dialogVisibleChanged', {
+				dialogVisible: newValue,
+				parameter: this.parameter,
+				value: this.modelValue,
+				resolvedExpressionValue,
+			});
+
+			if (!newValue) {
+				const telemetryPayload = createExpressionTelemetryPayload(
+					this.segments,
+					this.modelValue,
+					this.workflowsStore.workflowId,
+					this.ndvStore.sessionId,
+					this.ndvStore.activeNode?.type ?? '',
+				);
+
+				this.$telemetry.track('User closed Expression Editor', telemetryPayload);
+				void this.externalHooks.run('expressionEdit.closeDialog', telemetryPayload);
+			}
+		},
+	},
 	methods: {
 		valueChanged({ value, segments }: { value: string; segments: Segment[] }, forceUpdate = false) {
 			this.latestValue = value;
@@ -228,38 +260,6 @@ export default defineComponent({
 			);
 		},
 	},
-	watch: {
-		dialogVisible(newValue) {
-			this.displayValue = this.modelValue;
-			this.latestValue = this.modelValue;
-
-			const resolvedExpressionValue =
-				(
-					this.$refs.expressionResult as {
-						getValue: () => string;
-					}
-				)?.getValue() || '';
-			void this.externalHooks.run('expressionEdit.dialogVisibleChanged', {
-				dialogVisible: newValue,
-				parameter: this.parameter,
-				value: this.modelValue,
-				resolvedExpressionValue,
-			});
-
-			if (!newValue) {
-				const telemetryPayload = createExpressionTelemetryPayload(
-					this.segments,
-					this.modelValue,
-					this.workflowsStore.workflowId,
-					this.ndvStore.sessionId,
-					this.ndvStore.activeNode?.type ?? '',
-				);
-
-				this.$telemetry.track('User closed Expression Editor', telemetryPayload);
-				void this.externalHooks.run('expressionEdit.closeDialog', telemetryPayload);
-			}
-		},
-	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalOutput.vue b/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalOutput.vue
index 58e58432b4..b22ca21bec 100644
--- a/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalOutput.vue
+++ b/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalOutput.vue
@@ -21,42 +21,11 @@ export default defineComponent({
 			type: Array as PropType<Segment[]>,
 		},
 	},
-	watch: {
-		segments() {
-			if (!this.editor) return;
-
-			this.editor.dispatch({
-				changes: { from: 0, to: this.editor.state.doc.length, insert: this.resolvedExpression },
-			});
-
-			highlighter.addColor(this.editor, this.resolvedSegments);
-			highlighter.removeColor(this.editor, this.plaintextSegments);
-		},
-	},
 	data() {
 		return {
 			editor: null as EditorView | null,
 		};
 	},
-	mounted() {
-		const extensions = [
-			outputTheme(),
-			EditorState.readOnly.of(true),
-			EditorView.lineWrapping,
-			EditorView.domEventHandlers({ scroll: forceParse }),
-		];
-
-		this.editor = new EditorView({
-			parent: this.$refs.root as HTMLDivElement,
-			state: EditorState.create({
-				doc: this.resolvedExpression,
-				extensions,
-			}),
-		});
-	},
-	beforeUnmount() {
-		this.editor?.destroy();
-	},
 	computed: {
 		resolvedExpression(): string {
 			return this.segments.reduce((acc, segment) => {
@@ -88,6 +57,37 @@ export default defineComponent({
 				.filter((segment): segment is Resolved => segment.kind === 'resolvable');
 		},
 	},
+	watch: {
+		segments() {
+			if (!this.editor) return;
+
+			this.editor.dispatch({
+				changes: { from: 0, to: this.editor.state.doc.length, insert: this.resolvedExpression },
+			});
+
+			highlighter.addColor(this.editor, this.resolvedSegments);
+			highlighter.removeColor(this.editor, this.plaintextSegments);
+		},
+	},
+	mounted() {
+		const extensions = [
+			outputTheme(),
+			EditorState.readOnly.of(true),
+			EditorView.lineWrapping,
+			EditorView.domEventHandlers({ scroll: forceParse }),
+		];
+
+		this.editor = new EditorView({
+			parent: this.$refs.root as HTMLDivElement,
+			state: EditorState.create({
+				doc: this.resolvedExpression,
+				extensions,
+			}),
+		});
+	},
+	beforeUnmount() {
+		this.editor?.destroy();
+	},
 	methods: {
 		getValue() {
 			return '=' + this.resolvedExpression;
diff --git a/packages/editor-ui/src/components/ExpressionParameterInput.vue b/packages/editor-ui/src/components/ExpressionParameterInput.vue
index b3b555fb45..091c04e266 100644
--- a/packages/editor-ui/src/components/ExpressionParameterInput.vue
+++ b/packages/editor-ui/src/components/ExpressionParameterInput.vue
@@ -1,7 +1,7 @@
 <template>
 	<div
-		:class="$style['expression-parameter-input']"
 		v-on-click-outside="onBlur"
+		:class="$style['expression-parameter-input']"
 		@keydown.tab="onBlur"
 	>
 		<div :class="[$style['all-sections'], { [$style['focused']]: isFocused }]">
@@ -9,31 +9,31 @@
 				<ExpressionFunctionIcon />
 			</div>
 			<InlineExpressionEditorInput
-				:modelValue="modelValue"
-				:isReadOnly="isReadOnly"
-				:targetItem="hoveringItem"
-				:isSingleLine="isSingleLine"
-				:additionalData="additionalExpressionData"
+				ref="inlineInput"
+				:model-value="modelValue"
+				:is-read-only="isReadOnly"
+				:target-item="hoveringItem"
+				:is-single-line="isSingleLine"
+				:additional-data="additionalExpressionData"
 				:path="path"
 				@focus="onFocus"
 				@blur="onBlur"
 				@change="onChange"
-				ref="inlineInput"
 			/>
 			<n8n-icon
 				v-if="!isDragging"
 				icon="external-link-alt"
 				size="xsmall"
 				:class="$style['expression-editor-modal-opener']"
-				@click="$emit('modalOpenerClick')"
 				data-test-id="expander"
+				@click="$emit('modalOpenerClick')"
 			/>
 		</div>
 		<InlineExpressionEditorOutput
 			:segments="segments"
-			:isReadOnly="isReadOnly"
+			:is-read-only="isReadOnly"
 			:visible="isFocused"
-			:hoveringItemNumber="hoveringItemNumber"
+			:hovering-item-number="hoveringItemNumber"
 		/>
 	</div>
 </template>
@@ -63,12 +63,6 @@ export default defineComponent({
 		InlineExpressionEditorOutput,
 		ExpressionFunctionIcon,
 	},
-	data() {
-		return {
-			isFocused: false,
-			segments: [] as Segment[],
-		};
-	},
 	props: {
 		path: {
 			type: String,
@@ -89,6 +83,12 @@ export default defineComponent({
 			default: () => ({}),
 		},
 	},
+	data() {
+		return {
+			isFocused: false,
+			segments: [] as Segment[],
+		};
+	},
 	computed: {
 		...mapStores(useNDVStore, useWorkflowsStore),
 		hoveringItemNumber(): number {
diff --git a/packages/editor-ui/src/components/ExternalSecretsProviderCard.ee.vue b/packages/editor-ui/src/components/ExternalSecretsProviderCard.ee.vue
index 7f1dfa3fc7..ffb60527fd 100644
--- a/packages/editor-ui/src/components/ExternalSecretsProviderCard.ee.vue
+++ b/packages/editor-ui/src/components/ExternalSecretsProviderCard.ee.vue
@@ -113,7 +113,7 @@ async function onActionDropdownClick(id: string) {
 			<ExternalSecretsProviderImage :class="$style.cardImage" :provider="provider" />
 			<div :class="$style.cardContent">
 				<n8n-text bold>{{ provider.displayName }}</n8n-text>
-				<n8n-text color="text-light" size="small" v-if="provider.connected">
+				<n8n-text v-if="provider.connected" color="text-light" size="small">
 					<span>
 						{{
 							i18n.baseText('settings.externalSecrets.card.secretsCount', {
@@ -135,10 +135,10 @@ async function onActionDropdownClick(id: string) {
 					</span>
 				</n8n-text>
 			</div>
-			<div :class="$style.cardActions" v-if="canConnect">
+			<div v-if="canConnect" :class="$style.cardActions">
 				<ExternalSecretsProviderConnectionSwitch
 					:provider="provider"
-					:beforeUpdate="onBeforeConnectionUpdate"
+					:before-update="onBeforeConnectionUpdate"
 					:disabled="connectionState === 'error' && !provider.connected"
 				/>
 				<n8n-action-toggle
diff --git a/packages/editor-ui/src/components/ExternalSecretsProviderConnectionSwitch.ee.vue b/packages/editor-ui/src/components/ExternalSecretsProviderConnectionSwitch.ee.vue
index 9913afee4e..7552050fa6 100644
--- a/packages/editor-ui/src/components/ExternalSecretsProviderConnectionSwitch.ee.vue
+++ b/packages/editor-ui/src/components/ExternalSecretsProviderConnectionSwitch.ee.vue
@@ -72,7 +72,7 @@ async function onUpdateConnected(value: boolean) {
 </script>
 
 <template>
-	<div class="connection-switch" v-loading="saving">
+	<div v-loading="saving" class="connection-switch">
 		<n8n-icon
 			v-if="provider.state === 'error'"
 			color="danger"
@@ -87,7 +87,7 @@ async function onUpdateConnected(value: boolean) {
 			}}
 		</n8n-text>
 		<el-switch
-			:modelValue="provider.connected"
+			:model-value="provider.connected"
 			:title="
 				i18n.baseText('settings.externalSecrets.card.connectedSwitch.title', {
 					interpolate: { provider: provider.displayName },
diff --git a/packages/editor-ui/src/components/ExternalSecretsProviderModal.ee.vue b/packages/editor-ui/src/components/ExternalSecretsProviderModal.ee.vue
index 9ad526c1c6..c44c4f8ee7 100644
--- a/packages/editor-ui/src/components/ExternalSecretsProviderModal.ee.vue
+++ b/packages/editor-ui/src/components/ExternalSecretsProviderModal.ee.vue
@@ -169,7 +169,7 @@ async function onBeforeClose() {
 		id="external-secrets-provider-modal"
 		width="812px"
 		:title="provider.displayName"
-		:eventBus="data.eventBus"
+		:event-bus="data.eventBus"
 		:name="EXTERNAL_SECRETS_PROVIDER_MODAL_KEY"
 		:before-close="onBeforeClose"
 	>
@@ -209,7 +209,7 @@ async function onBeforeClose() {
 		<template #content>
 			<div :class="$style.container">
 				<hr class="mb-l" />
-				<div class="mb-l" v-if="connectionState !== 'initializing'">
+				<div v-if="connectionState !== 'initializing'" class="mb-l">
 					<n8n-callout
 						v-if="connectionState === 'connected' || connectionState === 'tested'"
 						theme="success"
@@ -268,13 +268,13 @@ async function onBeforeClose() {
 					@submit.prevent
 				>
 					<n8n-notice v-if="property.type === 'notice'" :content="property.displayName" />
-					<parameter-input-expanded
+					<ParameterInputExpanded
 						v-else
 						class="mb-l"
 						:parameter="property"
 						:value="providerData[property.name]"
 						:label="labelSize"
-						eventSource="external-secrets-provider"
+						event-source="external-secrets-provider"
 						@update="onValueChange"
 					/>
 				</form>
diff --git a/packages/editor-ui/src/components/FeatureComingSoon.vue b/packages/editor-ui/src/components/FeatureComingSoon.vue
index 23e4153893..ea53f67c5b 100644
--- a/packages/editor-ui/src/components/FeatureComingSoon.vue
+++ b/packages/editor-ui/src/components/FeatureComingSoon.vue
@@ -13,7 +13,7 @@
 		<div :class="$style.actionBoxContainer">
 			<n8n-action-box
 				:description="$locale.baseText(featureInfo.actionBoxDescription)"
-				:buttonText="
+				:button-text="
 					$locale.baseText(featureInfo.actionBoxButtonLabel || 'fakeDoor.actionBox.button.label')
 				"
 				@click:button="openLinkPage"
diff --git a/packages/editor-ui/src/components/FilterConditions/CombinatorSelect.vue b/packages/editor-ui/src/components/FilterConditions/CombinatorSelect.vue
index f98bcc1f40..b6be6b9d10 100644
--- a/packages/editor-ui/src/components/FilterConditions/CombinatorSelect.vue
+++ b/packages/editor-ui/src/components/FilterConditions/CombinatorSelect.vue
@@ -26,7 +26,7 @@ const onCombinatorChange = (combinator: FilterTypeCombinator): void => {
 		<div v-if="readOnly || options.length === 1">
 			{{ i18n.baseText(`filter.combinator.${selected}`) }}
 		</div>
-		<n8n-select v-else size="small" :modelValue="selected" @update:modelValue="onCombinatorChange">
+		<n8n-select v-else size="small" :model-value="selected" @update:modelValue="onCombinatorChange">
 			<n8n-option
 				v-for="option in options"
 				:key="option"
diff --git a/packages/editor-ui/src/components/FilterConditions/Condition.vue b/packages/editor-ui/src/components/FilterConditions/Condition.vue
index a95371c7c0..ef39c817b3 100644
--- a/packages/editor-ui/src/components/FilterConditions/Condition.vue
+++ b/packages/editor-ui/src/components/FilterConditions/Condition.vue
@@ -216,13 +216,13 @@ const onBlur = (): void => {
 						[$style.medium]: bp === 'medium',
 					}"
 				>
-					<parameter-input-full
+					<ParameterInputFull
 						v-if="!fixedLeftValue"
-						displayOptions
-						hideLabel
-						hideHint
-						isSingleLine
 						:key="leftParameter.type"
+						display-options
+						hide-label
+						hide-hint
+						is-single-line
 						:parameter="leftParameter"
 						:value="condition.leftValue"
 						:path="`${path}.left`"
@@ -231,19 +231,19 @@ const onBlur = (): void => {
 						@update="onLeftValueChange"
 						@blur="onBlur"
 					/>
-					<operator-select
+					<OperatorSelect
 						:class="$style.select"
 						:selected="`${operator.type}:${operator.operation}`"
 						@operatorChange="onOperatorChange"
-					></operator-select>
-					<parameter-input-full
+					></OperatorSelect>
+					<ParameterInputFull
 						v-if="!operator.singleValue"
-						displayOptions
-						hideLabel
-						hideHint
-						isSingleLine
 						:key="rightParameter.type"
-						:optionsPosition="bp === 'default' ? 'top' : 'bottom'"
+						display-options
+						hide-label
+						hide-hint
+						is-single-line
+						:options-position="bp === 'default' ? 'top' : 'bottom'"
 						:parameter="rightParameter"
 						:value="condition.rightValue"
 						:path="`${path}.right`"
@@ -257,11 +257,11 @@ const onBlur = (): void => {
 		</n8n-resize-observer>
 
 		<div :class="$style.status">
-			<parameter-issues v-if="allIssues.length > 0" :issues="allIssues" />
+			<ParameterIssues v-if="allIssues.length > 0" :issues="allIssues" />
 
 			<n8n-tooltip
-				:show-after="500"
 				v-else-if="conditionResult.status === 'success' && conditionResult.result === true"
+				:show-after="500"
 			>
 				<template #content>
 					{{ i18n.baseText('filter.condition.resolvedTrue') }}
@@ -270,8 +270,8 @@ const onBlur = (): void => {
 			</n8n-tooltip>
 
 			<n8n-tooltip
-				:show-after="500"
 				v-else-if="conditionResult.status === 'success' && conditionResult.result === false"
+				:show-after="500"
 			>
 				<template #content>
 					{{ i18n.baseText('filter.condition.resolvedFalse') }}
diff --git a/packages/editor-ui/src/components/FilterConditions/FilterConditions.vue b/packages/editor-ui/src/components/FilterConditions/FilterConditions.vue
index df1d885be8..7c6acbbaf5 100644
--- a/packages/editor-ui/src/components/FilterConditions/FilterConditions.vue
+++ b/packages/editor-ui/src/components/FilterConditions/FilterConditions.vue
@@ -129,46 +129,46 @@ function getIssues(index: number): string[] {
 		<n8n-input-label
 			:label="parameter.displayName"
 			:underline="true"
-			:showOptions="true"
-			:showExpressionSelector="false"
+			:show-options="true"
+			:show-expression-selector="false"
 			color="text-dark"
 		>
 		</n8n-input-label>
 		<div :class="$style.content">
 			<div :class="$style.conditions">
 				<div v-for="(condition, index) of state.paramValue.conditions" :key="condition.id">
-					<combinator-select
+					<CombinatorSelect
 						v-if="index !== 0"
-						:readOnly="index !== 1"
+						:read-only="index !== 1"
 						:options="allowedCombinators"
 						:selected="state.paramValue.combinator"
 						:class="$style.combinator"
 						@combinatorChange="onCombinatorChange"
 					/>
 
-					<condition
+					<Condition
 						:condition="condition"
 						:index="index"
 						:options="state.paramValue.options"
-						:fixedLeftValue="!!parameter.typeOptions?.filter?.leftValue"
-						:canRemove="index !== 0 || state.paramValue.conditions.length > 1"
+						:fixed-left-value="!!parameter.typeOptions?.filter?.leftValue"
+						:can-remove="index !== 0 || state.paramValue.conditions.length > 1"
 						:path="`${path}.${index}`"
 						:issues="getIssues(index)"
 						@update="(value) => onConditionUpdate(index, value)"
 						@remove="() => onConditionRemove(index)"
-					></condition>
+					></Condition>
 				</div>
 			</div>
 			<div :class="$style.addConditionWrapper">
 				<n8n-button
 					type="tertiary"
 					block
-					@click="addCondition"
 					:class="$style.addCondition"
 					:label="i18n.baseText('filter.addCondition')"
 					:title="maxConditionsReached ? i18n.baseText('filter.maxConditions') : ''"
 					:disabled="maxConditionsReached"
 					data-test-id="filter-add-condition"
+					@click="addCondition"
 				/>
 			</div>
 		</div>
diff --git a/packages/editor-ui/src/components/FilterConditions/OperatorSelect.vue b/packages/editor-ui/src/components/FilterConditions/OperatorSelect.vue
index 432c1991ec..64b2612be0 100644
--- a/packages/editor-ui/src/components/FilterConditions/OperatorSelect.vue
+++ b/packages/editor-ui/src/components/FilterConditions/OperatorSelect.vue
@@ -53,10 +53,10 @@ function onGroupSelect(group: string) {
 
 <template>
 	<n8n-select
+		:key="selectedGroupIcon"
 		data-test-id="filter-operator-select"
 		size="small"
-		:key="selectedGroupIcon"
-		:modelValue="selected"
+		:model-value="selected"
 		@update:modelValue="onOperatorChange"
 		@visible-change="onSelectVisibleChange"
 		@mouseenter="shouldRenderItems = true"
@@ -69,8 +69,8 @@ function onGroupSelect(group: string) {
 				size="small"
 			/>
 		</template>
-		<div :class="$style.groups" v-if="shouldRenderItems">
-			<div :key="group.name" v-for="group of groups">
+		<div v-if="shouldRenderItems" :class="$style.groups">
+			<div v-for="group of groups" :key="group.name">
 				<n8n-popover
 					:visible="submenu === group.id"
 					placement="right-start"
@@ -81,9 +81,9 @@ function onGroupSelect(group: string) {
 				>
 					<template #reference>
 						<div
+							:class="$style.groupTitle"
 							@mouseenter="() => onGroupSelect(group.id)"
 							@click="() => onGroupSelect(group.id)"
-							:class="$style.groupTitle"
 						>
 							<n8n-icon v-if="group.icon" :icon="group.icon" color="text-light" size="small" />
 							<span>{{ i18n.baseText(group.name) }}</span>
diff --git a/packages/editor-ui/src/components/FixedCollectionParameter.vue b/packages/editor-ui/src/components/FixedCollectionParameter.vue
index b9090eb006..250c419ea4 100644
--- a/packages/editor-ui/src/components/FixedCollectionParameter.vue
+++ b/packages/editor-ui/src/components/FixedCollectionParameter.vue
@@ -1,5 +1,5 @@
 <template>
-	<div @keydown.stop class="fixed-collection-parameter">
+	<div class="fixed-collection-parameter" @keydown.stop>
 		<div v-if="getProperties.length === 0" class="no-items-exist">
 			<n8n-text size="small">{{
 				$locale.baseText('fixedCollectionParameter.currentlyNoItemsExist')
@@ -27,7 +27,7 @@
 					<div
 						:class="index ? 'border-top-dashed parameter-item-wrapper ' : 'parameter-item-wrapper'"
 					>
-						<div class="delete-option" v-if="!isReadOnly">
+						<div v-if="!isReadOnly" class="delete-option">
 							<n8n-icon-button
 								type="tertiary"
 								text
@@ -56,12 +56,12 @@
 							></n8n-icon-button>
 						</div>
 						<Suspense>
-							<parameter-input-list
+							<ParameterInputList
 								:parameters="property.values"
-								:nodeValues="nodeValues"
+								:node-values="nodeValues"
 								:path="getPropertyPath(property.name, index)"
-								:hideDelete="true"
-								:isReadOnly="isReadOnly"
+								:hide-delete="true"
+								:is-read-only="isReadOnly"
 								@valueChanged="valueChanged"
 							/>
 						</Suspense>
@@ -70,7 +70,7 @@
 			</div>
 			<div v-else class="parameter-item">
 				<div class="parameter-item-wrapper">
-					<div class="delete-option" v-if="!isReadOnly">
+					<div v-if="!isReadOnly" class="delete-option">
 						<n8n-icon-button
 							type="tertiary"
 							text
@@ -80,34 +80,34 @@
 							@click="deleteOption(property.name)"
 						></n8n-icon-button>
 					</div>
-					<parameter-input-list
+					<ParameterInputList
 						:parameters="property.values"
-						:nodeValues="nodeValues"
+						:node-values="nodeValues"
 						:path="getPropertyPath(property.name)"
-						:isReadOnly="isReadOnly"
+						:is-read-only="isReadOnly"
 						class="parameter-item"
+						:hide-delete="true"
 						@valueChanged="valueChanged"
-						:hideDelete="true"
 					/>
 				</div>
 			</div>
 		</div>
 
-		<div class="controls" v-if="parameterOptions.length > 0 && !isReadOnly">
+		<div v-if="parameterOptions.length > 0 && !isReadOnly" class="controls">
 			<n8n-button
 				v-if="parameter.options.length === 1"
 				type="tertiary"
 				block
-				@click="optionSelected(parameter.options[0].name)"
 				:label="getPlaceholderText"
+				@click="optionSelected(parameter.options[0].name)"
 			/>
 			<div v-else class="add-option">
 				<n8n-select
 					v-model="selectedOption"
 					:placeholder="getPlaceholderText"
 					size="small"
-					@update:modelValue="optionSelected"
 					filterable
+					@update:modelValue="optionSelected"
 				>
 					<n8n-option
 						v-for="item in parameterOptions"
@@ -140,6 +140,9 @@ const ParameterInputList = defineAsyncComponent(async () => import('./ParameterI
 
 export default defineComponent({
 	name: 'FixedCollectionParameter',
+	components: {
+		ParameterInputList,
+	},
 	props: {
 		nodeValues: {
 			type: Object as PropType<Record<string, INodeParameters[]>>,
@@ -162,26 +165,12 @@ export default defineComponent({
 			default: false,
 		},
 	},
-	components: {
-		ParameterInputList,
-	},
 	data() {
 		return {
 			selectedOption: undefined,
 			mutableValues: {} as Record<string, INodeParameters[]>,
 		};
 	},
-	watch: {
-		values: {
-			handler(newValues: Record<string, INodeParameters[]>) {
-				this.mutableValues = deepCopy(newValues);
-			},
-			deep: true,
-		},
-	},
-	created() {
-		this.mutableValues = deepCopy(this.values);
-	},
 	computed: {
 		getPlaceholderText(): string {
 			const placeholder = this.$locale.nodeText().placeholder(this.parameter, this.path);
@@ -218,6 +207,17 @@ export default defineComponent({
 			return !!this.parameter.typeOptions?.sortable;
 		},
 	},
+	watch: {
+		values: {
+			handler(newValues: Record<string, INodeParameters[]>) {
+				this.mutableValues = deepCopy(newValues);
+			},
+			deep: true,
+		},
+	},
+	created() {
+		this.mutableValues = deepCopy(this.values);
+	},
 	methods: {
 		deleteOption(optionName: string, index?: number) {
 			const currentOptionsOfSameType = this.mutableValues[optionName];
diff --git a/packages/editor-ui/src/components/GoBackButton.vue b/packages/editor-ui/src/components/GoBackButton.vue
index 56f7a433f8..86b13d8224 100644
--- a/packages/editor-ui/src/components/GoBackButton.vue
+++ b/packages/editor-ui/src/components/GoBackButton.vue
@@ -16,15 +16,15 @@ export default defineComponent({
 			routeHasHistory: false,
 		};
 	},
+	mounted() {
+		window.history.state ? (this.routeHasHistory = true) : (this.routeHasHistory = false);
+	},
 	methods: {
 		navigateTo() {
 			if (this.routeHasHistory) this.$router.go(-1);
 			else void this.$router.push({ name: VIEWS.TEMPLATES });
 		},
 	},
-	mounted() {
-		window.history.state ? (this.routeHasHistory = true) : (this.routeHasHistory = false);
-	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue b/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
index c0db995916..12ba55982a 100644
--- a/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
+++ b/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
@@ -176,6 +176,27 @@ export default defineComponent({
 		},
 	},
 
+	mounted() {
+		htmlEditorEventBus.on('format-html', this.format);
+
+		let doc = this.modelValue;
+
+		if (this.modelValue === '' && this.rows > 0) {
+			doc = '\n'.repeat(this.rows - 1);
+		}
+
+		const state = EditorState.create({ doc, extensions: this.extensions });
+
+		this.editor = new EditorView({ parent: this.root(), state });
+		this.editorState = this.editor.state;
+
+		this.getHighlighter()?.addColor(this.editor, this.resolvableSegments);
+	},
+
+	beforeUnmount() {
+		htmlEditorEventBus.off('format-html', this.format);
+	},
+
 	methods: {
 		root() {
 			const rootRef = this.$refs.htmlEditor as HTMLDivElement | undefined;
@@ -264,27 +285,6 @@ export default defineComponent({
 			return highlighter;
 		},
 	},
-
-	mounted() {
-		htmlEditorEventBus.on('format-html', this.format);
-
-		let doc = this.modelValue;
-
-		if (this.modelValue === '' && this.rows > 0) {
-			doc = '\n'.repeat(this.rows - 1);
-		}
-
-		const state = EditorState.create({ doc, extensions: this.extensions });
-
-		this.editor = new EditorView({ parent: this.root(), state });
-		this.editorState = this.editor.state;
-
-		this.getHighlighter()?.addColor(this.editor, this.resolvableSegments);
-	},
-
-	beforeUnmount() {
-		htmlEditorEventBus.off('format-html', this.format);
-	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/ImportCurlModal.vue b/packages/editor-ui/src/components/ImportCurlModal.vue
index 4807fedfe4..3fd5b50fd9 100644
--- a/packages/editor-ui/src/components/ImportCurlModal.vue
+++ b/packages/editor-ui/src/components/ImportCurlModal.vue
@@ -2,7 +2,7 @@
 	<Modal
 		width="700px"
 		:title="$locale.baseText('importCurlModal.title')"
-		:eventBus="modalBus"
+		:event-bus="modalBus"
 		:name="IMPORT_CURL_MODAL_KEY"
 		:center="true"
 	>
@@ -10,13 +10,13 @@
 			<div :class="$style.container">
 				<n8n-input-label :label="$locale.baseText('importCurlModal.input.label')" color="text-dark">
 					<n8n-input
-						:modelValue="curlCommand"
+						ref="input"
+						:model-value="curlCommand"
 						type="textarea"
 						:rows="5"
 						:placeholder="$locale.baseText('importCurlModal.input.placeholder')"
 						@update:modelValue="onInput"
 						@focus="$event.target.select()"
-						ref="input"
 					/>
 				</n8n-input-label>
 			</div>
@@ -29,9 +29,9 @@
 				/>
 				<div>
 					<n8n-button
-						@click="importCurlCommand"
 						float="right"
 						:label="$locale.baseText('importCurlModal.button.label')"
+						@click="importCurlCommand"
 					/>
 				</div>
 			</div>
@@ -77,6 +77,12 @@ export default defineComponent({
 			return this.ndvStore.activeNode;
 		},
 	},
+	mounted() {
+		this.curlCommand = this.uiStore.getCurlCommand || '';
+		setTimeout(() => {
+			(this.$refs.input as HTMLTextAreaElement).focus();
+		});
+	},
 	methods: {
 		closeDialog(): void {
 			this.modalBus.emit('close');
@@ -176,12 +182,6 @@ export default defineComponent({
 			});
 		},
 	},
-	mounted() {
-		this.curlCommand = this.uiStore.getCurlCommand || '';
-		setTimeout(() => {
-			(this.$refs.input as HTMLTextAreaElement).focus();
-		});
-	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/ImportParameter.vue b/packages/editor-ui/src/components/ImportParameter.vue
index 3f9448765f..ff5a67e3f1 100644
--- a/packages/editor-ui/src/components/ImportParameter.vue
+++ b/packages/editor-ui/src/components/ImportParameter.vue
@@ -17,7 +17,7 @@ import { useUIStore } from '@/stores/ui.store';
 import { mapStores } from 'pinia';
 
 export default defineComponent({
-	name: 'import-parameter',
+	name: 'ImportParameter',
 	props: {
 		isReadOnly: {
 			type: Boolean,
diff --git a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue
index 8eae15da76..3e461b1594 100644
--- a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue
+++ b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue
@@ -62,18 +62,6 @@ export default defineComponent({
 			required: true,
 		},
 	},
-	watch: {
-		segments() {
-			if (!this.editor) return;
-
-			this.editor.dispatch({
-				changes: { from: 0, to: this.editor.state.doc.length, insert: this.resolvedExpression },
-			});
-
-			highlighter.addColor(this.editor, this.resolvedSegments);
-			highlighter.removeColor(this.editor, this.plaintextSegments);
-		},
-	},
 	setup() {
 		const i18n = useI18n();
 
@@ -87,18 +75,6 @@ export default defineComponent({
 			expressionsDocsUrl: EXPRESSIONS_DOCS_URL,
 		};
 	},
-	mounted() {
-		this.editor = new EditorView({
-			parent: this.$refs.root as HTMLDivElement,
-			state: EditorState.create({
-				doc: this.resolvedExpression,
-				extensions: [outputTheme(), EditorState.readOnly.of(true), EditorView.lineWrapping],
-			}),
-		});
-	},
-	beforeUnmount() {
-		this.editor?.destroy();
-	},
 	computed: {
 		resolvedExpression(): string {
 			return this.segments.reduce((acc, segment) => {
@@ -127,6 +103,30 @@ export default defineComponent({
 				.filter((segment): segment is Resolved => segment.kind === 'resolvable');
 		},
 	},
+	watch: {
+		segments() {
+			if (!this.editor) return;
+
+			this.editor.dispatch({
+				changes: { from: 0, to: this.editor.state.doc.length, insert: this.resolvedExpression },
+			});
+
+			highlighter.addColor(this.editor, this.resolvedSegments);
+			highlighter.removeColor(this.editor, this.plaintextSegments);
+		},
+	},
+	mounted() {
+		this.editor = new EditorView({
+			parent: this.$refs.root as HTMLDivElement,
+			state: EditorState.create({
+				doc: this.resolvedExpression,
+				extensions: [outputTheme(), EditorState.readOnly.of(true), EditorView.lineWrapping],
+			}),
+		});
+	},
+	beforeUnmount() {
+		this.editor?.destroy();
+	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/InlineNameEdit.vue b/packages/editor-ui/src/components/InlineNameEdit.vue
index f48ad64b6e..5e6c1e8ca3 100644
--- a/packages/editor-ui/src/components/InlineNameEdit.vue
+++ b/packages/editor-ui/src/components/InlineNameEdit.vue
@@ -5,10 +5,10 @@
 		</span>
 		<div
 			v-else
+			v-on-click-outside="disableNameEdit"
 			:class="[$style.headline, $style['headline-editable']]"
 			@keydown.stop
 			@click="enableNameEdit"
-			v-on-click-outside="disableNameEdit"
 		>
 			<div v-if="!isNameEdit">
 				<span>{{ modelValue }}</span>
@@ -16,16 +16,16 @@
 			</div>
 			<div v-else :class="$style.nameInput">
 				<n8n-input
-					:modelValue="modelValue"
-					size="xlarge"
 					ref="nameInput"
+					:model-value="modelValue"
+					size="xlarge"
+					:maxlength="64"
 					@update:modelValue="onNameEdit"
 					@change="disableNameEdit"
-					:maxlength="64"
 				/>
 			</div>
 		</div>
-		<div :class="$style.subtitle" v-if="!isNameEdit && subtitle">
+		<div v-if="!isNameEdit && subtitle" :class="$style.subtitle">
 			{{ subtitle }}
 		</div>
 	</div>
diff --git a/packages/editor-ui/src/components/InlineTextEdit.vue b/packages/editor-ui/src/components/InlineTextEdit.vue
index 4eb43044bc..d4ca182afd 100644
--- a/packages/editor-ui/src/components/InlineTextEdit.vue
+++ b/packages/editor-ui/src/components/InlineTextEdit.vue
@@ -1,12 +1,12 @@
 <template>
-	<span @keydown.stop class="inline-edit">
+	<span class="inline-edit" @keydown.stop>
 		<span v-if="isEditEnabled && !isDisabled">
 			<ExpandableInputEdit
 				:placeholder="placeholder"
-				:modelValue="newValue"
+				:model-value="newValue"
 				:maxlength="maxLength"
 				:autofocus="true"
-				:eventBus="inputBus"
+				:event-bus="inputBus"
 				@update:modelValue="onInput"
 				@esc="onEscape"
 				@blur="onBlur"
@@ -14,8 +14,8 @@
 			/>
 		</span>
 
-		<span @click="onClick" class="preview" v-else>
-			<ExpandableInputPreview :modelValue="previewValue || modelValue" />
+		<span v-else class="preview" @click="onClick">
+			<ExpandableInputPreview :model-value="previewValue || modelValue" />
 		</span>
 	</span>
 </template>
@@ -63,6 +63,11 @@ export default defineComponent({
 			inputBus: createEventBus(),
 		};
 	},
+	watch: {
+		disabled(value) {
+			this.isDisabled = value;
+		},
+	},
 	methods: {
 		onInput(newValue: string) {
 			if (this.disabled) {
@@ -114,11 +119,6 @@ export default defineComponent({
 			this.$emit('toggle');
 		},
 	},
-	watch: {
-		disabled(value) {
-			this.isDisabled = value;
-		},
-	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/InputPanel.vue b/packages/editor-ui/src/components/InputPanel.vue
index c5db7faf73..e1ebfd26dd 100644
--- a/packages/editor-ui/src/components/InputPanel.vue
+++ b/packages/editor-ui/src/components/InputPanel.vue
@@ -1,28 +1,28 @@
 <template>
 	<RunData
-		:nodeUi="currentNode"
-		:runIndex="runIndex"
-		:linkedRuns="linkedRuns"
-		:canLinkRuns="!mappedNode && canLinkRuns"
-		:tooMuchDataTitle="$locale.baseText('ndv.input.tooMuchData.title')"
-		:noDataInBranchMessage="$locale.baseText('ndv.input.noOutputDataInBranch')"
-		:isExecuting="isExecutingPrevious"
-		:executingMessage="$locale.baseText('ndv.input.executingPrevious')"
-		:sessionId="sessionId"
-		:overrideOutputs="connectedCurrentNodeOutputs"
-		:mappingEnabled="isMappingEnabled"
-		:distanceFromActive="currentNodeDepth"
-		:isProductionExecutionPreview="isProductionExecutionPreview"
-		:isPaneActive="isPaneActive"
+		:node-ui="currentNode"
+		:run-index="runIndex"
+		:linked-runs="linkedRuns"
+		:can-link-runs="!mappedNode && canLinkRuns"
+		:too-much-data-title="$locale.baseText('ndv.input.tooMuchData.title')"
+		:no-data-in-branch-message="$locale.baseText('ndv.input.noOutputDataInBranch')"
+		:is-executing="isExecutingPrevious"
+		:executing-message="$locale.baseText('ndv.input.executingPrevious')"
+		:session-id="sessionId"
+		:override-outputs="connectedCurrentNodeOutputs"
+		:mapping-enabled="isMappingEnabled"
+		:distance-from-active="currentNodeDepth"
+		:is-production-execution-preview="isProductionExecutionPreview"
+		:is-pane-active="isPaneActive"
+		pane-type="input"
+		data-test-id="ndv-input-panel"
 		@activatePane="activatePane"
-		paneType="input"
 		@itemHover="$emit('itemHover', $event)"
 		@linkRun="onLinkRun"
 		@unlinkRun="onUnlinkRun"
 		@runChange="onRunIndexChange"
 		@tableMounted="$emit('tableMounted', $event)"
 		@search="$emit('search', $event)"
-		data-test-id="ndv-input-panel"
 	>
 		<template #header>
 			<div :class="$style.titleSection">
@@ -30,20 +30,20 @@
 					v-if="parentNodes.length"
 					teleported
 					size="small"
-					:modelValue="currentNodeName"
-					@update:modelValue="onInputNodeChange"
+					:model-value="currentNodeName"
 					:no-data-text="$locale.baseText('ndv.input.noNodesFound')"
 					:placeholder="$locale.baseText('ndv.input.parentNodes')"
 					filterable
 					data-test-id="ndv-input-select"
+					@update:modelValue="onInputNodeChange"
 				>
 					<template #prepend>
 						<span :class="$style.title">{{ $locale.baseText('ndv.input') }}</span>
 					</template>
 					<n8n-option
 						v-for="node of parentNodes"
-						:value="node.name"
 						:key="node.name"
+						:value="node.name"
 						class="node-option"
 						:label="`${truncate(node.name)} ${getMultipleNodesText(node.name)}`"
 						data-test-id="ndv-input-option"
@@ -61,12 +61,12 @@
 				<n8n-radio-buttons
 					v-if="isActiveNodeConfig && !readOnly"
 					:options="inputModes"
-					:modelValue="inputMode"
+					:model-value="inputMode"
 					@update:modelValue="onInputModeChange"
 				/>
 			</div>
 		</template>
-		<template #before-data v-if="isMappingMode">
+		<template v-if="isMappingMode" #before-data>
 			<!--
 						Hide the run linking buttons for both input and ouput panels when in 'Mapping Mode' because the run indices wouldn't match.
 						Although this is not the most elegant solution, it's straightforward and simpler than introducing a new props and logic to handle this.
@@ -74,11 +74,11 @@
 			<component :is="'style'">button.linkRun { display: none }</component>
 			<div :class="$style.mappedNode">
 				<n8n-select
-					:modelValue="mappedNode"
-					@update:modelValue="onMappedNodeSelected"
+					:model-value="mappedNode"
 					size="small"
-					@click.stop
 					teleported
+					@update:modelValue="onMappedNodeSelected"
+					@click.stop
 				>
 					<template #prepend>{{ $locale.baseText('ndv.input.previousNode') }}</template>
 					<n8n-option
@@ -92,8 +92,8 @@
 		</template>
 		<template #node-not-run>
 			<div
-				:class="$style.noOutputData"
 				v-if="(isActiveNodeConfig && rootNode) || parentNodes.length"
+				:class="$style.noOutputData"
 			>
 				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
 					$locale.baseText('ndv.input.noOutputData.title')
@@ -111,18 +111,18 @@
 					<NodeExecuteButton
 						type="secondary"
 						:transparent="true"
-						:nodeName="isActiveNodeConfig ? rootNode : currentNodeName"
+						:node-name="isActiveNodeConfig ? rootNode : currentNodeName"
 						:label="$locale.baseText('ndv.input.noOutputData.executePrevious')"
-						@execute="onNodeExecute"
-						telemetrySource="inputs"
+						telemetry-source="inputs"
 						data-test-id="execute-previous-node"
+						@execute="onNodeExecute"
 					/>
 				</n8n-tooltip>
 				<n8n-text v-if="!readOnly" tag="div" size="small">
 					{{ $locale.baseText('ndv.input.noOutputData.hint') }}
 				</n8n-text>
 			</div>
-			<div :class="$style.notConnected" v-else>
+			<div v-else :class="$style.notConnected">
 				<div>
 					<WireMeUp />
 				</div>
@@ -191,8 +191,8 @@ type MappingMode = 'debugging' | 'mapping';
 
 export default defineComponent({
 	name: 'InputPanel',
-	mixins: [workflowHelpers],
 	components: { RunData, NodeExecuteButton, WireMeUp },
+	mixins: [workflowHelpers],
 	props: {
 		currentNodeName: {
 			type: String,
@@ -389,6 +389,37 @@ export default defineComponent({
 			return this.activeNodeType !== null && this.activeNodeType.inputs.length > 1;
 		},
 	},
+	watch: {
+		inputMode: {
+			handler(val) {
+				this.onRunIndexChange(-1);
+				if (val === 'mapping') {
+					this.onUnlinkRun();
+					this.mappedNode = this.rootNodesParents[0];
+				}
+			},
+			immediate: true,
+		},
+		showDraggableHint(curr: boolean, prev: boolean) {
+			if (curr && !prev) {
+				setTimeout(() => {
+					if (this.draggableHintShown) {
+						return;
+					}
+					this.showDraggableHintWithDelay = this.showDraggableHint;
+					if (this.showDraggableHintWithDelay) {
+						this.draggableHintShown = true;
+
+						this.$telemetry.track('User viewed data mapping tooltip', {
+							type: 'unexecuted input pane',
+						});
+					}
+				}, 1000);
+			} else if (!curr) {
+				this.showDraggableHintWithDelay = false;
+			}
+		},
+	},
 	methods: {
 		filterOutConnectionType(
 			item: ConnectionTypes | INodeOutputConfiguration,
@@ -480,37 +511,6 @@ export default defineComponent({
 			this.$emit('activatePane');
 		},
 	},
-	watch: {
-		inputMode: {
-			handler(val) {
-				this.onRunIndexChange(-1);
-				if (val === 'mapping') {
-					this.onUnlinkRun();
-					this.mappedNode = this.rootNodesParents[0];
-				}
-			},
-			immediate: true,
-		},
-		showDraggableHint(curr: boolean, prev: boolean) {
-			if (curr && !prev) {
-				setTimeout(() => {
-					if (this.draggableHintShown) {
-						return;
-					}
-					this.showDraggableHintWithDelay = this.showDraggableHint;
-					if (this.showDraggableHintWithDelay) {
-						this.draggableHintShown = true;
-
-						this.$telemetry.track('User viewed data mapping tooltip', {
-							type: 'unexecuted input pane',
-						});
-					}
-				}, 1000);
-			} else if (!curr) {
-				this.showDraggableHintWithDelay = false;
-			}
-		},
-	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/InviteUsersModal.vue b/packages/editor-ui/src/components/InviteUsersModal.vue
index d8844697e9..abd8a81d91 100644
--- a/packages/editor-ui/src/components/InviteUsersModal.vue
+++ b/packages/editor-ui/src/components/InviteUsersModal.vue
@@ -1,7 +1,6 @@
 <template>
 	<Modal
 		:name="INVITE_USER_MODAL_KEY"
-		@enter="onSubmit"
 		:title="
 			$locale.baseText(
 				showInviteUrls ? 'settings.users.copyInviteUrls' : 'settings.users.inviteNewUsers',
@@ -9,7 +8,8 @@
 		"
 		:center="true"
 		width="460px"
-		:eventBus="modalBus"
+		:event-bus="modalBus"
+		@enter="onSubmit"
 	>
 		<template #content>
 			<n8n-notice v-if="!isAdvancedPermissionsEnabled">
@@ -42,8 +42,8 @@
 			<n8n-form-inputs
 				v-else
 				:inputs="config"
-				:eventBus="formBus"
-				:columnView="true"
+				:event-bus="formBus"
+				:column-view="true"
 				@update="onInput"
 				@submit="onSubmit"
 			/>
@@ -53,8 +53,8 @@
 				:loading="loading"
 				:disabled="!enabledButton"
 				:label="buttonLabel"
-				@click="onSubmitClick"
 				float="right"
+				@click="onSubmitClick"
 			/>
 		</template>
 	</Modal>
@@ -89,8 +89,8 @@ function getEmail(email: string): string {
 
 export default defineComponent({
 	name: 'InviteUsersModal',
-	mixins: [copyPaste],
 	components: { Modal },
+	mixins: [copyPaste],
 	props: {
 		modalName: {
 			type: String,
diff --git a/packages/editor-ui/src/components/MainHeader/CollaborationPane.vue b/packages/editor-ui/src/components/MainHeader/CollaborationPane.vue
index 99b1cf9c4b..ca258918c4 100644
--- a/packages/editor-ui/src/components/MainHeader/CollaborationPane.vue
+++ b/packages/editor-ui/src/components/MainHeader/CollaborationPane.vue
@@ -68,7 +68,7 @@ onBeforeUnmount(() => {
 		:class="`collaboration-pane-container ${$style.container}`"
 		data-test-id="collaboration-pane"
 	>
-		<n8n-user-stack :users="activeUsersSorted" :currentUserEmail="currentUserEmail" />
+		<n8n-user-stack :users="activeUsersSorted" :current-user-email="currentUserEmail" />
 	</div>
 </template>
 
diff --git a/packages/editor-ui/src/components/MainHeader/MainHeader.vue b/packages/editor-ui/src/components/MainHeader/MainHeader.vue
index 85ed4344fe..8d223d188e 100644
--- a/packages/editor-ui/src/components/MainHeader/MainHeader.vue
+++ b/packages/editor-ui/src/components/MainHeader/MainHeader.vue
@@ -1,12 +1,12 @@
 <template>
 	<div>
-		<div :class="{ 'main-header': true, expanded: !this.uiStore.sidebarMenuCollapsed }">
+		<div :class="{ 'main-header': true, expanded: !uiStore.sidebarMenuCollapsed }">
 			<div v-show="!hideMenuBar" class="top-menu">
-				<WorkflowDetails :readOnly="readOnly" />
-				<tab-bar
+				<WorkflowDetails :read-only="readOnly" />
+				<TabBar
 					v-if="onWorkflowPage"
 					:items="tabBarItems"
-					:activeTab="activeHeaderTab"
+					:active-tab="activeHeaderTab"
 					@select="onTabSelected"
 				/>
 			</div>
@@ -89,15 +89,15 @@ export default defineComponent({
 			return this.sourceControlStore.preferences.branchReadOnly;
 		},
 	},
-	mounted() {
-		this.dirtyState = this.uiStore.stateIsDirty;
-		this.syncTabsWithRoute(this.$route);
-	},
 	watch: {
 		$route(to, from) {
 			this.syncTabsWithRoute(to);
 		},
 	},
+	mounted() {
+		this.dirtyState = this.uiStore.stateIsDirty;
+		this.syncTabsWithRoute(this.$route);
+	},
 	methods: {
 		syncTabsWithRoute(route: Route): void {
 			if (
diff --git a/packages/editor-ui/src/components/MainHeader/TabBar.vue b/packages/editor-ui/src/components/MainHeader/TabBar.vue
index 4ddf6b0108..e4e85fb22c 100644
--- a/packages/editor-ui/src/components/MainHeader/TabBar.vue
+++ b/packages/editor-ui/src/components/MainHeader/TabBar.vue
@@ -7,7 +7,7 @@
 			[$style.menuCollapsed]: mainSidebarCollapsed,
 		}"
 	>
-		<n8n-radio-buttons :modelValue="activeTab" :options="items" @update:modelValue="onSelect" />
+		<n8n-radio-buttons :model-value="activeTab" :options="items" @update:modelValue="onSelect" />
 	</div>
 </template>
 
@@ -20,12 +20,7 @@ import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 
 export default defineComponent({
-	name: 'tab-bar',
-	data() {
-		return {
-			MAIN_HEADER_TABS,
-		};
-	},
+	name: 'TabBar',
 	props: {
 		items: {
 			type: Array as PropType<ITabBarItem[]>,
@@ -36,6 +31,11 @@ export default defineComponent({
 			default: MAIN_HEADER_TABS.WORKFLOW,
 		},
 	},
+	data() {
+		return {
+			MAIN_HEADER_TABS,
+		};
+	},
 	computed: {
 		...mapStores(useUIStore),
 		mainSidebarCollapsed(): boolean {
diff --git a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
index e8474e37bc..e69019c1f7 100644
--- a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
+++ b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@@ -1,24 +1,24 @@
 <template>
-	<div class="container" v-if="workflowName">
-		<BreakpointsObserver :valueXS="15" :valueSM="25" :valueMD="50" class="name-container">
+	<div v-if="workflowName" class="container">
+		<BreakpointsObserver :value-x-s="15" :value-s-m="25" :value-m-d="50" class="name-container">
 			<template #default="{ value }">
 				<ShortenName
 					:name="workflowName"
 					:limit="value"
 					:custom="true"
-					testId="workflow-name-input"
+					test-id="workflow-name-input"
 				>
 					<template #default="{ shortenedName }">
 						<InlineTextEdit
-							:modelValue="workflowName"
-							:previewValue="shortenedName"
-							:isEditEnabled="isNameEditEnabled"
-							:maxLength="MAX_WORKFLOW_NAME_LENGTH"
+							:model-value="workflowName"
+							:preview-value="shortenedName"
+							:is-edit-enabled="isNameEditEnabled"
+							:max-length="MAX_WORKFLOW_NAME_LENGTH"
 							:disabled="readOnly"
-							@toggle="onNameToggle"
-							@submit="onNameSubmit"
 							placeholder="Enter workflow name"
 							class="name"
+							@toggle="onNameToggle"
+							@submit="onNameSubmit"
 						/>
 					</template>
 				</ShortenName>
@@ -28,11 +28,11 @@
 		<span v-if="settingsStore.areTagsEnabled" class="tags" data-test-id="workflow-tags-container">
 			<TagsDropdown
 				v-if="isTagsEditEnabled && !readOnly"
-				v-model="appliedTagIds"
-				:createEnabled="true"
-				:eventBus="tagsEditBus"
-				:placeholder="$locale.baseText('workflowDetails.chooseOrCreateATag')"
 				ref="dropdown"
+				v-model="appliedTagIds"
+				:create-enabled="true"
+				:event-bus="tagsEditBus"
+				:placeholder="$locale.baseText('workflowDetails.chooseOrCreateATag')"
 				class="tags-edit"
 				data-test-id="workflow-tags-dropdown"
 				@blur="onTagsBlur"
@@ -45,12 +45,12 @@
 			</div>
 			<TagsContainer
 				v-else
-				:tagIds="currentWorkflowTagIds"
+				:key="currentWorkflowId"
+				:tag-ids="currentWorkflowTagIds"
 				:clickable="true"
 				:responsive="true"
-				:key="currentWorkflowId"
-				@click="onTagsEditEnable"
 				data-test-id="workflow-tags"
+				@click="onTagsEditEnable"
 			/>
 		</span>
 		<span v-else class="tags"></span>
@@ -61,11 +61,11 @@
 			</span>
 			<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]">
 				<div :class="$style.group">
-					<collaboration-pane />
+					<CollaborationPane />
 					<n8n-button
 						type="secondary"
-						@click="onShareButtonClick"
 						data-test-id="workflow-share-button"
+						@click="onShareButtonClick"
 					>
 						{{ $locale.baseText('workflowDetails.share') }}
 					</n8n-button>
@@ -99,7 +99,7 @@
 			<div :class="$style.group">
 				<SaveButton
 					type="primary"
-					:saved="!this.isDirty && !this.isNewWorkflow"
+					:saved="!isDirty && !isNewWorkflow"
 					:disabled="isWorkflowSaving || readOnly"
 					data-test-id="workflow-save-button"
 					@click="onSaveButtonClick"
@@ -121,9 +121,9 @@
 			</div>
 			<div :class="[$style.workflowMenuContainer, $style.group]">
 				<input
+					ref="importFile"
 					:class="$style.hiddenInput"
 					type="file"
-					ref="importFile"
 					data-test-id="workflow-import-input"
 					@change="handleFileImport()"
 				/>
@@ -197,7 +197,6 @@ const hasChanged = (prev: string[], curr: string[]) => {
 
 export default defineComponent({
 	name: 'WorkflowDetails',
-	mixins: [workflowHelpers, genericHelpers],
 	components: {
 		TagsContainer,
 		PushConnectionTracker,
@@ -209,6 +208,7 @@ export default defineComponent({
 		BreakpointsObserver,
 		CollaborationPane,
 	},
+	mixins: [workflowHelpers, genericHelpers],
 	props: {
 		readOnly: {
 			type: Boolean,
@@ -375,6 +375,12 @@ export default defineComponent({
 			return this.workflowsStore.isNewWorkflow;
 		},
 	},
+	watch: {
+		currentWorkflowId() {
+			this.isTagsEditEnabled = false;
+			this.isNameEditEnabled = false;
+		},
+	},
 	methods: {
 		async onSaveButtonClick() {
 			let currentId = undefined;
@@ -659,12 +665,6 @@ export default defineComponent({
 			void this.uiStore.goToUpgrade('workflow_sharing', 'upgrade-workflow-sharing');
 		},
 	},
-	watch: {
-		currentWorkflowId() {
-			this.isTagsEditEnabled = false;
-			this.isNameEditEnabled = false;
-		},
-	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 3230c3b9c3..2ae5335341 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -24,8 +24,8 @@
 
 			<template #beforeLowerMenu>
 				<ExecutionsUsage
-					:cloud-plan-data="currentPlanAndUsageData"
 					v-if="fullyExpanded && userIsTrialing"
+					:cloud-plan-data="currentPlanAndUsageData"
 			/></template>
 			<template #menuSuffix>
 				<div>
@@ -50,7 +50,7 @@
 					<MainSidebarSourceControl :is-collapsed="isCollapsed" />
 				</div>
 			</template>
-			<template #footer v-if="showUserArea">
+			<template v-if="showUserArea" #footer>
 				<div :class="$style.userArea">
 					<div class="ml-3xs" data-test-id="main-sidebar-user-menu">
 						<!-- This dropdown is only enabled when sidebar is collapsed -->
@@ -62,8 +62,8 @@
 						>
 							<div :class="{ [$style.avatar]: true, ['clickable']: isCollapsed }">
 								<n8n-avatar
-									:firstName="usersStore.currentUser.firstName"
-									:lastName="usersStore.currentUser.lastName"
+									:first-name="usersStore.currentUser.firstName"
+									:last-name="usersStore.currentUser.lastName"
 									size="small"
 								/>
 							</div>
diff --git a/packages/editor-ui/src/components/MfaSetupModal.vue b/packages/editor-ui/src/components/MfaSetupModal.vue
index 9029be0052..9850e9744a 100644
--- a/packages/editor-ui/src/components/MfaSetupModal.vue
+++ b/packages/editor-ui/src/components/MfaSetupModal.vue
@@ -6,7 +6,7 @@
 				? $locale.baseText('mfa.setup.step1.title')
 				: $locale.baseText('mfa.setup.step2.title')
 		"
-		:eventBus="modalBus"
+		:event-bus="modalBus"
 		:name="MFA_SETUP_MODAL_KEY"
 		:center="true"
 		:loading="loadingQrCode"
@@ -27,8 +27,8 @@
 							<template #part2>
 								<a
 									:class="$style.secret"
-									@click="onCopySecretToClipboard"
 									data-test-id="mfa-secret-button"
+									@click="onCopySecretToClipboard"
 									>{{ $locale.baseText('mfa.setup.step1.instruction1.subtitle.part2') }}</a
 								>
 							</template>
@@ -36,7 +36,7 @@
 					</n8n-text>
 				</div>
 				<div :class="$style.qrContainer">
-					<qrcode-vue :value="qrCode" size="150" level="H" />
+					<QrcodeVue :value="qrCode" size="150" level="H" />
 				</div>
 				<div :class="$style.textContainer">
 					<n8n-text size="large" color="text-dark" :bold="true">{{
@@ -55,9 +55,9 @@
 							type="text"
 							:maxlength="6"
 							:placeholder="$locale.baseText('mfa.code.input.placeholder')"
-							@input="onInput"
 							:required="true"
 							data-test-id="mfa-token-input"
+							@input="onInput"
 						/>
 					</n8n-input-label>
 					<div :class="[$style.infoText, 'mt-4xs']">
@@ -147,11 +147,11 @@ import { useToast } from '@/composables/useToast';
 import QrcodeVue from 'qrcode.vue';
 export default defineComponent({
 	name: 'MfaSetupModal',
-	mixins: [copyPaste],
 	components: {
 		Modal,
 		QrcodeVue,
 	},
+	mixins: [copyPaste],
 	setup() {
 		return {
 			...useToast(),
@@ -176,6 +176,9 @@ export default defineComponent({
 	computed: {
 		...mapStores(useNDVStore, useUIStore, useUsersStore),
 	},
+	async mounted() {
+		await this.getMfaQR();
+	},
 	methods: {
 		closeDialog(): void {
 			this.modalBus.emit('close');
@@ -265,9 +268,6 @@ export default defineComponent({
 			}
 		},
 	},
-	async mounted() {
-		await this.getMfaQR();
-	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/Modal.vue b/packages/editor-ui/src/components/Modal.vue
index 86722b4e37..d1bd99f3a1 100644
--- a/packages/editor-ui/src/components/Modal.vue
+++ b/packages/editor-ui/src/components/Modal.vue
@@ -1,6 +1,6 @@
 <template>
 	<el-dialog
-		:modelValue="uiStore.isModalOpen(this.name)"
+		:model-value="uiStore.isModalOpen(name)"
 		:before-close="closeDialog"
 		:class="{
 			'dialog-wrapper': true,
@@ -14,13 +14,13 @@
 		:close-on-press-escape="closeOnPressEscape"
 		:style="styles"
 		:append-to-body="appendToBody"
-		:data-test-id="`${this.name}-modal`"
+		:data-test-id="`${name}-modal`"
 		:modal-class="center ? $style.center : ''"
 	>
-		<template #header v-if="$slots.header">
-			<slot name="header" v-if="!loading" />
+		<template v-if="$slots.header" #header>
+			<slot v-if="!loading" name="header" />
 		</template>
-		<template #title v-else-if="title">
+		<template v-else-if="title" #title>
 			<div :class="centerTitle ? $style.centerTitle : ''">
 				<div v-if="title">
 					<n8n-heading tag="h1" size="xlarge">{{ title }}</n8n-heading>
@@ -37,7 +37,7 @@
 			@keydown.esc="closeDialog"
 		>
 			<slot v-if="!loading" name="content" />
-			<div :class="$style.loader" v-else>
+			<div v-else :class="$style.loader">
 				<n8n-spinner />
 			</div>
 		</div>
diff --git a/packages/editor-ui/src/components/ModalDrawer.vue b/packages/editor-ui/src/components/ModalDrawer.vue
index 9a9923c17e..468203788b 100644
--- a/packages/editor-ui/src/components/ModalDrawer.vue
+++ b/packages/editor-ui/src/components/ModalDrawer.vue
@@ -1,11 +1,11 @@
 <template>
-	<el-drawer
+	<ElDrawer
 		:direction="direction"
-		:modelValue="uiStore.isModalOpen(this.name)"
+		:model-value="uiStore.isModalOpen(name)"
 		:size="width"
 		:before-close="close"
 		:modal="modal"
-		:wrapperClosable="wrapperClosable"
+		:wrapper-closable="wrapperClosable"
 	>
 		<template #header>
 			<slot name="header" />
@@ -13,7 +13,7 @@
 		<span @keydown.stop>
 			<slot name="content" />
 		</span>
-	</el-drawer>
+	</ElDrawer>
 </template>
 
 <script lang="ts">
diff --git a/packages/editor-ui/src/components/ModalRoot.vue b/packages/editor-ui/src/components/ModalRoot.vue
index de6ea03454..d9ed7f4137 100644
--- a/packages/editor-ui/src/components/ModalRoot.vue
+++ b/packages/editor-ui/src/components/ModalRoot.vue
@@ -1,10 +1,10 @@
 <template>
 	<div v-if="uiStore.isModalOpen(name) || keepAlive">
 		<slot
-			:modalName="name"
+			:modal-name="name"
 			:active="uiStore.isModalActive(name)"
 			:open="uiStore.isModalOpen(name)"
-			:activeId="uiStore.getModalActiveId(name)"
+			:active-id="uiStore.getModalActiveId(name)"
 			:mode="uiStore.getModalMode(name)"
 			:data="uiStore.getModalData(name)"
 		></slot>
diff --git a/packages/editor-ui/src/components/Modals.vue b/packages/editor-ui/src/components/Modals.vue
index c7b8f1a2e2..29b0d23c4f 100644
--- a/packages/editor-ui/src/components/Modals.vue
+++ b/packages/editor-ui/src/components/Modals.vue
@@ -2,13 +2,13 @@
 	<div>
 		<ModalRoot :name="CONTACT_PROMPT_MODAL_KEY">
 			<template #default="{ modalName }">
-				<ContactPromptModal :modalName="modalName" />
+				<ContactPromptModal :modal-name="modalName" />
 			</template>
 		</ModalRoot>
 
 		<ModalRoot :name="CREDENTIAL_EDIT_MODAL_KEY">
 			<template #default="{ modalName, activeId, mode }">
-				<CredentialEdit :modalName="modalName" :mode="mode" :activeId="activeId" />
+				<CredentialEdit :modal-name="modalName" :mode="mode" :active-id="activeId" />
 			</template>
 		</ModalRoot>
 		<ModalRoot :name="ABOUT_MODAL_KEY">
@@ -25,7 +25,7 @@
 
 		<ModalRoot :name="DUPLICATE_MODAL_KEY">
 			<template #default="{ modalName, active, data }">
-				<DuplicateWorkflowDialog :data="data" :isActive="active" :modalName="modalName" />
+				<DuplicateWorkflowDialog :data="data" :is-active="active" :modal-name="modalName" />
 			</template>
 		</ModalRoot>
 
@@ -37,13 +37,13 @@
 			<TagsManager />
 		</ModalRoot>
 
-		<ModalRoot :name="VERSIONS_MODAL_KEY" :keepAlive="true">
+		<ModalRoot :name="VERSIONS_MODAL_KEY" :keep-alive="true">
 			<UpdatesPanel />
 		</ModalRoot>
 
-		<ModalRoot :name="VALUE_SURVEY_MODAL_KEY" :keepAlive="true">
+		<ModalRoot :name="VALUE_SURVEY_MODAL_KEY" :keep-alive="true">
 			<template #default="{ active }">
-				<ValueSurvey :isActive="active" />
+				<ValueSurvey :is-active="active" />
 			</template>
 		</ModalRoot>
 
@@ -65,7 +65,7 @@
 
 		<ModalRoot :name="DELETE_USER_MODAL_KEY">
 			<template #default="{ modalName, activeId }">
-				<DeleteUserModal :modalName="modalName" :activeId="activeId" />
+				<DeleteUserModal :modal-name="modalName" :active-id="activeId" />
 			</template>
 		</ModalRoot>
 
@@ -79,7 +79,7 @@
 
 		<ModalRoot :name="WORKFLOW_SHARE_MODAL_KEY">
 			<template #default="{ modalName, active, data }">
-				<WorkflowShareModal :data="data" :isActive="active" :modalName="modalName" />
+				<WorkflowShareModal :data="data" :is-active="active" :modal-name="modalName" />
 			</template>
 		</ModalRoot>
 
@@ -98,8 +98,8 @@
 		<ModalRoot :name="COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY">
 			<template #default="{ modalName, activeId, mode }">
 				<CommunityPackageManageConfirmModal
-					:modalName="modalName"
-					:activePackageName="activeId"
+					:modal-name="modalName"
+					:active-package-name="activeId"
 					:mode="mode"
 				/>
 			</template>
@@ -108,35 +108,39 @@
 		<ModalRoot :name="LOG_STREAM_MODAL_KEY">
 			<template #default="{ modalName, data }">
 				<EventDestinationSettingsModal
-					:modalName="modalName"
+					:modal-name="modalName"
 					:destination="data.destination"
-					:isNew="data.isNew"
-					:eventBus="data.eventBus"
+					:is-new="data.isNew"
+					:event-bus="data.eventBus"
 				/>
 			</template>
 		</ModalRoot>
 
 		<ModalRoot :name="SOURCE_CONTROL_PUSH_MODAL_KEY">
 			<template #default="{ modalName, data }">
-				<SourceControlPushModal :modalName="modalName" :data="data" />
+				<SourceControlPushModal :modal-name="modalName" :data="data" />
 			</template>
 		</ModalRoot>
 
 		<ModalRoot :name="SOURCE_CONTROL_PULL_MODAL_KEY">
 			<template #default="{ modalName, data }">
-				<SourceControlPullModal :modalName="modalName" :data="data" />
+				<SourceControlPullModal :modal-name="modalName" :data="data" />
 			</template>
 		</ModalRoot>
 
 		<ModalRoot :name="EXTERNAL_SECRETS_PROVIDER_MODAL_KEY">
 			<template #default="{ modalName, data }">
-				<ExternalSecretsProviderModal :modalName="modalName" :data="data" />
+				<ExternalSecretsProviderModal :modal-name="modalName" :data="data" />
 			</template>
 		</ModalRoot>
 
 		<ModalRoot :name="DEBUG_PAYWALL_MODAL_KEY">
 			<template #default="{ modalName, data }">
-				<DebugPaywallModal data-test-id="debug-paywall-modal" :modalName="modalName" :data="data" />
+				<DebugPaywallModal
+					data-test-id="debug-paywall-modal"
+					:modal-name="modalName"
+					:data="data"
+				/>
 			</template>
 		</ModalRoot>
 
@@ -144,7 +148,7 @@
 			<template #default="{ modalName, data }">
 				<WorkflowHistoryVersionRestoreModal
 					data-test-id="workflow-history-version-restore-modal"
-					:modalName="modalName"
+					:modal-name="modalName"
 					:data="data"
 				/>
 			</template>
@@ -153,7 +157,7 @@
 			<template #default="{ modalName, data }">
 				<SuggestedTemplatesPreviewModal
 					data-test-id="suggested-templates-preview-modal"
-					:modalName="modalName"
+					:modal-name="modalName"
 					:data="data"
 				/>
 			</template>
diff --git a/packages/editor-ui/src/components/MultipleParameter.vue b/packages/editor-ui/src/components/MultipleParameter.vue
index 1731b71ffa..abc3361e1e 100644
--- a/packages/editor-ui/src/components/MultipleParameter.vue
+++ b/packages/editor-ui/src/components/MultipleParameter.vue
@@ -1,8 +1,8 @@
 <template>
-	<div @keydown.stop class="duplicate-parameter">
+	<div class="duplicate-parameter" @keydown.stop>
 		<n8n-input-label
 			:label="$locale.nodeText().inputLabelDisplayName(parameter, path)"
-			:tooltipText="$locale.nodeText().inputLabelDescription(parameter, path)"
+			:tooltip-text="$locale.nodeText().inputLabelDescription(parameter, path)"
 			:underline="true"
 			size="small"
 			color="text-dark"
@@ -14,7 +14,7 @@
 			class="duplicate-parameter-item"
 			:class="parameter.type"
 		>
-			<div class="delete-item clickable" v-if="!isReadOnly">
+			<div v-if="!isReadOnly" class="delete-item clickable">
 				<font-awesome-icon
 					icon="trash"
 					:title="$locale.baseText('multipleParameter.deleteItem')"
@@ -38,27 +38,27 @@
 				</div>
 			</div>
 			<div v-if="parameter.type === 'collection'">
-				<collection-parameter
+				<CollectionParameter
 					:parameter="parameter"
 					:values="value"
-					:nodeValues="nodeValues"
+					:node-values="nodeValues"
 					:path="getPath(index)"
-					:hideDelete="hideDelete"
-					:isReadOnly="isReadOnly"
+					:hide-delete="hideDelete"
+					:is-read-only="isReadOnly"
 					@valueChanged="valueChanged"
 				/>
 			</div>
 			<div v-else>
-				<parameter-input-full
+				<ParameterInputFull
 					class="duplicate-parameter-input-item"
 					:parameter="parameter"
 					:value="value"
-					:displayOptions="true"
-					:hideLabel="true"
+					:display-options="true"
+					:hide-label="true"
 					:path="getPath(index)"
+					input-size="small"
+					:is-read-only="isReadOnly"
 					@update="valueChanged"
-					inputSize="small"
-					:isReadOnly="isReadOnly"
 				/>
 			</div>
 		</div>
@@ -76,8 +76,8 @@
 				v-if="!isReadOnly"
 				type="tertiary"
 				block
-				@click="addItem()"
 				:label="addButtonText"
+				@click="addItem()"
 			/>
 		</div>
 	</div>
@@ -127,17 +127,6 @@ export default defineComponent({
 			mutableValues: [] as INodeParameters[],
 		};
 	},
-	watch: {
-		values: {
-			handler(newValues: INodeParameters[]) {
-				this.mutableValues = deepCopy(newValues);
-			},
-			deep: true,
-		},
-	},
-	created() {
-		this.mutableValues = deepCopy(this.values);
-	},
 	computed: {
 		addButtonText(): string {
 			if (
@@ -156,6 +145,17 @@ export default defineComponent({
 			return !!this.parameter.typeOptions?.sortable;
 		},
 	},
+	watch: {
+		values: {
+			handler(newValues: INodeParameters[]) {
+				this.mutableValues = deepCopy(newValues);
+			},
+			deep: true,
+		},
+	},
+	created() {
+		this.mutableValues = deepCopy(this.values);
+	},
 	methods: {
 		addItem() {
 			const name = this.getPath();
diff --git a/packages/editor-ui/src/components/NDVDraggablePanels.vue b/packages/editor-ui/src/components/NDVDraggablePanels.vue
index 7db011e3cd..ebedda3afe 100644
--- a/packages/editor-ui/src/components/NDVDraggablePanels.vue
+++ b/packages/editor-ui/src/components/NDVDraggablePanels.vue
@@ -2,33 +2,33 @@
 	<div>
 		<NDVFloatingNodes
 			v-if="activeNode"
-			@switchSelectedNode="onSwitchSelectedNode"
 			:root-node="activeNode"
 			type="input"
+			@switchSelectedNode="onSwitchSelectedNode"
 		/>
-		<div :class="$style.inputPanel" v-if="!hideInputAndOutput" :style="inputPanelStyles">
+		<div v-if="!hideInputAndOutput" :class="$style.inputPanel" :style="inputPanelStyles">
 			<slot name="input"></slot>
 		</div>
-		<div :class="$style.outputPanel" v-if="!hideInputAndOutput" :style="outputPanelStyles">
+		<div v-if="!hideInputAndOutput" :class="$style.outputPanel" :style="outputPanelStyles">
 			<slot name="output"></slot>
 		</div>
 		<div :class="$style.mainPanel" :style="mainPanelStyles">
 			<n8n-resize-wrapper
-				:isResizingEnabled="currentNodePaneType !== 'unknown'"
+				:is-resizing-enabled="currentNodePaneType !== 'unknown'"
 				:width="relativeWidthToPx(mainPanelDimensions.relativeWidth)"
-				:minWidth="MIN_PANEL_WIDTH"
-				:gridSize="20"
+				:min-width="MIN_PANEL_WIDTH"
+				:grid-size="20"
+				:supported-directions="supportedResizeDirections"
 				@resize="onResizeDebounced"
 				@resizestart="onResizeStart"
 				@resizeend="onResizeEnd"
-				:supportedDirections="supportedResizeDirections"
 			>
 				<div :class="$style.dragButtonContainer">
 					<PanelDragButton
-						:class="{ [$style.draggable]: true, [$style.visible]: isDragging }"
-						:canMoveLeft="canMoveLeft"
-						:canMoveRight="canMoveRight"
 						v-if="!hideInputAndOutput && isDraggable"
+						:class="{ [$style.draggable]: true, [$style.visible]: isDragging }"
+						:can-move-left="canMoveLeft"
+						:can-move-right="canMoveRight"
 						@dragstart="onDragStart"
 						@drag="onDrag"
 						@dragend="onDragEnd"
@@ -74,11 +74,11 @@ const initialMainPanelWidth: { [key: string]: number } = {
 
 export default defineComponent({
 	name: 'NDVDraggablePanels',
-	mixins: [debounceHelper],
 	components: {
 		PanelDragButton,
 		NDVFloatingNodes,
 	},
+	mixins: [debounceHelper],
 	props: {
 		isDraggable: {
 			type: Boolean,
diff --git a/packages/editor-ui/src/components/NDVFloatingNodes.vue b/packages/editor-ui/src/components/NDVFloatingNodes.vue
index 79ac9059d6..0a592b1e71 100644
--- a/packages/editor-ui/src/components/NDVFloatingNodes.vue
+++ b/packages/editor-ui/src/components/NDVFloatingNodes.vue
@@ -2,29 +2,29 @@
 	<aside :class="$style.floatingNodes">
 		<ul
 			v-for="connectionGroup in connectionGroups"
-			:class="[$style.nodesList, $style[connectionGroup]]"
 			:key="connectionGroup"
+			:class="[$style.nodesList, $style[connectionGroup]]"
 		>
 			<template v-for="{ node, nodeType } in connectedNodes[connectionGroup]">
 				<n8n-tooltip
-					:placement="tooltipPositionMapper[connectionGroup]"
 					v-if="node && nodeType"
-					:teleported="false"
 					:key="node.name"
+					:placement="tooltipPositionMapper[connectionGroup]"
+					:teleported="false"
 					:offset="60"
 				>
 					<template #content>{{ node.name }}</template>
 
 					<li
 						:class="$style.connectedNode"
-						@click="$emit('switchSelectedNode', node.name)"
 						data-test-id="floating-node"
 						:data-node-name="node.name"
 						:data-node-placement="connectionGroup"
+						@click="$emit('switchSelectedNode', node.name)"
 					>
-						<node-icon
-							:nodeType="nodeType"
-							:nodeName="node.name"
+						<NodeIcon
+							:node-type="nodeType"
+							:node-name="node.name"
 							:tooltip-position="tooltipPositionMapper[connectionGroup]"
 							:size="35"
 							circle
diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
index 785ff3beb8..34436fc3ef 100644
--- a/packages/editor-ui/src/components/Node.vue
+++ b/packages/editor-ui/src/components/Node.vue
@@ -1,14 +1,14 @@
 <template>
 	<div
+		:id="nodeId"
+		:ref="data.name"
 		:class="nodeWrapperClass"
 		:style="nodeWrapperStyles"
-		:id="nodeId"
 		data-test-id="canvas-node"
-		:ref="data.name"
 		:data-name="data.name"
 		@contextmenu="(e: MouseEvent) => openContextMenu(e, 'node-right-click')"
 	>
-		<div class="select-background" v-show="isSelected"></div>
+		<div v-show="isSelected" class="select-background"></div>
 		<div
 			:class="{
 				'node-default': true,
@@ -19,18 +19,18 @@
 			}"
 		>
 			<div
+				v-touch:start="touchStart"
+				v-touch:end="touchEnd"
 				:class="nodeClass"
 				:style="nodeStyle"
 				@click.left="onClick"
-				v-touch:start="touchStart"
-				v-touch:end="touchEnd"
 			>
-				<i class="trigger-icon" v-if="isTriggerNode">
+				<i v-if="isTriggerNode" class="trigger-icon">
 					<n8n-tooltip placement="bottom">
 						<template #content>
 							<span v-html="$locale.baseText('node.thisIsATriggerNode')" />
 						</template>
-						<font-awesome-icon icon="bolt" size="lg" />
+						<FontAwesomeIcon icon="bolt" size="lg" />
 					</n8n-tooltip>
 				</i>
 				<div
@@ -40,9 +40,9 @@
 					<div v-if="hasIssues && !hideNodeIssues" class="node-issues" data-test-id="node-issues">
 						<n8n-tooltip :show-after="500" placement="bottom">
 							<template #content>
-								<titled-list :title="`${$locale.baseText('node.issues')}:`" :items="nodeIssues" />
+								<TitledList :title="`${$locale.baseText('node.issues')}:`" :items="nodeIssues" />
 							</template>
-							<font-awesome-icon icon="exclamation-triangle" />
+							<FontAwesomeIcon icon="exclamation-triangle" />
 						</n8n-tooltip>
 					</div>
 					<div v-else-if="waiting || nodeExecutionStatus === 'waiting'" class="waiting">
@@ -50,24 +50,24 @@
 							<template #content>
 								<div v-text="waiting"></div>
 							</template>
-							<font-awesome-icon icon="clock" />
+							<FontAwesomeIcon icon="clock" />
 						</n8n-tooltip>
 					</div>
 					<span v-else-if="showPinnedDataInfo" class="node-pin-data-icon">
-						<font-awesome-icon icon="thumbtack" />
+						<FontAwesomeIcon icon="thumbtack" />
 						<span v-if="workflowDataItems > 1" class="items-count"> {{ workflowDataItems }}</span>
 					</span>
 					<span v-else-if="nodeExecutionStatus === 'unknown'">
 						<!-- Do nothing, unknown means the node never executed -->
 					</span>
 					<span v-else-if="workflowDataItems" class="data-count">
-						<font-awesome-icon icon="check" />
+						<FontAwesomeIcon icon="check" />
 						<span v-if="workflowDataItems > 1" class="items-count"> {{ workflowDataItems }}</span>
 					</span>
 				</div>
 
 				<div class="node-executing-info" :title="$locale.baseText('node.nodeIsExecuting')">
-					<font-awesome-icon icon="sync-alt" spin />
+					<FontAwesomeIcon icon="sync-alt" spin />
 				</div>
 
 				<div class="node-trigger-tooltip__wrapper">
@@ -97,15 +97,15 @@
 
 				<NodeIcon
 					class="node-icon"
-					:nodeType="nodeType"
+					:node-type="nodeType"
 					:size="40"
 					:shrink="false"
-					:colorDefault="iconColorDefault"
-					:disabled="this.data.disabled"
+					:color-default="iconColorDefault"
+					:disabled="data.disabled"
 				/>
 			</div>
 
-			<div class="node-options no-select-on-click" v-if="!isReadOnly" v-show="!hideActions">
+			<div v-if="!isReadOnly" v-show="!hideActions" class="node-options no-select-on-click">
 				<n8n-icon-button
 					data-test-id="execute-node-button"
 					type="tertiary"
@@ -124,11 +124,11 @@
 				/>
 			</div>
 			<div
+				v-if="showDisabledLinethrough"
 				:class="{
 					'disabled-linethrough': true,
 					success: !['unknown'].includes(nodeExecutionStatus) && workflowDataItems > 0,
 				}"
-				v-if="showDisabledLinethrough"
 			></div>
 		</div>
 		<div class="node-description">
@@ -190,19 +190,12 @@ import { useExternalHooks } from '@/composables/useExternalHooks';
 
 export default defineComponent({
 	name: 'Node',
-	setup() {
-		const contextMenu = useContextMenu();
-		const externalHooks = useExternalHooks();
-		const nodeHelpers = useNodeHelpers();
-
-		return { contextMenu, externalHooks, nodeHelpers };
-	},
-	mixins: [nodeBase, workflowHelpers, pinData, debounceHelper],
 	components: {
 		TitledList,
 		FontAwesomeIcon,
 		NodeIcon,
 	},
+	mixins: [nodeBase, workflowHelpers, pinData, debounceHelper],
 	props: {
 		isProductionExecutionPreview: {
 			type: Boolean,
@@ -217,6 +210,13 @@ export default defineComponent({
 			default: false,
 		},
 	},
+	setup() {
+		const contextMenu = useContextMenu();
+		const externalHooks = useExternalHooks();
+		const nodeHelpers = useNodeHelpers();
+
+		return { contextMenu, externalHooks, nodeHelpers };
+	},
 	computed: {
 		...mapStores(useNodeTypesStore, useNDVStore, useUIStore, useWorkflowsStore),
 		showPinnedDataInfo(): boolean {
diff --git a/packages/editor-ui/src/components/Node/NodeCreation.vue b/packages/editor-ui/src/components/Node/NodeCreation.vue
index 889c188636..56e5714f0d 100644
--- a/packages/editor-ui/src/components/Node/NodeCreation.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreation.vue
@@ -106,7 +106,7 @@ function nodeTypeSelected(nodeTypes: string[]) {
 			@mouseenter="onCreateMenuHoverIn"
 		>
 			<div :class="$style.nodeCreatorButton" data-test-id="node-creator-plus-button">
-				<keyboard-shortcut-tooltip
+				<KeyboardShortcutTooltip
 					:label="$locale.baseText('nodeView.openNodesPanel')"
 					:shortcut="{ keys: ['Tab'] }"
 					placement="left"
@@ -118,19 +118,19 @@ function nodeTypeSelected(nodeTypes: string[]) {
 						:class="$style.nodeCreatorPlus"
 						@click="openNodeCreator"
 					/>
-				</keyboard-shortcut-tooltip>
+				</KeyboardShortcutTooltip>
 				<div
 					:class="[$style.addStickyButton, state.showStickyButton ? $style.visibleButton : '']"
-					@click="addStickyNote"
 					data-test-id="add-sticky-button"
+					@click="addStickyNote"
 				>
-					<keyboard-shortcut-tooltip
+					<KeyboardShortcutTooltip
 						:label="$locale.baseText('nodeView.addStickyHint')"
 						:shortcut="{ keys: ['s'], shiftKey: true }"
 						placement="left"
 					>
 						<n8n-icon-button type="tertiary" :icon="['far', 'note-sticky']" />
-					</keyboard-shortcut-tooltip>
+					</KeyboardShortcutTooltip>
 				</div>
 			</div>
 		</div>
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/ActionItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/ActionItem.vue
index 677af52334..5ff5305403 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/ActionItem.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/ActionItem.vue
@@ -1,21 +1,21 @@
 <template>
 	<n8n-node-creator-node
-		@dragstart="onDragStart"
-		@dragend="onDragEnd"
 		draggable
 		:class="$style.action"
 		:title="action.displayName"
-		:isTrigger="isTriggerAction(action)"
+		:is-trigger="isTriggerAction(action)"
 		data-keyboard-nav="true"
+		@dragstart="onDragStart"
+		@dragend="onDragEnd"
 	>
 		<template #dragContent>
-			<div :class="$style.draggableDataTransfer" ref="draggableDataTransfer" />
-			<div :class="$style.draggable" :style="draggableStyle" v-show="dragging">
-				<node-icon :nodeType="nodeType" @click.capture.stop :size="40" :shrink="false" />
+			<div ref="draggableDataTransfer" :class="$style.draggableDataTransfer" />
+			<div v-show="dragging" :class="$style.draggable" :style="draggableStyle">
+				<NodeIcon :node-type="nodeType" :size="40" :shrink="false" @click.capture.stop />
 			</div>
 		</template>
 		<template #icon>
-			<node-icon :nodeType="action" />
+			<NodeIcon :node-type="action" />
 		</template>
 	</n8n-node-creator-node>
 </template>
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/CategoryItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/CategoryItem.vue
index 329dbba756..ead3d49232 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/CategoryItem.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/CategoryItem.vue
@@ -28,11 +28,11 @@ const categoryName = computed(() => {
 		<div :class="{ [$style.category]: true, [$style.active]: active }">
 			<span :class="$style.name">
 				<span v-text="categoryName" />
-				<font-awesome-icon icon="bolt" v-if="isTrigger" size="xs" :class="$style.triggerIcon" />
+				<font-awesome-icon v-if="isTrigger" icon="bolt" size="xs" :class="$style.triggerIcon" />
 				<slot />
 			</span>
 			<font-awesome-icon v-if="expanded" icon="chevron-down" :class="$style.arrow" />
-			<font-awesome-icon :class="$style.arrow" icon="chevron-up" v-else />
+			<font-awesome-icon v-else :class="$style.arrow" icon="chevron-up" />
 		</div>
 	</div>
 </template>
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/NodeItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/NodeItem.vue
index ddef6f1262..34b47a7c8f 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/NodeItem.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/NodeItem.vue
@@ -2,23 +2,24 @@
 	<!-- Node Item is draggable only if it doesn't contain actions -->
 	<n8n-node-creator-node
 		:draggable="!showActionArrow"
-		@dragstart="onDragStart"
-		@dragend="onDragEnd"
 		:class="$style.nodeItem"
 		:description="description"
 		:title="displayName"
 		:show-action-arrow="showActionArrow"
 		:is-trigger="isTrigger"
 		:data-test-id="dataTestId"
+		@dragstart="onDragStart"
+		@dragend="onDragEnd"
 	>
 		<template #icon>
 			<div v-if="isSubNode" :class="$style.subNodeBackground"></div>
-			<node-icon :class="$style.nodeIcon" :nodeType="nodeType" />
+			<NodeIcon :class="$style.nodeIcon" :node-type="nodeType" />
 		</template>
 
-		<template #tooltip v-if="isCommunityNode">
+		<template v-if="isCommunityNode" #tooltip>
 			<p
 				:class="$style.communityNodeIcon"
+				@click="onCommunityNodeTooltipClick"
 				v-html="
 					i18n.baseText('generic.communityNode.tooltip', {
 						interpolate: {
@@ -27,13 +28,12 @@
 						},
 					})
 				"
-				@click="onCommunityNodeTooltipClick"
 			/>
 		</template>
 		<template #dragContent>
-			<div :class="$style.draggableDataTransfer" ref="draggableDataTransfer" />
-			<div :class="$style.draggable" :style="draggableStyle" v-show="dragging">
-				<node-icon :nodeType="nodeType" @click.capture.stop :size="40" :shrink="false" />
+			<div ref="draggableDataTransfer" :class="$style.draggableDataTransfer" />
+			<div v-show="dragging" :class="$style.draggable" :style="draggableStyle">
+				<NodeIcon :node-type="nodeType" :size="40" :shrink="false" @click.capture.stop />
 			</div>
 		</template>
 	</n8n-node-creator-node>
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/SubcategoryItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/SubcategoryItem.vue
index d5764978e6..4be5b146d1 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/SubcategoryItem.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/SubcategoryItem.vue
@@ -2,16 +2,16 @@
 	<n8n-node-creator-node
 		:class="$style.subCategory"
 		:title="i18n.baseText(`nodeCreator.subcategoryNames.${subcategoryName}`)"
-		:isTrigger="false"
+		:is-trigger="false"
 		:description="i18n.baseText(`nodeCreator.subcategoryDescriptions.${subcategoryName}`)"
-		:showActionArrow="true"
+		:show-action-arrow="true"
 	>
 		<template #icon>
 			<n8n-node-icon
 				type="icon"
 				:name="item.icon"
 				:circle="false"
-				:showTooltip="false"
+				:show-tooltip="false"
 				v-bind="item.iconProps"
 			/>
 		</template>
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/ViewItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/ViewItem.vue
index 906330c409..ee9edaad11 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/ViewItem.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/ViewItem.vue
@@ -3,12 +3,12 @@
 		:class="$style.view"
 		:title="view.title"
 		:tag="view.tag"
-		:isTrigger="false"
+		:is-trigger="false"
 		:description="view.description"
-		:showActionArrow="true"
+		:show-action-arrow="true"
 	>
 		<template #icon>
-			<n8n-node-icon type="icon" :name="view.icon" :circle="false" :showTooltip="false" />
+			<n8n-node-icon type="icon" :name="view.icon" :circle="false" :show-tooltip="false" />
 		</template>
 	</n8n-node-creator-node>
 </template>
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/Modes/ActionsMode.vue b/packages/editor-ui/src/components/Node/NodeCreator/Modes/ActionsMode.vue
index 321b44e541..e6e7381369 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/Modes/ActionsMode.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/Modes/ActionsMode.vue
@@ -223,19 +223,19 @@ onMounted(() => {
 
 <template>
 	<div :class="$style.container">
-		<OrderSwitcher :rootView="rootView">
-			<template #triggers v-if="isTriggerRootView || parsedTriggerActionsBaseline.length !== 0">
+		<OrderSwitcher :root-view="rootView">
+			<template v-if="isTriggerRootView || parsedTriggerActionsBaseline.length !== 0" #triggers>
 				<!-- Triggers Category -->
 				<CategorizedItemsRenderer
 					:elements="parsedTriggerActions"
 					:category="triggerCategoryName"
-					:mouseOverTooltip="$locale.baseText('nodeCreator.actionsTooltip.triggersStartWorkflow')"
-					isTriggerCategory
+					:mouse-over-tooltip="$locale.baseText('nodeCreator.actionsTooltip.triggersStartWorkflow')"
+					is-trigger-category
 					:expanded="isTriggerRootView || parsedActionActions.length === 0"
 					@selected="onSelected"
 				>
 					<!-- Empty state -->
-					<template #empty v-if="hasNoTriggerActions">
+					<template v-if="hasNoTriggerActions" #empty>
 						<n8n-callout
 							v-if="hasNoTriggerActions"
 							theme="info"
@@ -251,30 +251,30 @@ onMounted(() => {
 								"
 							/>
 						</n8n-callout>
-						<ItemsRenderer @selected="onSelected" :elements="placeholderTriggerActions" />
+						<ItemsRenderer :elements="placeholderTriggerActions" @selected="onSelected" />
 					</template>
-					<template #empty v-else>
+					<template v-else #empty>
 						<p
 							:class="$style.resetSearch"
-							v-html="$locale.baseText('nodeCreator.actionsCategory.noMatchingTriggers')"
 							@click="resetSearch"
+							v-html="$locale.baseText('nodeCreator.actionsCategory.noMatchingTriggers')"
 						/>
 					</template>
 				</CategorizedItemsRenderer>
 			</template>
-			<template #actions v-if="!isTriggerRootView || parsedActionActionsBaseline.length !== 0">
+			<template v-if="!isTriggerRootView || parsedActionActionsBaseline.length !== 0" #actions>
 				<!-- Actions Category -->
 				<CategorizedItemsRenderer
 					:elements="parsedActionActions"
 					:category="actionsCategoryLocales.actions"
-					:mouseOverTooltip="$locale.baseText('nodeCreator.actionsTooltip.actionsPerformStep')"
+					:mouse-over-tooltip="$locale.baseText('nodeCreator.actionsTooltip.actionsPerformStep')"
 					:expanded="!isTriggerRootView || parsedTriggerActions.length === 0"
 					@selected="onSelected"
 				>
 					<n8n-callout
+						v-if="!userActivated && isTriggerRootView"
 						theme="info"
 						iconless
-						v-if="!userActivated && isTriggerRootView"
 						slim
 						data-test-id="actions-panel-activation-callout"
 					>
@@ -282,7 +282,7 @@ onMounted(() => {
 					</n8n-callout>
 					<!-- Empty state -->
 					<template #empty>
-						<n8n-info-tip theme="info" type="note" v-if="!search" :class="$style.actionsEmpty">
+						<n8n-info-tip v-if="!search" theme="info" type="note" :class="$style.actionsEmpty">
 							<span
 								v-html="
 									$locale.baseText('nodeCreator.actionsCallout.noActionItems', {
@@ -294,15 +294,15 @@ onMounted(() => {
 						<p
 							v-else
 							:class="$style.resetSearch"
-							v-html="$locale.baseText('nodeCreator.actionsCategory.noMatchingActions')"
-							@click="resetSearch"
 							data-test-id="actions-panel-no-matching-actions"
+							@click="resetSearch"
+							v-html="$locale.baseText('nodeCreator.actionsCategory.noMatchingActions')"
 						/>
 					</template>
 				</CategorizedItemsRenderer>
 			</template>
 		</OrderSwitcher>
-		<div :class="$style.apiHint" v-if="containsAPIAction">
+		<div v-if="containsAPIAction" :class="$style.apiHint">
 			<span
 				@click.prevent="addHttpNode"
 				v-html="
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/Modes/NodesMode.vue b/packages/editor-ui/src/components/Node/NodeCreator/Modes/NodesMode.vue
index 4cedb56ca1..bd38c4fcb2 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/Modes/NodesMode.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/Modes/NodesMode.vue
@@ -209,15 +209,15 @@ registerKeyHook('MainViewArrowLeft', {
 <template>
 	<span>
 		<!-- Main Node Items -->
-		<ItemsRenderer :elements="activeViewStack.items" @selected="onSelected" :class="$style.items">
+		<ItemsRenderer :elements="activeViewStack.items" :class="$style.items" @selected="onSelected">
 			<template
-				#empty
 				v-if="(activeViewStack.items || []).length === 0 && globalSearchItemsDiff.length === 0"
+				#empty
 			>
 				<NoResults
-					:rootView="activeViewStack.rootView"
-					showIcon
-					showRequest
+					:root-view="activeViewStack.rootView"
+					show-icon
+					show-request
 					@addWebhookNode="selectNodeType([WEBHOOK_NODE_TYPE])"
 					@addHttpNode="selectNodeType([HTTP_REQUEST_NODE_TYPE])"
 				/>
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue b/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
index d33f550d22..756a2be48c 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
@@ -1,21 +1,21 @@
 <template>
 	<div>
 		<aside :class="{ [$style.nodeCreatorScrim]: true, [$style.active]: showScrim }" />
-		<slide-transition>
+		<SlideTransition>
 			<div
 				v-if="active"
+				ref="nodeCreator"
 				:class="$style.nodeCreator"
 				:style="nodeCreatorInlineStyle"
-				ref="nodeCreator"
+				data-test-id="node-creator"
 				@dragover="onDragOver"
 				@drop="onDrop"
 				@mousedown="onMouseDown"
 				@mouseup="onMouseUp"
-				data-test-id="node-creator"
 			>
 				<NodesListPanel @nodeTypeSelected="onNodeTypeSelected" />
 			</div>
-		</slide-transition>
+		</SlideTransition>
 	</div>
 </template>
 
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/Panel/NoResults.vue b/packages/editor-ui/src/components/Node/NodeCreator/Panel/NoResults.vue
index d2a30e0e5f..2f149eae56 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/Panel/NoResults.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/Panel/NoResults.vue
@@ -3,8 +3,8 @@
 		:class="{ [$style.noResults]: true, [$style.iconless]: !showIcon }"
 		data-test-id="node-creator-no-results"
 	>
-		<div :class="$style.icon" v-if="showIcon">
-			<no-results-icon />
+		<div v-if="showIcon" :class="$style.icon">
+			<NoResultsIcon />
 		</div>
 		<div :class="$style.title">
 			<slot name="title" />
@@ -22,7 +22,7 @@
 			</div>
 		</div>
 
-		<div :class="$style.request" v-if="showRequest">
+		<div v-if="showRequest" :class="$style.request">
 			<p v-text="$locale.baseText('nodeCreator.noResults.wantUsToMakeItFaster')" />
 			<div>
 				<n8n-link :to="REQUEST_NODE_FORM_URL">
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/Panel/NoResultsIcon.vue b/packages/editor-ui/src/components/Node/NodeCreator/Panel/NoResultsIcon.vue
index 7dc9e10d57..a0d52867e1 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/Panel/NoResultsIcon.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/Panel/NoResultsIcon.vue
@@ -33,8 +33,8 @@
 										points="44.5045606 32.0526802 53.8794707 32.0526802 53.8794707 58.5524261 44.5045606 58.5524261"
 									></polygon>
 									<path
-										d="M48.125,23.0859375 C54.15625,23.0859375 59.0625,18.1796875 59.0625,12.1484375 C59.0625,10.3359375 58.5625,8.6484375 57.78125,7.1484375 L49.34375,15.5859375 L44.6875,10.9296875 L53.125,2.4921875 C51.625,1.7109375 49.9375,1.2109375 48.125,1.2109375 C42.09375,1.2109375 37.1875,6.1171875 37.1875,12.1484375 C37.1875,13.4296875 37.4375,14.6484375 37.84375,15.7734375 L32.0625,21.5546875 L26.5,15.9921875 L28.71875,13.7734375 L24.3125,9.3671875 L30.9375,2.7421875 C27.28125,-0.9140625 21.34375,-0.9140625 17.6875,2.7421875 L6.625,13.8046875 L11.03125,18.2109375 L2.21875,18.2109375 L1.38777878e-15,20.4296875 L11.0625,31.4921875 L13.28125,29.2734375 L13.28125,20.4296875 L17.6875,24.8359375 L19.90625,22.6171875 L25.46875,28.1796875 L2.3125,51.3359375 L8.9375,57.9609375 L44.5,22.4296875 C45.625,22.8359375 46.84375,23.0859375 48.125,23.0859375 Z"
 										id="Path"
+										d="M48.125,23.0859375 C54.15625,23.0859375 59.0625,18.1796875 59.0625,12.1484375 C59.0625,10.3359375 58.5625,8.6484375 57.78125,7.1484375 L49.34375,15.5859375 L44.6875,10.9296875 L53.125,2.4921875 C51.625,1.7109375 49.9375,1.2109375 48.125,1.2109375 C42.09375,1.2109375 37.1875,6.1171875 37.1875,12.1484375 C37.1875,13.4296875 37.4375,14.6484375 37.84375,15.7734375 L32.0625,21.5546875 L26.5,15.9921875 L28.71875,13.7734375 L24.3125,9.3671875 L30.9375,2.7421875 C27.28125,-0.9140625 21.34375,-0.9140625 17.6875,2.7421875 L6.625,13.8046875 L11.03125,18.2109375 L2.21875,18.2109375 L1.38777878e-15,20.4296875 L11.0625,31.4921875 L13.28125,29.2734375 L13.28125,20.4296875 L17.6875,24.8359375 L19.90625,22.6171875 L25.46875,28.1796875 L2.3125,51.3359375 L8.9375,57.9609375 L44.5,22.4296875 C45.625,22.8359375 46.84375,23.0859375 48.125,23.0859375 Z"
 									></path>
 								</g>
 							</g>
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/Panel/NodesListPanel.vue b/packages/editor-ui/src/components/Node/NodeCreator/Panel/NodesListPanel.vue
index 625b1e6a58..fe22bf8e4c 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/Panel/NodesListPanel.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/Panel/NodesListPanel.vue
@@ -121,9 +121,9 @@ function onBackButton() {
 		@afterLeave="onTransitionEnd"
 	>
 		<aside
+			:key="`${activeViewStack.uuid}`"
 			:class="[$style.nodesListPanel, activeViewStack.panelClass]"
 			@keydown.capture.stop
-			:key="`${activeViewStack.uuid}`"
 		>
 			<header
 				:class="{
@@ -135,9 +135,9 @@ function onBackButton() {
 			>
 				<div :class="$style.top">
 					<button
+						v-if="viewStacks.length > 1 && !activeViewStack.preventBack"
 						:class="$style.backButton"
 						@click="onBackButton"
-						v-if="viewStacks.length > 1 && !activeViewStack.preventBack"
 					>
 						<font-awesome-icon :class="$style.backButtonIcon" icon="arrow-left" size="2x" />
 					</button>
@@ -149,10 +149,10 @@ function onBackButton() {
 						:name="activeViewStack.nodeIcon.icon"
 						:color="activeViewStack.nodeIcon.color"
 						:circle="false"
-						:showTooltip="false"
+						:show-tooltip="false"
 						:size="20"
 					/>
-					<p :class="$style.title" v-text="activeViewStack.title" v-if="activeViewStack.title" />
+					<p v-if="activeViewStack.title" :class="$style.title" v-text="activeViewStack.title" />
 				</div>
 				<p
 					v-if="activeViewStack.subtitle"
@@ -160,7 +160,7 @@ function onBackButton() {
 					v-text="activeViewStack.subtitle"
 				/>
 			</header>
-			<search-bar
+			<SearchBar
 				v-if="activeViewStack.hasSearch"
 				:class="$style.searchBar"
 				:placeholder="
@@ -168,7 +168,7 @@ function onBackButton() {
 						? searchPlaceholder
 						: $locale.baseText('nodeCreator.searchBar.searchNodes')
 				"
-				:modelValue="activeViewStack.search"
+				:model-value="activeViewStack.search"
 				@update:modelValue="onSearch"
 			/>
 			<div :class="$style.renderedItems">
@@ -182,7 +182,7 @@ function onBackButton() {
 				<ActionsRenderer v-if="isActionsMode && activeViewStack.subcategory" v-bind="$attrs" />
 
 				<!-- Nodes Mode -->
-				<NodesRenderer v-else :rootView="nodeCreatorView" v-bind="$attrs" />
+				<NodesRenderer v-else :root-view="nodeCreatorView" v-bind="$attrs" />
 			</div>
 		</aside>
 	</transition>
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/Panel/SearchBar.vue b/packages/editor-ui/src/components/Node/NodeCreator/Panel/SearchBar.vue
index dee59742e9..6f2bc8637e 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/Panel/SearchBar.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/Panel/SearchBar.vue
@@ -5,17 +5,17 @@
 		</div>
 		<div :class="$style.text">
 			<input
+				ref="inputRef"
 				:placeholder="placeholder"
 				:value="modelValue"
 				:class="$style.input"
-				ref="inputRef"
 				autofocus
 				data-test-id="node-creator-search-bar"
 				tabindex="0"
 				@input="onInput"
 			/>
 		</div>
-		<div :class="$style.suffix" v-if="modelValue.length > 0" @click="clear">
+		<div v-if="modelValue.length > 0" :class="$style.suffix" @click="clear">
 			<button :class="[$style.clear, $style.clickable]">
 				<font-awesome-icon icon="times-circle" />
 			</button>
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/Renderers/CategorizedItemsRenderer.vue b/packages/editor-ui/src/components/Node/NodeCreator/Renderers/CategorizedItemsRenderer.vue
index 9dad6d8d53..ea24e940ea 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/Renderers/CategorizedItemsRenderer.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/Renderers/CategorizedItemsRenderer.vue
@@ -97,12 +97,12 @@ registerKeyHook(`CategoryLeft_${props.category}`, {
 			:active="activeItemId === category"
 			:count="actionCount"
 			:expanded="expanded"
-			:isTrigger="isTriggerCategory"
+			:is-trigger="isTriggerCategory"
 			data-keyboard-nav-type="category"
 			:data-keyboard-nav-id="category"
 			@click="toggleExpanded"
 		>
-			<span :class="$style.mouseOverTooltip" v-if="mouseOverTooltip">
+			<span v-if="mouseOverTooltip" :class="$style.mouseOverTooltip">
 				<n8n-tooltip placement="top" :popper-class="$style.tooltipPopper">
 					<n8n-icon icon="question-circle" size="small" />
 					<template #content>
@@ -111,7 +111,7 @@ registerKeyHook(`CategoryLeft_${props.category}`, {
 				</n8n-tooltip>
 			</span>
 		</CategoryItem>
-		<div :class="$style.contentSlot" v-if="expanded && actionCount > 0 && $slots.default">
+		<div v-if="expanded && actionCount > 0 && $slots.default" :class="$style.contentSlot">
 			<slot />
 		</div>
 		<!-- Pass through listeners & empty slot to ItemsRenderer -->
@@ -119,7 +119,7 @@ registerKeyHook(`CategoryLeft_${props.category}`, {
 			v-if="expanded"
 			v-bind="$attrs"
 			:elements="elements"
-			:isTrigger="isTriggerCategory"
+			:is-trigger="isTriggerCategory"
 		>
 			<template #default> </template>
 			<template #empty>
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/Renderers/ItemsRenderer.vue b/packages/editor-ui/src/components/Node/NodeCreator/Renderers/ItemsRenderer.vue
index 266766b712..abcc29d78d 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/Renderers/ItemsRenderer.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/Renderers/ItemsRenderer.vue
@@ -125,46 +125,46 @@ watch(
 
 				<div
 					v-else
+					ref="iteratorItems"
 					:class="{
 						clickable: !disabled,
 						[$style.active]: activeItemId === item.uuid,
 						[$style.iteratorItem]: true,
 						[$style[item.type]]: true,
 					}"
-					ref="iteratorItems"
 					data-test-id="item-iterator-item"
 					:data-keyboard-nav-type="item.type !== 'label' ? item.type : undefined"
 					:data-keyboard-nav-id="item.uuid"
 					@click="wrappedEmit('selected', item)"
 				>
-					<label-item v-if="item.type === 'label'" :item="item" />
-					<subcategory-item v-if="item.type === 'subcategory'" :item="item.properties" />
+					<LabelItem v-if="item.type === 'label'" :item="item" />
+					<SubcategoryItem v-if="item.type === 'subcategory'" :item="item.properties" />
 
-					<node-item
+					<NodeItem
 						v-if="item.type === 'node'"
-						:nodeType="item.properties"
+						:node-type="item.properties"
 						:active="true"
 						:subcategory="item.subcategory"
 					/>
 
-					<action-item
+					<ActionItem
 						v-if="item.type === 'action'"
-						:nodeType="item.properties"
+						:node-type="item.properties"
 						:action="item.properties"
 						:active="true"
 					/>
 
-					<view-item
+					<ViewItem
 						v-else-if="item.type === 'view'"
 						:view="item.properties"
 						:class="$style.viewItem"
 					/>
 				</div>
 			</div>
-			<n8n-loading :loading="true" :rows="1" variant="p" :class="$style.itemSkeleton" v-else />
+			<n8n-loading v-else :loading="true" :rows="1" variant="p" :class="$style.itemSkeleton" />
 		</div>
 	</div>
-	<div :class="$style.empty" v-else>
+	<div v-else :class="$style.empty">
 		<slot name="empty" />
 	</div>
 </template>
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/__tests__/NodesListPanel.test.ts b/packages/editor-ui/src/components/Node/NodeCreator/__tests__/NodesListPanel.test.ts
index 408927bab3..3c36faa611 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/__tests__/NodesListPanel.test.ts
+++ b/packages/editor-ui/src/components/Node/NodeCreator/__tests__/NodesListPanel.test.ts
@@ -12,15 +12,15 @@ import { createComponentRenderer } from '@/__tests__/render';
 
 function getWrapperComponent(setup: () => void) {
 	const wrapperComponent = defineComponent({
+		components: {
+			NodesListPanel,
+		},
 		props: {
 			nodeTypes: {
 				type: Array as PropType<INodeTypeDescription[]>,
 				required: false,
 			},
 		},
-		components: {
-			NodesListPanel,
-		},
 		setup,
 		template: '<NodesListPanel @nodeTypeSelected="e => $emit(\'nodeTypeSelected\', e)" />',
 	});
@@ -89,6 +89,9 @@ describe('NodesListPanel', () => {
 			);
 
 			const wrapperComponent = defineComponent({
+				components: {
+					NodesListPanel,
+				},
 				props: {
 					nodeTypes: {
 						type: Array as PropType<INodeTypeDescription[]>,
@@ -100,9 +103,6 @@ describe('NodesListPanel', () => {
 						required: false,
 					},
 				},
-				components: {
-					NodesListPanel,
-				},
 				setup(props) {
 					const { setActions, setMergeNodes, setSelectedView } = useNodeCreatorStore();
 
@@ -156,15 +156,15 @@ describe('NodesListPanel', () => {
 		);
 
 		const wrapperComponent = defineComponent({
+			components: {
+				NodesListPanel,
+			},
 			props: {
 				nodeTypes: {
 					type: Array as PropType<INodeTypeDescription[]>,
 					required: true,
 				},
 			},
-			components: {
-				NodesListPanel,
-			},
 			setup(props) {
 				const { setMergeNodes } = useNodeCreatorStore();
 
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/__tests__/useKeyboardNavigation.test.ts b/packages/editor-ui/src/components/Node/NodeCreator/__tests__/useKeyboardNavigation.test.ts
index 105d4443a4..b53190db39 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/__tests__/useKeyboardNavigation.test.ts
+++ b/packages/editor-ui/src/components/Node/NodeCreator/__tests__/useKeyboardNavigation.test.ts
@@ -21,6 +21,9 @@ describe('useKeyboardNavigation', () => {
 
 			return { attachKeydownEvent, detachKeydownEvent, setActiveItemId, activeItemId };
 		},
+		mounted() {
+			this.attachKeydownEvent();
+		},
 		template: `
 			<span>
 				<div
@@ -33,9 +36,6 @@ describe('useKeyboardNavigation', () => {
 				/>
 			</span>
 		`,
-		mounted() {
-			this.attachKeydownEvent();
-		},
 	});
 
 	const renderComponent = createComponentRenderer(TestComponent, {
diff --git a/packages/editor-ui/src/components/NodeCredentials.vue b/packages/editor-ui/src/components/NodeCredentials.vue
index 5472fc0027..03704239da 100644
--- a/packages/editor-ui/src/components/NodeCredentials.vue
+++ b/packages/editor-ui/src/components/NodeCredentials.vue
@@ -17,7 +17,7 @@
 			>
 				<div v-if="readonly || isReadOnlyRoute">
 					<n8n-input
-						:modelValue="getSelectedName(credentialTypeDescription.name)"
+						:model-value="getSelectedName(credentialTypeDescription.name)"
 						disabled
 						size="small"
 						data-test-id="node-credentials-select"
@@ -29,7 +29,9 @@
 					data-test-id="node-credentials-select"
 				>
 					<n8n-select
-						:modelValue="getSelectedId(credentialTypeDescription.name)"
+						:model-value="getSelectedId(credentialTypeDescription.name)"
+						:placeholder="getSelectPlaceholder(credentialTypeDescription.name, issues)"
+						size="small"
 						@update:modelValue="
 							(value) =>
 								onCredentialSelected(
@@ -39,15 +41,13 @@
 								)
 						"
 						@blur="$emit('blur', 'credentials')"
-						:placeholder="getSelectPlaceholder(credentialTypeDescription.name, issues)"
-						size="small"
 					>
 						<n8n-option
 							v-for="item in getCredentialOptions(
 								getAllRelatedCredentialTypes(credentialTypeDescription),
 							)"
-							:data-test-id="`node-credentials-select-item-${item.id}`"
 							:key="item.id"
+							:data-test-id="`node-credentials-select-item-${item.id}`"
 							:label="item.name"
 							:value="item.id"
 						>
@@ -57,18 +57,18 @@
 							</div>
 						</n8n-option>
 						<n8n-option
-							data-test-id="node-credentials-select-item-new"
 							:key="NEW_CREDENTIALS_TEXT"
+							data-test-id="node-credentials-select-item-new"
 							:value="NEW_CREDENTIALS_TEXT"
 							:label="NEW_CREDENTIALS_TEXT"
 						>
 						</n8n-option>
 					</n8n-select>
 
-					<div :class="$style.warning" v-if="issues.length && !hideIssues">
+					<div v-if="issues.length && !hideIssues" :class="$style.warning">
 						<n8n-tooltip placement="top">
 							<template #content>
-								<titled-list
+								<TitledList
 									:title="`${$locale.baseText('nodeCredentials.issues')}:`"
 									:items="issues"
 								/>
@@ -78,18 +78,18 @@
 					</div>
 
 					<div
-						:class="$style.edit"
 						v-if="
 							selected[credentialTypeDescription.name] &&
 							isCredentialExisting(credentialTypeDescription.name)
 						"
+						:class="$style.edit"
 						data-test-id="credential-edit-button"
 					>
 						<font-awesome-icon
 							icon="pen"
-							@click="editCredential(credentialTypeDescription.name)"
 							class="clickable"
 							:title="$locale.baseText('nodeCredentials.updateCredential')"
+							@click="editCredential(credentialTypeDescription.name)"
 						/>
 					</div>
 				</div>
@@ -144,6 +144,9 @@ interface CredentialDropdownOption extends ICredentialsResponse {
 
 export default defineComponent({
 	name: 'NodeCredentials',
+	components: {
+		TitledList,
+	},
 	mixins: [genericHelpers],
 	props: {
 		readonly: {
@@ -166,9 +169,6 @@ export default defineComponent({
 			default: false,
 		},
 	},
-	components: {
-		TitledList,
-	},
 	setup() {
 		const nodeHelpers = useNodeHelpers();
 
@@ -184,6 +184,34 @@ export default defineComponent({
 			listeningForAuthChange: false,
 		};
 	},
+	watch: {
+		'node.parameters': {
+			immediate: true,
+			deep: true,
+			handler(newValue: INodeParameters, oldValue: INodeParameters) {
+				// When active node parameters change, check if authentication type has been changed
+				// and set `subscribedToCredentialType` to corresponding credential type
+				const isActive = this.node.name === this.ndvStore.activeNode?.name;
+				const nodeType = this.nodeType;
+				// Only do this for active node and if it's listening for auth change
+				if (isActive && nodeType && this.listeningForAuthChange) {
+					if (this.mainNodeAuthField && oldValue && newValue) {
+						const newAuth = newValue[this.mainNodeAuthField.name];
+
+						if (newAuth) {
+							const credentialType = getNodeCredentialForSelectedAuthType(
+								nodeType,
+								newAuth.toString(),
+							);
+							if (credentialType) {
+								this.subscribedToCredentialType = credentialType.name;
+							}
+						}
+					}
+				}
+			},
+		},
+	},
 	mounted() {
 		// Listen for credentials store changes so credential selection can be updated if creds are changed from the modal
 		this.credentialsStore.$onAction(({ name, after, store, args }) => {
@@ -243,34 +271,6 @@ export default defineComponent({
 			});
 		});
 	},
-	watch: {
-		'node.parameters': {
-			immediate: true,
-			deep: true,
-			handler(newValue: INodeParameters, oldValue: INodeParameters) {
-				// When active node parameters change, check if authentication type has been changed
-				// and set `subscribedToCredentialType` to corresponding credential type
-				const isActive = this.node.name === this.ndvStore.activeNode?.name;
-				const nodeType = this.nodeType;
-				// Only do this for active node and if it's listening for auth change
-				if (isActive && nodeType && this.listeningForAuthChange) {
-					if (this.mainNodeAuthField && oldValue && newValue) {
-						const newAuth = newValue[this.mainNodeAuthField.name];
-
-						if (newAuth) {
-							const credentialType = getNodeCredentialForSelectedAuthType(
-								nodeType,
-								newAuth.toString(),
-							);
-							if (credentialType) {
-								this.subscribedToCredentialType = credentialType.name;
-							}
-						}
-					}
-				}
-			},
-		},
-	},
 	computed: {
 		...mapStores(
 			useCredentialsStore,
diff --git a/packages/editor-ui/src/components/NodeDetailsView.vue b/packages/editor-ui/src/components/NodeDetailsView.vue
index ef2a5f5a63..f9efb8170d 100644
--- a/packages/editor-ui/src/components/NodeDetailsView.vue
+++ b/packages/editor-ui/src/components/NodeDetailsView.vue
@@ -1,6 +1,6 @@
 <template>
 	<el-dialog
-		:modelValue="(!!activeNode || renaming) && !isActiveStickyNode"
+		:model-value="(!!activeNode || renaming) && !isActiveStickyNode"
 		:before-close="close"
 		:show-close="false"
 		class="data-display-wrapper ndv-wrapper"
@@ -20,7 +20,7 @@
 					{{ $locale.baseText('ndv.backToCanvas.waitingForTriggerWarning') }}
 				</div>
 			</template>
-			<div :class="$style.backToCanvas" @click="close" data-test-id="back-to-canvas">
+			<div :class="$style.backToCanvas" data-test-id="back-to-canvas" @click="close">
 				<n8n-icon icon="arrow-left" color="text-xlight" size="medium" />
 				<n8n-text color="text-xlight" size="medium" :bold="true">
 					{{ $locale.baseText('ndv.backToCanvas') }}
@@ -30,45 +30,45 @@
 
 		<div
 			v-if="activeNode"
-			class="data-display"
 			ref="container"
-			@keydown.capture="onKeyDown"
+			class="data-display"
 			tabindex="0"
+			@keydown.capture="onKeyDown"
 		>
-			<div @click="close" :class="$style.modalBackground"></div>
+			<div :class="$style.modalBackground" @click="close"></div>
 			<NDVDraggablePanels
-				:isTriggerNode="isTriggerNode"
-				:hideInputAndOutput="activeNodeType === null"
-				:position="isTriggerNode && !showTriggerPanel ? 0 : undefined"
-				:isDraggable="!isTriggerNode"
-				:hasDoubleWidth="activeNodeType?.parameterPane === 'wide'"
-				:nodeType="activeNodeType"
 				:key="activeNode.name"
+				:is-trigger-node="isTriggerNode"
+				:hide-input-and-output="activeNodeType === null"
+				:position="isTriggerNode && !showTriggerPanel ? 0 : undefined"
+				:is-draggable="!isTriggerNode"
+				:has-double-width="activeNodeType?.parameterPane === 'wide'"
+				:node-type="activeNodeType"
 				@switchSelectedNode="onSwitchSelectedNode"
 				@close="close"
 				@init="onPanelsInit"
 				@dragstart="onDragStart"
 				@dragend="onDragEnd"
 			>
-				<template #input v-if="showTriggerPanel || !isTriggerNode">
+				<template v-if="showTriggerPanel || !isTriggerNode" #input>
 					<TriggerPanel
 						v-if="showTriggerPanel"
-						:nodeName="activeNode.name"
-						:sessionId="sessionId"
+						:node-name="activeNode.name"
+						:session-id="sessionId"
 						@execute="onNodeExecute"
 						@activate="onWorkflowActivate"
 					/>
 					<InputPanel
 						v-else-if="!isTriggerNode"
 						:workflow="workflow"
-						:canLinkRuns="canLinkRuns"
-						:runIndex="inputRun"
-						:linkedRuns="linked"
-						:currentNodeName="inputNodeName"
-						:sessionId="sessionId"
-						:readOnly="readOnly || hasForeignCredential"
-						:isProductionExecutionPreview="isProductionExecutionPreview"
-						:isPaneActive="isInputPaneActive"
+						:can-link-runs="canLinkRuns"
+						:run-index="inputRun"
+						:linked-runs="linked"
+						:current-node-name="inputNodeName"
+						:session-id="sessionId"
+						:read-only="readOnly || hasForeignCredential"
+						:is-production-execution-preview="isProductionExecutionPreview"
+						:is-pane-active="isInputPaneActive"
 						@activatePane="activateInputPane"
 						@linkRun="onLinkRunToInput"
 						@unlinkRun="() => onUnlinkRun('input')"
@@ -84,14 +84,14 @@
 				<template #output>
 					<OutputPanel
 						data-test-id="output-panel"
-						:canLinkRuns="canLinkRuns"
-						:runIndex="outputRun"
-						:linkedRuns="linked"
-						:sessionId="sessionId"
-						:isReadOnly="readOnly || hasForeignCredential"
-						:blockUI="blockUi && isTriggerNode && !isExecutableTriggerNode"
-						:isProductionExecutionPreview="isProductionExecutionPreview"
-						:isPaneActive="isOutputPaneActive"
+						:can-link-runs="canLinkRuns"
+						:run-index="outputRun"
+						:linked-runs="linked"
+						:session-id="sessionId"
+						:is-read-only="readOnly || hasForeignCredential"
+						:block-u-i="blockUi && isTriggerNode && !isExecutableTriggerNode"
+						:is-production-execution-preview="isProductionExecutionPreview"
+						:is-pane-active="isOutputPaneActive"
 						@activatePane="activateOutputPane"
 						@linkRun="onLinkRunToOutput"
 						@unlinkRun="() => onUnlinkRun('output')"
@@ -104,13 +104,13 @@
 				</template>
 				<template #main>
 					<NodeSettings
-						:eventBus="settingsEventBus"
+						:event-bus="settingsEventBus"
 						:dragging="isDragging"
-						:sessionId="sessionId"
-						:nodeType="activeNodeType"
-						:foreignCredentials="foreignCredentials"
-						:readOnly="readOnly"
-						:blockUI="blockUi && showTriggerPanel"
+						:session-id="sessionId"
+						:node-type="activeNodeType"
+						:foreign-credentials="foreignCredentials"
+						:read-only="readOnly"
+						:block-u-i="blockUi && showTriggerPanel"
 						:executable="!readOnly"
 						@valueChanged="valueChanged"
 						@execute="onNodeExecute"
@@ -120,9 +120,9 @@
 					/>
 					<a
 						v-if="featureRequestUrl"
-						@click="onFeatureRequestClick"
 						:class="$style.featureRequest"
 						target="_blank"
+						@click="onFeatureRequestClick"
 					>
 						<font-awesome-icon icon="lightbulb" />
 						{{ $locale.baseText('ndv.featureRequest') }}
@@ -177,7 +177,6 @@ import { useExternalHooks } from '@/composables/useExternalHooks';
 
 export default defineComponent({
 	name: 'NodeDetailsView',
-	mixins: [workflowHelpers, workflowActivate, pinData],
 	components: {
 		NodeSettings,
 		InputPanel,
@@ -185,6 +184,7 @@ export default defineComponent({
 		NDVDraggablePanels,
 		TriggerPanel,
 	},
+	mixins: [workflowHelpers, workflowActivate, pinData],
 	props: {
 		readOnly: {
 			type: Boolean,
diff --git a/packages/editor-ui/src/components/NodeExecuteButton.vue b/packages/editor-ui/src/components/NodeExecuteButton.vue
index 1522052b54..f4e100f208 100644
--- a/packages/editor-ui/src/components/NodeExecuteButton.vue
+++ b/packages/editor-ui/src/components/NodeExecuteButton.vue
@@ -13,7 +13,7 @@
 					:type="type"
 					:size="size"
 					:icon="isFormTriggerNode && 'flask'"
-					:transparentBackground="transparent"
+					:transparent-background="transparent"
 					@click="onClick"
 				/>
 			</div>
@@ -42,8 +42,8 @@ import { useToast } from '@/composables/useToast';
 import { useExternalHooks } from '@/composables/useExternalHooks';
 
 export default defineComponent({
-	inheritAttrs: false,
 	mixins: [workflowRun, pinData],
+	inheritAttrs: false,
 	props: {
 		nodeName: {
 			type: String,
diff --git a/packages/editor-ui/src/components/NodeIcon.vue b/packages/editor-ui/src/components/NodeIcon.vue
index c899da3989..edab9b4688 100644
--- a/packages/editor-ui/src/components/NodeIcon.vue
+++ b/packages/editor-ui/src/components/NodeIcon.vue
@@ -7,9 +7,9 @@
 		:disabled="disabled"
 		:size="size"
 		:circle="circle"
-		:nodeTypeName="nodeName ?? nodeType?.displayName ?? ''"
-		:showTooltip="showTooltip"
-		:tooltipPosition="tooltipPosition"
+		:node-type-name="nodeName ?? nodeType?.displayName ?? ''"
+		:show-tooltip="showTooltip"
+		:tooltip-position="tooltipPosition"
 		:badge="badge"
 		@click="(e) => $emit('click')"
 	></n8n-node-icon>
diff --git a/packages/editor-ui/src/components/NodeList.vue b/packages/editor-ui/src/components/NodeList.vue
index b80242ac25..0969f7fe23 100644
--- a/packages/editor-ui/src/components/NodeList.vue
+++ b/packages/editor-ui/src/components/NodeList.vue
@@ -1,11 +1,11 @@
 <template>
 	<div :class="$style.list">
-		<div v-for="node in slicedNodes" :class="[$style.container, $style[size]]" :key="node.name">
-			<NodeIcon :nodeType="node" :size="size === 'md' ? 24 : 18" :showTooltip="true" />
+		<div v-for="node in slicedNodes" :key="node.name" :class="[$style.container, $style[size]]">
+			<NodeIcon :node-type="node" :size="size === 'md' ? 24 : 18" :show-tooltip="true" />
 		</div>
 		<div
-			:class="[$style.button, size === 'md' ? $style.buttonMd : $style.buttonSm]"
 			v-if="filteredCoreNodes.length > limit + 1"
+			:class="[$style.button, size === 'md' ? $style.buttonMd : $style.buttonSm]"
 		>
 			+{{ hiddenNodes }}
 		</div>
@@ -21,6 +21,9 @@ import { filterTemplateNodes } from '@/utils/nodeTypesUtils';
 
 export default defineComponent({
 	name: 'NodeList',
+	components: {
+		NodeIcon,
+	},
 	mixins: [genericHelpers],
 	props: {
 		nodes: {
@@ -35,9 +38,6 @@ export default defineComponent({
 			default: 'sm',
 		},
 	},
-	components: {
-		NodeIcon,
-	},
 	computed: {
 		filteredCoreNodes() {
 			return filterTemplateNodes(this.nodes as ITemplatesNode[]);
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 7c95ba1805..2186e23717 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -11,19 +11,19 @@
 				<NodeTitle
 					v-if="node"
 					class="node-name"
-					:modelValue="node.name"
-					:nodeType="nodeType"
-					:readOnly="isReadOnly"
+					:model-value="node.name"
+					:node-type="nodeType"
+					:read-only="isReadOnly"
 					@update:modelValue="nameChanged"
 				></NodeTitle>
 				<div v-if="isExecutable">
 					<NodeExecuteButton
 						v-if="!blockUI && node && nodeValid"
 						data-test-id="node-execute-button"
-						:nodeName="node.name"
+						:node-name="node.name"
 						:disabled="outputPanelEditMode.enabled && !isTriggerNode"
 						size="small"
-						telemetrySource="parameters"
+						telemetry-source="parameters"
 						@execute="onNodeExecute"
 						@stopExecution="onStopExecution"
 					/>
@@ -32,11 +32,11 @@
 			<NodeSettingsTabs
 				v-if="node && nodeValid"
 				v-model="openPanel"
-				:nodeType="nodeType"
-				:sessionId="sessionId"
+				:node-type="nodeType"
+				:session-id="sessionId"
 			/>
 		</div>
-		<div class="node-is-not-valid" v-if="node && !nodeValid">
+		<div v-if="node && !nodeValid" class="node-is-not-valid">
 			<p :class="$style.warningIcon">
 				<font-awesome-icon icon="exclamation-triangle" />
 			</p>
@@ -78,7 +78,7 @@
 				</template>
 			</i18n-t>
 		</div>
-		<div class="node-parameters-wrapper" data-test-id="node-parameters" v-if="node && nodeValid">
+		<div v-if="node && nodeValid" class="node-parameters-wrapper" data-test-id="node-parameters">
 			<n8n-notice
 				v-if="hasForeignCredential"
 				:content="
@@ -88,30 +88,30 @@
 				"
 			/>
 			<div v-show="openPanel === 'params'">
-				<node-webhooks :node="node" :nodeType="nodeType" />
+				<NodeWebhooks :node="node" :node-type="nodeType" />
 
-				<parameter-input-list
+				<ParameterInputList
 					v-if="nodeValuesInitialized"
 					:parameters="parametersNoneSetting"
-					:hideDelete="true"
-					:nodeValues="nodeValues"
-					:isReadOnly="isReadOnly"
-					:hiddenIssuesInputs="hiddenIssuesInputs"
+					:hide-delete="true"
+					:node-values="nodeValues"
+					:is-read-only="isReadOnly"
+					:hidden-issues-inputs="hiddenIssuesInputs"
 					path="parameters"
 					@valueChanged="valueChanged"
 					@activate="onWorkflowActivate"
 					@parameterBlur="onParameterBlur"
 				>
-					<node-credentials
+					<NodeCredentials
 						:node="node"
 						:readonly="isReadOnly"
-						:showAll="true"
+						:show-all="true"
+						:hide-issues="hiddenIssuesInputs.includes('credentials')"
 						@credentialSelected="credentialSelected"
 						@valueChanged="valueChanged"
 						@blur="onParameterBlur"
-						:hide-issues="hiddenIssuesInputs.includes('credentials')"
 					/>
-				</parameter-input-list>
+				</ParameterInputList>
 				<div v-if="parametersNoneSetting.length === 0" class="no-parameters">
 					<n8n-text>
 						{{ $locale.baseText('nodeSettings.thisNodeDoesNotHaveAnyParameters') }}
@@ -133,21 +133,21 @@
 				</div>
 			</div>
 			<div v-show="openPanel === 'settings'">
-				<parameter-input-list
+				<ParameterInputList
 					:parameters="parametersSetting"
-					:nodeValues="nodeValues"
-					:isReadOnly="isReadOnly"
-					:hiddenIssuesInputs="hiddenIssuesInputs"
+					:node-values="nodeValues"
+					:is-read-only="isReadOnly"
+					:hidden-issues-inputs="hiddenIssuesInputs"
 					path="parameters"
 					@valueChanged="valueChanged"
 					@parameterBlur="onParameterBlur"
 				/>
-				<parameter-input-list
+				<ParameterInputList
 					:parameters="nodeSettings"
-					:hideDelete="true"
-					:nodeValues="nodeValues"
-					:isReadOnly="isReadOnly"
-					:hiddenIssuesInputs="hiddenIssuesInputs"
+					:hide-delete="true"
+					:node-values="nodeValues"
+					:is-read-only="isReadOnly"
+					:hidden-issues-inputs="hiddenIssuesInputs"
 					path=""
 					@valueChanged="valueChanged"
 					@parameterBlur="onParameterBlur"
@@ -455,6 +455,17 @@ export default defineComponent({
 			}
 		},
 	},
+	mounted() {
+		this.populateHiddenIssuesSet();
+		this.populateSettings();
+		this.setNodeValues();
+		this.eventBus?.on('openSettings', this.openSettings);
+
+		this.nodeHelpers.updateNodeParameterIssues(this.node as INodeUi, this.nodeType);
+	},
+	beforeUnmount() {
+		this.eventBus?.off('openSettings', this.openSettings);
+	},
 	methods: {
 		populateHiddenIssuesSet() {
 			if (!this.node || !this.workflowsStore.isNodePristine(this.node.name)) return;
@@ -1099,17 +1110,6 @@ export default defineComponent({
 			this.openPanel = 'settings';
 		},
 	},
-	mounted() {
-		this.populateHiddenIssuesSet();
-		this.populateSettings();
-		this.setNodeValues();
-		this.eventBus?.on('openSettings', this.openSettings);
-
-		this.nodeHelpers.updateNodeParameterIssues(this.node as INodeUi, this.nodeType);
-	},
-	beforeUnmount() {
-		this.eventBus?.off('openSettings', this.openSettings);
-	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/NodeSettingsTabs.vue b/packages/editor-ui/src/components/NodeSettingsTabs.vue
index 51190365d2..365afa0c01 100644
--- a/packages/editor-ui/src/components/NodeSettingsTabs.vue
+++ b/packages/editor-ui/src/components/NodeSettingsTabs.vue
@@ -1,7 +1,7 @@
 <template>
 	<n8n-tabs
 		:options="options"
-		:modelValue="modelValue"
+		:model-value="modelValue"
 		@update:modelValue="onTabSelect"
 		@tooltipClick="onTooltipClick"
 	/>
diff --git a/packages/editor-ui/src/components/NodeTitle.vue b/packages/editor-ui/src/components/NodeTitle.vue
index ff6978ac42..a38609d136 100644
--- a/packages/editor-ui/src/components/NodeTitle.vue
+++ b/packages/editor-ui/src/components/NodeTitle.vue
@@ -1,6 +1,6 @@
 <template>
 	<span :class="$style.container" data-test-id="node-title-container" @click="onEdit">
-		<span :class="$style.iconWrapper"><NodeIcon :nodeType="nodeType" :size="18" /></span>
+		<span :class="$style.iconWrapper"><NodeIcon :node-type="nodeType" :size="18" /></span>
 		<n8n-popover placement="right" width="200" :visible="editName" :disabled="!editable">
 			<div
 				:class="$style.editContainer"
@@ -11,19 +11,19 @@
 				<n8n-text :bold="true" color="text-base" tag="div">{{
 					$locale.baseText('ndv.title.renameNode')
 				}}</n8n-text>
-				<n8n-input ref="input" size="small" v-model="newName" data-test-id="node-rename-input" />
+				<n8n-input ref="input" v-model="newName" size="small" data-test-id="node-rename-input" />
 				<div :class="$style.editButtons">
 					<n8n-button
 						type="secondary"
 						size="small"
-						@click="editName = false"
 						:label="$locale.baseText('ndv.title.cancel')"
+						@click="editName = false"
 					/>
 					<n8n-button
 						type="primary"
 						size="small"
-						@click="onRename"
 						:label="$locale.baseText('ndv.title.rename')"
+						@click="onRename"
 					/>
 				</div>
 			</div>
@@ -31,7 +31,7 @@
 				<div :class="{ [$style.title]: true, [$style.hoverable]: editable }">
 					{{ modelValue }}
 					<div :class="$style.editIconContainer">
-						<font-awesome-icon :class="$style.editIcon" icon="pencil-alt" v-if="editable" />
+						<font-awesome-icon v-if="editable" :class="$style.editIcon" icon="pencil-alt" />
 					</div>
 				</div>
 			</template>
diff --git a/packages/editor-ui/src/components/NodeWebhooks.vue b/packages/editor-ui/src/components/NodeWebhooks.vue
index b2d8dc3792..26f39ae2cf 100644
--- a/packages/editor-ui/src/components/NodeWebhooks.vue
+++ b/packages/editor-ui/src/components/NodeWebhooks.vue
@@ -3,14 +3,14 @@
 		<div
 			class="clickable headline"
 			:class="{ expanded: !isMinimized }"
-			@click="isMinimized = !isMinimized"
 			:title="isMinimized ? baseText.clickToDisplay : baseText.clickToHide"
+			@click="isMinimized = !isMinimized"
 		>
 			<font-awesome-icon icon="angle-right" class="minimize-button minimize-icon" />
 			{{ baseText.toggleTitle }}
 		</div>
 		<el-collapse-transition>
-			<div class="node-webhooks" v-if="!isMinimized">
+			<div v-if="!isMinimized" class="node-webhooks">
 				<div class="url-selection">
 					<el-row>
 						<el-col :span="24">
@@ -128,6 +128,11 @@ export default defineComponent({
 			}
 		},
 	},
+	watch: {
+		node() {
+			this.isMinimized = !OPEN_URL_PANEL_TRIGGER_NODE_TYPES.includes(this.nodeType.name);
+		},
+	},
 	methods: {
 		copyWebhookUrl(webhookData: IWebhookDescription): void {
 			const webhookUrl = this.getWebhookUrlDisplay(webhookData);
@@ -150,11 +155,6 @@ export default defineComponent({
 			return '';
 		},
 	},
-	watch: {
-		node() {
-			this.isMinimized = !OPEN_URL_PANEL_TRIGGER_NODE_TYPES.includes(this.nodeType.name);
-		},
-	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/OnboardingCallSignupModal.vue b/packages/editor-ui/src/components/OnboardingCallSignupModal.vue
index 53da59855a..d8c6702050 100644
--- a/packages/editor-ui/src/components/OnboardingCallSignupModal.vue
+++ b/packages/editor-ui/src/components/OnboardingCallSignupModal.vue
@@ -2,10 +2,10 @@
 	<Modal
 		:name="ONBOARDING_CALL_SIGNUP_MODAL_KEY"
 		:title="$locale.baseText('onboardingCallSignupModal.title')"
-		:eventBus="modalBus"
+		:event-bus="modalBus"
 		:center="true"
-		:showClose="false"
-		:beforeClose="onModalClose"
+		:show-close="false"
+		:before-close="onModalClose"
 		width="460px"
 	>
 		<template #content>
diff --git a/packages/editor-ui/src/components/OutputPanel.vue b/packages/editor-ui/src/components/OutputPanel.vue
index 2d0061be3b..4cf64e46d7 100644
--- a/packages/editor-ui/src/components/OutputPanel.vue
+++ b/packages/editor-ui/src/components/OutputPanel.vue
@@ -1,46 +1,46 @@
 <template>
 	<RunData
-		:nodeUi="node"
-		:runIndex="runIndex"
-		:linkedRuns="linkedRuns"
-		:canLinkRuns="canLinkRuns"
-		:tooMuchDataTitle="$locale.baseText('ndv.output.tooMuchData.title')"
-		:noDataInBranchMessage="$locale.baseText('ndv.output.noOutputDataInBranch')"
-		:isExecuting="isNodeRunning"
-		:executingMessage="$locale.baseText('ndv.output.executing')"
-		:sessionId="sessionId"
-		:blockUI="blockUI"
-		:isProductionExecutionPreview="isProductionExecutionPreview"
-		:isPaneActive="isPaneActive"
+		:node-ui="node"
+		:run-index="runIndex"
+		:linked-runs="linkedRuns"
+		:can-link-runs="canLinkRuns"
+		:too-much-data-title="$locale.baseText('ndv.output.tooMuchData.title')"
+		:no-data-in-branch-message="$locale.baseText('ndv.output.noOutputDataInBranch')"
+		:is-executing="isNodeRunning"
+		:executing-message="$locale.baseText('ndv.output.executing')"
+		:session-id="sessionId"
+		:block-u-i="blockUI"
+		ref="runData"
+		:is-production-execution-preview="isProductionExecutionPreview"
+		:is-pane-active="isPaneActive"
+		pane-type="output"
+		:data-output-type="outputMode"
 		@activatePane="activatePane"
-		paneType="output"
 		@runChange="onRunIndexChange"
 		@linkRun="onLinkRun"
 		@unlinkRun="onUnlinkRun"
 		@tableMounted="$emit('tableMounted', $event)"
 		@itemHover="$emit('itemHover', $event)"
 		@search="$emit('search', $event)"
-		ref="runData"
-		:data-output-type="outputMode"
 	>
 		<template #header>
 			<div :class="$style.titleSection">
 				<template v-if="hasAiMetadata">
 					<n8n-radio-buttons
-						:options="outputTypes"
 						v-model="outputMode"
+						:options="outputTypes"
 						@update:modelValue="onUpdateOutputMode"
 					/>
 				</template>
-				<span :class="$style.title" v-else>
+				<span v-else :class="$style.title">
 					{{ $locale.baseText(outputPanelEditMode.enabled ? 'ndv.output.edit' : 'ndv.output') }}
 				</span>
 				<RunInfo
 					v-if="hasNodeRun && !hasPinData && runsCount === 1"
 					v-show="!outputPanelEditMode.enabled"
-					:taskData="runTaskData"
-					:hasStaleData="staleData"
-					:hasPinData="hasPinData"
+					:task-data="runTaskData"
+					:has-stale-data="staleData"
+					:has-pin-data="hasPinData"
 				/>
 			</div>
 		</template>
@@ -55,7 +55,7 @@
 				</template>
 				<template v-else>
 					{{ $locale.baseText('ndv.output.runNodeHint') }}
-					<span @click="insertTestData" v-if="canPinData">
+					<span v-if="canPinData" @click="insertTestData">
 						<br />
 						{{ $locale.baseText('generic.or') }}
 						<n8n-text tag="a" size="medium" color="primary">
@@ -79,8 +79,8 @@
 			</n8n-text>
 		</template>
 
-		<template #content v-if="outputMode === 'logs'">
-			<run-data-ai :node="node" :run-index="runIndex" />
+		<template v-if="outputMode === 'logs'" #content>
+			<RunDataAi :node="node" :run-index="runIndex" />
 		</template>
 		<template #recovered-artificial-output-data>
 			<div :class="$style.recoveredOutputData">
@@ -93,8 +93,8 @@
 			</div>
 		</template>
 
-		<template #run-info v-if="!hasPinData && runsCount > 1">
-			<RunInfo :taskData="runTaskData" />
+		<template v-if="!hasPinData && runsCount > 1" #run-info>
+			<RunInfo :task-data="runTaskData" />
 		</template>
 	</RunData>
 </template>
@@ -123,17 +123,8 @@ const OUTPUT_TYPE = {
 
 export default defineComponent({
 	name: 'OutputPanel',
-	mixins: [pinData],
 	components: { RunData, RunInfo, RunDataAi },
-	data() {
-		return {
-			outputMode: 'regular',
-			outputTypes: [
-				{ label: this.$locale.baseText('ndv.output.outType.regular'), value: OUTPUT_TYPE.REGULAR },
-				{ label: this.$locale.baseText('ndv.output.outType.logs'), value: OUTPUT_TYPE.LOGS },
-			],
-		};
-	},
+	mixins: [pinData],
 	props: {
 		runIndex: {
 			type: Number,
@@ -164,6 +155,15 @@ export default defineComponent({
 			default: false,
 		},
 	},
+	data() {
+		return {
+			outputMode: 'regular',
+			outputTypes: [
+				{ label: this.$locale.baseText('ndv.output.outType.regular'), value: OUTPUT_TYPE.REGULAR },
+				{ label: this.$locale.baseText('ndv.output.outType.logs'), value: OUTPUT_TYPE.LOGS },
+			],
+		};
+	},
 	computed: {
 		...mapStores(useNodeTypesStore, useNDVStore, useUIStore, useWorkflowsStore),
 		node(): INodeUi | null {
diff --git a/packages/editor-ui/src/components/PanelDragButton.vue b/packages/editor-ui/src/components/PanelDragButton.vue
index 58acc80d9f..e50d1cbeca 100644
--- a/packages/editor-ui/src/components/PanelDragButton.vue
+++ b/packages/editor-ui/src/components/PanelDragButton.vue
@@ -1,10 +1,10 @@
 <template>
 	<Draggable
 		type="panel-resize"
+		:class="$style.dragContainer"
 		@drag="onDrag"
 		@dragstart="onDragStart"
 		@dragend="onDragEnd"
-		:class="$style.dragContainer"
 	>
 		<template #default="{ isDragging }">
 			<div :class="{ [$style.dragButton]: true }">
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 60c6a83986..c6d15bdab1 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -1,8 +1,8 @@
 <template>
-	<div @keydown.stop :class="parameterInputClasses">
-		<expression-edit
-			:dialogVisible="expressionEditDialogVisible"
-			:modelValue="
+	<div :class="parameterInputClasses" @keydown.stop>
+		<ExpressionEdit
+			:dialog-visible="expressionEditDialogVisible"
+			:model-value="
 				isResourceLocatorParameter && typeof modelValue !== 'string'
 					? modelValue
 						? modelValue.value
@@ -11,25 +11,25 @@
 			"
 			:parameter="parameter"
 			:path="path"
-			:eventSource="eventSource || 'ndv'"
-			:isReadOnly="isReadOnly"
-			:redactValues="shouldRedactValue"
+			:event-source="eventSource || 'ndv'"
+			:is-read-only="isReadOnly"
+			:redact-values="shouldRedactValue"
 			@closeDialog="closeExpressionEditDialog"
 			@update:modelValue="expressionUpdated"
-		></expression-edit>
+		></ExpressionEdit>
 		<div class="parameter-input ignore-key-press" :style="parameterInputWrapperStyle">
-			<resource-locator
+			<ResourceLocator
 				v-if="isResourceLocatorParameter"
 				ref="resourceLocator"
 				:parameter="parameter"
-				:modelValue="modelValue"
-				:dependentParametersValues="dependentParametersValues"
-				:displayTitle="displayTitle"
-				:expressionDisplayValue="expressionDisplayValue"
-				:expressionComputedValue="expressionEvaluated"
-				:isValueExpression="isValueExpression"
-				:isReadOnly="isReadOnly"
-				:parameterIssues="getIssues"
+				:model-value="modelValue"
+				:dependent-parameters-values="dependentParametersValues"
+				:display-title="displayTitle"
+				:expression-display-value="expressionDisplayValue"
+				:expression-computed-value="expressionEvaluated"
+				:is-value-expression="isValueExpression"
+				:is-read-only="isReadOnly"
+				:parameter-issues="getIssues"
 				:droppable="droppable"
 				:node="node"
 				:path="path"
@@ -42,10 +42,11 @@
 			/>
 			<ExpressionParameterInput
 				v-else-if="isValueExpression || forceShowExpression"
-				:modelValue="expressionDisplayValue"
+				:model-value="expressionDisplayValue"
+				ref="inputField"
 				:title="displayTitle"
-				:isReadOnly="isReadOnly"
-				:isSingleLine="isSingleLine"
+				:is-read-only="isReadOnly"
+				:is-single-line="isSingleLine"
 				:path="path"
 				:additional-expression-data="additionalExpressionData"
 				:class="{ 'ph-no-capture': shouldRedactValue }"
@@ -53,7 +54,6 @@
 				@modalOpenerClick="openExpressionEditorModal"
 				@focus="setFocus"
 				@blur="onBlur"
-				ref="inputField"
 			/>
 			<div
 				v-else-if="
@@ -63,7 +63,7 @@
 			>
 				<el-dialog
 					v-if="codeEditDialogVisible"
-					:modelValue="true"
+					:model-value="true"
 					append-to-body
 					:close-on-click-modal="false"
 					width="80%"
@@ -73,94 +73,94 @@
 					:before-close="closeCodeEditDialog"
 				>
 					<div class="ignore-key-press">
-						<code-node-editor
-							:modelValue="modelValue"
-							:defaultValue="parameter.default"
+						<CodeNodeEditor
+							:model-value="modelValue"
+							:default-value="parameter.default"
 							:language="editorLanguage"
-							:isReadOnly="isReadOnly"
+							:is-read-only="isReadOnly"
 							@update:modelValue="expressionUpdated"
 						/>
 					</div>
 				</el-dialog>
 
-				<text-edit
-					:dialogVisible="textEditDialogVisible"
-					:modelValue="modelValue"
+				<TextEdit
+					:dialog-visible="textEditDialogVisible"
+					:model-value="modelValue"
 					:parameter="parameter"
 					:path="path"
-					:isReadOnly="isReadOnly"
+					:is-read-only="isReadOnly"
 					@closeDialog="closeTextEditDialog"
 					@update:modelValue="expressionUpdated"
-				></text-edit>
+				></TextEdit>
 
-				<code-node-editor
+				<CodeNodeEditor
 					v-if="editorType === 'codeNodeEditor' && isCodeNode(node)"
 					:mode="node.parameters.mode"
-					:modelValue="modelValue"
-					:defaultValue="parameter.default"
+					:model-value="modelValue"
+					:default-value="parameter.default"
 					:language="editorLanguage"
-					:isReadOnly="isReadOnly"
+					:is-read-only="isReadOnly"
 					:rows="getArgument('rows')"
-					:aiButtonEnabled="settingsStore.isCloudDeployment"
+					:ai-button-enabled="settingsStore.isCloudDeployment"
 					@update:modelValue="valueChangedDebounced"
 				/>
 
-				<html-editor
+				<HtmlEditor
 					v-else-if="editorType === 'htmlEditor'"
-					:modelValue="modelValue"
-					:isReadOnly="isReadOnly"
+					:model-value="modelValue"
+					:is-read-only="isReadOnly"
 					:rows="getArgument('rows')"
-					:disableExpressionColoring="!isHtmlNode(node)"
-					:disableExpressionCompletions="!isHtmlNode(node)"
+					:disable-expression-coloring="!isHtmlNode(node)"
+					:disable-expression-completions="!isHtmlNode(node)"
 					@update:modelValue="valueChangedDebounced"
 				/>
 
-				<sql-editor
+				<SqlEditor
 					v-else-if="editorType === 'sqlEditor'"
-					:modelValue="modelValue"
+					:model-value="modelValue"
 					:dialect="getArgument('sqlDialect')"
-					:isReadOnly="isReadOnly"
+					:is-read-only="isReadOnly"
 					:rows="getArgument('rows')"
 					@update:modelValue="valueChangedDebounced"
 				/>
 
-				<code-node-editor
+				<CodeNodeEditor
 					v-else-if="editorType === 'json' && !isExecuteWorkflowNode(node)"
 					:mode="node.parameters.mode"
-					:modelValue="modelValue"
-					:defaultValue="parameter.default"
+					:model-value="modelValue"
+					:default-value="parameter.default"
 					:language="editorLanguage"
-					:isReadOnly="isReadOnly"
-					:aiButtonEnabled="false"
-					@update:modelValue="valueChangedDebounced"
+					:is-read-only="isReadOnly"
+					:ai-button-enabled="false"
 					:rows="getArgument('rows')"
+					@update:modelValue="valueChangedDebounced"
 				/>
 
 				<div v-else-if="editorType" class="readonly-code clickable" @click="displayEditDialog()">
-					<code-node-editor
+					<CodeNodeEditor
 						v-if="!codeEditDialogVisible"
-						:modelValue="modelValue"
+						:model-value="modelValue"
 						:language="editorLanguage"
-						:isReadOnly="true"
+						:is-read-only="true"
 						:rows="getArgument('rows')"
 					/>
 				</div>
 
 				<n8n-input
 					v-else
-					v-model="tempValue"
 					ref="inputField"
+					v-model="tempValue"
 					:class="{ 'input-with-opener': true, 'ph-no-capture': shouldRedactValue }"
 					:size="inputSize"
 					:type="getStringInputType"
 					:rows="getArgument('rows')"
 					:disabled="isReadOnly"
+					:title="displayTitle"
+					:placeholder="getPlaceholder()"
 					@update:modelValue="valueChanged($event) && onUpdateTextInput($event)"
 					@keydown.stop
 					@focus="setFocus"
 					@blur="onBlur"
-					:title="displayTitle"
-					:placeholder="getPlaceholder()"
 				>
 					<template #suffix>
 						<n8n-icon
@@ -184,35 +184,35 @@
 				<el-color-picker
 					size="small"
 					class="color-picker"
-					:modelValue="displayValue"
+					:model-value="displayValue"
 					:disabled="isReadOnly"
+					:title="displayTitle"
+					:show-alpha="getArgument('showAlpha')"
 					@focus="setFocus"
 					@blur="onBlur"
 					@update:modelValue="valueChanged"
-					:title="displayTitle"
-					:show-alpha="getArgument('showAlpha')"
 				/>
 				<n8n-input
 					v-model="tempValue"
 					:size="inputSize"
 					type="text"
 					:disabled="isReadOnly"
+					:title="displayTitle"
 					@update:modelValue="valueChanged"
 					@keydown.stop
 					@focus="setFocus"
 					@blur="onBlur"
-					:title="displayTitle"
 				/>
 			</div>
 
 			<el-date-picker
 				v-else-if="parameter.type === 'dateTime'"
-				v-model="tempValue"
 				ref="inputField"
+				v-model="tempValue"
 				type="datetime"
-				valueFormat="YYYY-MM-DDTHH:mm:ss"
+				value-format="YYYY-MM-DDTHH:mm:ss"
 				:size="inputSize"
-				:modelValue="displayValue"
+				:model-value="displayValue"
 				:title="displayTitle"
 				:disabled="isReadOnly"
 				:placeholder="
@@ -232,47 +232,47 @@
 				v-else-if="parameter.type === 'number'"
 				ref="inputField"
 				:size="inputSize"
-				:modelValue="displayValue"
+				:model-value="displayValue"
 				:controls="false"
 				:max="getArgument('maxValue')"
 				:min="getArgument('minValue')"
 				:precision="getArgument('numberPrecision')"
 				:disabled="isReadOnly"
 				:class="{ 'ph-no-capture': shouldRedactValue }"
+				:title="displayTitle"
+				:placeholder="parameter.placeholder"
 				@update:modelValue="onUpdateTextInput"
 				@focus="setFocus"
 				@blur="onBlur"
 				@keydown.stop
-				:title="displayTitle"
-				:placeholder="parameter.placeholder"
 			/>
 
-			<credentials-select
+			<CredentialsSelect
 				v-else-if="parameter.type === 'credentialsSelect' || parameter.name === 'genericAuthType'"
 				ref="inputField"
 				:parameter="parameter"
 				:node="node"
-				:activeCredentialType="activeCredentialType"
-				:inputSize="inputSize"
-				:displayValue="displayValue"
-				:isReadOnly="isReadOnly"
-				:displayTitle="displayTitle"
+				:active-credential-type="activeCredentialType"
+				:input-size="inputSize"
+				:display-value="displayValue"
+				:is-read-only="isReadOnly"
+				:display-title="displayTitle"
 				@credentialSelected="credentialSelected"
 				@update:modelValue="valueChanged"
 				@setFocus="setFocus"
 				@onBlur="onBlur"
 			>
 				<template #issues-and-options>
-					<parameter-issues :issues="getIssues" />
+					<ParameterIssues :issues="getIssues" />
 				</template>
-			</credentials-select>
+			</CredentialsSelect>
 
 			<n8n-select
 				v-else-if="parameter.type === 'options'"
 				ref="inputField"
 				:size="inputSize"
 				filterable
-				:modelValue="displayValue"
+				:model-value="displayValue"
 				:placeholder="
 					parameter.placeholder ? getPlaceholder() : i18n.baseText('parameterInput.select')
 				"
@@ -286,8 +286,8 @@
 			>
 				<n8n-option
 					v-for="option in parameterOptions"
-					:value="option.value"
 					:key="option.value"
+					:value="option.value"
 					:label="getOptionsOptionDisplayName(option)"
 				>
 					<div class="list-option">
@@ -312,7 +312,7 @@
 				:size="inputSize"
 				filterable
 				multiple
-				:modelValue="displayValue"
+				:model-value="displayValue"
 				:loading="remoteParameterOptionsLoading"
 				:disabled="isReadOnly || remoteParameterOptionsLoading"
 				:title="displayTitle"
@@ -324,8 +324,8 @@
 			>
 				<n8n-option
 					v-for="option in parameterOptions"
-					:value="option.value"
 					:key="option.value"
+					:value="option.value"
 					:label="getOptionsOptionDisplayName(option)"
 				>
 					<div class="list-option">
@@ -343,22 +343,22 @@
 			<n8n-input
 				v-else-if="parameter.type === 'boolean' && droppable"
 				:size="inputSize"
-				:modelValue="JSON.stringify(displayValue)"
+				:model-value="JSON.stringify(displayValue)"
 				:disabled="isReadOnly"
 				:title="displayTitle"
 			/>
 			<el-switch
 				v-else-if="parameter.type === 'boolean'"
-				:class="{ 'switch-input': true, 'ph-no-capture': shouldRedactValue }"
 				ref="inputField"
+				:class="{ 'switch-input': true, 'ph-no-capture': shouldRedactValue }"
 				active-color="#13ce66"
-				:modelValue="displayValue"
+				:model-value="displayValue"
 				:disabled="isReadOnly"
 				@update:modelValue="valueChanged"
 			/>
 		</div>
 
-		<parameter-issues
+		<ParameterIssues
 			v-if="parameter.type !== 'credentialsSelect' && !isResourceLocatorParameter"
 			:issues="getIssues"
 		/>
@@ -428,8 +428,7 @@ import { useExternalHooks } from '@/composables/useExternalHooks';
 type Picker = { $emit: (arg0: string, arg1: Date) => void };
 
 export default defineComponent({
-	name: 'parameter-input',
-	mixins: [workflowHelpers, debounceHelper],
+	name: 'ParameterInput',
 	components: {
 		CodeNodeEditor,
 		HtmlEditor,
@@ -441,6 +440,7 @@ export default defineComponent({
 		ResourceLocator,
 		TextEdit,
 	},
+	mixins: [workflowHelpers, debounceHelper],
 	props: {
 		additionalExpressionData: {
 			type: Object as PropType<IDataObject>,
@@ -877,6 +877,58 @@ export default defineComponent({
 			return this.getStringInputType === 'password' || this.isForCredential;
 		},
 	},
+	async updated() {
+		await this.$nextTick();
+		const remoteParameterOptions = this.$el.querySelectorAll('.remote-parameter-option');
+
+		if (remoteParameterOptions.length > 0) {
+			void this.externalHooks.run('parameterInput.updated', { remoteParameterOptions });
+		}
+	},
+	mounted() {
+		this.eventBus.on('optionSelected', this.optionSelected);
+
+		this.tempValue = this.displayValue as string;
+		if (this.node !== null) {
+			this.nodeName = this.node.name;
+		}
+
+		if (this.node && this.node.parameters.authentication === 'predefinedCredentialType') {
+			this.activeCredentialType = this.node.parameters.nodeCredentialType as string;
+		}
+
+		if (
+			this.parameter.type === 'color' &&
+			this.getArgument('showAlpha') === true &&
+			this.displayValue !== null &&
+			this.displayValue.toString().charAt(0) !== '#'
+		) {
+			const newValue = this.rgbaToHex(this.displayValue as string);
+			if (newValue !== null) {
+				this.tempValue = newValue;
+			}
+		}
+
+		if (this.hasRemoteMethod && this.node !== null) {
+			// Make sure to load the parameter options
+			// directly and whenever the credentials change
+			this.$watch(
+				() => this.node?.credentials,
+				() => {
+					void this.loadRemoteParameterOptions();
+				},
+				{ immediate: true },
+			);
+		}
+
+		void this.externalHooks.run('parameterInput.mount', {
+			parameter: this.parameter,
+			inputFieldRef: this.$refs.inputField as InstanceType<typeof N8nInput>,
+		});
+	},
+	beforeUnmount() {
+		this.eventBus.off('optionSelected', this.optionSelected);
+	},
 	methods: {
 		isRemoteParameterOption(option: INodePropertyOptions) {
 			return this.remoteParameterOptionsKeys.includes(option.name);
@@ -1221,58 +1273,6 @@ export default defineComponent({
 			}
 		},
 	},
-	async updated() {
-		await this.$nextTick();
-		const remoteParameterOptions = this.$el.querySelectorAll('.remote-parameter-option');
-
-		if (remoteParameterOptions.length > 0) {
-			void this.externalHooks.run('parameterInput.updated', { remoteParameterOptions });
-		}
-	},
-	mounted() {
-		this.eventBus.on('optionSelected', this.optionSelected);
-
-		this.tempValue = this.displayValue as string;
-		if (this.node !== null) {
-			this.nodeName = this.node.name;
-		}
-
-		if (this.node && this.node.parameters.authentication === 'predefinedCredentialType') {
-			this.activeCredentialType = this.node.parameters.nodeCredentialType as string;
-		}
-
-		if (
-			this.parameter.type === 'color' &&
-			this.getArgument('showAlpha') === true &&
-			this.displayValue !== null &&
-			this.displayValue.toString().charAt(0) !== '#'
-		) {
-			const newValue = this.rgbaToHex(this.displayValue as string);
-			if (newValue !== null) {
-				this.tempValue = newValue;
-			}
-		}
-
-		if (this.hasRemoteMethod && this.node !== null) {
-			// Make sure to load the parameter options
-			// directly and whenever the credentials change
-			this.$watch(
-				() => this.node?.credentials,
-				() => {
-					void this.loadRemoteParameterOptions();
-				},
-				{ immediate: true },
-			);
-		}
-
-		void this.externalHooks.run('parameterInput.mount', {
-			parameter: this.parameter,
-			inputFieldRef: this.$refs.inputField as InstanceType<typeof N8nInput>,
-		});
-	},
-	beforeUnmount() {
-		this.eventBus.off('optionSelected', this.optionSelected);
-	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/ParameterInputExpanded.vue b/packages/editor-ui/src/components/ParameterInputExpanded.vue
index 12f9dc2f5f..2e117a9412 100644
--- a/packages/editor-ui/src/components/ParameterInputExpanded.vue
+++ b/packages/editor-ui/src/components/ParameterInputExpanded.vue
@@ -1,35 +1,35 @@
 <template>
 	<n8n-input-label
 		:label="$locale.credText().inputLabelDisplayName(parameter)"
-		:tooltipText="$locale.credText().inputLabelDescription(parameter)"
+		:tooltip-text="$locale.credText().inputLabelDescription(parameter)"
 		:required="parameter.required"
-		:showTooltip="focused"
-		:showOptions="menuExpanded"
+		:show-tooltip="focused"
+		:show-options="menuExpanded"
 		:data-test-id="parameter.name"
 		:size="label.size"
 	>
 		<template #options>
-			<parameter-options
+			<ParameterOptions
 				:parameter="parameter"
 				:value="value"
-				:isReadOnly="false"
-				:showOptions="true"
-				:isValueExpression="isValueExpression"
+				:is-read-only="false"
+				:show-options="true"
+				:is-value-expression="isValueExpression"
 				@update:modelValue="optionSelected"
 				@menu-expanded="onMenuExpanded"
 			/>
 		</template>
-		<parameter-input-wrapper
+		<ParameterInputWrapper
 			ref="param"
-			inputSize="large"
+			input-size="large"
 			:parameter="parameter"
-			:modelValue="value"
+			:model-value="value"
 			:path="parameter.name"
-			:hideIssues="true"
-			:documentationUrl="documentationUrl"
-			:errorHighlight="showRequiredErrors"
-			:isForCredential="true"
-			:eventSource="eventSource"
+			:hide-issues="true"
+			:documentation-url="documentationUrl"
+			:error-highlight="showRequiredErrors"
+			:is-for-credential="true"
+			:event-source="eventSource"
 			:hint="!showRequiredErrors ? hint : ''"
 			:event-bus="eventBus"
 			@focus="onFocus"
@@ -37,7 +37,7 @@
 			@textInput="valueChanged"
 			@update="valueChanged"
 		/>
-		<div :class="$style.errors" v-if="showRequiredErrors">
+		<div v-if="showRequiredErrors" :class="$style.errors">
 			<n8n-text color="danger" size="small">
 				{{ $locale.baseText('parameterInputExpanded.thisFieldIsRequired') }}
 				<n8n-link
@@ -67,7 +67,7 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
 import { createEventBus } from 'n8n-design-system/utils';
 
 export default defineComponent({
-	name: 'parameter-input-expanded',
+	name: 'ParameterInputExpanded',
 	components: {
 		ParameterOptions,
 		ParameterInputWrapper,
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 3cc25907cf..d1ea2db2dc 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -2,30 +2,30 @@
 	<n8n-input-label
 		:class="$style.wrapper"
 		:label="hideLabel ? '' : i18n.nodeText().inputLabelDisplayName(parameter, path)"
-		:tooltipText="hideLabel ? '' : i18n.nodeText().inputLabelDescription(parameter, path)"
-		:showTooltip="focused"
-		:showOptions="menuExpanded || focused || forceShowExpression"
-		:optionsPosition="optionsPosition"
+		:tooltip-text="hideLabel ? '' : i18n.nodeText().inputLabelDescription(parameter, path)"
+		:show-tooltip="focused"
+		:show-options="menuExpanded || focused || forceShowExpression"
+		:options-position="optionsPosition"
 		:bold="false"
 		:size="label.size"
 		color="text-dark"
 	>
 		<template v-if="displayOptions && optionsPosition === 'top'" #options>
-			<parameter-options
+			<ParameterOptions
 				:parameter="parameter"
 				:value="value"
-				:isReadOnly="isReadOnly"
-				:showOptions="displayOptions"
-				:showExpressionSelector="showExpressionSelector"
+				:is-read-only="isReadOnly"
+				:show-options="displayOptions"
+				:show-expression-selector="showExpressionSelector"
 				@update:modelValue="optionSelected"
 				@menu-expanded="onMenuExpanded"
 			/>
 		</template>
-		<draggable-target
+		<DraggableTarget
 			type="mapping"
 			:disabled="isDropDisabled"
 			:sticky="true"
-			:stickyOffset="isValueExpression ? [26, 3] : [3, 3]"
+			:sticky-offset="isValueExpression ? [26, 3] : [3, 3]"
 			@drop="onDrop"
 		>
 			<template #default="{ droppable, activeDrop }">
@@ -43,44 +43,44 @@
 							"
 						/>
 					</template>
-					<parameter-input-wrapper
+					<ParameterInputWrapper
 						ref="param"
 						:parameter="parameter"
-						:modelValue="value"
+						:model-value="value"
 						:path="path"
-						:isReadOnly="isReadOnly"
-						:isSingleLine="isSingleLine"
+						:is-read-only="isReadOnly"
+						:is-single-line="isSingleLine"
 						:droppable="droppable"
-						:activeDrop="activeDrop"
-						:forceShowExpression="forceShowExpression"
+						:active-drop="activeDrop"
+						:force-show-expression="forceShowExpression"
 						:hint="hint"
-						:hideHint="hideHint"
+						:hide-hint="hideHint"
 						:hide-issues="hideIssues"
 						:label="label"
 						:event-bus="eventBus"
+						input-size="small"
 						@update="valueChanged"
 						@textInput="onTextInput"
 						@focus="onFocus"
 						@blur="onBlur"
 						@drop="onDrop"
-						inputSize="small"
 					/>
 				</n8n-tooltip>
 			</template>
-		</draggable-target>
+		</DraggableTarget>
 		<div
 			:class="{
 				[$style.options]: true,
 				[$style.visible]: menuExpanded || focused || forceShowExpression,
 			}"
 		>
-			<parameter-options
+			<ParameterOptions
 				v-if="optionsPosition === 'bottom'"
 				:parameter="parameter"
 				:value="value"
-				:isReadOnly="isReadOnly"
-				:showOptions="displayOptions"
-				:showExpressionSelector="showExpressionSelector"
+				:is-read-only="isReadOnly"
+				:show-options="displayOptions"
+				:show-expression-selector="showExpressionSelector"
 				@update:modelValue="optionSelected"
 				@menu-expanded="onMenuExpanded"
 			/>
@@ -117,31 +117,12 @@ import { createEventBus } from 'n8n-design-system/utils';
 const DISPLAY_MODES_WITH_DATA_MAPPING = ['table', 'json', 'schema'];
 
 export default defineComponent({
-	name: 'parameter-input-full',
+	name: 'ParameterInputFull',
 	components: {
 		ParameterOptions,
 		DraggableTarget,
 		ParameterInputWrapper,
 	},
-	setup() {
-		const eventBus = createEventBus();
-		const i18n = useI18n();
-
-		return {
-			i18n,
-			eventBus,
-			...useToast(),
-		};
-	},
-	data() {
-		return {
-			focused: false,
-			menuExpanded: false,
-			forceShowExpression: false,
-			dataMappingTooltipButtons: [] as IN8nButton[],
-			mappingTooltipEnabled: false,
-		};
-	},
 	props: {
 		displayOptions: {
 			type: Boolean,
@@ -187,6 +168,25 @@ export default defineComponent({
 			}),
 		},
 	},
+	setup() {
+		const eventBus = createEventBus();
+		const i18n = useI18n();
+
+		return {
+			i18n,
+			eventBus,
+			...useToast(),
+		};
+	},
+	data() {
+		return {
+			focused: false,
+			menuExpanded: false,
+			forceShowExpression: false,
+			dataMappingTooltipButtons: [] as IN8nButton[],
+			mappingTooltipEnabled: false,
+		};
+	},
 	mounted() {
 		const mappingTooltipDismissHandler = this.onMappingTooltipDismissed.bind(this);
 		this.dataMappingTooltipButtons = [
diff --git a/packages/editor-ui/src/components/ParameterInputHint.vue b/packages/editor-ui/src/components/ParameterInputHint.vue
index cad4052c2e..4f6ef5c1e7 100644
--- a/packages/editor-ui/src/components/ParameterInputHint.vue
+++ b/packages/editor-ui/src/components/ParameterInputHint.vue
@@ -1,5 +1,5 @@
 <template>
-	<n8n-text size="small" color="text-base" tag="div" v-if="hint">
+	<n8n-text v-if="hint" size="small" color="text-base" tag="div">
 		<div v-if="!renderHTML" :class="classes"><span v-html="simplyText"></span></div>
 		<div
 			v-else
@@ -31,9 +31,6 @@ export default defineComponent({
 			default: false,
 		},
 	},
-	methods: {
-		sanitizeHtml,
-	},
 	computed: {
 		classes() {
 			return {
@@ -59,6 +56,9 @@ export default defineComponent({
 			(this.$refs.hint as Element).querySelectorAll('a').forEach((a) => (a.target = '_blank'));
 		}
 	},
+	methods: {
+		sanitizeHtml,
+	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index e375f1475f..636900edba 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -12,19 +12,19 @@
 				v-if="multipleValues(parameter) === true && parameter.type !== 'fixedCollection'"
 				class="parameter-item"
 			>
-				<multiple-parameter
+				<MultipleParameter
 					:parameter="parameter"
 					:values="nodeHelpers.getParameterValue(nodeValues, parameter.name, path)"
-					:nodeValues="nodeValues"
+					:node-values="nodeValues"
 					:path="getPath(parameter.name)"
-					:isReadOnly="isReadOnly"
+					:is-read-only="isReadOnly"
 					@valueChanged="valueChanged"
 				/>
 			</div>
 
-			<import-parameter
+			<ImportParameter
 				v-else-if="parameter.type === 'curlImport'"
-				:isReadOnly="isReadOnly"
+				:is-read-only="isReadOnly"
 				@valueChanged="valueChanged"
 			/>
 
@@ -60,40 +60,40 @@
 				></n8n-icon-button>
 				<n8n-input-label
 					:label="$locale.nodeText().inputLabelDisplayName(parameter, path)"
-					:tooltipText="$locale.nodeText().inputLabelDescription(parameter, path)"
+					:tooltip-text="$locale.nodeText().inputLabelDescription(parameter, path)"
 					size="small"
 					:underline="true"
 					color="text-dark"
 				/>
 				<Suspense>
-					<collection-parameter
+					<CollectionParameter
 						v-if="parameter.type === 'collection'"
 						:parameter="parameter"
 						:values="nodeHelpers.getParameterValue(nodeValues, parameter.name, path)"
-						:nodeValues="nodeValues"
+						:node-values="nodeValues"
 						:path="getPath(parameter.name)"
-						:isReadOnly="isReadOnly"
+						:is-read-only="isReadOnly"
 						@valueChanged="valueChanged"
 					/>
-					<fixed-collection-parameter
+					<FixedCollectionParameter
 						v-else-if="parameter.type === 'fixedCollection'"
 						:parameter="parameter"
 						:values="nodeHelpers.getParameterValue(nodeValues, parameter.name, path)"
-						:nodeValues="nodeValues"
+						:node-values="nodeValues"
 						:path="getPath(parameter.name)"
-						:isReadOnly="isReadOnly"
+						:is-read-only="isReadOnly"
 						@valueChanged="valueChanged"
 					/>
 				</Suspense>
 			</div>
-			<resource-mapper
+			<ResourceMapper
 				v-else-if="parameter.type === 'resourceMapper'"
 				:parameter="parameter"
 				:node="node"
 				:path="getPath(parameter.name)"
-				:dependentParametersValues="getDependentParametersValues(parameter)"
-				inputSize="small"
-				labelSize="small"
+				:dependent-parameters-values="getDependentParametersValues(parameter)"
+				input-size="small"
+				label-size="small"
 				@valueChanged="valueChanged"
 			/>
 			<FilterConditions
@@ -119,21 +119,21 @@
 					@click="deleteOption(parameter.name)"
 				></n8n-icon-button>
 
-				<parameter-input-full
+				<ParameterInputFull
 					:parameter="parameter"
 					:hide-issues="hiddenIssuesInputs.includes(parameter.name)"
 					:value="nodeHelpers.getParameterValue(nodeValues, parameter.name, path)"
-					:displayOptions="shouldShowOptions(parameter)"
+					:display-options="shouldShowOptions(parameter)"
 					:path="getPath(parameter.name)"
-					:isReadOnly="isReadOnly"
-					:hideLabel="false"
-					:nodeValues="nodeValues"
+					:is-read-only="isReadOnly"
+					:hide-label="false"
+					:node-values="nodeValues"
 					@update="valueChanged"
 					@blur="onParameterBlur(parameter.name)"
 				/>
 			</div>
 		</div>
-		<div :class="{ indent }" v-if="filteredParameters.length === 0">
+		<div v-if="filteredParameters.length === 0" :class="{ indent }">
 			<slot />
 		</div>
 	</div>
@@ -178,7 +178,6 @@ const CollectionParameter = defineAsyncComponent(async () => import('./Collectio
 
 export default defineComponent({
 	name: 'ParameterInputList',
-	mixins: [workflowHelpers],
 	components: {
 		MultipleParameter,
 		ParameterInputFull,
@@ -188,13 +187,7 @@ export default defineComponent({
 		ResourceMapper,
 		FilterConditions: Conditions,
 	},
-	setup() {
-		const nodeHelpers = useNodeHelpers();
-
-		return {
-			nodeHelpers,
-		};
-	},
+	mixins: [workflowHelpers],
 	props: {
 		nodeValues: {
 			type: Object as PropType<INodeParameters>,
@@ -225,6 +218,13 @@ export default defineComponent({
 			default: () => [],
 		},
 	},
+	setup() {
+		const nodeHelpers = useNodeHelpers();
+
+		return {
+			nodeHelpers,
+		};
+	},
 	computed: {
 		...mapStores(useNodeTypesStore, useNDVStore),
 		nodeTypeVersion(): number | null {
@@ -287,6 +287,26 @@ export default defineComponent({
 			return getMainAuthField(this.nodeType || null);
 		},
 	},
+	watch: {
+		filteredParameterNames(newValue, oldValue) {
+			if (newValue === undefined) {
+				return;
+			}
+			// After a parameter does not get displayed anymore make sure that its value gets removed
+			// Is only needed for the edge-case when a parameter gets displayed depending on another field
+			// which contains an expression.
+			for (const parameter of oldValue) {
+				if (!newValue.includes(parameter)) {
+					const parameterData = {
+						name: `${this.path}.${parameter}`,
+						node: this.ndvStore.activeNode?.name || '',
+						value: undefined,
+					};
+					this.$emit('valueChanged', parameterData);
+				}
+			}
+		},
+	},
 	methods: {
 		onParameterBlur(parameterName: string) {
 			this.$emit('parameterBlur', parameterName);
@@ -499,26 +519,6 @@ export default defineComponent({
 			}
 		},
 	},
-	watch: {
-		filteredParameterNames(newValue, oldValue) {
-			if (newValue === undefined) {
-				return;
-			}
-			// After a parameter does not get displayed anymore make sure that its value gets removed
-			// Is only needed for the edge-case when a parameter gets displayed depending on another field
-			// which contains an expression.
-			for (const parameter of oldValue) {
-				if (!newValue.includes(parameter)) {
-					const parameterData = {
-						name: `${this.path}.${parameter}`,
-						node: this.ndvStore.activeNode?.name || '',
-						value: undefined,
-					};
-					this.$emit('valueChanged', parameterData);
-				}
-			}
-		},
-	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index a124441696..a2e98626a6 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -1,24 +1,24 @@
 <template>
 	<div :class="$style.parameterInput" data-test-id="parameter-input">
-		<parameter-input
+		<ParameterInput
 			ref="param"
-			:inputSize="inputSize"
+			:input-size="inputSize"
 			:parameter="parameter"
-			:modelValue="modelValue"
+			:model-value="modelValue"
 			:path="path"
-			:isReadOnly="isReadOnly"
+			:is-read-only="isReadOnly"
 			:droppable="droppable"
-			:activeDrop="activeDrop"
-			:forceShowExpression="forceShowExpression"
-			:hideIssues="hideIssues"
-			:documentationUrl="documentationUrl"
-			:errorHighlight="errorHighlight"
-			:isForCredential="isForCredential"
-			:eventSource="eventSource"
-			:expressionEvaluated="expressionValueComputed"
-			:additionalExpressionData="resolvedAdditionalExpressionData"
+			:active-drop="activeDrop"
+			:force-show-expression="forceShowExpression"
+			:hide-issues="hideIssues"
+			:documentation-url="documentationUrl"
+			:error-highlight="errorHighlight"
+			:is-for-credential="isForCredential"
+			:event-source="eventSource"
+			:expression-evaluated="expressionValueComputed"
+			:additional-expression-data="resolvedAdditionalExpressionData"
 			:label="label"
-			:isSingleLine="isSingleLine"
+			:is-single-line="isSingleLine"
 			:data-test-id="`parameter-input-${parsedParameterName}`"
 			:event-bus="eventBus"
 			@focus="onFocus"
@@ -29,15 +29,15 @@
 		/>
 		<div v-if="!hideHint && (expressionOutput || parameterHint)" :class="$style.hint">
 			<div>
-				<input-hint
+				<InputHint
 					v-if="expressionOutput"
 					:class="{ [$style.hint]: true, 'ph-no-capture': isForCredential }"
 					:data-test-id="`parameter-expression-preview-${parsedParameterName}`"
 					:highlight="!!(expressionOutput && targetItem) && isInputParentOfActiveNode"
 					:hint="expressionOutput"
-					:singleLine="true"
+					:single-line="true"
 				/>
-				<input-hint v-else-if="parameterHint" :renderHTML="true" :hint="parameterHint" />
+				<InputHint v-else-if="parameterHint" :render-h-t-m-l="true" :hint="parameterHint" />
 			</div>
 			<slot v-if="$slots.options" name="options" />
 		</div>
@@ -71,12 +71,12 @@ import type { EventBus } from 'n8n-design-system/utils';
 import { createEventBus } from 'n8n-design-system/utils';
 
 export default defineComponent({
-	name: 'parameter-input-wrapper',
-	mixins: [workflowHelpers],
+	name: 'ParameterInputWrapper',
 	components: {
 		ParameterInput,
 		InputHint,
 	},
+	mixins: [workflowHelpers],
 	props: {
 		additionalExpressionData: {
 			type: Object as PropType<IDataObject>,
diff --git a/packages/editor-ui/src/components/ParameterIssues.vue b/packages/editor-ui/src/components/ParameterIssues.vue
index 8cbb73cb95..6e6388cdbf 100644
--- a/packages/editor-ui/src/components/ParameterIssues.vue
+++ b/packages/editor-ui/src/components/ParameterIssues.vue
@@ -1,8 +1,8 @@
 <template>
-	<div :class="$style['parameter-issues']" data-test-id="parameter-issues" v-if="issues.length">
+	<div v-if="issues.length" :class="$style['parameter-issues']" data-test-id="parameter-issues">
 		<n8n-tooltip placement="top">
 			<template #content>
-				<titled-list :title="`${$locale.baseText('parameterInput.issues')}:`" :items="issues" />
+				<TitledList :title="`${$locale.baseText('parameterInput.issues')}:`" :items="issues" />
 			</template>
 			<font-awesome-icon icon="exclamation-triangle" />
 		</n8n-tooltip>
diff --git a/packages/editor-ui/src/components/ParameterOptions.vue b/packages/editor-ui/src/components/ParameterOptions.vue
index 7e162f9c21..248d65e1b0 100644
--- a/packages/editor-ui/src/components/ParameterOptions.vue
+++ b/packages/editor-ui/src/components/ParameterOptions.vue
@@ -17,9 +17,9 @@
 					placement="bottom-end"
 					size="small"
 					color="foreground-xdark"
-					iconSize="small"
+					icon-size="small"
 					:actions="actions"
-					:iconOrientation="iconOrientation"
+					:icon-orientation="iconOrientation"
 					@action="(action) => $emit('update:modelValue', action)"
 					@visible-change="onMenuToggle"
 				/>
@@ -27,7 +27,7 @@
 			<n8n-radio-buttons
 				v-if="shouldShowExpressionSelector"
 				size="small"
-				:modelValue="selectedView"
+				:model-value="selectedView"
 				:disabled="isReadOnly"
 				:options="[
 					{ label: $locale.baseText('parameterInput.fixed'), value: 'fixed' },
@@ -48,7 +48,7 @@ import { isValueExpression } from '@/utils/nodeTypesUtils';
 import { i18n } from '@/plugins/i18n';
 
 export default defineComponent({
-	name: 'parameter-options',
+	name: 'ParameterOptions',
 	props: {
 		parameter: {
 			type: Object,
diff --git a/packages/editor-ui/src/components/PersonalizationModal.vue b/packages/editor-ui/src/components/PersonalizationModal.vue
index 626e19693e..1c5ce8e07b 100644
--- a/packages/editor-ui/src/components/PersonalizationModal.vue
+++ b/packages/editor-ui/src/components/PersonalizationModal.vue
@@ -3,11 +3,11 @@
 		:name="PERSONALIZATION_MODAL_KEY"
 		:title="$locale.baseText('personalizationModal.customizeN8n')"
 		:subtitle="$locale.baseText('personalizationModal.theseQuestionsHelpUs')"
-		:centerTitle="true"
-		:showClose="false"
-		:eventBus="modalBus"
-		:closeOnClickModal="false"
-		:closeOnPressEscape="false"
+		:center-title="true"
+		:show-close="false"
+		:event-bus="modalBus"
+		:close-on-click-modal="false"
+		:close-on-press-escape="false"
 		width="460px"
 		data-test-id="personalization-form"
 		@enter="onSave"
@@ -17,10 +17,10 @@
 				<n8n-form-inputs
 					v-model="formValues"
 					:inputs="survey"
-					:columnView="true"
-					:eventBus="formBus"
+					:column-view="true"
+					:event-bus="formBus"
 					:teleported="teleported"
-					tagSize="small"
+					tag-size="small"
 					@submit="onSubmit"
 				/>
 				<n8n-card v-if="canRegisterForEnterpriseTrial">
@@ -42,10 +42,10 @@
 		<template #footer>
 			<div>
 				<n8n-button
-					@click="onSave"
 					:loading="isSaving"
 					:label="$locale.baseText('personalizationModal.getStarted')"
 					float="right"
+					@click="onSave"
 				/>
 			</div>
 		</template>
@@ -160,14 +160,23 @@ import { useMessage } from '@/composables/useMessage';
 
 export default defineComponent({
 	name: 'PersonalizationModal',
-	mixins: [workflowHelpers],
 	components: { Modal },
+	mixins: [workflowHelpers],
 	props: {
 		teleported: {
 			type: Boolean,
 			default: true,
 		},
 	},
+	setup() {
+		const externalHooks = useExternalHooks();
+
+		return {
+			externalHooks,
+			...useToast(),
+			...useMessage(),
+		};
+	},
 	data() {
 		return {
 			formValues: {} as Record<string, string>,
@@ -181,15 +190,6 @@ export default defineComponent({
 			formBus: createEventBus(),
 		};
 	},
-	setup() {
-		const externalHooks = useExternalHooks();
-
-		return {
-			externalHooks,
-			...useToast(),
-			...useMessage(),
-		};
-	},
 	computed: {
 		...mapStores(
 			useRootStore,
diff --git a/packages/editor-ui/src/components/PushConnectionTracker.vue b/packages/editor-ui/src/components/PushConnectionTracker.vue
index 5722c1500b..fb55b39c20 100644
--- a/packages/editor-ui/src/components/PushConnectionTracker.vue
+++ b/packages/editor-ui/src/components/PushConnectionTracker.vue
@@ -1,6 +1,6 @@
 <template>
 	<span>
-		<div class="push-connection-lost primary-color" v-if="!rootStore.pushConnectionActive">
+		<div v-if="!rootStore.pushConnectionActive" class="push-connection-lost primary-color">
 			<n8n-tooltip placement="bottom-end">
 				<template #content>
 					<div v-html="$locale.baseText('pushConnectionTracker.cannotConnectToServer')"></div>
diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
index bdd795948f..bec8b27451 100644
--- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
+++ b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
@@ -1,23 +1,23 @@
 <template>
 	<div
-		class="resource-locator"
 		ref="container"
+		class="resource-locator"
 		:data-test-id="`resource-locator-${parameter.name}`"
 	>
-		<resource-locator-dropdown
+		<ResourceLocatorDropdown
 			ref="dropdown"
-			:modelValue="modelValue ? modelValue.value : ''"
+			:model-value="modelValue ? modelValue.value : ''"
 			:show="resourceDropdownVisible"
+			v-on-click-outside="hideResourceDropdown"
 			:filterable="isSearchable"
-			:filterRequired="requiresSearchFilter"
+			:filter-required="requiresSearchFilter"
 			:resources="currentQueryResults"
 			:loading="currentQueryLoading"
 			:filter="searchFilter"
-			:hasMore="currentQueryHasMore"
-			:errorView="currentQueryError"
+			:has-more="currentQueryHasMore"
+			:error-view="currentQueryError"
 			:width="width"
 			:event-bus="eventBus"
-			v-on-click-outside="hideResourceDropdown"
 			@update:modelValue="onListItemSelected"
 			@filter="onSearchFilter"
 			@loadMore="loadResourcesDebounced"
@@ -27,7 +27,7 @@
 					<n8n-text color="text-dark" align="center" tag="div">
 						{{ $locale.baseText('resourceLocator.mode.list.error.title') }}
 					</n8n-text>
-					<n8n-text size="small" color="text-base" v-if="hasCredential || credentialsNotSet">
+					<n8n-text v-if="hasCredential || credentialsNotSet" size="small" color="text-base">
 						{{ $locale.baseText('resourceLocator.mode.list.error.description.part1') }}
 						<a v-if="credentialsNotSet" @click="createNewCredential">{{
 							$locale.baseText('resourceLocator.mode.list.error.description.part2.noCredentials')
@@ -46,13 +46,13 @@
 			>
 				<div v-if="hasMultipleModes" :class="$style.modeSelector">
 					<n8n-select
-						:modelValue="selectedMode"
+						:model-value="selectedMode"
 						filterable
 						:size="inputSize"
 						:disabled="isReadOnly"
-						@update:modelValue="onModeSelected"
 						:placeholder="$locale.baseText('resourceLocator.modeSelector.placeholder')"
 						data-test-id="rlc-mode-selector"
+						@update:modelValue="onModeSelected"
 					>
 						<n8n-option
 							v-for="mode in parameter.modes"
@@ -72,11 +72,11 @@
 				</div>
 
 				<div :class="$style.inputContainer" data-test-id="rlc-input-container">
-					<draggable-target
+					<DraggableTarget
 						type="mapping"
 						:disabled="hasOnlyListMode"
 						:sticky="true"
-						:stickyOffset="isValueExpression ? [26, 3] : [3, 3]"
+						:sticky-offset="isValueExpression ? [26, 3] : [3, 3]"
 						@drop="onDrop"
 					>
 						<template #default="{ droppable, activeDrop }">
@@ -90,24 +90,24 @@
 							>
 								<ExpressionParameterInput
 									v-if="isValueExpression || forceShowExpression"
-									:modelValue="expressionDisplayValue"
+									ref="input"
+									:model-value="expressionDisplayValue"
 									:path="path"
-									isSingleLine
+									is-single-line
 									@update:modelValue="onInputChange"
 									@modalOpenerClick="$emit('modalOpenerClick')"
-									ref="input"
 								/>
 								<n8n-input
 									v-else
+									ref="input"
 									:class="{ [$style.selectInput]: isListMode }"
 									:size="inputSize"
-									:modelValue="valueToDisplay"
+									:model-value="valueToDisplay"
 									:disabled="isReadOnly"
 									:readonly="isListMode"
 									:title="displayTitle"
 									:placeholder="inputPlaceholder"
 									type="text"
-									ref="input"
 									data-test-id="rlc-input"
 									@update:modelValue="onInputChange"
 									@focus="onInputFocus"
@@ -126,8 +126,8 @@
 								</n8n-input>
 							</div>
 						</template>
-					</draggable-target>
-					<parameter-issues
+					</DraggableTarget>
+					<ParameterIssues
 						v-if="parameterIssues && parameterIssues.length"
 						:issues="parameterIssues"
 						:class="$style['parameter-issues']"
@@ -139,7 +139,7 @@
 					</div>
 				</div>
 			</div>
-		</resource-locator-dropdown>
+		</ResourceLocatorDropdown>
 	</div>
 </template>
 
@@ -183,14 +183,14 @@ interface IResourceLocatorQuery {
 }
 
 export default defineComponent({
-	name: 'resource-locator',
-	mixins: [debounceHelper, workflowHelpers],
+	name: 'ResourceLocator',
 	components: {
 		DraggableTarget,
 		ExpressionParameterInput,
 		ParameterIssues,
 		ResourceLocatorDropdown,
 	},
+	mixins: [debounceHelper, workflowHelpers],
 	props: {
 		parameter: {
 			type: Object as PropType<INodeProperties>,
diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
index 8976276a1b..a6444287a0 100644
--- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
+++ b/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
@@ -7,17 +7,17 @@
 		trigger="manual"
 		data-test-id="resource-locator-dropdown"
 	>
-		<div :class="$style.messageContainer" v-if="errorView">
+		<div v-if="errorView" :class="$style.messageContainer">
 			<slot name="error"></slot>
 		</div>
-		<div :class="$style.searchInput" v-if="filterable && !errorView" @keydown="onKeyDown">
+		<div v-if="filterable && !errorView" :class="$style.searchInput" @keydown="onKeyDown">
 			<n8n-input
-				:modelValue="filter"
-				:clearable="true"
-				@update:modelValue="onFilterInput"
 				ref="search"
+				:model-value="filter"
+				:clearable="true"
 				:placeholder="$locale.baseText('resourceLocator.search.placeholder')"
 				data-test-id="rlc-search"
+				@update:modelValue="onFilterInput"
 			>
 				<template #prefix>
 					<font-awesome-icon :class="$style.searchIcon" icon="search" />
@@ -28,8 +28,8 @@
 			{{ $locale.baseText('resourceLocator.mode.list.searchRequired') }}
 		</div>
 		<div
-			:class="$style.messageContainer"
 			v-else-if="!errorView && sortedResources.length === 0 && !loading"
+			:class="$style.messageContainer"
 		>
 			{{ $locale.baseText('resourceLocator.mode.list.noResults') }}
 		</div>
@@ -42,6 +42,7 @@
 			<div
 				v-for="(result, i) in sortedResources"
 				:key="result.value"
+				:ref="`item-${i}`"
 				:class="{
 					[$style.resourceItem]: true,
 					[$style.selected]: result.value === modelValue,
@@ -51,7 +52,6 @@
 				@click="() => onItemClick(result.value)"
 				@mouseenter="() => onItemHover(i)"
 				@mouseleave="() => onItemHoverLeave()"
-				:ref="`item-${i}`"
 			>
 				<div :class="$style.resourceNameContainer">
 					<span>{{ result.name }}</span>
@@ -88,7 +88,7 @@ const SEARCH_BAR_HEIGHT_PX = 40;
 const SCROLL_MARGIN_PX = 10;
 
 export default defineComponent({
-	name: 'resource-locator-dropdown',
+	name: 'ResourceLocatorDropdown',
 	props: {
 		modelValue: {
 			type: [String, Number],
@@ -132,12 +132,6 @@ export default defineComponent({
 			showHoverUrl: false,
 		};
 	},
-	mounted() {
-		this.eventBus.on('keyDown', this.onKeyDown);
-	},
-	beforeUnmount() {
-		this.eventBus.off('keyDown', this.onKeyDown);
-	},
 	computed: {
 		sortedResources(): IResourceLocatorResultExpanded[] {
 			const seen = new Set();
@@ -169,6 +163,29 @@ export default defineComponent({
 			return notSelected;
 		},
 	},
+	watch: {
+		show(value) {
+			if (value) {
+				this.hoverIndex = 0;
+				this.showHoverUrl = false;
+
+				setTimeout(() => {
+					if (value && this.filterable && this.$refs.search) {
+						(this.$refs.search as HTMLElement).focus();
+					}
+				}, 0);
+			}
+		},
+		loading() {
+			setTimeout(() => this.onResultsEnd(), 0); // in case of filtering
+		},
+	},
+	mounted() {
+		this.eventBus.on('keyDown', this.onKeyDown);
+	},
+	beforeUnmount() {
+		this.eventBus.off('keyDown', this.onKeyDown);
+	},
 	methods: {
 		openUrl(event: MouseEvent, url: string) {
 			event.preventDefault();
@@ -245,23 +262,6 @@ export default defineComponent({
 			}
 		},
 	},
-	watch: {
-		show(value) {
-			if (value) {
-				this.hoverIndex = 0;
-				this.showHoverUrl = false;
-
-				setTimeout(() => {
-					if (value && this.filterable && this.$refs.search) {
-						(this.$refs.search as HTMLElement).focus();
-					}
-				}, 0);
-			}
-		},
-		loading() {
-			setTimeout(() => this.onResultsEnd(), 0); // in case of filtering
-		},
-	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/ResourceMapper/MappingFields.vue b/packages/editor-ui/src/components/ResourceMapper/MappingFields.vue
index e24053debf..ae55093b83 100644
--- a/packages/editor-ui/src/components/ResourceMapper/MappingFields.vue
+++ b/packages/editor-ui/src/components/ResourceMapper/MappingFields.vue
@@ -289,17 +289,17 @@ defineExpose({
 			:label="valuesLabel"
 			:underline="true"
 			:size="labelSize"
-			:showOptions="true"
-			:showExpressionSelector="false"
-			inputName="columns"
+			:show-options="true"
+			:show-expression-selector="false"
+			input-name="columns"
 			color="text-dark"
 		>
 			<template #options>
-				<parameter-options
+				<ParameterOptions
 					:parameter="parameter"
-					:customActions="parameterActions"
+					:custom-actions="parameterActions"
 					:loading="props.refreshInProgress"
-					:loadingMessage="fetchingFieldsLabel"
+					:loading-message="fetchingFieldsLabel"
 					@update:modelValue="onParameterActionSelected"
 				/>
 			</template>
@@ -360,19 +360,19 @@ defineExpose({
 				></n8n-icon-button>
 			</div>
 			<div :class="$style.parameterInput">
-				<parameter-input-full
+				<ParameterInputFull
 					:parameter="field"
 					:value="getParameterValue(field.name)"
-					:displayOptions="true"
+					:display-options="true"
 					:path="`${props.path}.${field.name}`"
-					:isReadOnly="refreshInProgress || field.readOnly"
-					:hideIssues="true"
-					:nodeValues="nodeValues"
+					:is-read-only="refreshInProgress || field.readOnly"
+					:hide-issues="true"
+					:node-values="nodeValues"
 					:class="$style.parameterInputFull"
 					@update="onValueChanged"
 				/>
 			</div>
-			<parameter-issues
+			<ParameterIssues
 				v-if="getFieldIssues(field).length > 0"
 				:issues="getFieldIssues(field)"
 				:class="[$style.parameterIssues, 'ml-5xs']"
diff --git a/packages/editor-ui/src/components/ResourceMapper/MappingModeSelect.vue b/packages/editor-ui/src/components/ResourceMapper/MappingModeSelect.vue
index 2a46e46ff7..4f070a8da1 100644
--- a/packages/editor-ui/src/components/ResourceMapper/MappingModeSelect.vue
+++ b/packages/editor-ui/src/components/ResourceMapper/MappingModeSelect.vue
@@ -112,7 +112,7 @@ defineExpose({
 		>
 			<div class="mt-5xs">
 				<n8n-select
-					:modelValue="selected"
+					:model-value="selected"
 					:teleported="teleported"
 					:size="props.inputSize"
 					@update:modelValue="onModeChanged"
diff --git a/packages/editor-ui/src/components/ResourceMapper/MatchingColumnsSelect.vue b/packages/editor-ui/src/components/ResourceMapper/MatchingColumnsSelect.vue
index 2ba727af07..da4cb8d45f 100644
--- a/packages/editor-ui/src/components/ResourceMapper/MatchingColumnsSelect.vue
+++ b/packages/editor-ui/src/components/ResourceMapper/MatchingColumnsSelect.vue
@@ -170,24 +170,24 @@ defineExpose({
 		<n8n-input-label
 			v-if="availableMatchingFields.length > 0"
 			:label="fieldLabel"
-			:tooltipText="fieldTooltip"
+			:tooltip-text="fieldTooltip"
 			:bold="false"
 			:required="false"
 			:size="labelSize"
 			color="text-dark"
 		>
 			<template #options>
-				<parameter-options
+				<ParameterOptions
 					:parameter="parameter"
-					:customActions="parameterActions"
+					:custom-actions="parameterActions"
 					:loading="props.refreshInProgress"
-					:loadingMessage="fetchingFieldsLabel"
+					:loading-message="fetchingFieldsLabel"
 					@update:modelValue="onParameterActionSelected"
 				/>
 			</template>
 			<n8n-select
 				:multiple="resourceMapperTypeOptions?.multiKeyMatch === true"
-				:modelValue="state.selected"
+				:model-value="state.selected"
 				:size="props.inputSize"
 				:disabled="loading"
 				:teleported="teleported"
diff --git a/packages/editor-ui/src/components/ResourceMapper/ResourceMapper.vue b/packages/editor-ui/src/components/ResourceMapper/ResourceMapper.vue
index 07e81ff974..cfb17dbcb2 100644
--- a/packages/editor-ui/src/components/ResourceMapper/ResourceMapper.vue
+++ b/packages/editor-ui/src/components/ResourceMapper/ResourceMapper.vue
@@ -448,32 +448,32 @@ defineExpose({
 
 <template>
 	<div class="mt-4xs" data-test-id="resource-mapper-container">
-		<mapping-mode-select
+		<MappingModeSelect
 			v-if="showMappingModeSelect"
-			:inputSize="inputSize"
-			:labelSize="labelSize"
-			:initialValue="state.paramValue.mappingMode || 'defineBelow'"
-			:typeOptions="props.parameter.typeOptions"
-			:serviceName="nodeType?.displayName || locale.baseText('generic.service')"
+			:input-size="inputSize"
+			:label-size="labelSize"
+			:initial-value="state.paramValue.mappingMode || 'defineBelow'"
+			:type-options="props.parameter.typeOptions"
+			:service-name="nodeType?.displayName || locale.baseText('generic.service')"
 			:loading="state.loading"
-			:loadingError="state.loadingError"
-			:fieldsToMap="state.paramValue.schema"
+			:loading-error="state.loadingError"
+			:fields-to-map="state.paramValue.schema"
 			:teleported="teleported"
 			@modeChanged="onModeChanged"
 			@retryFetch="initFetching"
 		/>
-		<matching-columns-select
+		<MatchingColumnsSelect
 			v-if="showMatchingColumnsSelector"
 			:parameter="props.parameter"
 			:label-size="labelSize"
-			:fieldsToMap="state.paramValue.schema"
-			:typeOptions="props.parameter.typeOptions"
-			:inputSize="inputSize"
+			:fields-to-map="state.paramValue.schema"
+			:type-options="props.parameter.typeOptions"
+			:input-size="inputSize"
 			:loading="state.loading"
-			:initialValue="matchingColumns"
-			:serviceName="nodeType?.displayName || locale.baseText('generic.service')"
+			:initial-value="matchingColumns"
+			:service-name="nodeType?.displayName || locale.baseText('generic.service')"
 			:teleported="teleported"
-			:refreshInProgress="state.refreshInProgress"
+			:refresh-in-progress="state.refreshInProgress"
 			@matchingColumnsChanged="onMatchingColumnsChanged"
 			@refreshFieldList="initFetching(true)"
 		/>
@@ -487,19 +487,19 @@ defineExpose({
 				})
 			}}
 		</n8n-text>
-		<mapping-fields
+		<MappingFields
 			v-if="showMappingFields"
 			:parameter="props.parameter"
 			:path="props.path"
-			:nodeValues="state.parameterValues"
-			:fieldsToMap="state.paramValue.schema"
-			:paramValue="state.paramValue"
-			:labelSize="labelSize"
-			:showMatchingColumnsSelector="showMatchingColumnsSelector"
-			:showMappingModeSelect="showMappingModeSelect"
+			:node-values="state.parameterValues"
+			:fields-to-map="state.paramValue.schema"
+			:param-value="state.paramValue"
+			:label-size="labelSize"
+			:show-matching-columns-selector="showMatchingColumnsSelector"
+			:show-mapping-mode-select="showMappingModeSelect"
 			:loading="state.loading"
 			:teleported="teleported"
-			:refreshInProgress="state.refreshInProgress"
+			:refresh-in-progress="state.refreshInProgress"
 			@fieldValueChanged="fieldValueChanged"
 			@removeField="removeField"
 			@addField="addField"
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index e93be57893..ba607c1cd2 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -7,7 +7,7 @@
 			:class="$style.pinnedDataCallout"
 		>
 			{{ $locale.baseText('runData.pindata.thisDataIsPinned') }}
-			<span class="ml-4xs" v-if="!isReadOnlyRoute && !readOnlyEnv">
+			<span v-if="!isReadOnlyRoute && !readOnlyEnv" class="ml-4xs">
 				<n8n-link
 					theme="secondary"
 					size="small"
@@ -33,8 +33,8 @@
 		</n8n-callout>
 
 		<BinaryDataDisplay
-			:windowVisible="binaryDataDisplayVisible"
-			:displayData="binaryDataDisplayData"
+			:window-visible="binaryDataDisplayVisible"
+			:display-data="binaryDataDisplayData"
 			@close="closeBinaryDataDisplay"
 		/>
 
@@ -43,15 +43,15 @@
 
 			<div
 				v-show="!hasRunError"
-				@click.stop
 				:class="$style.displayModes"
 				data-test-id="run-data-pane-header"
+				@click.stop
 			>
 				<n8n-radio-buttons
 					v-show="
 						hasNodeRun && (inputData.length || binaryData.length || search) && !editMode.enabled
 					"
-					:modelValue="displayMode"
+					:model-value="displayMode"
 					:options="buttons"
 					data-test-id="ndv-run-data-display-mode"
 					@update:modelValue="onDisplayModeChange"
@@ -69,16 +69,16 @@
 					@click="enterEditMode({ origin: 'editIconButton' })"
 				/>
 				<n8n-tooltip
-					placement="bottom-end"
 					v-if="canPinData && rawInputData.length"
 					v-show="!editMode.enabled"
+					placement="bottom-end"
 					:visible="
 						isControlledPinDataTooltip
 							? isControlledPinDataTooltip && pinDataDiscoveryTooltipVisible
 							: undefined
 					"
 				>
-					<template #content v-if="!isControlledPinDataTooltip">
+					<template v-if="!isControlledPinDataTooltip" #content>
 						<div :class="$style.tooltipContainer">
 							<strong>{{ $locale.baseText('ndv.pinData.pin.title') }}</strong>
 							<n8n-text size="small" tag="p">
@@ -90,7 +90,7 @@
 							</n8n-text>
 						</div>
 					</template>
-					<template #content v-else>
+					<template v-else #content>
 						<div :class="$style.tooltipContainer">
 							{{ $locale.baseText('node.discovery.pinData.ndv') }}
 						</div>
@@ -106,12 +106,12 @@
 							isReadOnlyRoute ||
 							readOnlyEnv
 						"
-						@click="onTogglePinData({ source: 'pin-icon-click' })"
 						data-test-id="ndv-pin-data"
+						@click="onTogglePinData({ source: 'pin-icon-click' })"
 					/>
 				</n8n-tooltip>
 
-				<div :class="$style.editModeActions" v-show="editMode.enabled">
+				<div v-show="editMode.enabled" :class="$style.editModeActions">
 					<n8n-button
 						type="tertiary"
 						:label="$locale.baseText('runData.editor.cancel')"
@@ -128,28 +128,28 @@
 		</div>
 
 		<div
-			:class="$style.runSelector"
 			v-if="maxRunIndex > 0"
 			v-show="!editMode.enabled"
+			:class="$style.runSelector"
 			data-test-id="run-selector"
 		>
 			<div :class="$style.runSelectorWrapper">
 				<n8n-select
 					size="small"
-					:modelValue="runIndex"
+					:model-value="runIndex"
+					teleported
 					@update:modelValue="onRunIndexChange"
 					@click.stop
-					teleported
 				>
 					<template #prepend>{{ $locale.baseText('ndv.output.run') }}</template>
 					<n8n-option
 						v-for="option in maxRunIndex + 1"
+						:key="option"
 						:label="getRunLabel(option)"
 						:value="option - 1"
-						:key="option"
 					></n8n-option>
 				</n8n-select>
-				<n8n-tooltip placement="right" v-if="canLinkRuns">
+				<n8n-tooltip v-if="canLinkRuns" placement="right">
 					<template #content>
 						{{ $locale.baseText(linkedRuns ? 'runData.unlinking.hint' : 'runData.linking.hint') }}
 					</template>
@@ -164,11 +164,11 @@
 				</n8n-tooltip>
 				<slot name="run-info"></slot>
 			</div>
-			<run-data-search
+			<RunDataSearch
 				v-if="showIOSearch"
 				v-model="search"
-				:paneType="paneType"
-				:isAreaActive="isPaneActive"
+				:pane-type="paneType"
+				:is-area-active="isPaneActive"
 				@focus="activatePane"
 			/>
 		</div>
@@ -180,15 +180,15 @@
 			data-test-id="branches"
 		>
 			<n8n-tabs
-				:modelValue="currentOutputIndex"
+				:model-value="currentOutputIndex"
 				:options="branches"
 				@update:modelValue="onBranchChange"
 			/>
-			<run-data-search
+			<RunDataSearch
 				v-if="showIOSearch"
 				v-model="search"
-				:paneType="paneType"
-				:isAreaActive="isPaneActive"
+				:pane-type="paneType"
+				:is-area-active="isPaneActive"
 				@focus="activatePane"
 			/>
 		</div>
@@ -219,16 +219,16 @@
 					})
 				}}
 			</n8n-text>
-			<run-data-search
+			<RunDataSearch
 				v-if="showIOSearch"
 				v-model="search"
-				:paneType="paneType"
-				:isAreaActive="isPaneActive"
+				:pane-type="paneType"
+				:is-area-active="isPaneActive"
 				@focus="activatePane"
 			/>
 		</div>
 
-		<div :class="$style.dataContainer" ref="dataContainer" data-test-id="ndv-data-container">
+		<div ref="dataContainer" :class="$style.dataContainer" data-test-id="ndv-data-container">
 			<div v-if="isExecuting" :class="$style.center" data-test-id="ndv-executing">
 				<div :class="$style.spinner"><n8n-spinner type="ring" /></div>
 				<n8n-text>{{ executingMessage }}</n8n-text>
@@ -236,8 +236,8 @@
 
 			<div v-else-if="editMode.enabled" :class="$style.editMode">
 				<div :class="[$style.editModeBody, 'ignore-key-press']">
-					<code-node-editor
-						:modelValue="editMode.value"
+					<CodeNodeEditor
+						:model-value="editMode.value"
 						language="json"
 						@update:modelValue="ndvStore.setOutputPanelEditModeValue($event)"
 					/>
@@ -284,7 +284,7 @@
 						})
 					}}
 				</n8n-text>
-				<slot name="content" v-else-if="$slots['content']"></slot>
+				<slot v-else-if="$slots['content']" name="content"></slot>
 				<NodeErrorView
 					v-else
 					:error="workflowRunData[node.name][runIndex].error"
@@ -347,7 +347,7 @@
 			</div>
 
 			<!-- V-else slot named content which only renders if $slots.content is passed and hasNodeRun -->
-			<slot name="content" v-else-if="hasNodeRun && $slots['content']"></slot>
+			<slot v-else-if="hasNodeRun && $slots['content']" name="content"></slot>
 
 			<div
 				v-else-if="
@@ -383,15 +383,15 @@
 			</div>
 
 			<Suspense v-else-if="hasNodeRun && displayMode === 'table'">
-				<run-data-table
+				<RunDataTable
 					:node="node"
-					:inputData="inputDataPage"
-					:mappingEnabled="mappingEnabled"
-					:distanceFromActive="distanceFromActive"
-					:runIndex="runIndex"
-					:pageOffset="currentPageOffset"
-					:totalRuns="maxRunIndex"
-					:hasDefaultHoverState="paneType === 'input' && !search"
+					:input-data="inputDataPage"
+					:mapping-enabled="mappingEnabled"
+					:distance-from-active="distanceFromActive"
+					:run-index="runIndex"
+					:page-offset="currentPageOffset"
+					:total-runs="maxRunIndex"
+					:has-default-hover-state="paneType === 'input' && !search"
 					:search="search"
 					@mounted="$emit('tableMounted', $event)"
 					@activeRowChanged="onItemHover"
@@ -400,33 +400,33 @@
 			</Suspense>
 
 			<Suspense v-else-if="hasNodeRun && displayMode === 'json'">
-				<run-data-json
-					:paneType="paneType"
-					:editMode="editMode"
-					:sessioId="sessionId"
+				<RunDataJson
+					:pane-type="paneType"
+					:edit-mode="editMode"
+					:sessio-id="sessionId"
 					:node="node"
-					:inputData="inputDataPage"
-					:mappingEnabled="mappingEnabled"
-					:distanceFromActive="distanceFromActive"
-					:runIndex="runIndex"
-					:totalRuns="maxRunIndex"
+					:input-data="inputDataPage"
+					:mapping-enabled="mappingEnabled"
+					:distance-from-active="distanceFromActive"
+					:run-index="runIndex"
+					:total-runs="maxRunIndex"
 					:search="search"
 				/>
 			</Suspense>
 
 			<Suspense v-else-if="hasNodeRun && isPaneTypeOutput && displayMode === 'html'">
-				<run-data-html :inputHtml="inputDataPage[0].json.html" />
+				<RunDataHtml :input-html="inputDataPage[0].json.html" />
 			</Suspense>
 
 			<Suspense v-else-if="hasNodeRun && isSchemaView">
-				<run-data-schema
+				<RunDataSchema
 					:data="jsonData"
-					:mappingEnabled="mappingEnabled"
-					:distanceFromActive="distanceFromActive"
+					:mapping-enabled="mappingEnabled"
+					:distance-from-active="distanceFromActive"
 					:node="node"
-					:paneType="paneType"
-					:runIndex="runIndex"
-					:totalRuns="maxRunIndex"
+					:pane-type="paneType"
+					:run-index="runIndex"
+					:total-runs="maxRunIndex"
 					:search="search"
 				/>
 			</Suspense>
@@ -439,7 +439,7 @@
 
 			<div v-else-if="displayMode === 'binary'" :class="$style.dataDisplay">
 				<div v-for="(binaryDataEntry, index) in binaryData" :key="index">
-					<div :class="$style.binaryIndex" v-if="binaryData.length > 1">
+					<div v-if="binaryData.length > 1" :class="$style.binaryIndex">
 						<div>
 							{{ index + 1 }}
 						</div>
@@ -447,9 +447,9 @@
 
 					<div :class="$style.binaryRow">
 						<div
-							:class="$style.binaryCell"
 							v-for="(binaryData, key) in binaryDataEntry"
 							:key="index + '_' + key"
+							:class="$style.binaryCell"
 						>
 							<div :data-test-id="'ndv-binary-data_' + index">
 								<div :class="$style.binaryHeader">
@@ -520,7 +520,6 @@
 			</div>
 		</div>
 		<div
-			:class="$style.pagination"
 			v-if="
 				hasNodeRun &&
 				!hasRunError &&
@@ -530,6 +529,7 @@
 				!isArtificialRecoveredEventItem
 			"
 			v-show="!editMode.enabled"
+			:class="$style.pagination"
 			data-test-id="ndv-data-pagination"
 		>
 			<el-pagination
@@ -539,17 +539,17 @@
 				:pager-count="5"
 				:page-size="pageSize"
 				layout="prev, pager, next"
-				@update:current-page="onCurrentPageChange"
 				:total="dataCount"
+				@update:current-page="onCurrentPageChange"
 			>
 			</el-pagination>
 
 			<div :class="$style.pageSizeSelector">
 				<n8n-select
 					size="mini"
-					:modelValue="pageSize"
-					@update:modelValue="onPageSizeChange"
+					:model-value="pageSize"
 					teleported
+					@update:modelValue="onPageSizeChange"
 				>
 					<template #prepend>{{ $locale.baseText('ndv.output.pageSize') }}</template>
 					<n8n-option v-for="size in pageSizes" :key="size" :label="size" :value="size">
@@ -633,7 +633,6 @@ export type EnterEditModeArgs = {
 
 export default defineComponent({
 	name: 'RunData',
-	mixins: [genericHelpers, pinData],
 	components: {
 		BinaryDataDisplay,
 		NodeErrorView,
@@ -644,6 +643,7 @@ export default defineComponent({
 		RunDataHtml,
 		RunDataSearch,
 	},
+	mixins: [genericHelpers, pinData],
 	props: {
 		nodeUi: {
 			type: Object as PropType<INodeUi>,
diff --git a/packages/editor-ui/src/components/RunDataAi/AiRunContentBlock.vue b/packages/editor-ui/src/components/RunDataAi/AiRunContentBlock.vue
index f3f3148666..3868ea26de 100644
--- a/packages/editor-ui/src/components/RunDataAi/AiRunContentBlock.vue
+++ b/packages/editor-ui/src/components/RunDataAi/AiRunContentBlock.vue
@@ -8,10 +8,10 @@
 			<!-- @click.stop to prevent event from bubbling to blockHeader and toggling expanded state when clicking on rawSwitch -->
 			<el-switch
 				v-if="contentParsed"
-				@click.stop
+				v-model="isShowRaw"
 				:class="$style.rawSwitch"
 				active-text="RAW JSON"
-				v-model="isShowRaw"
+				@click.stop
 			/>
 		</header>
 		<main
@@ -21,24 +21,24 @@
 			}"
 		>
 			<div
-				:key="index"
 				v-for="({ parsedContent, raw }, index) in parsedRun"
+				:key="index"
 				:class="$style.contentText"
 				:data-content-type="parsedContent?.type"
 			>
 				<template v-if="parsedContent && !isShowRaw">
 					<template v-if="parsedContent.type === 'json'">
-						<vue-markdown
+						<VueMarkdown
 							:source="jsonToMarkdown(parsedContent.data as JsonMarkdown)"
 							:class="$style.markdown"
 						/>
 					</template>
 					<template v-if="parsedContent.type === 'markdown'">
-						<vue-markdown :source="parsedContent.data" :class="$style.markdown" />
+						<VueMarkdown :source="parsedContent.data" :class="$style.markdown" />
 					</template>
 					<p
-						:class="$style.runText"
 						v-if="parsedContent.type === 'text'"
+						:class="$style.runText"
 						v-text="parsedContent.data"
 					/>
 				</template>
@@ -49,11 +49,11 @@
 							size="small"
 							:class="$style.copyToClipboard"
 							type="secondary"
-							@click="copyToClipboard(raw)"
 							:title="$locale.baseText('nodeErrorView.copyToClipboard')"
 							icon="copy"
+							@click="copyToClipboard(raw)"
 						/>
-						<vue-markdown :source="jsonToMarkdown(raw as JsonMarkdown)" :class="$style.markdown" />
+						<VueMarkdown :source="jsonToMarkdown(raw as JsonMarkdown)" :class="$style.markdown" />
 					</div>
 				</template>
 			</div>
diff --git a/packages/editor-ui/src/components/RunDataAi/RunDataAi.vue b/packages/editor-ui/src/components/RunDataAi/RunDataAi.vue
index 79014ba0da..9731ef4a9a 100644
--- a/packages/editor-ui/src/components/RunDataAi/RunDataAi.vue
+++ b/packages/editor-ui/src/components/RunDataAi/RunDataAi.vue
@@ -1,14 +1,14 @@
 <template>
 	<div v-if="aiData" :class="$style.container">
 		<div :class="{ [$style.tree]: true, [$style.slim]: slim }">
-			<el-tree
+			<ElTree
 				:data="executionTree"
 				:props="{ label: 'node' }"
 				default-expand-all
 				:indent="12"
-				@node-click="onItemClick"
 				:expand-on-click-node="false"
 				data-test-id="lm-chat-logs-tree"
+				@node-click="onItemClick"
 			>
 				<template #default="{ node, data }">
 					<div
@@ -20,8 +20,8 @@
 						:style="{ '--item-depth': data.depth }"
 					>
 						<button
-							:class="$style.treeToggle"
 							v-if="data.children.length"
+							:class="$style.treeToggle"
 							@click="toggleTreeItem(node)"
 						>
 							<font-awesome-icon :icon="node.expanded ? 'angle-down' : 'angle-up'" />
@@ -31,13 +31,13 @@
 								{{ node.label }}
 							</template>
 							<span :class="$style.leafLabel">
-								<node-icon :node-type="getNodeType(data.node)!" :size="17" />
-								<span v-text="node.label" v-if="!slim" />
+								<NodeIcon :node-type="getNodeType(data.node)!" :size="17" />
+								<span v-if="!slim" v-text="node.label" />
 							</span>
 						</n8n-tooltip>
 					</div>
 				</template>
-			</el-tree>
+			</ElTree>
 		</div>
 		<div :class="$style.runData">
 			<div v-if="selectedRun.length === 0" :class="$style.empty">
@@ -56,7 +56,7 @@
 				:key="`${data.node}__${data.runIndex}__index`"
 				data-test-id="lm-chat-logs-entry"
 			>
-				<RunDataAiContent :inputData="data" :contentIndex="index" />
+				<RunDataAiContent :input-data="data" :content-index="index" />
 			</div>
 		</div>
 	</div>
diff --git a/packages/editor-ui/src/components/RunDataAi/RunDataAiContent.vue b/packages/editor-ui/src/components/RunDataAi/RunDataAiContent.vue
index 17503260c6..2be9048da5 100644
--- a/packages/editor-ui/src/components/RunDataAi/RunDataAiContent.vue
+++ b/packages/editor-ui/src/components/RunDataAi/RunDataAiContent.vue
@@ -1,7 +1,7 @@
 <template>
 	<div :class="$style.container">
 		<header :class="$style.header">
-			<node-icon
+			<NodeIcon
 				v-if="runMeta?.node"
 				:class="$style.nodeIcon"
 				:node-type="runMeta.node"
@@ -35,7 +35,7 @@
 								},
 							})
 						}}
-						<n8n-info-tip type="tooltip" theme="info-light" tooltipPlacement="right">
+						<n8n-info-tip type="tooltip" theme="info-light" tooltip-placement="right">
 							<div>
 								<n8n-text :bold="true" size="small">
 									{{ $locale.baseText('runData.aiContentBlock.tokens.prompt') }}
@@ -65,8 +65,8 @@
 			</div>
 		</header>
 
-		<main :class="$style.content" v-for="(run, index) in props.inputData.data" :key="index">
-			<AiRunContentBlock :runData="run" />
+		<main v-for="(run, index) in props.inputData.data" :key="index" :class="$style.content">
+			<AiRunContentBlock :run-data="run" />
 		</main>
 	</div>
 </template>
diff --git a/packages/editor-ui/src/components/RunDataJson.vue b/packages/editor-ui/src/components/RunDataJson.vue
index 42d05866d3..049a46b471 100644
--- a/packages/editor-ui/src/components/RunDataJson.vue
+++ b/packages/editor-ui/src/components/RunDataJson.vue
@@ -1,20 +1,20 @@
 <template>
 	<div :class="$style.jsonDisplay">
 		<Suspense>
-			<run-data-json-actions
+			<RunDataJsonActions
 				v-if="!editMode.enabled"
 				:node="node"
-				:sessioId="sessionId"
-				:displayMode="displayMode"
-				:distanceFromActive="distanceFromActive"
-				:selectedJsonPath="selectedJsonPath"
-				:jsonData="jsonData"
-				:paneType="paneType"
+				:sessio-id="sessionId"
+				:display-mode="displayMode"
+				:distance-from-active="distanceFromActive"
+				:selected-json-path="selectedJsonPath"
+				:json-data="jsonData"
+				:pane-type="paneType"
 			/>
 		</Suspense>
-		<draggable
+		<Draggable
 			type="mapping"
-			targetDataKey="mappable"
+			target-data-key="mappable"
 			:disabled="!mappingEnabled"
 			@dragstart="onDragStart"
 			@dragend="onDragEnd"
@@ -22,13 +22,13 @@
 			<template #preview="{ canDrop, el }">
 				<MappingPill v-if="el" :html="getShortKey(el)" :can-drop="canDrop" />
 			</template>
-			<vue-json-pretty
+			<VueJsonPretty
 				:data="jsonData"
 				:deep="10"
-				:showLength="true"
-				:selectedValue="selectedJsonPath"
-				rootPath=""
-				selectableType="single"
+				:show-length="true"
+				:selected-value="selectedJsonPath"
+				root-path=""
+				selectable-type="single"
 				class="json-data"
 				@update:selectedValue="selectedJsonPath = $event"
 			>
@@ -69,8 +69,8 @@
 						class="ph-no-capture"
 					/>
 				</template>
-			</vue-json-pretty>
-		</draggable>
+			</VueJsonPretty>
+		</Draggable>
 	</div>
 </template>
 
@@ -98,7 +98,7 @@ const RunDataJsonActions = defineAsyncComponent(
 );
 
 export default defineComponent({
-	name: 'run-data-json',
+	name: 'RunDataJson',
 	components: {
 		VueJsonPretty,
 		Draggable,
diff --git a/packages/editor-ui/src/components/RunDataJsonActions.vue b/packages/editor-ui/src/components/RunDataJsonActions.vue
index bd5bb83e03..46ec010a38 100644
--- a/packages/editor-ui/src/components/RunDataJsonActions.vue
+++ b/packages/editor-ui/src/components/RunDataJsonActions.vue
@@ -59,7 +59,7 @@ type JsonPathData = {
 };
 
 export default defineComponent({
-	name: 'run-data-json-actions',
+	name: 'RunDataJsonActions',
 	mixins: [genericHelpers, pinData, copyPaste],
 
 	props: {
diff --git a/packages/editor-ui/src/components/RunDataSchema.vue b/packages/editor-ui/src/components/RunDataSchema.vue
index 03c83517e3..0843bd9f1e 100644
--- a/packages/editor-ui/src/components/RunDataSchema.vue
+++ b/packages/editor-ui/src/components/RunDataSchema.vue
@@ -72,10 +72,10 @@ const onDragEnd = (el: HTMLElement) => {
 		<n8n-info-tip v-if="isDataEmpty">{{
 			i18n.baseText('dataMapping.schemaView.emptyData')
 		}}</n8n-info-tip>
-		<draggable
+		<Draggable
 			v-else
 			type="mapping"
-			targetDataKey="mappable"
+			target-data-key="mappable"
 			:disabled="!mappingEnabled"
 			@dragstart="onDragStart"
 			@dragend="onDragEnd"
@@ -84,20 +84,20 @@ const onDragEnd = (el: HTMLElement) => {
 				<MappingPill v-if="el" :html="el.outerHTML" :can-drop="canDrop" />
 			</template>
 			<div :class="$style.schema">
-				<run-data-schema-item
+				<RunDataSchemaItem
 					:schema="schema"
 					:level="0"
 					:parent="null"
-					:paneType="paneType"
-					:subKey="`${schema.type}-0-0`"
-					:mappingEnabled="mappingEnabled"
-					:draggingPath="draggingPath"
-					:distanceFromActive="distanceFromActive"
+					:pane-type="paneType"
+					:sub-key="`${schema.type}-0-0`"
+					:mapping-enabled="mappingEnabled"
+					:dragging-path="draggingPath"
+					:distance-from-active="distanceFromActive"
 					:node="node"
 					:search="search"
 				/>
 			</div>
-		</draggable>
+		</Draggable>
 	</div>
 </template>
 
diff --git a/packages/editor-ui/src/components/RunDataSchemaItem.vue b/packages/editor-ui/src/components/RunDataSchemaItem.vue
index fe47770c89..6f4bab2517 100644
--- a/packages/editor-ui/src/components/RunDataSchemaItem.vue
+++ b/packages/editor-ui/src/components/RunDataSchemaItem.vue
@@ -120,11 +120,11 @@ const getIconBySchemaType = (type: Schema['type']): string => {
 				:schema="s"
 				:level="level + 1"
 				:parent="schema"
-				:paneType="paneType"
-				:subKey="`${paneType}_${s.type}-${level}-${i}`"
-				:mappingEnabled="mappingEnabled"
-				:draggingPath="draggingPath"
-				:distanceFromActive="distanceFromActive"
+				:pane-type="paneType"
+				:sub-key="`${paneType}_${s.type}-${level}-${i}`"
+				:mapping-enabled="mappingEnabled"
+				:dragging-path="draggingPath"
+				:distance-from-active="distanceFromActive"
 				:node="node"
 				:style="{ transitionDelay: transitionDelay(i) }"
 				:search="search"
diff --git a/packages/editor-ui/src/components/RunDataSearch.vue b/packages/editor-ui/src/components/RunDataSearch.vue
index 79acb53c22..a46eda7289 100644
--- a/packages/editor-ui/src/components/RunDataSearch.vue
+++ b/packages/editor-ui/src/components/RunDataSearch.vue
@@ -77,7 +77,7 @@ onUnmounted(() => {
 			[$style.ioSearchOpened]: opened,
 		}"
 		:style="{ maxWidth }"
-		:modelValue="modelValue"
+		:model-value="modelValue"
 		:placeholder="placeholder"
 		size="small"
 		@update:modelValue="onSearchUpdate"
diff --git a/packages/editor-ui/src/components/RunDataTable.vue b/packages/editor-ui/src/components/RunDataTable.vue
index ce1032094d..fb0fb44b6e 100644
--- a/packages/editor-ui/src/components/RunDataTable.vue
+++ b/packages/editor-ui/src/components/RunDataTable.vue
@@ -1,6 +1,6 @@
 <template>
 	<div :class="$style.dataDisplay">
-		<table :class="$style.table" v-if="tableData.columns && tableData.columns.length === 0">
+		<table v-if="tableData.columns && tableData.columns.length === 0" :class="$style.table">
 			<tr>
 				<th :class="$style.emptyCell"></th>
 				<th :class="$style.tableRightMargin"></th>
@@ -21,7 +21,7 @@
 				<td :class="$style.tableRightMargin"></td>
 			</tr>
 		</table>
-		<table :class="$style.table" v-else>
+		<table v-else :class="$style.table">
 			<thead>
 				<tr>
 					<th v-for="(column, i) in tableData.columns || []" :key="column">
@@ -32,7 +32,7 @@
 									{{ $locale.baseText('dataMapping.dragColumnToFieldHint') }}
 								</div>
 							</template>
-							<draggable
+							<Draggable
 								type="mapping"
 								:data="getExpression(column)"
 								:disabled="!mappingEnabled"
@@ -61,7 +61,7 @@
 										</div>
 									</div>
 								</template>
-							</draggable>
+							</Draggable>
 						</n8n-tooltip>
 					</th>
 					<th v-if="columnLimitExceeded" :class="$style.header">
@@ -90,14 +90,14 @@
 					<th :class="$style.tableRightMargin"></th>
 				</tr>
 			</thead>
-			<draggable
+			<Draggable
+				ref="draggable"
 				tag="tbody"
 				type="mapping"
-				targetDataKey="mappable"
+				target-data-key="mappable"
 				:disabled="!mappingEnabled"
 				@dragstart="onCellDragStart"
 				@dragend="onCellDragEnd"
-				ref="draggable"
 			>
 				<template #preview="{ canDrop, el }">
 					<MappingPill
@@ -116,9 +116,9 @@
 						:key="index2"
 						:data-row="index1"
 						:data-col="index2"
+						:class="hasJsonInColumn(index2) ? $style.minColWidth : $style.limitColWidth"
 						@mouseenter="onMouseEnterCell"
 						@mouseleave="onMouseLeaveCell"
-						:class="hasJsonInColumn(index2) ? $style.minColWidth : $style.limitColWidth"
 					>
 						<TextWithHighlights
 							v-if="isSimple(data)"
@@ -126,11 +126,9 @@
 							:search="search"
 							:class="{ [$style.value]: true, [$style.empty]: isEmpty(data) }"
 						/>
-						<n8n-tree :nodeClass="$style.nodeClass" v-else :value="data">
+						<n8n-tree v-else :node-class="$style.nodeClass" :value="data">
 							<template #label="{ label, path }">
 								<span
-									@mouseenter="() => onMouseEnterKey(path, index2)"
-									@mouseleave="onMouseLeaveKey"
 									:class="{
 										[$style.hoveringKey]: mappingEnabled && isHovering(path, index2),
 										[$style.draggingKey]: isDraggingKey(path, index2),
@@ -141,6 +139,8 @@
 									:data-name="getCellPathName(path, index2)"
 									:data-value="getCellExpression(path, index2)"
 									:data-depth="path.length"
+									@mouseenter="() => onMouseEnterKey(path, index2)"
+									@mouseleave="onMouseLeaveKey"
 									>{{ label || $locale.baseText('runData.unnamedField') }}</span
 								>
 							</template>
@@ -156,7 +156,7 @@
 					<td v-if="columnLimitExceeded"></td>
 					<td :class="$style.tableRightMargin"></td>
 				</tr>
-			</draggable>
+			</Draggable>
 		</table>
 	</div>
 </template>
@@ -182,7 +182,7 @@ const MAX_COLUMNS_LIMIT = 40;
 type DraggableRef = InstanceType<typeof Draggable>;
 
 export default defineComponent({
-	name: 'run-data-table',
+	name: 'RunDataTable',
 	components: { Draggable, MappingPill, TextWithHighlights },
 	props: {
 		node: {
diff --git a/packages/editor-ui/src/components/RunInfo.vue b/packages/editor-ui/src/components/RunInfo.vue
index 3bad5647ac..24a4f3675b 100644
--- a/packages/editor-ui/src/components/RunInfo.vue
+++ b/packages/editor-ui/src/components/RunInfo.vue
@@ -3,7 +3,7 @@
 		v-if="hasStaleData"
 		theme="warning"
 		type="tooltip"
-		tooltipPlacement="right"
+		tooltip-placement="right"
 		data-test-id="node-run-info-stale"
 	>
 		<span
@@ -21,7 +21,7 @@
 		type="tooltip"
 		:theme="theme"
 		:data-test-id="`node-run-info-${theme}`"
-		tooltipPlacement="right"
+		tooltip-placement="right"
 	>
 		<div>
 			<n8n-text :bold="true" size="small"
diff --git a/packages/editor-ui/src/components/SSOLogin.vue b/packages/editor-ui/src/components/SSOLogin.vue
index c37221aae8..12e956f23e 100644
--- a/packages/editor-ui/src/components/SSOLogin.vue
+++ b/packages/editor-ui/src/components/SSOLogin.vue
@@ -22,11 +22,11 @@ const onSSOLogin = async () => {
 			<span>{{ i18n.baseText('sso.login.divider') }}</span>
 		</div>
 		<n8n-button
-			@click="onSSOLogin"
 			size="large"
 			type="primary"
 			outline
 			:label="i18n.baseText('sso.login.button')"
+			@click="onSSOLogin"
 		/>
 	</div>
 </template>
diff --git a/packages/editor-ui/src/components/SaveButton.vue b/packages/editor-ui/src/components/SaveButton.vue
index 0eef3358af..7d332c2ca4 100644
--- a/packages/editor-ui/src/components/SaveButton.vue
+++ b/packages/editor-ui/src/components/SaveButton.vue
@@ -1,11 +1,11 @@
 <template>
 	<span :class="$style.container" data-test-id="save-button">
-		<span :class="$style.saved" v-if="saved">{{ $locale.baseText('saveButton.saved') }}</span>
-		<keyboard-shortcut-tooltip
+		<span v-if="saved" :class="$style.saved">{{ $locale.baseText('saveButton.saved') }}</span>
+		<KeyboardShortcutTooltip
+			v-else
 			:label="$locale.baseText('saveButton.hint')"
 			:shortcut="{ keys: ['s'], metaKey: true }"
 			placement="bottom"
-			v-else
 		>
 			<n8n-button
 				:label="saveButtonLabel"
@@ -14,7 +14,7 @@
 				:class="$style.button"
 				:type="type"
 			/>
-		</keyboard-shortcut-tooltip>
+		</KeyboardShortcutTooltip>
 	</span>
 </template>
 
diff --git a/packages/editor-ui/src/components/ScopesNotice.vue b/packages/editor-ui/src/components/ScopesNotice.vue
index b18637eae2..242836d3cc 100644
--- a/packages/editor-ui/src/components/ScopesNotice.vue
+++ b/packages/editor-ui/src/components/ScopesNotice.vue
@@ -1,5 +1,5 @@
 <template>
-	<n8n-notice :content="scopesShortContent" :fullContent="scopesFullContent" />
+	<n8n-notice :content="scopesShortContent" :full-content="scopesFullContent" />
 </template>
 
 <script lang="ts">
diff --git a/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationCard.ee.vue b/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationCard.ee.vue
index d72aaa960a..bdf3297cdd 100644
--- a/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationCard.ee.vue
+++ b/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationCard.ee.vue
@@ -13,7 +13,7 @@
 			</div>
 		</template>
 		<template #append>
-			<div :class="$style.cardActions" ref="cardActions">
+			<div ref="cardActions" :class="$style.cardActions">
 				<div :class="$style.activeStatusText" data-test-id="destination-activator-status">
 					<n8n-text v-if="nodeParameters.enabled" :color="'success'" size="small" bold>
 						{{ $locale.baseText('workflowActivator.active') }}
@@ -26,8 +26,7 @@
 				<el-switch
 					class="mr-s"
 					:disabled="readonly"
-					:modelValue="nodeParameters.enabled"
-					@update:modelValue="onEnabledSwitched($event, destination.id)"
+					:model-value="nodeParameters.enabled"
 					:title="
 						nodeParameters.enabled
 							? $locale.baseText('workflowActivator.deactivateWorkflow')
@@ -36,6 +35,7 @@
 					active-color="#13ce66"
 					inactive-color="#8899AA"
 					data-test-id="workflow-activate-switch"
+					@update:modelValue="onEnabledSwitched($event, destination.id)"
 				>
 				</el-switch>
 
@@ -63,18 +63,18 @@ export const DESTINATION_LIST_ITEM_ACTIONS = {
 };
 
 export default defineComponent({
+	components: {},
+	setup() {
+		return {
+			...useMessage(),
+		};
+	},
 	data() {
 		return {
 			EnterpriseEditionFeature,
 			nodeParameters: {} as MessageEventBusDestinationOptions,
 		};
 	},
-	setup() {
-		return {
-			...useMessage(),
-		};
-	},
-	components: {},
 	props: {
 		eventBus: {
 			type: Object as PropType<EventBus>,
diff --git a/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue b/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue
index 618907b969..c6d5c61f20 100644
--- a/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue
+++ b/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue
@@ -1,15 +1,15 @@
 <template>
 	<Modal
 		:name="modalName"
-		:eventBus="modalBus"
-		:beforeClose="onModalClose"
+		:event-bus="modalBus"
+		:before-close="onModalClose"
 		:scrollable="true"
 		:center="true"
 		:loading="loading"
-		:minWidth="isTypeAbstract ? '460px' : '70%'"
-		:maxWidth="isTypeAbstract ? '460px' : '70%'"
-		:minHeight="isTypeAbstract ? '160px' : '650px'"
-		:maxHeight="isTypeAbstract ? '300px' : '650px'"
+		:min-width="isTypeAbstract ? '460px' : '70%'"
+		:max-width="isTypeAbstract ? '460px' : '70%'"
+		:min-height="isTypeAbstract ? '160px' : '650px'"
+		:max-height="isTypeAbstract ? '300px' : '650px'"
 		data-test-id="destination-modal"
 	>
 		<template #header>
@@ -22,7 +22,7 @@
 				<div :class="$style.header">
 					<div :class="$style.destinationInfo">
 						<InlineNameEdit
-							:modelValue="headerLabel"
+							:model-value="headerLabel"
 							:subtitle="!isTypeAbstract ? $locale.baseText(typeLabelName) : 'Select type'"
 							:readonly="isTypeAbstract"
 							type="Credential"
@@ -42,8 +42,8 @@
 							type="tertiary"
 							label="Send Test-Event"
 							:disabled="!hasOnceBeenSaved || !unchanged"
-							@click="sendTestEvent"
 							data-test-id="destination-test-button"
+							@click="sendTestEvent"
 						/>
 						<template v-if="canManageLogStreaming">
 							<n8n-icon-button
@@ -53,15 +53,15 @@
 								type="tertiary"
 								:disabled="isSaving"
 								:loading="isDeleting"
-								@click="removeThis"
 								data-test-id="destination-delete-button"
+								@click="removeThis"
 							/>
 							<SaveButton
 								:saved="unchanged && hasOnceBeenSaved"
 								:disabled="isTypeAbstract || unchanged"
-								:savingLabel="$locale.baseText('settings.log-streaming.saving')"
-								@click="saveDestination"
+								:saving-label="$locale.baseText('settings.log-streaming.saving')"
 								data-test-id="destination-save-button"
+								@click="saveDestination"
 							/>
 						</template>
 					</div>
@@ -75,18 +75,18 @@
 					<n8n-input-label
 						:class="$style.typeSelector"
 						:label="$locale.baseText('settings.log-streaming.selecttype')"
-						:tooltipText="$locale.baseText('settings.log-streaming.selecttypehint')"
+						:tooltip-text="$locale.baseText('settings.log-streaming.selecttypehint')"
 						:bold="false"
 						size="medium"
 						:underline="false"
 					>
 						<n8n-select
-							:modelValue="typeSelectValue"
+							ref="typeSelectRef"
+							:model-value="typeSelectValue"
 							:placeholder="typeSelectPlaceholder"
-							@update:modelValue="onTypeSelectInput"
 							data-test-id="select-destination-type"
 							name="name"
-							ref="typeSelectRef"
+							@update:modelValue="onTypeSelectInput"
 						>
 							<n8n-option
 								v-for="option in typeSelectOptions || []"
@@ -98,9 +98,9 @@
 						<div class="mt-m text-right">
 							<n8n-button
 								size="large"
-								@click="onContinueAddClicked"
 								data-test-id="select-destination-button"
 								:disabled="!typeSelectValue"
+								@click="onContinueAddClicked"
 							>
 								{{ $locale.baseText(`settings.log-streaming.continue`) }}
 							</n8n-button>
@@ -111,33 +111,33 @@
 					<div :class="$style.sidebar">
 						<n8n-menu mode="tabs" :items="sidebarItems" @select="onTabSelect"></n8n-menu>
 					</div>
-					<div v-if="activeTab === 'settings'" :class="$style.mainContent" ref="content">
+					<div v-if="activeTab === 'settings'" ref="content" :class="$style.mainContent">
 						<template v-if="isTypeWebhook">
-							<parameter-input-list
+							<ParameterInputList
 								:parameters="webhookDescription"
-								:hideDelete="true"
-								:nodeValues="nodeParameters"
-								:isReadOnly="!canManageLogStreaming"
+								:hide-delete="true"
+								:node-values="nodeParameters"
+								:is-read-only="!canManageLogStreaming"
 								path=""
 								@valueChanged="valueChanged"
 							/>
 						</template>
 						<template v-else-if="isTypeSyslog">
-							<parameter-input-list
+							<ParameterInputList
 								:parameters="syslogDescription"
-								:hideDelete="true"
-								:nodeValues="nodeParameters"
-								:isReadOnly="!canManageLogStreaming"
+								:hide-delete="true"
+								:node-values="nodeParameters"
+								:is-read-only="!canManageLogStreaming"
 								path=""
 								@valueChanged="valueChanged"
 							/>
 						</template>
 						<template v-else-if="isTypeSentry">
-							<parameter-input-list
+							<ParameterInputList
 								:parameters="sentryDescription"
-								:hideDelete="true"
-								:nodeValues="nodeParameters"
-								:isReadOnly="!canManageLogStreaming"
+								:hide-delete="true"
+								:node-values="nodeParameters"
+								:is-read-only="!canManageLogStreaming"
 								path=""
 								@valueChanged="valueChanged"
 							/>
@@ -152,11 +152,11 @@
 								size="medium"
 								:underline="false"
 							/>
-							<event-selection
-								:destinationId="destination.id"
+							<EventSelection
+								:destination-id="destination.id"
+								:readonly="!canManageLogStreaming"
 								@input="onInput"
 								@change="valueChanged"
-								:readonly="!canManageLogStreaming"
 							/>
 						</div>
 					</div>
@@ -211,7 +211,14 @@ import { useTelemetry } from '@/composables/useTelemetry';
 import { useRootStore } from '@/stores/n8nRoot.store';
 
 export default defineComponent({
-	name: 'event-destination-settings-modal',
+	name: 'EventDestinationSettingsModal',
+	components: {
+		Modal,
+		ParameterInputList,
+		InlineNameEdit,
+		SaveButton,
+		EventSelection,
+	},
 	props: {
 		modalName: String,
 		destination: {
@@ -223,13 +230,6 @@ export default defineComponent({
 			type: Object as PropType<EventBus>,
 		},
 	},
-	components: {
-		Modal,
-		ParameterInputList,
-		InlineNameEdit,
-		SaveButton,
-		EventSelection,
-	},
 	setup() {
 		return {
 			...useMessage(),
diff --git a/packages/editor-ui/src/components/SettingsLogStreaming/EventSelection.ee.vue b/packages/editor-ui/src/components/SettingsLogStreaming/EventSelection.ee.vue
index 5c7c3e2037..a63ca9eae3 100644
--- a/packages/editor-ui/src/components/SettingsLogStreaming/EventSelection.ee.vue
+++ b/packages/editor-ui/src/components/SettingsLogStreaming/EventSelection.ee.vue
@@ -6,12 +6,12 @@
 			shadow="never"
 		>
 			<!-- <template #header> -->
-			<checkbox
-				:modelValue="group.selected"
+			<Checkbox
+				:model-value="group.selected"
 				:indeterminate="!group.selected && group.indeterminate"
+				:disabled="readonly"
 				@update:modelValue="onInput"
 				@change="onCheckboxChecked(group.name, $event)"
-				:disabled="readonly"
 			>
 				<strong>{{ groupLabelName(group.name) }}</strong>
 				<n8n-tooltip
@@ -25,13 +25,13 @@
 						{{ groupLabelInfo(group.name) }}
 					</template>
 				</n8n-tooltip>
-			</checkbox>
-			<checkbox
+			</Checkbox>
+			<Checkbox
 				v-if="group.name === 'n8n.audit'"
-				:modelValue="logStreamingStore.items[destinationId]?.destination.anonymizeAuditMessages"
+				:model-value="logStreamingStore.items[destinationId]?.destination.anonymizeAuditMessages"
+				:disabled="readonly"
 				@update:modelValue="onInput"
 				@change="anonymizeAuditMessagesChanged"
-				:disabled="readonly"
 			>
 				{{ $locale.baseText('settings.log-streaming.tab.events.anonymize') }}
 				<n8n-tooltip placement="top" :popper-class="$style.tooltipPopper">
@@ -40,7 +40,7 @@
 						{{ $locale.baseText('settings.log-streaming.tab.events.anonymize.info') }}
 					</template>
 				</n8n-tooltip>
-			</checkbox>
+			</Checkbox>
 			<!-- </template> -->
 			<ul :class="$style.eventList">
 				<li
@@ -48,8 +48,8 @@
 					:key="event.name"
 					:class="`${$style.eventListItem} ${group.selected ? $style.eventListItemDisabled : ''}`"
 				>
-					<checkbox
-						:modelValue="event.selected || group.selected"
+					<Checkbox
+						:model-value="event.selected || group.selected"
 						:indeterminate="event.indeterminate"
 						:disabled="group.selected || readonly"
 						@update:modelValue="onInput"
@@ -61,7 +61,7 @@
 								{{ event.name }}
 							</template>
 						</n8n-tooltip>
-					</checkbox>
+					</Checkbox>
 				</li>
 			</ul>
 		</div>
@@ -75,7 +75,10 @@ import type { BaseTextKey } from '@/plugins/i18n';
 import { useLogStreamingStore } from '@/stores/logStreaming.store';
 
 export default {
-	name: 'event-selection',
+	name: 'EventSelection',
+	components: {
+		Checkbox,
+	},
 	props: {
 		destinationId: {
 			type: String,
@@ -83,9 +86,6 @@ export default {
 		},
 		readonly: Boolean,
 	},
-	components: {
-		Checkbox,
-	},
 	data() {
 		return {
 			unchanged: true,
diff --git a/packages/editor-ui/src/components/SettingsSidebar.vue b/packages/editor-ui/src/components/SettingsSidebar.vue
index 22b003d032..84821d425d 100644
--- a/packages/editor-ui/src/components/SettingsSidebar.vue
+++ b/packages/editor-ui/src/components/SettingsSidebar.vue
@@ -2,7 +2,7 @@
 	<div :class="$style.container">
 		<n8n-menu :items="sidebarMenuItems" @select="handleSelect">
 			<template #header>
-				<div :class="$style.returnButton" @click="$emit('return')" data-test-id="settings-back">
+				<div :class="$style.returnButton" data-test-id="settings-back" @click="$emit('return')">
 					<i class="mr-xs">
 						<font-awesome-icon icon="arrow-left" />
 					</i>
@@ -11,7 +11,7 @@
 			</template>
 			<template #menuSuffix>
 				<div :class="$style.versionContainer">
-					<n8n-link @click="onVersionClick" size="small">
+					<n8n-link size="small" @click="onVersionClick">
 						{{ $locale.baseText('settings.version') }} {{ rootStore.versionCli }}
 					</n8n-link>
 				</div>
diff --git a/packages/editor-ui/src/components/ShortenName.vue b/packages/editor-ui/src/components/ShortenName.vue
index 1287b78bcc..9d3958457d 100644
--- a/packages/editor-ui/src/components/ShortenName.vue
+++ b/packages/editor-ui/src/components/ShortenName.vue
@@ -1,6 +1,6 @@
 <template>
 	<span :title="name" :data-test-id="testId">
-		<slot :shortenedName="shortenedName"></slot>
+		<slot :shortened-name="shortenedName"></slot>
 	</span>
 </template>
 
diff --git a/packages/editor-ui/src/components/SourceControlPullModal.ee.vue b/packages/editor-ui/src/components/SourceControlPullModal.ee.vue
index 780a19add9..9bca97122b 100644
--- a/packages/editor-ui/src/components/SourceControlPullModal.ee.vue
+++ b/packages/editor-ui/src/components/SourceControlPullModal.ee.vue
@@ -89,7 +89,7 @@ async function pullWorkfolder() {
 	<Modal
 		width="500px"
 		:title="i18n.baseText('settings.sourceControl.modals.pull.title')"
-		:eventBus="data.eventBus"
+		:event-bus="data.eventBus"
 		:name="SOURCE_CONTROL_PULL_MODAL_KEY"
 	>
 		<template #content>
diff --git a/packages/editor-ui/src/components/SourceControlPushModal.ee.vue b/packages/editor-ui/src/components/SourceControlPushModal.ee.vue
index 581eb3487b..bd24f7f29c 100644
--- a/packages/editor-ui/src/components/SourceControlPushModal.ee.vue
+++ b/packages/editor-ui/src/components/SourceControlPushModal.ee.vue
@@ -233,7 +233,7 @@ async function commitAndPush() {
 	<Modal
 		width="812px"
 		:title="i18n.baseText('settings.sourceControl.modals.push.title')"
-		:eventBus="data.eventBus"
+		:event-bus="data.eventBus"
 		:name="SOURCE_CONTROL_PUSH_MODAL_KEY"
 	>
 		<template #content>
@@ -250,13 +250,13 @@ async function commitAndPush() {
 						<div class="mt-l mb-2xs">
 							<n8n-checkbox
 								:indeterminate="selectAllIndeterminate"
-								:modelValue="selectAll"
+								:model-value="selectAll"
 								@update:modelValue="onToggleSelectAll"
 							>
 								<n8n-text bold tag="strong">
 									{{ i18n.baseText('settings.sourceControl.modals.push.workflowsToCommit') }}
 								</n8n-text>
-								<n8n-text tag="strong" v-show="workflowFiles.length > 0">
+								<n8n-text v-show="workflowFiles.length > 0" tag="strong">
 									({{ stagedWorkflowFiles.length }}/{{ workflowFiles.length }})
 								</n8n-text>
 							</n8n-checkbox>
@@ -270,7 +270,7 @@ async function commitAndPush() {
 						>
 							<div :class="$style.listItemBody">
 								<n8n-checkbox
-									:modelValue="staged[file.file]"
+									:model-value="staged[file.file]"
 									:class="$style.listItemCheckbox"
 									@update:modelValue="setStagedStatus(file, !staged[file.file])"
 								/>
@@ -280,7 +280,7 @@ async function commitAndPush() {
 										<span v-if="file.type === 'credential'"> Deleted Credential: </span>
 										<strong>{{ file.name || file.id }}</strong>
 									</n8n-text>
-									<n8n-text bold v-else> {{ file.name }} </n8n-text>
+									<n8n-text v-else bold> {{ file.name }} </n8n-text>
 									<div v-if="file.updatedAt">
 										<n8n-text color="text-light" size="small">
 											{{ renderUpdatedAt(file) }}
@@ -289,8 +289,8 @@ async function commitAndPush() {
 								</div>
 								<div :class="$style.listItemStatus">
 									<n8n-badge
-										class="mr-2xs"
 										v-if="workflowId === file.id && file.type === 'workflow'"
+										class="mr-2xs"
 									>
 										Current workflow
 									</n8n-badge>
@@ -301,7 +301,7 @@ async function commitAndPush() {
 							</div>
 						</n8n-card>
 					</div>
-					<n8n-notice class="mt-0" v-else>
+					<n8n-notice v-else class="mt-0">
 						<i18n-t keypath="settings.sourceControl.modals.push.noWorkflowChanges">
 							<template #link>
 								<n8n-link size="small" :to="i18n.baseText('settings.sourceControl.docs.using.url')">
@@ -317,8 +317,8 @@ async function commitAndPush() {
 						{{ i18n.baseText('settings.sourceControl.modals.push.commitMessage') }}
 					</n8n-text>
 					<n8n-input
-						type="text"
 						v-model="commitMessage"
+						type="text"
 						:placeholder="
 							i18n.baseText('settings.sourceControl.modals.push.commitMessage.placeholder')
 						"
diff --git a/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue b/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue
index f9c9224bb7..06a5cd769c 100644
--- a/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue
+++ b/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue
@@ -1,11 +1,11 @@
 <template>
-	<div :class="$style.sqlEditor" v-on-click-outside="onBlur">
+	<div v-on-click-outside="onBlur" :class="$style.sqlEditor">
 		<div ref="sqlEditor" data-test-id="sql-editor-container"></div>
 		<InlineExpressionEditorOutput
 			:segments="segments"
-			:isReadOnly="isReadOnly"
+			:is-read-only="isReadOnly"
 			:visible="isFocused"
-			:hoveringItemNumber="hoveringItemNumber"
+			:hovering-item-number="hoveringItemNumber"
 		/>
 	</div>
 </template>
@@ -66,7 +66,7 @@ type SQLEditorData = {
 };
 
 export default defineComponent({
-	name: 'sql-editor',
+	name: 'SqlEditor',
 	components: {
 		InlineExpressionEditorOutput,
 	},
@@ -100,21 +100,6 @@ export default defineComponent({
 			skipSegments: ['Statement', 'CompositeIdentifier', 'Parens'],
 		};
 	},
-	watch: {
-		'ndvStore.ndvInputData'() {
-			this.editor?.dispatch({
-				changes: {
-					from: 0,
-					to: this.editor.state.doc.length,
-					insert: this.modelValue,
-				},
-			});
-
-			setTimeout(() => {
-				this.editor?.contentDOM.blur();
-			});
-		},
-	},
 	computed: {
 		doc(): string {
 			return this.editor?.state.doc.toString() ?? '';
@@ -188,6 +173,21 @@ export default defineComponent({
 			return extensions;
 		},
 	},
+	watch: {
+		'ndvStore.ndvInputData'() {
+			this.editor?.dispatch({
+				changes: {
+					from: 0,
+					to: this.editor.state.doc.length,
+					insert: this.modelValue,
+				},
+			});
+
+			setTimeout(() => {
+				this.editor?.contentDOM.blur();
+			});
+		},
+	},
 	mounted() {
 		if (!this.isReadOnly) codeNodeEditorEventBus.on('error-line-number', this.highlightLine);
 
diff --git a/packages/editor-ui/src/components/Sticky.vue b/packages/editor-ui/src/components/Sticky.vue
index 42a3897cbc..5c194437d2 100644
--- a/packages/editor-ui/src/components/Sticky.vue
+++ b/packages/editor-ui/src/components/Sticky.vue
@@ -1,8 +1,8 @@
 <template>
 	<div
-		class="sticky-wrapper"
 		:id="nodeId"
 		:ref="data.name"
+		class="sticky-wrapper"
 		:style="stickyPosition"
 		:data-name="data.name"
 		data-test-id="sticky"
@@ -16,25 +16,25 @@
 			}"
 			:style="stickySize"
 		>
-			<div class="select-sticky-background" v-show="isSelected" />
+			<div v-show="isSelected" class="select-sticky-background" />
 			<div
+				v-touch:start="touchStart"
+				v-touch:end="touchEnd"
 				class="sticky-box"
 				@click.left="mouseLeftClick"
 				@contextmenu="onContextMenu"
-				v-touch:start="touchStart"
-				v-touch:end="touchEnd"
 			>
 				<n8n-sticky
-					:modelValue="node.parameters.content"
+					:id="node.id"
+					:model-value="node.parameters.content"
 					:height="node.parameters.height"
 					:width="node.parameters.width"
 					:scale="nodeViewScale"
-					:backgroundColor="node.parameters.color"
-					:id="node.id"
-					:readOnly="isReadOnly"
-					:defaultText="defaultText"
-					:editMode="isActive && !isReadOnly"
-					:gridSize="gridSize"
+					:background-color="node.parameters.color"
+					:read-only="isReadOnly"
+					:default-text="defaultText"
+					:edit-mode="isActive && !isReadOnly"
+					:grid-size="gridSize"
 					@edit="onEdit"
 					@resizestart="onResizeStart"
 					@resize="onResize"
@@ -76,11 +76,10 @@
 					</template>
 					<div class="content">
 						<div
-							class="color"
-							data-test-id="color"
 							v-for="(_, index) in Array.from({ length: 7 })"
 							:key="index"
-							v-on:click="changeColor(index + 1)"
+							class="color"
+							data-test-id="color"
 							:class="`sticky-color-${index + 1}`"
 							:style="{
 								'border-width': '1px',
@@ -93,6 +92,7 @@
 										? `0 0 0 1px var(--color-sticky-background-${index + 1})`
 										: 'none',
 							}"
+							@click="changeColor(index + 1)"
 						></div>
 					</div>
 				</n8n-popover>
@@ -126,6 +126,14 @@ import { useContextMenu } from '@/composables/useContextMenu';
 export default defineComponent({
 	name: 'Sticky',
 	mixins: [nodeBase, workflowHelpers],
+	props: {
+		nodeViewScale: {
+			type: Number,
+		},
+		gridSize: {
+			type: Number,
+		},
+	},
 	setup() {
 		const colorPopoverTrigger = ref<HTMLDivElement>();
 		const forceActions = ref(false);
@@ -141,14 +149,6 @@ export default defineComponent({
 
 		return { colorPopoverTrigger, contextMenu, forceActions, setForceActions };
 	},
-	props: {
-		nodeViewScale: {
-			type: Number,
-		},
-		gridSize: {
-			type: Number,
-		},
-	},
 	computed: {
 		...mapStores(useNodeTypesStore, useNDVStore, useUIStore, useWorkflowsStore),
 		defaultText(): string {
diff --git a/packages/editor-ui/src/components/SuggestedTemplates/SuggestedTemplatesPage.vue b/packages/editor-ui/src/components/SuggestedTemplates/SuggestedTemplatesPage.vue
index 3d9359e908..29c2f5aba0 100644
--- a/packages/editor-ui/src/components/SuggestedTemplates/SuggestedTemplatesPage.vue
+++ b/packages/editor-ui/src/components/SuggestedTemplates/SuggestedTemplatesPage.vue
@@ -4,9 +4,8 @@ import { computed } from 'vue';
 import { useUsersStore } from '@/stores/users.store';
 import { useUIStore } from '@/stores/ui.store';
 import { VIEWS } from '@/constants';
-import type { ITemplatesCollection } from '@/Interface';
+import type { ITemplatesCollection, IUser } from '@/Interface';
 import SuggestedTemplatesSection from '@/components/SuggestedTemplates/SuggestedTemplatesSection.vue';
-import type { IUser } from '@/Interface';
 
 const usersStore = useUsersStore();
 const uiStore = useUIStore();
@@ -15,7 +14,7 @@ const router = useRouter();
 const currentUser = computed(() => usersStore.currentUser);
 
 const upperCaseFirstName = (user: IUser | null) => {
-	if (!user || !user.firstName) return;
+	if (!user?.firstName) return;
 	return user.firstName?.charAt(0)?.toUpperCase() + user?.firstName?.slice(1);
 };
 
@@ -75,11 +74,11 @@ defineExpose({
 			</n8n-text>
 		</div>
 		<div :class="$style.content">
-			<suggested-templates-section
+			<SuggestedTemplatesSection
 				v-for="section in uiStore.suggestedTemplates?.sections"
 				:key="section.title"
 				:section="section"
-				:showTitle="false"
+				:show-title="false"
 			/>
 		</div>
 		<div>
diff --git a/packages/editor-ui/src/components/SuggestedTemplates/SuggestedTemplatesPreviewModal.vue b/packages/editor-ui/src/components/SuggestedTemplates/SuggestedTemplatesPreviewModal.vue
index fda9d5eb9c..c1437b6152 100644
--- a/packages/editor-ui/src/components/SuggestedTemplates/SuggestedTemplatesPreviewModal.vue
+++ b/packages/editor-ui/src/components/SuggestedTemplates/SuggestedTemplatesPreviewModal.vue
@@ -77,11 +77,11 @@ function openCanvas() {
 			</n8n-heading>
 		</template>
 		<template #content>
-			<workflow-preview
+			<WorkflowPreview
 				:loading="false"
 				:workflow="$props.data.workflow.preview as IWorkflowDb"
-				:canOpenNDV="false"
-				:hideNodeIssues="true"
+				:can-open-n-d-v="false"
+				:hide-node-issues="true"
 				@close="uiStore.closeModal(SUGGESTED_TEMPLATES_PREVIEW_MODAL_KEY)"
 			/>
 		</template>
@@ -91,10 +91,10 @@ function openCanvas() {
 			</div>
 			<div :class="$style.footerButtons">
 				<n8n-button
-					@click="openCanvas"
 					float="right"
 					data-test-id="use-template-button"
 					:label="$locale.baseText('suggestedTemplates.modal.button.label')"
+					@click="openCanvas"
 				/>
 			</div>
 		</template>
diff --git a/packages/editor-ui/src/components/SuggestedTemplates/SuggestedTemplatesSection.vue b/packages/editor-ui/src/components/SuggestedTemplates/SuggestedTemplatesSection.vue
index cd5af72e51..e0956281d1 100644
--- a/packages/editor-ui/src/components/SuggestedTemplates/SuggestedTemplatesSection.vue
+++ b/packages/editor-ui/src/components/SuggestedTemplates/SuggestedTemplatesSection.vue
@@ -61,12 +61,12 @@ function onOpenCollection({ id }: { event: Event; id: number }) {
 			</n8n-text>
 		</div>
 		<div :class="$style.content">
-			<templates-info-carousel
+			<TemplatesInfoCarousel
 				:collections="sectionTemplates"
 				:loading="false"
-				:showItemCount="false"
-				:showNavigation="false"
-				cardsWidth="24%"
+				:show-item-count="false"
+				:show-navigation="false"
+				cards-width="24%"
 				@openCollection="onOpenCollection"
 			/>
 		</div>
diff --git a/packages/editor-ui/src/components/TagsContainer.vue b/packages/editor-ui/src/components/TagsContainer.vue
index 342b662d34..8c7fdf1ebc 100644
--- a/packages/editor-ui/src/components/TagsContainer.vue
+++ b/packages/editor-ui/src/components/TagsContainer.vue
@@ -1,12 +1,12 @@
 <template>
 	<IntersectionObserver
+		ref="tagsContainer"
 		:threshold="1.0"
-		@observed="onObserved"
 		class="tags-container"
 		:style="style"
 		:enabled="responsive"
 		:event-bus="intersectionEventBus"
-		ref="tagsContainer"
+		@observed="onObserved"
 	>
 		<span class="tags">
 			<span
@@ -16,21 +16,21 @@
 				@click="(e) => onClick(e, tag)"
 			>
 				<el-tag
+					v-if="tag.isCount"
 					:title="tag.title"
 					type="info"
 					size="small"
-					v-if="tag.isCount"
 					class="count-container"
 					:disable-transitions="true"
 				>
 					{{ tag.name }}
 				</el-tag>
 				<IntersectionObserved
+					v-else
 					:class="{ hidden: tag.hidden }"
 					:data-id="tag.id"
 					:enabled="responsive"
 					:event-bus="intersectionEventBus"
-					v-else
 				>
 					<el-tag
 						:title="tag.name"
diff --git a/packages/editor-ui/src/components/TagsDropdown.vue b/packages/editor-ui/src/components/TagsDropdown.vue
index 0b1980411e..fd5cfa5879 100644
--- a/packages/editor-ui/src/components/TagsDropdown.vue
+++ b/packages/editor-ui/src/components/TagsDropdown.vue
@@ -1,20 +1,20 @@
 <template>
 	<div
+		v-on-click-outside="onClickOutside"
 		:class="{ 'tags-container': true, focused }"
 		@keydown.stop
-		v-on-click-outside="onClickOutside"
 	>
 		<n8n-select
+			ref="selectRef"
 			:teleported="true"
-			:modelValue="appliedTags"
+			:model-value="appliedTags"
 			:loading="isLoading"
 			:placeholder="placeholder"
 			:filter-method="filterOptions"
 			filterable
 			multiple
-			:allowCreate="createEnabled"
+			:allow-create="createEnabled"
 			:reserve-keyword="false"
-			ref="selectRef"
 			loading-text="..."
 			popper-class="tags-dropdown"
 			data-test-id="tags-dropdown"
@@ -25,9 +25,9 @@
 			<n8n-option
 				v-if="options.length === 0 && filter && createEnabled"
 				:key="CREATE_KEY"
+				ref="createRef"
 				:value="CREATE_KEY"
 				class="ops"
-				ref="createRef"
 			>
 				<font-awesome-icon icon="plus-circle" />
 				<span>
@@ -45,12 +45,12 @@
 			<!-- key is id+index for keyboard navigation to work well with filter -->
 			<n8n-option
 				v-for="(tag, i) in options"
-				:value="tag.id"
 				:key="tag.id + '_' + i"
+				ref="tagRefs"
+				:value="tag.id"
 				:label="tag.name"
 				class="tag"
 				data-test-id="tag"
-				ref="tagRefs"
 			/>
 
 			<n8n-option :key="MANAGE_KEY" :value="MANAGE_KEY" class="ops manage-tags">
diff --git a/packages/editor-ui/src/components/TagsManager/TagsManager.vue b/packages/editor-ui/src/components/TagsManager/TagsManager.vue
index fb34b38b91..ee3245aa8e 100644
--- a/packages/editor-ui/src/components/TagsManager/TagsManager.vue
+++ b/packages/editor-ui/src/components/TagsManager/TagsManager.vue
@@ -3,27 +3,27 @@
 		id="tags-manager-modal"
 		:title="$locale.baseText('tagsManager.manageTags')"
 		:name="TAGS_MANAGER_MODAL_KEY"
-		:eventBus="modalBus"
+		:event-bus="modalBus"
+		min-width="620px"
+		min-height="420px"
 		@enter="onEnter"
-		minWidth="620px"
-		minHeight="420px"
 	>
 		<template #content>
 			<el-row>
 				<TagsView
 					v-if="hasTags || isCreating"
-					:isLoading="isLoading"
+					:is-loading="isLoading"
 					:tags="tags"
 					@create="onCreate"
 					@update="onUpdate"
 					@delete="onDelete"
 					@disableCreate="onDisableCreate"
 				/>
-				<NoTagsView @enableCreate="onEnableCreate" v-else />
+				<NoTagsView v-else @enableCreate="onEnableCreate" />
 			</el-row>
 		</template>
 		<template #footer="{ close }">
-			<n8n-button :label="$locale.baseText('tagsManager.done')" @click="close" float="right" />
+			<n8n-button :label="$locale.baseText('tagsManager.done')" float="right" @click="close" />
 		</template>
 	</Modal>
 </template>
@@ -44,14 +44,16 @@ import { createEventBus } from 'n8n-design-system/utils';
 
 export default defineComponent({
 	name: 'TagsManager',
+	components: {
+		TagsView,
+		NoTagsView,
+		Modal,
+	},
 	setup() {
 		return {
 			...useToast(),
 		};
 	},
-	created() {
-		void this.tagsStore.fetchAll({ force: true, withUsageCount: true });
-	},
 	data() {
 		const tagIds = useTagsStore().allTags.map((tag) => tag.id);
 		return {
@@ -61,10 +63,8 @@ export default defineComponent({
 			TAGS_MANAGER_MODAL_KEY,
 		};
 	},
-	components: {
-		TagsView,
-		NoTagsView,
-		Modal,
+	created() {
+		void this.tagsStore.fetchAll({ force: true, withUsageCount: true });
 	},
 	computed: {
 		...mapStores(useTagsStore),
diff --git a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue
index 4f55ccdf64..b07f4366de 100644
--- a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue
+++ b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue
@@ -1,25 +1,25 @@
 <template>
 	<el-table
+		ref="table"
+		v-loading="isLoading"
 		class="tags-table"
 		stripe
 		max-height="450"
-		ref="table"
 		:empty-text="$locale.baseText('tagsTable.noMatchingTagsExist')"
 		:data="rows"
 		:span-method="getSpan"
 		:row-class-name="getRowClasses"
-		v-loading="isLoading"
 	>
 		<el-table-column :label="$locale.baseText('tagsTable.name')">
 			<template #default="scope">
-				<div class="name" :key="scope.row.id" @keydown.stop>
+				<div :key="scope.row.id" class="name" @keydown.stop>
 					<transition name="fade" mode="out-in">
 						<n8n-input
 							v-if="scope.row.create || scope.row.update"
-							:modelValue="newName"
+							ref="nameInput"
+							:model-value="newName"
 							:maxlength="maxLength"
 							@update:modelValue="onNewNameChange"
-							ref="nameInput"
 						></n8n-input>
 						<span v-else-if="scope.row.delete">
 							<span>{{ $locale.baseText('tagsTable.areYouSureYouWantToDeleteThisTag') }}</span>
@@ -47,58 +47,58 @@
 		<el-table-column>
 			<template #default="scope">
 				<transition name="fade" mode="out-in">
-					<div class="ops" v-if="scope.row.create">
+					<div v-if="scope.row.create" class="ops">
 						<n8n-button
 							:label="$locale.baseText('tagsTable.cancel')"
-							@click.stop="cancel"
 							type="secondary"
 							:disabled="isSaving"
+							@click.stop="cancel"
 						/>
 						<n8n-button
 							:label="$locale.baseText('tagsTable.createTag')"
-							@click.stop="apply"
 							:loading="isSaving"
+							@click.stop="apply"
 						/>
 					</div>
-					<div class="ops" v-else-if="scope.row.update">
+					<div v-else-if="scope.row.update" class="ops">
 						<n8n-button
 							:label="$locale.baseText('tagsTable.cancel')"
-							@click.stop="cancel"
 							type="secondary"
 							:disabled="isSaving"
+							@click.stop="cancel"
 						/>
 						<n8n-button
 							:label="$locale.baseText('tagsTable.saveChanges')"
-							@click.stop="apply"
 							:loading="isSaving"
+							@click.stop="apply"
 						/>
 					</div>
-					<div class="ops" v-else-if="scope.row.delete">
+					<div v-else-if="scope.row.delete" class="ops">
 						<n8n-button
 							:label="$locale.baseText('tagsTable.cancel')"
-							@click.stop="cancel"
 							type="secondary"
 							:disabled="isSaving"
+							@click.stop="cancel"
 						/>
 						<n8n-button
 							:label="$locale.baseText('tagsTable.deleteTag')"
-							@click.stop="apply"
 							:loading="isSaving"
+							@click.stop="apply"
 						/>
 					</div>
-					<div class="ops main" v-else-if="!scope.row.disable">
+					<div v-else-if="!scope.row.disable" class="ops main">
 						<n8n-icon-button
 							:title="$locale.baseText('tagsTable.editTag')"
-							@click.stop="enableUpdate(scope.row)"
 							icon="pen"
 							data-test-id="edit-tag-button"
+							@click.stop="enableUpdate(scope.row)"
 						/>
 						<n8n-icon-button
 							v-if="scope.row.canDelete"
 							:title="$locale.baseText('tagsTable.deleteTag')"
-							@click.stop="enableDelete(scope.row)"
 							icon="trash"
 							data-test-id="delete-tag-button"
+							@click.stop="enableDelete(scope.row)"
 						/>
 					</div>
 				</transition>
@@ -128,6 +128,13 @@ export default defineComponent({
 			maxLength: MAX_TAG_NAME_LENGTH,
 		};
 	},
+	watch: {
+		rows(newValue: ITagRow[] | undefined) {
+			if (newValue?.[0] && newValue[0].create) {
+				this.focusOnCreate();
+			}
+		},
+	},
 	mounted() {
 		if (this.rows.length === 1 && this.rows[0].create) {
 			this.focusOnInput();
@@ -204,13 +211,6 @@ export default defineComponent({
 			this.focusOnInput();
 		},
 	},
-	watch: {
-		rows(newValue: ITagRow[] | undefined) {
-			if (newValue?.[0] && newValue[0].create) {
-				this.focusOnCreate();
-			}
-		},
-	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTableHeader.vue b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTableHeader.vue
index f327db503d..57a2a7e7b2 100644
--- a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTableHeader.vue
+++ b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTableHeader.vue
@@ -3,7 +3,7 @@
 		<el-col :span="10">
 			<n8n-input
 				:placeholder="$locale.baseText('tagsTableHeader.searchTags')"
-				:modelValue="search"
+				:model-value="search"
 				:disabled="disabled"
 				:maxlength="maxLength"
 				clearable
@@ -16,12 +16,12 @@
 		</el-col>
 		<el-col :span="14">
 			<n8n-button
-				@click="onAddNew"
 				:disabled="disabled"
 				icon="plus"
 				:label="$locale.baseText('tagsTableHeader.addNew')"
 				size="large"
 				float="right"
+				@click="onAddNew"
 			/>
 		</el-col>
 	</el-row>
diff --git a/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue b/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue
index 481b550052..1783541da4 100644
--- a/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue
+++ b/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue
@@ -7,17 +7,17 @@
 			@createEnable="onCreateEnable"
 		/>
 		<TagsTable
+			ref="tagsTable"
 			:rows="rows"
-			:isLoading="isLoading"
-			:isSaving="isSaving"
-			:newName="newName"
+			:is-loading="isLoading"
+			:is-saving="isSaving"
+			:new-name="newName"
+			data-test-id="tags-table"
 			@newNameChange="onNewNameChange"
 			@updateEnable="onUpdateEnable"
 			@deleteEnable="onDeleteEnable"
 			@cancelOperation="cancelOperation"
 			@applyOperation="applyOperation"
-			ref="tagsTable"
-			data-test-id="tags-table"
 		/>
 	</div>
 </template>
diff --git a/packages/editor-ui/src/components/Telemetry.vue b/packages/editor-ui/src/components/Telemetry.vue
index 292c210f2b..dc8eec4d60 100644
--- a/packages/editor-ui/src/components/Telemetry.vue
+++ b/packages/editor-ui/src/components/Telemetry.vue
@@ -32,6 +32,21 @@ export default defineComponent({
 			return !!this.telemetry?.enabled;
 		},
 	},
+	watch: {
+		telemetry() {
+			this.init();
+		},
+		currentUserId(userId) {
+			if (this.isTelemetryEnabled) {
+				this.$telemetry.identify(this.rootStore.instanceId, userId);
+			}
+		},
+		isTelemetryEnabledOnRoute(enabled) {
+			if (enabled) {
+				this.init();
+			}
+		},
+	},
 	mounted() {
 		this.init();
 	},
@@ -53,20 +68,5 @@ export default defineComponent({
 			this.isTelemetryInitialized = true;
 		},
 	},
-	watch: {
-		telemetry() {
-			this.init();
-		},
-		currentUserId(userId) {
-			if (this.isTelemetryEnabled) {
-				this.$telemetry.identify(this.rootStore.instanceId, userId);
-			}
-		},
-		isTelemetryEnabledOnRoute(enabled) {
-			if (enabled) {
-				this.init();
-			}
-		},
-	},
 });
 </script>
diff --git a/packages/editor-ui/src/components/TemplateCard.vue b/packages/editor-ui/src/components/TemplateCard.vue
index 6857843465..e793cf11df 100644
--- a/packages/editor-ui/src/components/TemplateCard.vue
+++ b/packages/editor-ui/src/components/TemplateCard.vue
@@ -6,15 +6,15 @@
 			firstItem && $style.first,
 			!loading && $style.loaded,
 		]"
-		@click="onCardClick"
 		data-test-id="template-card"
+		@click="onCardClick"
 	>
-		<div :class="$style.loading" v-if="loading">
-			<n8n-loading :rows="2" :shrinkLast="false" :loading="loading" />
+		<div v-if="loading" :class="$style.loading">
+			<n8n-loading :rows="2" :shrink-last="false" :loading="loading" />
 		</div>
 		<div v-else>
 			<n8n-heading :bold="true" size="small">{{ workflow.name }}</n8n-heading>
-			<div :class="$style.content" v-if="!simpleView">
+			<div v-if="!simpleView" :class="$style.content">
 				<span v-if="workflow.totalViews">
 					<n8n-text size="small" color="text-light">
 						<font-awesome-icon icon="eye" />
@@ -31,16 +31,16 @@
 				>
 			</div>
 		</div>
-		<div :class="[$style.nodesContainer, useWorkflowButton && $style.hideOnHover]" v-if="!loading">
+		<div v-if="!loading" :class="[$style.nodesContainer, useWorkflowButton && $style.hideOnHover]">
 			<NodeList v-if="workflow.nodes" :nodes="workflow.nodes" :limit="nodesToBeShown" size="md" />
 		</div>
-		<div :class="$style.buttonContainer" v-if="useWorkflowButton">
+		<div v-if="useWorkflowButton" :class="$style.buttonContainer">
 			<n8n-button
 				v-if="useWorkflowButton"
 				outline
 				label="Use workflow"
-				@click.stop="onUseWorkflowClick"
 				data-test-id="use-workflow-button"
+				@click.stop="onUseWorkflowClick"
 			/>
 		</div>
 	</div>
@@ -56,6 +56,10 @@ import TimeAgo from '@/components/TimeAgo.vue';
 
 export default defineComponent({
 	name: 'TemplateCard',
+	components: {
+		TimeAgo,
+		NodeList,
+	},
 	mixins: [genericHelpers],
 	props: {
 		lastItem: {
@@ -80,10 +84,6 @@ export default defineComponent({
 			default: false,
 		},
 	},
-	components: {
-		TimeAgo,
-		NodeList,
-	},
 	data() {
 		return {
 			nodesToBeShown: 5,
diff --git a/packages/editor-ui/src/components/TemplateDetails.vue b/packages/editor-ui/src/components/TemplateDetails.vue
index 0a4b6c7465..6208fa655a 100644
--- a/packages/editor-ui/src/components/TemplateDetails.vue
+++ b/packages/editor-ui/src/components/TemplateDetails.vue
@@ -2,7 +2,7 @@
 	<div>
 		<n8n-loading :loading="loading" :rows="5" variant="p" />
 
-		<template-details-block v-if="!loading && template.nodes.length > 0" :title="blockTitle">
+		<TemplateDetailsBlock v-if="!loading && template.nodes.length > 0" :title="blockTitle">
 			<div :class="$style.icons">
 				<div
 					v-for="node in filterTemplateNodes(template.nodes)"
@@ -10,23 +10,23 @@
 					:class="$style.icon"
 				>
 					<NodeIcon
-						:nodeType="node"
+						:node-type="node"
 						:size="24"
-						:showTooltip="true"
+						:show-tooltip="true"
 						@click="redirectToSearchPage(node)"
 					/>
 				</div>
 			</div>
-		</template-details-block>
+		</TemplateDetailsBlock>
 
-		<template-details-block
+		<TemplateDetailsBlock
 			v-if="!loading && template?.categories.length > 0"
 			:title="$locale.baseText('template.details.categories')"
 		>
 			<n8n-tags :tags="template.categories" @click:tag="redirectToCategory" />
-		</template-details-block>
+		</TemplateDetailsBlock>
 
-		<template-details-block v-if="!loading" :title="$locale.baseText('template.details.details')">
+		<TemplateDetailsBlock v-if="!loading" :title="$locale.baseText('template.details.details')">
 			<div :class="$style.text">
 				<n8n-text size="small" color="text-base">
 					{{ $locale.baseText('template.details.created') }}
@@ -42,7 +42,7 @@
 					{{ $locale.baseText('template.details.times') }}
 				</n8n-text>
 			</div>
-		</template-details-block>
+		</TemplateDetailsBlock>
 	</div>
 </template>
 
@@ -60,6 +60,11 @@ import TimeAgo from '@/components/TimeAgo.vue';
 
 export default defineComponent({
 	name: 'TemplateDetails',
+	components: {
+		NodeIcon,
+		TemplateDetailsBlock,
+		TimeAgo,
+	},
 	props: {
 		blockTitle: {
 			type: String,
@@ -71,11 +76,6 @@ export default defineComponent({
 			type: Object as PropType<ITemplatesWorkflow | ITemplatesWorkflowFull>,
 		},
 	},
-	components: {
-		NodeIcon,
-		TemplateDetailsBlock,
-		TimeAgo,
-	},
 	computed: {
 		...mapStores(useTemplatesStore),
 	},
diff --git a/packages/editor-ui/src/components/TemplateFilters.vue b/packages/editor-ui/src/components/TemplateFilters.vue
index 3fe428c859..268942f1bb 100644
--- a/packages/editor-ui/src/components/TemplateFilters.vue
+++ b/packages/editor-ui/src/components/TemplateFilters.vue
@@ -8,7 +8,7 @@
 			<li :class="$style.item">
 				<el-checkbox
 					:label="$locale.baseText('templates.allCategories')"
-					:modelValue="allSelected"
+					:model-value="allSelected"
 					@update:modelValue="(value) => resetCategories(value)"
 				/>
 			</li>
@@ -19,14 +19,14 @@
 			>
 				<el-checkbox
 					:label="category.name"
-					:modelValue="isSelected(category.id)"
+					:model-value="isSelected(category.id)"
 					@update:modelValue="(value) => handleCheckboxChanged(value, category)"
 				/>
 			</li>
 		</ul>
 		<div
-			:class="$style.button"
 			v-if="sortedCategories.length > expandLimit && collapsed && !loading"
+			:class="$style.button"
 			@click="collapseAction"
 		>
 			<n8n-text size="small" color="primary">
@@ -63,6 +63,17 @@ export default defineComponent({
 			type: Array,
 		},
 	},
+	data() {
+		return {
+			collapsed: true,
+			sortedCategories: [] as ITemplatesCategory[],
+		};
+	},
+	computed: {
+		allSelected(): boolean {
+			return this.selected.length === 0;
+		},
+	},
 	watch: {
 		categories: {
 			handler(categories: ITemplatesCategory[]) {
@@ -78,17 +89,6 @@ export default defineComponent({
 			immediate: true,
 		},
 	},
-	data() {
-		return {
-			collapsed: true,
-			sortedCategories: [] as ITemplatesCategory[],
-		};
-	},
-	computed: {
-		allSelected(): boolean {
-			return this.selected.length === 0;
-		},
-	},
 	methods: {
 		collapseAction() {
 			this.collapsed = false;
diff --git a/packages/editor-ui/src/components/TemplateList.vue b/packages/editor-ui/src/components/TemplateList.vue
index 4f8d9699db..3d0d680f70 100644
--- a/packages/editor-ui/src/components/TemplateList.vue
+++ b/packages/editor-ui/src/components/TemplateList.vue
@@ -1,6 +1,6 @@
 <template>
-	<div :class="$style.list" v-if="loading || workflows.length">
-		<div :class="$style.header" v-if="!simpleView">
+	<div v-if="loading || workflows.length" :class="$style.list">
+		<div v-if="!simpleView" :class="$style.header">
 			<n8n-heading :bold="true" size="medium" color="text-light">
 				{{ $locale.baseText('templates.workflows') }}
 				<span v-if="!loading && totalWorkflows" v-text="`(${totalWorkflows})`" />
@@ -11,10 +11,10 @@
 				v-for="(workflow, index) in workflows"
 				:key="workflow.id"
 				:workflow="workflow"
-				:firstItem="index === 0"
+				:first-item="index === 0"
 				:simple-view="simpleView"
-				:lastItem="index === workflows.length - 1 && !loading"
-				:useWorkflowButton="useWorkflowButton"
+				:last-item="index === workflows.length - 1 && !loading"
+				:use-workflow-button="useWorkflowButton"
 				@click="(e) => onCardClick(e, workflow.id)"
 				@useWorkflow="(e) => onUseWorkflow(e, workflow.id)"
 			/>
@@ -24,8 +24,8 @@
 					v-for="n in 4"
 					:key="'index-' + n"
 					:loading="true"
-					:firstItem="workflows.length === 0 && n === 1"
-					:lastItem="n === 4"
+					:first-item="workflows.length === 0 && n === 1"
+					:last-item="n === 4"
 				/>
 			</div>
 		</div>
@@ -39,6 +39,9 @@ import TemplateCard from './TemplateCard.vue';
 
 export default defineComponent({
 	name: 'TemplateList',
+	components: {
+		TemplateCard,
+	},
 	mixins: [genericHelpers],
 	props: {
 		infiniteScrollEnabled: {
@@ -77,9 +80,6 @@ export default defineComponent({
 			content.removeEventListener('scroll', this.onScroll);
 		}
 	},
-	components: {
-		TemplateCard,
-	},
 	methods: {
 		onScroll() {
 			const loaderRef = this.$refs.loader as HTMLElement | undefined;
diff --git a/packages/editor-ui/src/components/TemplatesInfoCard.vue b/packages/editor-ui/src/components/TemplatesInfoCard.vue
index 1ad04039f9..cf9e8e86ae 100644
--- a/packages/editor-ui/src/components/TemplatesInfoCard.vue
+++ b/packages/editor-ui/src/components/TemplatesInfoCard.vue
@@ -7,7 +7,7 @@
 					{{ $locale.baseText('templates.workflows') }}
 				</n8n-text>
 			</span>
-			<NodeList :nodes="collection.nodes" :showMore="false" />
+			<NodeList :nodes="collection.nodes" :show-more="false" />
 		</template>
 	</Card>
 </template>
@@ -20,6 +20,10 @@ import NodeList from '@/components/NodeList.vue';
 
 export default defineComponent({
 	name: 'TemplatesInfoCard',
+	components: {
+		Card,
+		NodeList,
+	},
 	mixins: [genericHelpers],
 	props: {
 		loading: {
@@ -37,10 +41,6 @@ export default defineComponent({
 			required: true,
 		},
 	},
-	components: {
-		Card,
-		NodeList,
-	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/TemplatesInfoCarousel.vue b/packages/editor-ui/src/components/TemplatesInfoCarousel.vue
index c35d55e58c..63b57b0491 100644
--- a/packages/editor-ui/src/components/TemplatesInfoCarousel.vue
+++ b/packages/editor-ui/src/components/TemplatesInfoCarousel.vue
@@ -1,9 +1,9 @@
 <template>
-	<div :class="$style.container" v-show="loading || collections.length">
+	<div v-show="loading || collections.length" :class="$style.container">
 		<agile
 			ref="slider"
 			:dots="false"
-			:navButtons="false"
+			:nav-buttons="false"
 			:infinite="false"
 			:slides-to-show="4"
 			@after-change="updateCarouselScroll"
@@ -11,10 +11,10 @@
 			<Card v-for="n in loading ? 4 : 0" :key="`loading-${n}`" :loading="loading" />
 			<TemplatesInfoCard
 				v-for="collection in loading ? [] : collections"
-				data-test-id="templates-info-card"
 				:key="collection.id"
+				data-test-id="templates-info-card"
 				:collection="collection"
-				:showItemCount="showItemCount"
+				:show-item-count="showItemCount"
 				:width="cardsWidth"
 				@click="(e) => onCardClick(e, collection.id)"
 			/>
@@ -50,6 +50,11 @@ type SliderRef = InstanceType<typeof VueAgile>;
 
 export default defineComponent({
 	name: 'TemplatesInfoCarousel',
+	components: {
+		Card,
+		TemplatesInfoCard,
+		agile: VueAgile,
+	},
 	mixins: [genericHelpers],
 	props: {
 		collections: {
@@ -71,6 +76,15 @@ export default defineComponent({
 			default: '240px',
 		},
 	},
+	data() {
+		return {
+			carouselScrollPosition: 0,
+			cardWidth: parseInt(this.cardsWidth, 10),
+			sliderWidth: 0,
+			scrollEnd: false,
+			listElement: null as null | Element,
+		};
+	},
 	watch: {
 		collections() {
 			setTimeout(() => {
@@ -83,19 +97,25 @@ export default defineComponent({
 			}, 0);
 		},
 	},
-	components: {
-		Card,
-		TemplatesInfoCard,
-		agile: VueAgile,
+	async mounted() {
+		await this.$nextTick();
+		const sliderRef = this.$refs.slider as SliderRef | undefined;
+		if (!sliderRef) {
+			return;
+		}
+
+		this.listElement = sliderRef.$el.querySelector('.agile__list');
+		if (this.listElement) {
+			this.listElement.addEventListener('scroll', this.updateCarouselScroll);
+		}
 	},
-	data() {
-		return {
-			carouselScrollPosition: 0,
-			cardWidth: parseInt(this.cardsWidth, 10),
-			sliderWidth: 0,
-			scrollEnd: false,
-			listElement: null as null | Element,
-		};
+	beforeUnmount() {
+		const sliderRef = this.$refs.slider as SliderRef | undefined;
+		if (sliderRef) {
+			sliderRef.destroy();
+		}
+
+		window.removeEventListener('scroll', this.updateCarouselScroll);
 	},
 	methods: {
 		updateCarouselScroll() {
@@ -122,26 +142,6 @@ export default defineComponent({
 			}
 		},
 	},
-	async mounted() {
-		await this.$nextTick();
-		const sliderRef = this.$refs.slider as SliderRef | undefined;
-		if (!sliderRef) {
-			return;
-		}
-
-		this.listElement = sliderRef.$el.querySelector('.agile__list');
-		if (this.listElement) {
-			this.listElement.addEventListener('scroll', this.updateCarouselScroll);
-		}
-	},
-	beforeUnmount() {
-		const sliderRef = this.$refs.slider as SliderRef | undefined;
-		if (sliderRef) {
-			sliderRef.destroy();
-		}
-
-		window.removeEventListener('scroll', this.updateCarouselScroll);
-	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/TextEdit.vue b/packages/editor-ui/src/components/TextEdit.vue
index 96bdd01c16..3573bf7c1f 100644
--- a/packages/editor-ui/src/components/TextEdit.vue
+++ b/packages/editor-ui/src/components/TextEdit.vue
@@ -1,7 +1,7 @@
 <template>
 	<div v-if="dialogVisible">
 		<el-dialog
-			:modelValue="dialogVisible"
+			:model-value="dialogVisible"
 			append-to-body
 			width="80%"
 			:title="`${$locale.baseText('textEdit.edit')} ${$locale
@@ -13,11 +13,11 @@
 				<n8n-input-label :label="$locale.nodeText().inputLabelDisplayName(parameter, path)">
 					<div @keydown.stop @keydown.esc="onKeyDownEsc()">
 						<n8n-input
+							ref="inputField"
 							v-model="tempValue"
 							type="textarea"
-							ref="inputField"
 							:placeholder="$locale.nodeText().placeholder(parameter, path)"
-							:readOnly="isReadOnly"
+							:read-only="isReadOnly"
 							:rows="15"
 							@update:modelValue="valueChanged"
 						/>
@@ -39,6 +39,20 @@ export default defineComponent({
 			tempValue: '', // el-input does not seem to work without v-model so add one
 		};
 	},
+	watch: {
+		async dialogVisible() {
+			if (this.dialogVisible === true) {
+				await nextTick();
+				(this.$refs.inputField as HTMLInputElement).focus();
+			}
+		},
+		modelValue(value: string) {
+			this.tempValue = value;
+		},
+	},
+	mounted() {
+		this.tempValue = this.modelValue as string;
+	},
 	methods: {
 		valueChanged(value: string) {
 			this.$emit('update:modelValue', value);
@@ -58,19 +72,5 @@ export default defineComponent({
 			return false;
 		},
 	},
-	mounted() {
-		this.tempValue = this.modelValue as string;
-	},
-	watch: {
-		async dialogVisible() {
-			if (this.dialogVisible === true) {
-				await nextTick();
-				(this.$refs.inputField as HTMLInputElement).focus();
-			}
-		},
-		modelValue(value: string) {
-			this.tempValue = value;
-		},
-	},
 });
 </script>
diff --git a/packages/editor-ui/src/components/TitledList.vue b/packages/editor-ui/src/components/TitledList.vue
index f15337f055..cd73f6d48e 100644
--- a/packages/editor-ui/src/components/TitledList.vue
+++ b/packages/editor-ui/src/components/TitledList.vue
@@ -2,7 +2,7 @@
 	<div class="titled-list">
 		<p v-text="title" />
 		<ul>
-			<li v-for="item in items" class="titled-list-item" :key="item" v-html="item" />
+			<li v-for="item in items" :key="item" class="titled-list-item" v-html="item" />
 		</ul>
 	</div>
 </template>
diff --git a/packages/editor-ui/src/components/TriggerPanel.vue b/packages/editor-ui/src/components/TriggerPanel.vue
index 9abd15cb3a..d74e42aca3 100644
--- a/packages/editor-ui/src/components/TriggerPanel.vue
+++ b/packages/editor-ui/src/components/TriggerPanel.vue
@@ -1,10 +1,10 @@
 <template>
 	<div :class="$style.container">
 		<transition name="fade" mode="out-in">
-			<div key="empty" v-if="hasIssues"></div>
-			<div key="listening" v-else-if="isListeningForEvents">
+			<div v-if="hasIssues" key="empty"></div>
+			<div v-else-if="isListeningForEvents" key="listening">
 				<n8n-pulse>
-					<NodeIcon :nodeType="nodeType" :size="40"></NodeIcon>
+					<NodeIcon :node-type="nodeType" :size="40"></NodeIcon>
 				</n8n-pulse>
 				<div v-if="isWebhookNode">
 					<n8n-text tag="div" size="large" color="text-dark" class="mb-2xs" bold>{{
@@ -14,14 +14,14 @@
 						<n8n-text>
 							{{
 								$locale.baseText('ndv.trigger.webhookNode.requestHint', {
-									interpolate: { type: this.webhookHttpMethod },
+									interpolate: { type: webhookHttpMethod },
 								})
 							}}
 						</n8n-text>
 					</div>
 					<CopyInput
 						:value="webhookTestUrl"
-						:toastTitle="$locale.baseText('ndv.trigger.copiedTestUrl')"
+						:toast-title="$locale.baseText('ndv.trigger.copiedTestUrl')"
 						class="mb-2xl"
 						size="medium"
 						:collapse="true"
@@ -30,10 +30,10 @@
 					></CopyInput>
 					<NodeExecuteButton
 						data-test-id="trigger-execute-button"
-						:nodeName="nodeName"
-						@execute="onNodeExecute"
+						:node-name="nodeName"
 						size="medium"
-						telemetrySource="inputs"
+						telemetry-source="inputs"
+						@execute="onNodeExecute"
 					/>
 				</div>
 				<div v-else>
@@ -47,15 +47,15 @@
 					</div>
 					<NodeExecuteButton
 						data-test-id="trigger-execute-button"
-						:nodeName="nodeName"
-						@execute="onNodeExecute"
+						:node-name="nodeName"
 						size="medium"
-						telemetrySource="inputs"
+						telemetry-source="inputs"
+						@execute="onNodeExecute"
 					/>
 				</div>
 			</div>
-			<div key="default" v-else>
-				<div class="mb-xl" v-if="isActivelyPolling">
+			<div v-else key="default">
+				<div v-if="isActivelyPolling" class="mb-xl">
 					<n8n-spinner type="ring" />
 				</div>
 
@@ -71,29 +71,29 @@
 
 					<NodeExecuteButton
 						data-test-id="trigger-execute-button"
-						:nodeName="nodeName"
-						@execute="onNodeExecute"
+						:node-name="nodeName"
 						size="medium"
-						telemetrySource="inputs"
+						telemetry-source="inputs"
+						@execute="onNodeExecute"
 					/>
 				</div>
 
-				<n8n-text size="small" @click="onLinkClick" v-if="activationHint">
+				<n8n-text v-if="activationHint" size="small" @click="onLinkClick">
 					<span v-html="activationHint"></span>&nbsp;
 				</n8n-text>
 				<n8n-link
-					size="small"
 					v-if="activationHint && executionsHelp"
+					size="small"
 					@click="expandExecutionHelp"
 					>{{ $locale.baseText('ndv.trigger.moreInfo') }}</n8n-link
 				>
 				<n8n-info-accordion
-					ref="help"
 					v-if="executionsHelp"
+					ref="help"
 					:class="$style.accordion"
 					:title="$locale.baseText('ndv.trigger.executionsHint.question')"
 					:description="executionsHelp"
-					:eventBus="executionsHelpEventBus"
+					:event-bus="executionsHelpEventBus"
 					@click:body="onLinkClick"
 				></n8n-info-accordion>
 			</div>
@@ -129,17 +129,12 @@ type HelpRef = InstanceType<typeof N8nInfoAccordion>;
 
 export default defineComponent({
 	name: 'TriggerPanel',
-	mixins: [workflowHelpers, copyPaste],
 	components: {
 		NodeExecuteButton,
 		CopyInput,
 		NodeIcon,
 	},
-	data: () => {
-		return {
-			executionsHelpEventBus: createEventBus(),
-		};
-	},
+	mixins: [workflowHelpers, copyPaste],
 	props: {
 		nodeName: {
 			type: String,
@@ -148,6 +143,11 @@ export default defineComponent({
 			type: String,
 		},
 	},
+	data: () => {
+		return {
+			executionsHelpEventBus: createEventBus(),
+		};
+	},
 	computed: {
 		...mapStores(useNodeTypesStore, useNDVStore, useUIStore, useWorkflowsStore),
 		node(): INodeUi | null {
diff --git a/packages/editor-ui/src/components/ValueSurvey.vue b/packages/editor-ui/src/components/ValueSurvey.vue
index 0033943805..89c52270af 100644
--- a/packages/editor-ui/src/components/ValueSurvey.vue
+++ b/packages/editor-ui/src/components/ValueSurvey.vue
@@ -1,10 +1,10 @@
 <template>
 	<ModalDrawer
 		:name="VALUE_SURVEY_MODAL_KEY"
-		:eventBus="modalBus"
-		:beforeClose="closeDialog"
+		:event-bus="modalBus"
+		:before-close="closeDialog"
 		:modal="false"
-		:wrapperClosable="false"
+		:wrapper-closable="false"
 		direction="btt"
 		width="120px"
 		:class="$style.valueSurvey"
@@ -22,8 +22,8 @@
 							<n8n-button
 								type="tertiary"
 								:label="(value - 1).toString()"
-								@click="selectSurveyValue((value - 1).toString())"
 								square
+								@click="selectSurveyValue((value - 1).toString())"
 							/>
 						</div>
 					</div>
@@ -40,7 +40,7 @@
 							@update:modelValue="onInputChange"
 						/>
 						<div :class="$style.button">
-							<n8n-button label="Send" float="right" @click="send" :disabled="!isEmailValid" />
+							<n8n-button label="Send" float="right" :disabled="!isEmailValid" @click="send" />
 						</div>
 					</div>
 					<div :class="$style.disclaimer">
@@ -76,11 +76,11 @@ const DEFAULT_FEEDBACK_TITLE =
 
 export default defineComponent({
 	name: 'ValueSurvey',
-	mixins: [workflowHelpers],
-	props: ['isActive'],
 	components: {
 		ModalDrawer,
 	},
+	mixins: [workflowHelpers],
+	props: ['isActive'],
 	setup() {
 		return {
 			...useToast(),
diff --git a/packages/editor-ui/src/components/VariableSelector.vue b/packages/editor-ui/src/components/VariableSelector.vue
index abdc2f79e2..3f31ae1654 100644
--- a/packages/editor-ui/src/components/VariableSelector.vue
+++ b/packages/editor-ui/src/components/VariableSelector.vue
@@ -1,24 +1,24 @@
 <template>
-	<div @keydown.stop class="variable-selector-wrapper">
+	<div class="variable-selector-wrapper" @keydown.stop>
 		<div class="input-wrapper">
 			<n8n-input
-				:placeholder="$locale.baseText('variableSelector.variableFilter')"
-				v-model="variableFilter"
 				ref="inputField"
+				v-model="variableFilter"
+				:placeholder="$locale.baseText('variableSelector.variableFilter')"
 				size="small"
 				type="text"
 			></n8n-input>
 		</div>
 
 		<div class="result-wrapper">
-			<variable-selector-item
-				:item="option"
+			<VariableSelectorItem
 				v-for="option in currentResults"
 				:key="option.key"
-				:extendAll="extendAll"
-				:redactValues="redactValues"
+				:item="option"
+				:extend-all="extendAll"
+				:redact-values="redactValues"
 				@itemSelected="forwardItemSelected"
-			></variable-selector-item>
+			></VariableSelectorItem>
 		</div>
 	</div>
 </template>
@@ -56,10 +56,10 @@ const SKIPPED_NODE_TYPES = [STICKY_NODE_TYPE];
 
 export default defineComponent({
 	name: 'VariableSelector',
-	mixins: [workflowHelpers],
 	components: {
 		VariableSelectorItem,
 	},
+	mixins: [workflowHelpers],
 	props: ['path', 'redactValues'],
 	data() {
 		return {
diff --git a/packages/editor-ui/src/components/VariableSelectorItem.vue b/packages/editor-ui/src/components/VariableSelectorItem.vue
index 8505d6342d..1fb21ae190 100644
--- a/packages/editor-ui/src/components/VariableSelectorItem.vue
+++ b/packages/editor-ui/src/components/VariableSelectorItem.vue
@@ -2,7 +2,7 @@
 	<div class="item">
 		<div v-if="item.options" class="options">
 			<div v-if="item.options.length" class="headline clickable" @click="extended = !extended">
-				<div class="options-toggle" v-if="extendAll !== true">
+				<div v-if="extendAll !== true" class="options-toggle">
 					<font-awesome-icon v-if="extended" icon="angle-down" />
 					<font-awesome-icon v-else icon="angle-right" />
 				</div>
@@ -10,10 +10,10 @@
 					{{ item.name }}
 
 					<el-dropdown
+						v-if="allowParentSelect === true"
 						trigger="click"
 						@click.stop
 						@command="optionSelected($event, item)"
-						v-if="allowParentSelect === true"
 					>
 						<span class="el-dropdown-link clickable" @click.stop>
 							<font-awesome-icon
@@ -24,9 +24,9 @@
 						<template #dropdown>
 							<el-dropdown-menu>
 								<el-dropdown-item
-									:command="operation.command"
 									v-for="operation in itemAddOperations"
 									:key="operation.command"
+									:command="operation.command"
 									>{{ operation.displayName }}</el-dropdown-item
 								>
 							</el-dropdown-menu>
@@ -37,11 +37,11 @@
 			<div v-if="item.options && (extended === true || extendAll === true)">
 				<variable-selector-item
 					v-for="option in item.options"
-					:item="option"
 					:key="option.key"
-					:extendAll="extendAll"
-					:allowParentSelect="option.allowParentSelect"
-					:redactValues="redactValues"
+					:item="option"
+					:extend-all="extendAll"
+					:allow-parent-select="option.allowParentSelect"
+					:redact-values="redactValues"
 					class="sub-level"
 					@itemSelected="forwardItemSelected"
 				></variable-selector-item>
@@ -66,20 +66,10 @@ import type { IVariableSelectorOption, IVariableItemSelected } from '@/Interface
 export default defineComponent({
 	name: 'VariableSelectorItem',
 	props: ['allowParentSelect', 'extendAll', 'item', 'redactValues'],
-	mounted() {
-		if (this.extended) return;
-
-		const shouldAutoExtend =
-			[
-				this.$locale.baseText('variableSelectorItem.currentNode'),
-				this.$locale.baseText('variableSelectorItem.inputData'),
-				this.$locale.baseText('variableSelectorItem.binary'),
-				this.$locale.baseText('variableSelectorItem.json'),
-			].includes(this.item.name) && this.item.key === undefined;
-
-		if (shouldAutoExtend) {
-			this.extended = true;
-		}
+	data() {
+		return {
+			extended: false,
+		};
 	},
 	computed: {
 		itemAddOperations() {
@@ -112,10 +102,20 @@ export default defineComponent({
 			return returnOptions;
 		},
 	},
-	data() {
-		return {
-			extended: false,
-		};
+	mounted() {
+		if (this.extended) return;
+
+		const shouldAutoExtend =
+			[
+				this.$locale.baseText('variableSelectorItem.currentNode'),
+				this.$locale.baseText('variableSelectorItem.inputData'),
+				this.$locale.baseText('variableSelectorItem.binary'),
+				this.$locale.baseText('variableSelectorItem.json'),
+			].includes(this.item.name) && this.item.key === undefined;
+
+		if (shouldAutoExtend) {
+			this.extended = true;
+		}
 	},
 	methods: {
 		optionSelected(command: string, item: IVariableSelectorOption) {
diff --git a/packages/editor-ui/src/components/VariablesRow.vue b/packages/editor-ui/src/components/VariablesRow.vue
index df3520e57d..098e344f8c 100644
--- a/packages/editor-ui/src/components/VariablesRow.vue
+++ b/packages/editor-ui/src/components/VariablesRow.vue
@@ -139,15 +139,15 @@ function focusFirstInput() {
 				<span v-if="!editing">{{ data.key }}</span>
 				<n8n-form-input
 					v-else
+					ref="keyInputRef"
+					v-model="modelValue.key"
 					label
 					name="key"
 					data-test-id="variable-row-key-input"
 					:placeholder="i18n.baseText('variables.editing.key.placeholder')"
 					required
-					validateOnBlur
-					:validationRules="keyValidationRules"
-					v-model="modelValue.key"
-					ref="keyInputRef"
+					validate-on-blur
+					:validation-rules="keyValidationRules"
 					@validate="(value) => onValidate('key', value)"
 				/>
 			</div>
@@ -157,14 +157,14 @@ function focusFirstInput() {
 				<span v-if="!editing">{{ data.value }}</span>
 				<n8n-form-input
 					v-else
+					ref="valueInputRef"
+					v-model="modelValue.value"
 					label
 					name="value"
 					data-test-id="variable-row-value-input"
 					:placeholder="i18n.baseText('variables.editing.value.placeholder')"
-					validateOnBlur
-					:validationRules="valueValidationRules"
-					v-model="modelValue.value"
-					ref="valueInputRef"
+					validate-on-blur
+					:validation-rules="valueValidationRules"
 					@validate="(value) => onValidate('value', value)"
 				/>
 			</div>
diff --git a/packages/editor-ui/src/components/VersionCard.vue b/packages/editor-ui/src/components/VersionCard.vue
index 8aa461a8e1..e34f857f08 100644
--- a/packages/editor-ui/src/components/VersionCard.vue
+++ b/packages/editor-ui/src/components/VersionCard.vue
@@ -30,20 +30,20 @@
 			</div>
 		</div>
 		<div
-			:class="$style.divider"
 			v-if="version.description || (version.nodes && version.nodes.length)"
+			:class="$style.divider"
 		></div>
 		<div>
 			<div
 				v-if="version.description"
-				v-html="version.description"
 				:class="$style.description"
+				v-html="version.description"
 			></div>
 			<div v-if="version.nodes && version.nodes.length > 0" :class="$style.nodes">
 				<NodeIcon
 					v-for="node in version.nodes"
 					:key="node.name"
-					:nodeType="node"
+					:node-type="node"
 					:title="$options.nodeName(node)"
 				/>
 			</div>
diff --git a/packages/editor-ui/src/components/WorkerList.ee.vue b/packages/editor-ui/src/components/WorkerList.ee.vue
index 0b496f0191..fab6ccf3c3 100644
--- a/packages/editor-ui/src/components/WorkerList.ee.vue
+++ b/packages/editor-ui/src/components/WorkerList.ee.vue
@@ -11,7 +11,7 @@
 			<div v-if="workerIds.length === 0">{{ $locale.baseText('workerList.empty') }}</div>
 			<div v-else>
 				<div v-for="workerId in workerIds" :key="workerId" :class="$style.card">
-					<WorkerCard :workerId="workerId" data-test-id="worker-card" />
+					<WorkerCard :worker-id="workerId" data-test-id="worker-card" />
 				</div>
 			</div>
 		</div>
@@ -37,9 +37,9 @@ import WorkerCard from './Workers/WorkerCard.ee.vue';
 // eslint-disable-next-line import/no-default-export
 export default defineComponent({
 	name: 'WorkerList',
-	mixins: [pushConnection, genericHelpers, executionHelpers],
 	// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/naming-convention
 	components: { PushConnectionTracker, WorkerCard },
+	mixins: [pushConnection, genericHelpers, executionHelpers],
 	props: {
 		autoRefreshEnabled: {
 			type: Boolean,
diff --git a/packages/editor-ui/src/components/Workers/WorkerCard.ee.vue b/packages/editor-ui/src/components/Workers/WorkerCard.ee.vue
index b930e6e012..ac8d09aaf0 100644
--- a/packages/editor-ui/src/components/Workers/WorkerCard.ee.vue
+++ b/packages/editor-ui/src/components/Workers/WorkerCard.ee.vue
@@ -1,5 +1,5 @@
 <template>
-	<n8n-card :class="$style.cardLink" v-if="worker">
+	<n8n-card v-if="worker" :class="$style.cardLink">
 		<template #header>
 			<n8n-heading
 				tag="h2"
@@ -26,7 +26,7 @@
 			</n8n-text>
 		</div>
 		<template #append>
-			<div :class="$style.cardActions" ref="cardActions">
+			<div ref="cardActions" :class="$style.cardActions">
 				<!-- For future Worker actions -->
 			</div>
 		</template>
diff --git a/packages/editor-ui/src/components/WorkflowActivator.vue b/packages/editor-ui/src/components/WorkflowActivator.vue
index 1bd10f1c0e..8293ba679b 100644
--- a/packages/editor-ui/src/components/WorkflowActivator.vue
+++ b/packages/editor-ui/src/components/WorkflowActivator.vue
@@ -21,8 +21,7 @@
 			</template>
 			<el-switch
 				v-loading="updatingWorkflowActivation"
-				:modelValue="workflowActive"
-				@update:modelValue="activeChanged"
+				:model-value="workflowActive"
 				:title="
 					workflowActive
 						? $locale.baseText('workflowActivator.deactivateWorkflow')
@@ -32,11 +31,12 @@
 				:active-color="getActiveColor"
 				inactive-color="#8899AA"
 				data-test-id="workflow-activate-switch"
+				@update:modelValue="activeChanged"
 			>
 			</el-switch>
 		</n8n-tooltip>
 
-		<div class="could-not-be-started" v-if="couldNotBeStarted">
+		<div v-if="couldNotBeStarted" class="could-not-be-started">
 			<n8n-tooltip placement="top">
 				<template #content>
 					<div
@@ -44,7 +44,7 @@
 						v-html="$locale.baseText('workflowActivator.theWorkflowIsSetToBeActiveBut')"
 					></div>
 				</template>
-				<font-awesome-icon @click="displayActivationError" icon="exclamation-triangle" />
+				<font-awesome-icon icon="exclamation-triangle" @click="displayActivationError" />
 			</n8n-tooltip>
 		</div>
 	</div>
@@ -61,8 +61,8 @@ import { getActivatableTriggerNodes } from '@/utils/nodeTypesUtils';
 
 export default defineComponent({
 	name: 'WorkflowActivator',
-	props: ['workflowActive', 'workflowId'],
 	mixins: [workflowActivate],
+	props: ['workflowActive', 'workflowId'],
 	setup(props, ctx) {
 		return {
 			...useToast(),
diff --git a/packages/editor-ui/src/components/WorkflowCard.vue b/packages/editor-ui/src/components/WorkflowCard.vue
index 527c337967..1270a22205 100644
--- a/packages/editor-ui/src/components/WorkflowCard.vue
+++ b/packages/editor-ui/src/components/WorkflowCard.vue
@@ -8,7 +8,7 @@
 		<div :class="$style.cardDescription">
 			<n8n-text color="text-light" size="small">
 				<span v-show="data"
-					>{{ $locale.baseText('workflows.item.updated') }} <time-ago :date="data.updatedAt" /> |
+					>{{ $locale.baseText('workflows.item.updated') }} <TimeAgo :date="data.updatedAt" /> |
 				</span>
 				<span v-show="data" class="mr-2xs"
 					>{{ $locale.baseText('workflows.item.created') }} {{ formattedCreatedAtDate }}
@@ -19,24 +19,24 @@
 				>
 					<n8n-tags
 						:tags="data.tags"
-						:truncateAt="3"
+						:truncate-at="3"
 						truncate
+						data-test-id="workflow-card-tags"
 						@click:tag="onClickTag"
 						@expand="onExpandTags"
-						data-test-id="workflow-card-tags"
 					/>
 				</span>
 			</n8n-text>
 		</div>
 		<template #append>
-			<div :class="$style.cardActions" ref="cardActions">
+			<div ref="cardActions" :class="$style.cardActions">
 				<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]">
 					<n8n-badge v-if="workflowPermissions.isOwner" class="mr-xs" theme="tertiary" bold>
 						{{ $locale.baseText('workflows.item.owner') }}
 					</n8n-badge>
 				</enterprise-edition>
 
-				<workflow-activator
+				<WorkflowActivator
 					class="mr-s"
 					:workflow-active="data.active"
 					:workflow-id="data.id"
@@ -46,9 +46,9 @@
 				<n8n-action-toggle
 					:actions="actions"
 					theme="dark"
+					data-test-id="workflow-card-actions"
 					@action="onAction"
 					@click.stop
-					data-test-id="workflow-card-actions"
 				/>
 			</div>
 		</template>
@@ -86,17 +86,6 @@ export const WORKFLOW_LIST_ITEM_ACTIONS = {
 };
 
 export default defineComponent({
-	data() {
-		return {
-			EnterpriseEditionFeature,
-		};
-	},
-	setup() {
-		return {
-			...useToast(),
-			...useMessage(),
-		};
-	},
 	components: {
 		TimeAgo,
 		WorkflowActivator,
@@ -123,6 +112,17 @@ export default defineComponent({
 			default: false,
 		},
 	},
+	setup() {
+		return {
+			...useToast(),
+			...useMessage(),
+		};
+	},
+	data() {
+		return {
+			EnterpriseEditionFeature,
+		};
+	},
 	computed: {
 		...mapStores(useSettingsStore, useUIStore, useUsersStore, useWorkflowsStore),
 		currentUser(): IUser {
diff --git a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue
index b7fe5fe193..207b706606 100644
--- a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue
+++ b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue
@@ -68,15 +68,15 @@ const onAction = ({
 			v-if="props.workflowVersion"
 			:workflow="workflowVersionPreview"
 			:loading="props.isListLoading"
-			loaderType="spinner"
+			loader-type="spinner"
 		/>
 		<ul :class="$style.info">
-			<workflow-history-list-item
-				:class="$style.card"
+			<WorkflowHistoryListItem
 				v-if="props.workflowVersion"
+				:class="$style.card"
 				:index="-1"
 				:item="props.workflowVersion"
-				:isActive="false"
+				:is-active="false"
 				:actions="actions"
 				@action="onAction"
 			>
@@ -110,7 +110,7 @@ const onAction = ({
 						<n8n-icon class="ml-3xs" icon="chevron-down" size="small" />
 					</n8n-button>
 				</template>
-			</workflow-history-list-item>
+			</WorkflowHistoryListItem>
 		</ul>
 	</div>
 </template>
diff --git a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryList.vue b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryList.vue
index 94c44c8440..b1b92be32a 100644
--- a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryList.vue
+++ b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryList.vue
@@ -105,13 +105,13 @@ const onItemMounted = ({
 </script>
 
 <template>
-	<ul :class="$style.list" ref="listElement" data-test-id="workflow-history-list">
-		<workflow-history-list-item
+	<ul ref="listElement" :class="$style.list" data-test-id="workflow-history-list">
+		<WorkflowHistoryListItem
 			v-for="(item, index) in props.items"
 			:key="item.versionId"
 			:index="index"
 			:item="item"
-			:isActive="item.versionId === props.activeItem?.versionId"
+			:is-active="item.versionId === props.activeItem?.versionId"
 			:actions="getActions(index)"
 			@action="onAction"
 			@preview="onPreview"
diff --git a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryListItem.vue b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryListItem.vue
index 8df6234ad5..b53c76da69 100644
--- a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryListItem.vue
+++ b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryListItem.vue
@@ -99,7 +99,7 @@ onMounted(() => {
 			[$style.actionsVisible]: actionsVisible,
 		}"
 	>
-		<slot :formattedCreatedAt="formattedCreatedAt">
+		<slot :formatted-created-at="formattedCreatedAt">
 			<p @click="onItemClick">
 				<time :datetime="item.createdAt">{{ formattedCreatedAt }}</time>
 				<n8n-tooltip
diff --git a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryVersionRestoreModal.vue b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryVersionRestoreModal.vue
index 1dbc346f70..99c1100d84 100644
--- a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryVersionRestoreModal.vue
+++ b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryVersionRestoreModal.vue
@@ -60,8 +60,8 @@ const closeModal = () => {
 			<div :class="$style.footer">
 				<n8n-button
 					v-for="(button, index) in props.data.buttons"
-					size="medium"
 					:key="index"
+					size="medium"
 					:type="button.type"
 					@click="
 						() => {
diff --git a/packages/editor-ui/src/components/WorkflowLMChat.vue b/packages/editor-ui/src/components/WorkflowLMChat.vue
index 7f5f269f38..b1dddc2d51 100644
--- a/packages/editor-ui/src/components/WorkflowLMChat.vue
+++ b/packages/editor-ui/src/components/WorkflowLMChat.vue
@@ -2,7 +2,7 @@
 	<Modal
 		:name="WORKFLOW_LM_CHAT_MODAL_KEY"
 		width="80%"
-		maxHeight="80%"
+		max-height="80%"
 		:title="
 			$locale.baseText('chat.window.title', {
 				interpolate: {
@@ -10,7 +10,7 @@
 				},
 			})
 		"
-		:eventBus="modalBus"
+		:event-bus="modalBus"
 		:scrollable="false"
 		@keydown.stop
 	>
@@ -20,18 +20,18 @@
 					<div
 						v-for="message in messages"
 						:key="`${message.executionId}__${message.sender}`"
-						:class="['message', message.sender]"
 						ref="messageContainer"
+						:class="['message', message.sender]"
 					>
 						<div :class="['content', message.sender]">
 							{{ message.text }}
 
 							<div class="message-options no-select-on-click">
 								<n8n-info-tip
+									v-if="message.sender === 'bot'"
 									type="tooltip"
 									theme="info-light"
-									tooltipPlacement="right"
-									v-if="message.sender === 'bot'"
+									tooltip-placement="right"
 								>
 									<div v-if="message.executionId">
 										<n8n-text :bold="true" size="small">
@@ -44,20 +44,20 @@
 								</n8n-info-tip>
 
 								<div
-									@click="repostMessage(message)"
+									v-if="message.sender === 'user'"
 									class="option"
 									:title="$locale.baseText('chat.window.chat.chatMessageOptions.repostMessage')"
 									data-test-id="repost-message-button"
-									v-if="message.sender === 'user'"
+									@click="repostMessage(message)"
 								>
 									<font-awesome-icon icon="redo" />
 								</div>
 								<div
-									@click="reuseMessage(message)"
+									v-if="message.sender === 'user'"
 									class="option"
 									:title="$locale.baseText('chat.window.chat.chatMessageOptions.reuseMessage')"
 									data-test-id="reuse-message-button"
-									v-if="message.sender === 'user'"
+									@click="reuseMessage(message)"
 								>
 									<font-awesome-icon icon="copy" />
 								</div>
@@ -70,7 +70,7 @@
 						$locale.baseText('chat.window.logs')
 					}}</n8n-text>
 					<div class="logs">
-						<run-data-ai :node="node" hide-title slim :key="messages.length" />
+						<RunDataAi :key="messages.length" :node="node" hide-title slim />
 					</div>
 				</div>
 			</div>
@@ -78,11 +78,11 @@
 		<template #footer>
 			<div class="workflow-lm-chat-footer">
 				<n8n-input
+					ref="inputField"
 					v-model="currentMessage"
 					class="message-input"
 					type="textarea"
 					:minlength="1"
-					ref="inputField"
 					m
 					:placeholder="$locale.baseText('chat.window.chat.placeholder')"
 					data-test-id="workflow-chat-input"
@@ -90,7 +90,6 @@
 				/>
 				<n8n-tooltip :disabled="currentMessage.length > 0">
 					<n8n-button
-						@click.stop="sendChatMessage(currentMessage)"
 						class="send-button"
 						:disabled="currentMessage === ''"
 						:loading="isLoading"
@@ -99,6 +98,7 @@
 						icon="comment"
 						type="primary"
 						data-test-id="workflow-chat-send-button"
+						@click.stop="sendChatMessage(currentMessage)"
 					/>
 					<template #content>
 						{{ $locale.baseText('chat.window.chat.provideMessage') }}
@@ -165,11 +165,11 @@ interface LangChainMessage {
 // - display errors better
 export default defineComponent({
 	name: 'WorkflowLMChat',
-	mixins: [workflowRun],
 	components: {
 		Modal,
 		RunDataAi,
 	},
+	mixins: [workflowRun],
 	setup(props, ctx) {
 		const externalHooks = useExternalHooks();
 
diff --git a/packages/editor-ui/src/components/WorkflowPreview.vue b/packages/editor-ui/src/components/WorkflowPreview.vue
index fd8986ffe2..86ec2fba3c 100644
--- a/packages/editor-ui/src/components/WorkflowPreview.vue
+++ b/packages/editor-ui/src/components/WorkflowPreview.vue
@@ -7,13 +7,13 @@
 			<n8n-spinner type="dots" />
 		</div>
 		<iframe
+			ref="iframeRef"
 			:class="{
 				[$style.workflow]: !nodeViewDetailsOpened,
 				[$style.executionPreview]: mode === 'execution',
 				[$style.openNDV]: nodeViewDetailsOpened,
 				[$style.show]: showPreview,
 			}"
-			ref="iframeRef"
 			:src="`${rootStore.baseUrl}workflows/demo`"
 			@mouseenter="onMouseEnter"
 			@mouseleave="onMouseLeave"
diff --git a/packages/editor-ui/src/components/WorkflowSettings.vue b/packages/editor-ui/src/components/WorkflowSettings.vue
index 91e3c32406..85de0dcb06 100644
--- a/packages/editor-ui/src/components/WorkflowSettings.vue
+++ b/packages/editor-ui/src/components/WorkflowSettings.vue
@@ -2,13 +2,13 @@
 	<Modal
 		:name="WORKFLOW_SETTINGS_MODAL_KEY"
 		width="65%"
-		maxHeight="80%"
+		max-height="80%"
 		:title="
 			$locale.baseText('workflowSettings.settingsFor', {
 				interpolate: { workflowName, workflowId },
 			})
 		"
-		:eventBus="modalBus"
+		:event-bus="modalBus"
 		:scrollable="true"
 	>
 		<template #content>
@@ -109,12 +109,12 @@
 						</el-col>
 						<el-col :span="14">
 							<n8n-input
+								v-model="workflowSettings.callerIds"
 								:disabled="readOnlyEnv"
 								:placeholder="$locale.baseText('workflowSettings.callerIds.placeholder')"
 								type="text"
-								v-model="workflowSettings.callerIds"
-								@update:modelValue="onCallerIdsInput"
 								data-test-id="workflow-caller-policy-workflow-ids"
+								@update:modelValue="onCallerIdsInput"
 							/>
 						</el-col>
 					</el-row>
@@ -279,10 +279,10 @@
 							<el-switch
 								ref="inputField"
 								:disabled="readOnlyEnv"
-								:modelValue="workflowSettings.executionTimeout > -1"
-								@update:modelValue="toggleTimeout"
+								:model-value="workflowSettings.executionTimeout > -1"
 								active-color="#13ce66"
 								data-test-id="workflow-settings-timeout-workflow"
+								@update:modelValue="toggleTimeout"
 							></el-switch>
 						</div>
 					</el-col>
@@ -304,9 +304,9 @@
 						<el-col :span="4">
 							<n8n-input
 								:disabled="readOnlyEnv"
-								:modelValue="timeoutHMS.hours"
-								@update:modelValue="(value) => setTimeout('hours', value)"
+								:model-value="timeoutHMS.hours"
 								:min="0"
+								@update:modelValue="(value) => setTimeout('hours', value)"
 							>
 								<template #append>{{ $locale.baseText('workflowSettings.hours') }}</template>
 							</n8n-input>
@@ -314,7 +314,7 @@
 						<el-col :span="4" class="timeout-input">
 							<n8n-input
 								:disabled="readOnlyEnv"
-								:modelValue="timeoutHMS.minutes"
+								:model-value="timeoutHMS.minutes"
 								:min="0"
 								:max="60"
 								@update:modelValue="(value) => setTimeout('minutes', value)"
@@ -325,7 +325,7 @@
 						<el-col :span="4" class="timeout-input">
 							<n8n-input
 								:disabled="readOnlyEnv"
-								:modelValue="timeoutHMS.seconds"
+								:model-value="timeoutHMS.seconds"
 								:min="0"
 								:max="60"
 								@update:modelValue="(value) => setTimeout('seconds', value)"
@@ -386,10 +386,10 @@ import { useExternalHooks } from '@/composables/useExternalHooks';
 
 export default defineComponent({
 	name: 'WorkflowSettings',
-	mixins: [genericHelpers],
 	components: {
 		Modal,
 	},
+	mixins: [genericHelpers],
 	setup() {
 		const externalHooks = useExternalHooks();
 
diff --git a/packages/editor-ui/src/components/WorkflowShareModal.ee.vue b/packages/editor-ui/src/components/WorkflowShareModal.ee.vue
index 85dbe5e82b..8061b167f1 100644
--- a/packages/editor-ui/src/components/WorkflowShareModal.ee.vue
+++ b/packages/editor-ui/src/components/WorkflowShareModal.ee.vue
@@ -2,10 +2,10 @@
 	<Modal
 		width="460px"
 		:title="modalTitle"
-		:eventBus="modalBus"
+		:event-bus="modalBus"
 		:name="WORKFLOW_SHARE_MODAL_KEY"
 		:center="true"
-		:beforeClose="onCloseModal"
+		:before-close="onCloseModal"
 	>
 		<template #content>
 			<div v-if="!isSharingEnabled" :class="$style.container">
@@ -36,7 +36,7 @@
 						class="mb-s"
 						size="large"
 						:users="usersList"
-						:currentUserId="currentUser.id"
+						:current-user-id="currentUser.id"
 						:placeholder="$locale.baseText('workflows.shareModal.select.placeholder')"
 						data-test-id="workflow-sharing-modal-users-select"
 						@update:modelValue="onAddSharee"
@@ -48,14 +48,14 @@
 					<n8n-users-list
 						:actions="[]"
 						:users="sharedWithList"
-						:currentUserId="currentUser.id"
+						:current-user-id="currentUser.id"
 						:delete-label="$locale.baseText('workflows.shareModal.list.delete')"
 						:readonly="!workflowPermissions.updateSharing"
 					>
 						<template #actions="{ user }">
 							<n8n-select
 								:class="$style.roleSelect"
-								modelValue="editor"
+								model-value="editor"
 								size="small"
 								@update:modelValue="onRoleAction(user, $event)"
 							>
@@ -151,7 +151,7 @@ import type { BaseTextKey } from '@/plugins/i18n';
 import { isNavigationFailure } from 'vue-router';
 
 export default defineComponent({
-	name: 'workflow-share-modal',
+	name: 'WorkflowShareModal',
 	components: {
 		Modal,
 	},
@@ -253,6 +253,16 @@ export default defineComponent({
 			);
 		},
 	},
+	watch: {
+		workflow(workflow) {
+			if (workflow.sharedWith) {
+				this.sharedWith = workflow.sharedWith;
+			}
+		},
+	},
+	mounted() {
+		void this.initialize();
+	},
 	methods: {
 		async onSave() {
 			if (this.loading) {
@@ -472,16 +482,6 @@ export default defineComponent({
 			this.loading = false;
 		},
 	},
-	mounted() {
-		void this.initialize();
-	},
-	watch: {
-		workflow(workflow) {
-			if (workflow.sharedWith) {
-				this.sharedWith = workflow.sharedWith;
-			}
-		},
-	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/banners/BaseBanner.vue b/packages/editor-ui/src/components/banners/BaseBanner.vue
index 5b968c5860..761305d769 100644
--- a/packages/editor-ui/src/components/banners/BaseBanner.vue
+++ b/packages/editor-ui/src/components/banners/BaseBanner.vue
@@ -33,8 +33,8 @@ async function onCloseClick() {
 	<n8n-callout
 		:theme="props.theme"
 		:icon="props.customIcon"
-		iconSize="medium"
-		:roundCorners="false"
+		icon-size="medium"
+		:round-corners="false"
 		:data-test-id="`banners-${props.name}`"
 	>
 		<div :class="[$style.mainContent, !hasTrailingContent ? $style.keepSpace : '']">
diff --git a/packages/editor-ui/src/components/banners/EmailConfirmationBanner.vue b/packages/editor-ui/src/components/banners/EmailConfirmationBanner.vue
index a2266737a0..45b3d8c425 100644
--- a/packages/editor-ui/src/components/banners/EmailConfirmationBanner.vue
+++ b/packages/editor-ui/src/components/banners/EmailConfirmationBanner.vue
@@ -31,7 +31,7 @@ async function onConfirmEmailClick() {
 </script>
 
 <template>
-	<base-banner name="EMAIL_CONFIRMATION" theme="warning">
+	<BaseBanner name="EMAIL_CONFIRMATION" theme="warning">
 		<template #mainContent>
 			<span>
 				{{ locale.baseText('banners.confirmEmail.message.1') }}
@@ -42,13 +42,13 @@ async function onConfirmEmailClick() {
 		<template #trailingContent>
 			<n8n-button
 				type="success"
-				@click="onConfirmEmailClick"
 				icon="envelope"
 				size="small"
 				data-test-id="confirm-email-button"
+				@click="onConfirmEmailClick"
 			>
 				{{ locale.baseText('banners.confirmEmail.button') }}
 			</n8n-button>
 		</template>
-	</base-banner>
+	</BaseBanner>
 </template>
diff --git a/packages/editor-ui/src/components/banners/NonProductionLicenseBanner.vue b/packages/editor-ui/src/components/banners/NonProductionLicenseBanner.vue
index e9465092e6..29a258531b 100644
--- a/packages/editor-ui/src/components/banners/NonProductionLicenseBanner.vue
+++ b/packages/editor-ui/src/components/banners/NonProductionLicenseBanner.vue
@@ -4,9 +4,9 @@ import { i18n as locale } from '@/plugins/i18n';
 </script>
 
 <template>
-	<base-banner name="NON_PRODUCTION_LICENSE" :dismissible="false">
+	<BaseBanner name="NON_PRODUCTION_LICENSE" :dismissible="false">
 		<template #mainContent>
 			<span>{{ locale.baseText('banners.nonProductionLicense.message') }}</span>
 		</template>
-	</base-banner>
+	</BaseBanner>
 </template>
diff --git a/packages/editor-ui/src/components/banners/TrialBanner.vue b/packages/editor-ui/src/components/banners/TrialBanner.vue
index c4b83926c8..3707571d0d 100644
--- a/packages/editor-ui/src/components/banners/TrialBanner.vue
+++ b/packages/editor-ui/src/components/banners/TrialBanner.vue
@@ -23,14 +23,14 @@ function onUpdatePlanClick() {
 </script>
 
 <template>
-	<base-banner name="TRIAL" theme="custom">
+	<BaseBanner name="TRIAL" theme="custom">
 		<template #mainContent>
 			<span>{{ messageText }}</span>
 		</template>
 		<template #trailingContent>
-			<n8n-button type="success" @click="onUpdatePlanClick" icon="gem" size="small">{{
+			<n8n-button type="success" icon="gem" size="small" @click="onUpdatePlanClick">{{
 				locale.baseText('generic.upgradeNow')
 			}}</n8n-button>
 		</template>
-	</base-banner>
+	</BaseBanner>
 </template>
diff --git a/packages/editor-ui/src/components/banners/TrialOverBanner.vue b/packages/editor-ui/src/components/banners/TrialOverBanner.vue
index 1c5b2868a3..9080ad0fed 100644
--- a/packages/editor-ui/src/components/banners/TrialOverBanner.vue
+++ b/packages/editor-ui/src/components/banners/TrialOverBanner.vue
@@ -9,14 +9,14 @@ function onUpdatePlanClick() {
 </script>
 
 <template>
-	<base-banner customIcon="info-circle" theme="warning" name="TRIAL_OVER">
+	<BaseBanner custom-icon="info-circle" theme="warning" name="TRIAL_OVER">
 		<template #mainContent>
 			<span>{{ locale.baseText('banners.trialOver.message') }}</span>
 		</template>
 		<template #trailingContent>
-			<n8n-button type="success" @click="onUpdatePlanClick" icon="gem" size="small">{{
+			<n8n-button type="success" icon="gem" size="small" @click="onUpdatePlanClick">{{
 				locale.baseText('generic.upgradeNow')
 			}}</n8n-button>
 		</template>
-	</base-banner>
+	</BaseBanner>
 </template>
diff --git a/packages/editor-ui/src/components/banners/V1Banner.vue b/packages/editor-ui/src/components/banners/V1Banner.vue
index c6feb04c3b..c335b2129f 100644
--- a/packages/editor-ui/src/components/banners/V1Banner.vue
+++ b/packages/editor-ui/src/components/banners/V1Banner.vue
@@ -15,19 +15,19 @@ const hasOwnerPermission = computed(() => hasPermission(['instanceOwner']));
 </script>
 
 <template>
-	<base-banner customIcon="info-circle" theme="warning" name="V1" :class="$style.v1container">
+	<BaseBanner custom-icon="info-circle" theme="warning" name="V1" :class="$style.v1container">
 		<template #mainContent>
 			<span v-html="locale.baseText('banners.v1.message')"></span>
 			<a
 				v-if="hasOwnerPermission"
 				:class="$style.link"
-				@click="dismissPermanently"
 				data-test-id="banner-confirm-v1"
+				@click="dismissPermanently"
 			>
 				<span v-html="locale.baseText('generic.dontShowAgain')"></span>
 			</a>
 		</template>
-	</base-banner>
+	</BaseBanner>
 </template>
 
 <style lang="scss" module>
diff --git a/packages/editor-ui/src/components/banners/__tests__/__snapshots__/V1Banner.spec.ts.snap b/packages/editor-ui/src/components/banners/__tests__/__snapshots__/V1Banner.spec.ts.snap
index 866b56e0cd..9f153ce0f5 100644
--- a/packages/editor-ui/src/components/banners/__tests__/__snapshots__/V1Banner.spec.ts.snap
+++ b/packages/editor-ui/src/components/banners/__tests__/__snapshots__/V1Banner.spec.ts.snap
@@ -6,8 +6,8 @@ exports[`V1 Banner > should render banner 1`] = `
     class="v1container"
     data-test-id="banners-V1"
     icon="info-circle"
-    iconsize="medium"
-    roundcorners="false"
+    icon-size="medium"
+    round-corners="false"
     theme="warning"
   >
     <div
@@ -37,8 +37,8 @@ exports[`V1 Banner > should render banner with dismiss call if user is owner 1`]
     class="v1container"
     data-test-id="banners-V1"
     icon="info-circle"
-    iconsize="medium"
-    roundcorners="false"
+    icon-size="medium"
+    round-corners="false"
     theme="warning"
   >
     <div
diff --git a/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue b/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue
index 74da3622b0..d27fd8bd72 100644
--- a/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue
+++ b/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue
@@ -15,11 +15,11 @@
 			</n8n-button>
 		</template>
 		<div :class="$style['filters-dropdown']" data-test-id="resources-list-filters-dropdown">
-			<slot :filters="modelValue" :setKeyValue="setKeyValue" />
+			<slot :filters="modelValue" :set-key-value="setKeyValue" />
 			<enterprise-edition
+				v-if="shareable"
 				class="mb-s"
 				:features="[EnterpriseEditionFeature.Sharing]"
-				v-if="shareable"
 			>
 				<n8n-input-label
 					:label="$locale.baseText('forms.resourceFiltersDropdown.ownedBy')"
@@ -30,13 +30,13 @@
 				/>
 				<n8n-user-select
 					:users="ownedByUsers"
-					:currentUserId="usersStore.currentUser.id"
-					:modelValue="modelValue.ownedBy"
+					:current-user-id="usersStore.currentUser.id"
+					:model-value="modelValue.ownedBy"
 					size="medium"
 					@update:modelValue="setKeyValue('ownedBy', $event)"
 				/>
 			</enterprise-edition>
-			<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]" v-if="shareable">
+			<enterprise-edition v-if="shareable" :features="[EnterpriseEditionFeature.Sharing]">
 				<n8n-input-label
 					:label="$locale.baseText('forms.resourceFiltersDropdown.sharedWith')"
 					:bold="false"
@@ -46,13 +46,13 @@
 				/>
 				<n8n-user-select
 					:users="sharedWithUsers"
-					:currentUserId="usersStore.currentUser.id"
-					:modelValue="modelValue.sharedWith"
+					:current-user-id="usersStore.currentUser.id"
+					:model-value="modelValue.sharedWith"
 					size="medium"
 					@update:modelValue="setKeyValue('sharedWith', $event)"
 				/>
 			</enterprise-edition>
-			<div :class="[$style['filters-dropdown-footer'], 'mt-s']" v-if="hasFilters">
+			<div v-if="hasFilters" :class="[$style['filters-dropdown-footer'], 'mt-s']">
 				<n8n-link @click="resetFilters">
 					{{ $locale.baseText('forms.resourceFiltersDropdown.reset') }}
 				</n8n-link>
@@ -129,6 +129,11 @@ export default defineComponent({
 			return this.filtersLength > 0;
 		},
 	},
+	watch: {
+		filtersLength(value: number) {
+			this.$emit('update:filtersLength', value);
+		},
+	},
 	methods: {
 		setKeyValue(key: string, value: unknown) {
 			const filters = {
@@ -152,11 +157,6 @@ export default defineComponent({
 			}
 		},
 	},
-	watch: {
-		filtersLength(value: number) {
-			this.$emit('update:filtersLength', value);
-		},
-	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/forms/ResourceOwnershipSelect.ee.vue b/packages/editor-ui/src/components/forms/ResourceOwnershipSelect.ee.vue
index 3cfcd9971d..448a5e4117 100644
--- a/packages/editor-ui/src/components/forms/ResourceOwnershipSelect.ee.vue
+++ b/packages/editor-ui/src/components/forms/ResourceOwnershipSelect.ee.vue
@@ -3,7 +3,7 @@
 		<n8n-menu
 			:items="menuItems"
 			mode="tabs"
-			:modelValue="value ? 'owner' : 'all'"
+			:model-value="value ? 'owner' : 'all'"
 			@update:modelValue="onSelectOwner"
 		/>
 	</div>
diff --git a/packages/editor-ui/src/components/layouts/PageViewLayout.vue b/packages/editor-ui/src/components/layouts/PageViewLayout.vue
index 5929714ae2..7f18b4203a 100644
--- a/packages/editor-ui/src/components/layouts/PageViewLayout.vue
+++ b/packages/editor-ui/src/components/layouts/PageViewLayout.vue
@@ -1,7 +1,7 @@
 <template>
-	<div :class="[$style.wrapper, !this.uiStore.sidebarMenuCollapsed && $style.expandedSidebar]">
+	<div :class="[$style.wrapper, !uiStore.sidebarMenuCollapsed && $style.expandedSidebar]">
 		<div :class="$style.container">
-			<aside :class="$style.aside" v-if="$slots.aside">
+			<aside v-if="$slots.aside" :class="$style.aside">
 				<slot name="aside" />
 			</aside>
 			<main :class="$style.content">
diff --git a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
index 81096ea111..f3ec7312fd 100644
--- a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
+++ b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
@@ -1,6 +1,6 @@
 <template>
-	<page-view-layout>
-		<template #aside v-if="showAside">
+	<PageViewLayout>
+		<template v-if="showAside" #aside>
 			<div :class="[$style['heading-wrapper'], 'mb-xs']">
 				<n8n-heading size="2xlarge">
 					{{ i18n.baseText(`${resourceKey}.heading`) }}
@@ -13,16 +13,16 @@
 						size="large"
 						block
 						:disabled="disabled"
-						@click="$emit('click:add', $event)"
 						data-test-id="resources-list-add"
+						@click="$emit('click:add', $event)"
 					>
 						{{ i18n.baseText(`${resourceKey}.add`) }}
 					</n8n-button>
 				</slot>
 			</div>
 
-			<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]" v-if="shareable">
-				<resource-ownership-select
+			<enterprise-edition v-if="shareable" :features="[EnterpriseEditionFeature.Sharing]">
+				<ResourceOwnershipSelect
 					v-model="isOwnerSubview"
 					:my-resources-label="i18n.baseText(`${resourceKey}.menu.my`)"
 					:all-resources-label="i18n.baseText(`${resourceKey}.menu.all`)"
@@ -52,22 +52,22 @@
 							)
 						"
 						:description="i18n.baseText(`${resourceKey}.empty.description`)"
-						:buttonText="i18n.baseText(`${resourceKey}.empty.button`)"
-						buttonType="secondary"
+						:button-text="i18n.baseText(`${resourceKey}.empty.button`)"
+						button-type="secondary"
 						@click:button="$emit('click:add', $event)"
 					/>
 				</slot>
 			</div>
-			<page-view-layout-list :overflow="type !== 'list'" v-else>
+			<PageViewLayoutList v-else :overflow="type !== 'list'">
 				<template #header>
 					<div class="mb-xs">
 						<div :class="$style['filters-row']">
 							<n8n-input
-								:modelValue="filtersModel.search"
+								ref="search"
+								:model-value="filtersModel.search"
 								:class="[$style['search'], 'mr-2xs']"
 								:placeholder="i18n.baseText(`${resourceKey}.search.placeholder`)"
 								clearable
-								ref="search"
 								data-test-id="resources-list-search"
 								@update:modelValue="onSearch"
 							>
@@ -79,17 +79,17 @@
 								<n8n-select v-model="sortBy" data-test-id="resources-list-sort">
 									<n8n-option
 										v-for="sortOption in sortOptions"
-										data-test-id="resources-list-sort-item"
 										:key="sortOption"
+										data-test-id="resources-list-sort-item"
 										:value="sortOption"
 										:label="i18n.baseText(`${resourceKey}.sort.${sortOption}`)"
 									/>
 								</n8n-select>
-								<resource-filters-dropdown
+								<ResourceFiltersDropdown
 									v-if="showFiltersDropdown"
 									:keys="filterKeys"
 									:reset="resetFilters"
-									:modelValue="filtersModel"
+									:model-value="filtersModel"
 									:shareable="shareable"
 									@update:modelValue="$emit('update:filters', $event)"
 									@update:filtersLength="onUpdateFiltersLength"
@@ -97,7 +97,7 @@
 									<template #default="resourceFiltersSlotProps">
 										<slot name="filters" v-bind="resourceFiltersSlotProps" />
 									</template>
-								</resource-filters-dropdown>
+								</ResourceFiltersDropdown>
 							</div>
 						</div>
 					</div>
@@ -107,7 +107,7 @@
 					<div v-if="showFiltersDropdown" v-show="hasFilters" class="mt-xs">
 						<n8n-info-tip :bold="false">
 							{{ i18n.baseText(`${resourceKey}.filters.active`) }}
-							<n8n-link data-test-id="workflows-filter-reset" @click="resetFilters" size="small">
+							<n8n-link data-test-id="workflows-filter-reset" size="small" @click="resetFilters">
 								{{ i18n.baseText(`${resourceKey}.filters.active.reset`) }}
 							</n8n-link>
 						</n8n-info-tip>
@@ -120,8 +120,8 @@
 
 				<div
 					v-if="filteredAndSortedSubviewResources.length > 0"
-					:class="$style.listWrapper"
 					ref="listWrapperRef"
+					:class="$style.listWrapper"
 				>
 					<n8n-recycle-scroller
 						v-if="type === 'list'"
@@ -132,7 +132,7 @@
 						item-key="id"
 					>
 						<template #default="{ item, updateItemSize }">
-							<slot :data="item" :updateItemSize="updateItemSize" />
+							<slot :data="item" :update-item-size="updateItemSize" />
 						</template>
 						<template #postListContent>
 							<slot name="postListContent" />
@@ -144,8 +144,8 @@
 						:class="$style.datatable"
 						:columns="typeProps.columns"
 						:rows="filteredAndSortedSubviewResources"
-						:currentPage="currentPage"
-						:rowsPerPage="rowsPerPage"
+						:current-page="currentPage"
+						:rows-per-page="rowsPerPage"
 						@update:currentPage="setCurrentPage"
 						@update:rowsPerPage="setRowsPerPage"
 					>
@@ -155,7 +155,7 @@
 					</n8n-datatable>
 				</div>
 
-				<n8n-text color="text-base" size="medium" data-test-id="resources-list-empty" v-else>
+				<n8n-text v-else color="text-base" size="medium" data-test-id="resources-list-empty">
 					{{ i18n.baseText(`${resourceKey}.noResults`) }}
 					<template v-if="shouldSwitchToAllSubview">
 						<span v-if="!filtersModel.search">
@@ -177,9 +177,9 @@
 				</n8n-text>
 
 				<slot name="postamble" />
-			</page-view-layout-list>
+			</PageViewLayoutList>
 		</template>
-	</page-view-layout>
+	</PageViewLayout>
 </template>
 
 <script lang="ts">
@@ -220,14 +220,14 @@ type IResourceKeyType = 'credentials' | 'workflows';
 type SearchRef = InstanceType<typeof N8nInput>;
 
 export default defineComponent({
-	name: 'resources-list-layout',
-	mixins: [debounceHelper],
+	name: 'ResourcesListLayout',
 	components: {
 		PageViewLayout,
 		PageViewLayoutList,
 		ResourceOwnershipSelect,
 		ResourceFiltersDropdown,
 	},
+	mixins: [debounceHelper],
 	props: {
 		resourceKey: {
 			type: String,
@@ -388,6 +388,37 @@ export default defineComponent({
 			return !this.hasFilters && this.isOwnerSubview && this.resourcesNotOwned.length > 0;
 		},
 	},
+	watch: {
+		isOwnerSubview() {
+			this.sendSubviewTelemetry();
+		},
+		filters(value) {
+			this.filtersModel = value;
+		},
+		'filtersModel.ownedBy'(value) {
+			if (value) {
+				this.setOwnerSubview(false);
+			}
+			this.sendFiltersTelemetry('ownedBy');
+		},
+		'filtersModel.sharedWith'() {
+			this.sendFiltersTelemetry('sharedWith');
+		},
+		'filtersModel.search'() {
+			void this.callDebounced(
+				'sendFiltersTelemetry',
+				{ debounceTime: 1000, trailing: true },
+				'search',
+			);
+		},
+		sortBy(newValue) {
+			this.$emit('sort', newValue);
+			this.sendSortingTelemetry();
+		},
+	},
+	mounted() {
+		void this.onMounted();
+	},
 	methods: {
 		async onMounted() {
 			await this.initialize();
@@ -485,37 +516,6 @@ export default defineComponent({
 			this.$emit('update:filters', this.filtersModel);
 		},
 	},
-	mounted() {
-		void this.onMounted();
-	},
-	watch: {
-		isOwnerSubview() {
-			this.sendSubviewTelemetry();
-		},
-		filters(value) {
-			this.filtersModel = value;
-		},
-		'filtersModel.ownedBy'(value) {
-			if (value) {
-				this.setOwnerSubview(false);
-			}
-			this.sendFiltersTelemetry('ownedBy');
-		},
-		'filtersModel.sharedWith'() {
-			this.sendFiltersTelemetry('sharedWith');
-		},
-		'filtersModel.search'() {
-			void this.callDebounced(
-				'sendFiltersTelemetry',
-				{ debounceTime: 1000, trailing: true },
-				'search',
-			);
-		},
-		sortBy(newValue) {
-			this.$emit('sort', newValue);
-			this.sendSortingTelemetry();
-		},
-	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/composables/useNodeHelpers.ts b/packages/editor-ui/src/composables/useNodeHelpers.ts
index 93b262381f..19e9a9d88a 100644
--- a/packages/editor-ui/src/composables/useNodeHelpers.ts
+++ b/packages/editor-ui/src/composables/useNodeHelpers.ts
@@ -545,7 +545,7 @@ export function useNodeHelpers() {
 		}
 
 		// TODO: Is this problematic?
-		let data: ITaskDataConnections | undefined = taskData.data!;
+		let data: ITaskDataConnections | undefined = taskData.data;
 		if (paneType === 'input' && taskData.inputOverride) {
 			data = taskData.inputOverride!;
 		}
diff --git a/packages/editor-ui/src/mixins/copyPaste.ts b/packages/editor-ui/src/mixins/copyPaste.ts
index 1eaac44ea9..61a7e42c5c 100644
--- a/packages/editor-ui/src/mixins/copyPaste.ts
+++ b/packages/editor-ui/src/mixins/copyPaste.ts
@@ -149,6 +149,19 @@ export const copyPaste = defineComponent({
 		// @ts-ignore
 		document.addEventListener('paste', this.onPaste);
 	},
+	beforeUnmount() {
+		if (this.hiddenInput) {
+			this.hiddenInput.remove();
+		}
+		if (this.onPaste) {
+			// @ts-ignore
+			document.removeEventListener('paste', this.onPaste);
+		}
+		if (this.onBeforePaste) {
+			// @ts-ignore
+			document.removeEventListener('beforepaste', this.onBeforePaste);
+		}
+	},
 	methods: {
 		receivedCopyPasteData(plainTextData: string, event?: ClipboardEvent): void {
 			// THIS HAS TO BE DEFINED IN COMPONENT!
@@ -226,17 +239,4 @@ export const copyPaste = defineComponent({
 			}
 		},
 	},
-	beforeUnmount() {
-		if (this.hiddenInput) {
-			this.hiddenInput.remove();
-		}
-		if (this.onPaste) {
-			// @ts-ignore
-			document.removeEventListener('paste', this.onPaste);
-		}
-		if (this.onBeforePaste) {
-			// @ts-ignore
-			document.removeEventListener('beforepaste', this.onBeforePaste);
-		}
-	},
 });
diff --git a/packages/editor-ui/src/mixins/nodeBase.ts b/packages/editor-ui/src/mixins/nodeBase.ts
index 470a2ca167..376ecf9782 100644
--- a/packages/editor-ui/src/mixins/nodeBase.ts
+++ b/packages/editor-ui/src/mixins/nodeBase.ts
@@ -57,6 +57,12 @@ const createDiamondOutputEndpointSpec = (): EndpointSpec => ({
 
 export const nodeBase = defineComponent({
 	mixins: [deviceSupportHelpers],
+	data() {
+		return {
+			inputs: [] as Array<ConnectionTypes | INodeInputConfiguration>,
+			outputs: [] as Array<ConnectionTypes | INodeOutputConfiguration>,
+		};
+	},
 	mounted() {
 		// Initialize the node
 		if (this.data !== null) {
@@ -68,12 +74,6 @@ export const nodeBase = defineComponent({
 			}
 		}
 	},
-	data() {
-		return {
-			inputs: [] as Array<ConnectionTypes | INodeInputConfiguration>,
-			outputs: [] as Array<ConnectionTypes | INodeOutputConfiguration>,
-		};
-	},
 	computed: {
 		...mapStores(useNodeTypesStore, useUIStore, useCanvasStore, useWorkflowsStore, useHistoryStore),
 		data(): INodeUi | null {
diff --git a/packages/editor-ui/src/mixins/pushConnection.ts b/packages/editor-ui/src/mixins/pushConnection.ts
index 201f9425a4..7117ebd4f3 100644
--- a/packages/editor-ui/src/mixins/pushConnection.ts
+++ b/packages/editor-ui/src/mixins/pushConnection.ts
@@ -41,6 +41,7 @@ import { useCollaborationStore } from '@/stores/collaboration.store';
 import { useExternalHooks } from '@/composables/useExternalHooks';
 
 export const pushConnection = defineComponent({
+	mixins: [workflowHelpers],
 	setup() {
 		return {
 			...useTitleChange(),
@@ -48,18 +49,17 @@ export const pushConnection = defineComponent({
 			nodeHelpers: useNodeHelpers(),
 		};
 	},
-	created() {
-		this.pushStore.addEventListener((message) => {
-			void this.pushMessageReceived(message);
-		});
-	},
-	mixins: [workflowHelpers],
 	data() {
 		return {
 			retryTimeout: null as NodeJS.Timeout | null,
 			pushMessageQueue: [] as Array<{ message: IPushData; retriesLeft: number }>,
 		};
 	},
+	created() {
+		this.pushStore.addEventListener((message) => {
+			void this.pushMessageReceived(message);
+		});
+	},
 	computed: {
 		...mapStores(
 			useCredentialsStore,
diff --git a/packages/editor-ui/src/plugins/components.ts b/packages/editor-ui/src/plugins/components.ts
index 392ed5dd3d..7a775322fe 100644
--- a/packages/editor-ui/src/plugins/components.ts
+++ b/packages/editor-ui/src/plugins/components.ts
@@ -12,7 +12,7 @@ export const GlobalComponentsPlugin: Plugin<{}> = {
 	install(app) {
 		const messageService = useMessage();
 
-		app.component('enterprise-edition', EnterpriseEdition);
+		app.component('EnterpriseEdition', EnterpriseEdition);
 		app.component('RBAC', RBAC);
 
 		app.use(ElementPlus);
diff --git a/packages/editor-ui/src/plugins/icons/index.ts b/packages/editor-ui/src/plugins/icons/index.ts
index 073b306996..338ba2295a 100644
--- a/packages/editor-ui/src/plugins/icons/index.ts
+++ b/packages/editor-ui/src/plugins/icons/index.ts
@@ -316,6 +316,6 @@ export const FontAwesomePlugin: Plugin<{}> = {
 		addIcon(faXmark);
 		addIcon(faDownload);
 
-		app.component('font-awesome-icon', FontAwesomeIcon);
+		app.component('FontAwesomeIcon', FontAwesomeIcon);
 	},
 };
diff --git a/packages/editor-ui/src/stores/workflows.store.ts b/packages/editor-ui/src/stores/workflows.store.ts
index cecd868c24..24c342324c 100644
--- a/packages/editor-ui/src/stores/workflows.store.ts
+++ b/packages/editor-ui/src/stores/workflows.store.ts
@@ -200,8 +200,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 		isNodeInOutgoingNodeConnections() {
 			return (firstNode: string, secondNode: string): boolean => {
 				const firstNodeConnections = this.outgoingConnectionsByNodeName(firstNode);
-				if (!firstNodeConnections || !firstNodeConnections.main || !firstNodeConnections.main[0])
-					return false;
+				if (!firstNodeConnections?.main?.[0]) return false;
 				const connections = firstNodeConnections.main[0];
 				if (connections.some((node) => node.node === secondNode)) return true;
 				return connections.some((node) =>
diff --git a/packages/editor-ui/src/views/AuthView.vue b/packages/editor-ui/src/views/AuthView.vue
index 4d3b7a473c..d159ba4486 100644
--- a/packages/editor-ui/src/views/AuthView.vue
+++ b/packages/editor-ui/src/views/AuthView.vue
@@ -10,7 +10,7 @@
 			<n8n-form-box
 				v-bind="form"
 				data-test-id="auth-form"
-				:buttonLoading="formLoading"
+				:button-loading="formLoading"
 				@secondaryClick="onSecondaryClick"
 				@submit="onSubmit"
 				@update="onUpdate"
diff --git a/packages/editor-ui/src/views/CanvasAddButton.vue b/packages/editor-ui/src/views/CanvasAddButton.vue
index 25174fdc5f..e3bc94a049 100644
--- a/packages/editor-ui/src/views/CanvasAddButton.vue
+++ b/packages/editor-ui/src/views/CanvasAddButton.vue
@@ -1,8 +1,8 @@
 <template>
 	<div
+		ref="container"
 		:class="$style.canvasAddButton"
 		:style="containerCssVars"
-		ref="container"
 		data-test-id="canvas-add-button"
 	>
 		<n8n-tooltip
@@ -12,7 +12,7 @@
 			:popper-class="$style.tooltip"
 			:show-after="700"
 		>
-			<button :class="$style.button" @click="$emit('click')" data-test-id="canvas-plus-button">
+			<button :class="$style.button" data-test-id="canvas-plus-button" @click="$emit('click')">
 				<font-awesome-icon icon="plus" size="lg" />
 			</button>
 			<template #content>
diff --git a/packages/editor-ui/src/views/ChangePasswordView.vue b/packages/editor-ui/src/views/ChangePasswordView.vue
index 9c28492352..a7598a4697 100644
--- a/packages/editor-ui/src/views/ChangePasswordView.vue
+++ b/packages/editor-ui/src/views/ChangePasswordView.vue
@@ -2,7 +2,7 @@
 	<AuthView
 		v-if="config"
 		:form="config"
-		:formLoading="loading"
+		:form-loading="loading"
 		@submit="onSubmit"
 		@update="onInput"
 	/>
diff --git a/packages/editor-ui/src/views/CredentialsView.vue b/packages/editor-ui/src/views/CredentialsView.vue
index 3a7fab586c..b1266a636d 100644
--- a/packages/editor-ui/src/views/CredentialsView.vue
+++ b/packages/editor-ui/src/views/CredentialsView.vue
@@ -1,5 +1,5 @@
 <template>
-	<resources-list-layout
+	<ResourcesListLayout
 		ref="layout"
 		resource-key="credentials"
 		:resources="allCredentials"
@@ -11,7 +11,7 @@
 		@update:filters="filters = $event"
 	>
 		<template #default="{ data }">
-			<credential-card data-test-id="resources-list-item" class="mb-2xs" :data="data" />
+			<CredentialCard data-test-id="resources-list-item" class="mb-2xs" :data="data" />
 		</template>
 		<template #filters="{ setKeyValue }">
 			<div class="mb-s">
@@ -23,11 +23,11 @@
 					class="mb-3xs"
 				/>
 				<n8n-select
-					:modelValue="filters.type"
+					ref="typeInput"
+					:model-value="filters.type"
 					size="medium"
 					multiple
 					filterable
-					ref="typeInput"
 					:class="$style['type-input']"
 					@update:modelValue="setKeyValue('type', $event)"
 				>
@@ -40,7 +40,7 @@
 				</n8n-select>
 			</div>
 		</template>
-	</resources-list-layout>
+	</ResourcesListLayout>
 </template>
 
 <script lang="ts">
@@ -97,6 +97,23 @@ export default defineComponent({
 			return this.credentialsStore.credentialTypesById;
 		},
 	},
+	watch: {
+		'filters.type'() {
+			this.sendFiltersTelemetry('type');
+		},
+	},
+	mounted() {
+		this.sourceControlStoreUnsubscribe = this.sourceControlStore.$onAction(({ name, after }) => {
+			if (name === 'pullWorkfolder' && after) {
+				after(() => {
+					void this.initialize();
+				});
+			}
+		});
+	},
+	beforeUnmount() {
+		this.sourceControlStoreUnsubscribe();
+	},
 	methods: {
 		addCredential() {
 			this.uiStore.openModal(CREDENTIAL_SELECT_MODAL_KEY);
@@ -143,23 +160,6 @@ export default defineComponent({
 			(this.$refs.layout as IResourcesListLayoutInstance).sendFiltersTelemetry(source);
 		},
 	},
-	watch: {
-		'filters.type'() {
-			this.sendFiltersTelemetry('type');
-		},
-	},
-	mounted() {
-		this.sourceControlStoreUnsubscribe = this.sourceControlStore.$onAction(({ name, after }) => {
-			if (name === 'pullWorkfolder' && after) {
-				after(() => {
-					void this.initialize();
-				});
-			}
-		});
-	},
-	beforeUnmount() {
-		this.sourceControlStoreUnsubscribe();
-	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/views/ErrorView.vue b/packages/editor-ui/src/views/ErrorView.vue
index 26340fe264..8266d2bcc0 100644
--- a/packages/editor-ui/src/views/ErrorView.vue
+++ b/packages/editor-ui/src/views/ErrorView.vue
@@ -8,7 +8,7 @@
 				</n8n-heading>
 			</div>
 			<div>
-				<n8n-text size="large" v-if="errorCode">
+				<n8n-text v-if="errorCode" size="large">
 					{{ errorCode }} {{ $locale.baseText('error') }}
 				</n8n-text>
 			</div>
diff --git a/packages/editor-ui/src/views/ForgotMyPasswordView.vue b/packages/editor-ui/src/views/ForgotMyPasswordView.vue
index eb8fe919f7..b04ef8e760 100644
--- a/packages/editor-ui/src/views/ForgotMyPasswordView.vue
+++ b/packages/editor-ui/src/views/ForgotMyPasswordView.vue
@@ -1,5 +1,5 @@
 <template>
-	<AuthView :form="formConfig" :formLoading="loading" @submit="onSubmit" />
+	<AuthView :form="formConfig" :form-loading="loading" @submit="onSubmit" />
 </template>
 
 <script lang="ts">
diff --git a/packages/editor-ui/src/views/MfaView.vue b/packages/editor-ui/src/views/MfaView.vue
index 3ae8af4f38..70ffb21468 100644
--- a/packages/editor-ui/src/views/MfaView.vue
+++ b/packages/editor-ui/src/views/MfaView.vue
@@ -13,30 +13,30 @@
 			</div>
 			<div :class="[$style.formContainer, reportError ? $style.formError : '']">
 				<n8n-form-inputs
-					data-test-id="mfa-login-form"
 					v-if="formInputs"
+					data-test-id="mfa-login-form"
 					:inputs="formInputs"
-					:eventBus="formBus"
+					:event-bus="formBus"
 					@input="onInput"
 					@submit="onSubmit"
 				/>
 				<div :class="$style.infoBox">
 					<n8n-text
+						v-if="!showRecoveryCodeForm && !reportError"
 						size="small"
 						color="text-base"
 						:bold="false"
-						v-if="!showRecoveryCodeForm && !reportError"
 						>{{ $locale.baseText('mfa.code.input.info') }}
 						<a data-test-id="mfa-enter-recovery-code-button" @click="onRecoveryCodeClick">{{
 							$locale.baseText('mfa.code.input.info.action')
 						}}</a></n8n-text
 					>
-					<n8n-text color="danger" v-if="reportError" size="small"
+					<n8n-text v-if="reportError" color="danger" size="small"
 						>{{ formError }}
 						<a
 							v-if="!showRecoveryCodeForm"
-							@click="onRecoveryCodeClick"
 							:class="$style.recoveryCodeLink"
+							@click="onRecoveryCodeClick"
 						>
 							{{ $locale.baseText('mfa.recovery.input.info.action') }}</a
 						>
@@ -89,16 +89,13 @@ export const FORM = {
 
 export default defineComponent({
 	name: 'MfaView',
-	mixins: [genericHelpers],
 	components: {
 		Logo,
 	},
+	mixins: [genericHelpers],
 	props: {
 		reportError: Boolean,
 	},
-	async mounted() {
-		this.formInputs = [this.mfaTokenFieldWithDefaults()];
-	},
 	setup() {
 		return {
 			...useToast(),
@@ -114,6 +111,9 @@ export default defineComponent({
 			formError: '',
 		};
 	},
+	async mounted() {
+		this.formInputs = [this.mfaTokenFieldWithDefaults()];
+	},
 	computed: {
 		...mapStores(useUsersStore),
 	},
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 14259b90b5..70da535e5a 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -1,13 +1,14 @@
 <template>
 	<div :class="$style['content']">
 		<div
-			class="node-view-root do-not-select"
 			id="node-view-root"
+			class="node-view-root do-not-select"
 			data-test-id="node-view-root"
 			@dragover="onDragOver"
 			@drop="onDrop"
 		>
 			<div
+				v-touch:tap="touchTap"
 				class="node-view-wrapper"
 				:class="workflowClasses"
 				data-test-id="node-view-wrapper"
@@ -15,7 +16,6 @@
 				@touchend="mouseUp"
 				@touchmove="mouseMoveNodeWorkflow"
 				@mousedown="mouseDown"
-				v-touch:tap="touchTap"
 				@mouseup="mouseUp"
 				@contextmenu="contextMenu.open"
 				@wheel="canvasStore.wheelScroll"
@@ -28,68 +28,68 @@
 				/>
 				<div
 					id="node-view"
+					ref="nodeView"
 					class="node-view"
 					:style="workflowStyle"
-					ref="nodeView"
 					data-test-id="node-view"
 				>
-					<canvas-add-button
-						:style="canvasAddButtonStyle"
-						@click="showTriggerCreator(NODE_CREATOR_OPEN_SOURCES.TRIGGER_PLACEHOLDER_BUTTON)"
+					<CanvasAddButton
 						v-show="showCanvasAddButton"
-						:showTooltip="!containsTrigger && showTriggerMissingTooltip"
-						:position="canvasStore.canvasAddButtonPosition"
 						ref="canvasAddButton"
-						@hook:mounted="canvasStore.setRecenteredCanvasAddButtonPosition"
+						:style="canvasAddButtonStyle"
+						:show-tooltip="!containsTrigger && showTriggerMissingTooltip"
+						:position="canvasStore.canvasAddButtonPosition"
 						data-test-id="canvas-add-button"
+						@click="showTriggerCreator(NODE_CREATOR_OPEN_SOURCES.TRIGGER_PLACEHOLDER_BUTTON)"
+						@hook:mounted="canvasStore.setRecenteredCanvasAddButtonPosition"
 					/>
-					<node
+					<Node
 						v-for="nodeData in nodesToRender"
-						@deselectAllNodes="deselectAllNodes"
-						@deselectNode="nodeDeselectedByName"
-						@nodeSelected="nodeSelectedByName"
-						@runWorkflow="onRunNode"
-						@moved="onNodeMoved"
-						@run="onNodeRun"
 						:key="`${nodeData.id}_node`"
 						:name="nodeData.name"
-						:isReadOnly="isReadOnlyRoute || readOnlyEnv"
+						:is-read-only="isReadOnlyRoute || readOnlyEnv"
 						:instance="instance"
-						:isActive="!!activeNode && activeNode.name === nodeData.name"
-						:hideActions="pullConnActive"
-						:isProductionExecutionPreview="isProductionExecutionPreview"
+						@deselectAllNodes="deselectAllNodes"
+						:is-active="!!activeNode && activeNode.name === nodeData.name"
+						@deselectNode="nodeDeselectedByName"
+						:hide-actions="pullConnActive"
+						@nodeSelected="nodeSelectedByName"
+						:is-production-execution-preview="isProductionExecutionPreview"
+						@runWorkflow="onRunNode"
 						:workflow="currentWorkflowObject"
-						:disablePointerEvents="!canOpenNDV"
-						:hideNodeIssues="hideNodeIssues"
+						@moved="onNodeMoved"
+						:disable-pointer-events="!canOpenNDV"
+						@run="onNodeRun"
+						:hide-node-issues="hideNodeIssues"
 					>
 						<template #custom-tooltip>
 							<span
 								v-text="$locale.baseText('nodeView.placeholderNode.addTriggerNodeBeforeExecuting')"
 							/>
 						</template>
-					</node>
-					<sticky
+					</Node>
+					<Sticky
 						v-for="stickyData in stickiesToRender"
-						@deselectAllNodes="deselectAllNodes"
-						@deselectNode="nodeDeselectedByName"
-						@nodeSelected="nodeSelectedByName"
-						@removeNode="(name) => removeNode(name, true)"
 						:key="`${stickyData.id}_sticky`"
 						:name="stickyData.name"
 						:workflow="currentWorkflowObject"
-						:isReadOnly="isReadOnlyRoute || readOnlyEnv"
+						:is-read-only="isReadOnlyRoute || readOnlyEnv"
 						:instance="instance"
-						:isActive="!!activeNode && activeNode.name === stickyData.name"
-						:nodeViewScale="nodeViewScale"
-						:gridSize="GRID_SIZE"
-						:hideActions="pullConnActive"
+						:is-active="!!activeNode && activeNode.name === stickyData.name"
+						:node-view-scale="nodeViewScale"
+						@deselectAllNodes="deselectAllNodes"
+						:grid-size="GRID_SIZE"
+						@deselectNode="nodeDeselectedByName"
+						:hide-actions="pullConnActive"
+						@nodeSelected="nodeSelectedByName"
+						@removeNode="(name) => removeNode(name, true)"
 					/>
 				</div>
 			</div>
-			<node-details-view
-				:readOnly="isReadOnlyRoute || readOnlyEnv"
+			<NodeDetailsView
+				:read-only="isReadOnlyRoute || readOnlyEnv"
 				:renaming="renamingActive"
-				:isProductionExecutionPreview="isProductionExecutionPreview"
+				:is-production-execution-preview="isProductionExecutionPreview"
 				@redrawNode="redrawNode"
 				@switchSelectedNode="onSwitchSelectedNode"
 				@valueChanged="valueChanged"
@@ -111,19 +111,18 @@
 			<Suspense>
 				<ContextMenu @action="onContextMenuAction" />
 			</Suspense>
-			<div class="workflow-execute-wrapper" v-if="!isReadOnlyRoute && !readOnlyEnv">
+			<div v-if="!isReadOnlyRoute && !readOnlyEnv" class="workflow-execute-wrapper">
 				<span
+					v-if="!isManualChatOnly"
 					@mouseenter="showTriggerMissingToltip(true)"
 					@mouseleave="showTriggerMissingToltip(false)"
 					@click="onRunContainerClick"
-					v-if="!isManualChatOnly"
 				>
-					<keyboard-shortcut-tooltip
+					<KeyboardShortcutTooltip
 						:label="runButtonText"
 						:shortcut="{ metaKey: true, keys: ['↵'] }"
 					>
 						<n8n-button
-							@click.stop="onRunWorkflow"
 							:loading="workflowRunning"
 							:label="runButtonText"
 							size="large"
@@ -131,18 +130,19 @@
 							type="primary"
 							:disabled="isExecutionDisabled"
 							data-test-id="execute-workflow-button"
+							@click.stop="onRunWorkflow"
 						/>
-					</keyboard-shortcut-tooltip>
+					</KeyboardShortcutTooltip>
 				</span>
 
 				<n8n-button
 					v-if="containsChatNodes"
-					@click.stop="onOpenChat"
 					label="Chat"
 					size="large"
 					icon="comment"
 					type="primary"
 					data-test-id="workflow-chat-button"
+					@click.stop="onOpenChat"
 				/>
 
 				<n8n-icon-button
@@ -157,8 +157,8 @@
 							: $locale.baseText('nodeView.stopCurrentExecution')
 					"
 					:loading="stopExecutionInProgress"
-					@click.stop="stopExecution"
 					data-test-id="stop-execution-button"
+					@click.stop="stopExecution"
 				/>
 
 				<n8n-icon-button
@@ -168,8 +168,8 @@
 					size="large"
 					:title="$locale.baseText('nodeView.stopWaitingForWebhookCall')"
 					type="secondary"
-					@click.stop="stopWaitingForWebhook"
 					data-test-id="stop-execution-waiting-for-webhook-button"
+					@click.stop="stopWaitingForWebhook"
 				/>
 
 				<n8n-icon-button
@@ -183,8 +183,8 @@
 					:title="$locale.baseText('nodeView.deletesTheCurrentExecutionData')"
 					icon="trash"
 					size="large"
-					@click.stop="clearExecutionData"
 					data-test-id="clear-execution-data-button"
+					@click.stop="clearExecutionData"
 				/>
 			</div>
 		</div>
@@ -384,15 +384,6 @@ const CanvasControls = defineAsyncComponent(async () => import('@/components/Can
 
 export default defineComponent({
 	name: 'NodeView',
-	mixins: [
-		copyPaste,
-		genericHelpers,
-		moveNodeWorkflow,
-		workflowHelpers,
-		workflowRun,
-		debounceHelper,
-		pinData,
-	],
 	components: {
 		NodeDetailsView,
 		Node,
@@ -403,6 +394,75 @@ export default defineComponent({
 		CanvasControls,
 		ContextMenu,
 	},
+	mixins: [
+		copyPaste,
+		genericHelpers,
+		moveNodeWorkflow,
+		workflowHelpers,
+		workflowRun,
+		debounceHelper,
+		pinData,
+	],
+	async beforeRouteLeave(to, from, next) {
+		if (
+			getNodeViewTab(to) === MAIN_HEADER_TABS.EXECUTIONS ||
+			from.name === VIEWS.TEMPLATE_IMPORT ||
+			(getNodeViewTab(to) === MAIN_HEADER_TABS.WORKFLOW && from.name === VIEWS.EXECUTION_DEBUG)
+		) {
+			next();
+			return;
+		}
+		if (this.uiStore.stateIsDirty && !this.readOnlyEnv) {
+			const confirmModal = await this.confirm(
+				this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
+				{
+					title: this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
+					type: 'warning',
+					confirmButtonText: this.$locale.baseText(
+						'generic.unsavedWork.confirmMessage.confirmButtonText',
+					),
+					cancelButtonText: this.$locale.baseText(
+						'generic.unsavedWork.confirmMessage.cancelButtonText',
+					),
+					showClose: true,
+				},
+			);
+			if (confirmModal === MODAL_CONFIRM) {
+				// Make sure workflow id is empty when leaving the editor
+				this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
+				const saved = await this.saveCurrentWorkflow({}, false);
+				if (saved) {
+					await this.settingsStore.fetchPromptsData();
+				}
+				this.uiStore.stateIsDirty = false;
+
+				if (from.name === VIEWS.NEW_WORKFLOW) {
+					// Replace the current route with the new workflow route
+					// before navigating to the new route when saving new workflow.
+					await this.$router.replace(
+						{ name: VIEWS.WORKFLOW, params: { name: this.currentWorkflow } },
+						() => {
+							// We can't use next() here since vue-router
+							// would prevent the navigation with an error
+							void this.$router.push(to as RawLocation);
+						},
+					);
+				} else {
+					this.collaborationStore.notifyWorkflowClosed(this.currentWorkflow);
+					next();
+				}
+			} else if (confirmModal === MODAL_CANCEL) {
+				this.collaborationStore.notifyWorkflowClosed(this.currentWorkflow);
+				this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
+				this.resetWorkspace();
+				this.uiStore.stateIsDirty = false;
+				next();
+			}
+		} else {
+			this.collaborationStore.notifyWorkflowClosed(this.currentWorkflow);
+			next();
+		}
+	},
 	setup(props, ctx) {
 		const externalHooks = useExternalHooks();
 		const locale = useI18n();
@@ -427,10 +487,6 @@ export default defineComponent({
 			...workflowRun.setup?.(props, ctx),
 		};
 	},
-	errorCaptured: (err, vm, info) => {
-		console.error('errorCaptured');
-		console.error(err);
-	},
 	watch: {
 		// Listen to route changes and load the workflow accordingly
 		async $route(to: Route, from: Route) {
@@ -491,65 +547,9 @@ export default defineComponent({
 			}
 		},
 	},
-	async beforeRouteLeave(to, from, next) {
-		if (
-			getNodeViewTab(to) === MAIN_HEADER_TABS.EXECUTIONS ||
-			from.name === VIEWS.TEMPLATE_IMPORT ||
-			(getNodeViewTab(to) === MAIN_HEADER_TABS.WORKFLOW && from.name === VIEWS.EXECUTION_DEBUG)
-		) {
-			next();
-			return;
-		}
-		if (this.uiStore.stateIsDirty && !this.readOnlyEnv) {
-			const confirmModal = await this.confirm(
-				this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
-				{
-					title: this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
-					type: 'warning',
-					confirmButtonText: this.$locale.baseText(
-						'generic.unsavedWork.confirmMessage.confirmButtonText',
-					),
-					cancelButtonText: this.$locale.baseText(
-						'generic.unsavedWork.confirmMessage.cancelButtonText',
-					),
-					showClose: true,
-				},
-			);
-			if (confirmModal === MODAL_CONFIRM) {
-				// Make sure workflow id is empty when leaving the editor
-				this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
-				const saved = await this.saveCurrentWorkflow({}, false);
-				if (saved) {
-					await this.settingsStore.fetchPromptsData();
-				}
-				this.uiStore.stateIsDirty = false;
-
-				if (from.name === VIEWS.NEW_WORKFLOW) {
-					// Replace the current route with the new workflow route
-					// before navigating to the new route when saving new workflow.
-					await this.$router.replace(
-						{ name: VIEWS.WORKFLOW, params: { name: this.currentWorkflow } },
-						() => {
-							// We can't use next() here since vue-router
-							// would prevent the navigation with an error
-							void this.$router.push(to as RawLocation);
-						},
-					);
-				} else {
-					this.collaborationStore.notifyWorkflowClosed(this.currentWorkflow);
-					next();
-				}
-			} else if (confirmModal === MODAL_CANCEL) {
-				this.collaborationStore.notifyWorkflowClosed(this.currentWorkflow);
-				this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
-				this.resetWorkspace();
-				this.uiStore.stateIsDirty = false;
-				next();
-			}
-		} else {
-			this.collaborationStore.notifyWorkflowClosed(this.currentWorkflow);
-			next();
-		}
+	errorCaptured: (err, vm, info) => {
+		console.error('errorCaptured');
+		console.error(err);
 	},
 	computed: {
 		...mapStores(
@@ -750,6 +750,229 @@ export default defineComponent({
 			hideNodeIssues: false,
 		};
 	},
+	async mounted() {
+		this.resetWorkspace();
+		this.canvasStore.initInstance(this.$refs.nodeView as HTMLElement);
+		this.titleReset();
+		window.addEventListener('message', this.onPostMessageReceived);
+
+		this.startLoading();
+		const loadPromises = [
+			this.loadActiveWorkflows(),
+			this.loadCredentials(),
+			this.loadCredentialTypes(),
+			this.loadVariables(),
+			this.loadSecrets(),
+		];
+
+		if (this.nodeTypesStore.allNodeTypes.length === 0) {
+			loadPromises.push(this.loadNodeTypes());
+		}
+
+		try {
+			await Promise.all(loadPromises);
+		} catch (error) {
+			this.showError(
+				error,
+				this.$locale.baseText('nodeView.showError.mounted1.title'),
+				this.$locale.baseText('nodeView.showError.mounted1.message') + ':',
+			);
+			return;
+		}
+
+		ready(async () => {
+			try {
+				try {
+					this.bindCanvasEvents();
+				} catch {} // This will break if mounted after jsplumb has been initiated from executions preview, so continue if it breaks
+				await this.initView();
+				if (window.parent) {
+					window.parent.postMessage(
+						JSON.stringify({ command: 'n8nReady', version: this.rootStore.versionCli }),
+						'*',
+					);
+				}
+			} catch (error) {
+				this.showError(
+					error,
+					this.$locale.baseText('nodeView.showError.mounted2.title'),
+					this.$locale.baseText('nodeView.showError.mounted2.message') + ':',
+				);
+			}
+			this.stopLoading();
+
+			setTimeout(() => {
+				void this.usersStore.showPersonalizationSurvey();
+				this.addPinDataConnections(this.workflowsStore.getPinData || ({} as IPinData));
+			}, 0);
+		});
+
+		// TODO: This currently breaks since front-end hooks are still not updated to work with pinia store
+		void this.externalHooks.run('nodeView.mount').catch((e) => {});
+
+		if (
+			this.currentUser?.personalizationAnswers !== null &&
+			this.settingsStore.onboardingCallPromptEnabled &&
+			this.currentUser &&
+			getAccountAge(this.currentUser) <= ONBOARDING_PROMPT_TIMEBOX
+		) {
+			const onboardingResponse = await this.uiStore.getNextOnboardingPrompt();
+			const promptTimeout =
+				onboardingResponse.toast_sequence_number === 1 ? FIRST_ONBOARDING_PROMPT_TIMEOUT : 1000;
+
+			if (onboardingResponse.title && onboardingResponse.description) {
+				setTimeout(async () => {
+					this.showToast({
+						type: 'info',
+						title: onboardingResponse.title,
+						message: onboardingResponse.description,
+						duration: 0,
+						customClass: 'clickable',
+						closeOnClick: true,
+						onClick: () => {
+							this.$telemetry.track('user clicked onboarding toast', {
+								seq_num: onboardingResponse.toast_sequence_number,
+								title: onboardingResponse.title,
+								description: onboardingResponse.description,
+							});
+							this.uiStore.openModal(ONBOARDING_CALL_SIGNUP_MODAL_KEY);
+						},
+					});
+				}, promptTimeout);
+			}
+		}
+
+		sourceControlEventBus.on('pull', this.onSourceControlPull);
+
+		this.registerCustomAction({
+			key: 'openNodeDetail',
+			action: ({ node }: { node: string }) => {
+				this.nodeSelectedByName(node, true);
+			},
+		});
+
+		this.registerCustomAction({
+			key: 'openSelectiveNodeCreator',
+			action: async ({
+				connectiontype,
+				node,
+				creatorview,
+			}: {
+				connectiontype: NodeConnectionType;
+				node: string;
+				creatorview?: string;
+			}) => {
+				const nodeName = node ?? this.ndvStore.activeNodeName;
+				const nodeData = nodeName ? this.workflowsStore.getNodeByName(nodeName) : null;
+
+				this.ndvStore.activeNodeName = null;
+				await this.redrawNode(node);
+				// Wait for UI to update
+				setTimeout(() => {
+					if (creatorview) {
+						this.onToggleNodeCreator({
+							createNodeActive: true,
+							nodeCreatorView: creatorview,
+						});
+					} else if (connectiontype && nodeData) {
+						this.insertNodeAfterSelected({
+							index: 0,
+							endpointUuid: `${nodeData.id}-input${connectiontype}0`,
+							eventSource: NODE_CREATOR_OPEN_SOURCES.NOTICE_ERROR_MESSAGE,
+							outputType: connectiontype,
+							sourceId: nodeData.id,
+						});
+					}
+				}, 0);
+			},
+		});
+
+		this.readOnlyEnvRouteCheck();
+		this.canvasStore.isDemo = this.isDemo;
+	},
+	activated() {
+		const openSideMenu = this.uiStore.addFirstStepOnLoad;
+		if (openSideMenu) {
+			this.showTriggerCreator(NODE_CREATOR_OPEN_SOURCES.TRIGGER_PLACEHOLDER_BUTTON);
+		}
+		this.uiStore.addFirstStepOnLoad = false;
+		this.bindCanvasEvents();
+		document.addEventListener('keydown', this.keyDown);
+		document.addEventListener('keyup', this.keyUp);
+		window.addEventListener('message', this.onPostMessageReceived);
+		window.addEventListener('pageshow', this.onPageShow);
+
+		nodeViewEventBus.on('newWorkflow', this.newWorkflow);
+		nodeViewEventBus.on('importWorkflowData', this.onImportWorkflowDataEvent);
+		nodeViewEventBus.on('importWorkflowUrl', this.onImportWorkflowUrlEvent);
+		nodeViewEventBus.on('openChat', this.onOpenChat);
+		historyBus.on('nodeMove', this.onMoveNode);
+		historyBus.on('revertAddNode', this.onRevertAddNode);
+		historyBus.on('revertRemoveNode', this.onRevertRemoveNode);
+		historyBus.on('revertAddConnection', this.onRevertAddConnection);
+		historyBus.on('revertRemoveConnection', this.onRevertRemoveConnection);
+		historyBus.on('revertRenameNode', this.onRevertNameChange);
+		historyBus.on('enableNodeToggle', this.onRevertEnableToggle);
+
+		dataPinningEventBus.on('pin-data', this.addPinDataConnections);
+		dataPinningEventBus.on('unpin-data', this.removePinDataConnections);
+		nodeViewEventBus.on('saveWorkflow', this.saveCurrentWorkflowExternal);
+
+		this.canvasStore.isDemo = this.isDemo;
+	},
+	deactivated() {
+		this.unbindCanvasEvents();
+		document.removeEventListener('keydown', this.keyDown);
+		document.removeEventListener('keyup', this.keyUp);
+		window.removeEventListener('message', this.onPostMessageReceived);
+		window.removeEventListener('beforeunload', this.onBeforeUnload);
+		window.removeEventListener('pageshow', this.onPageShow);
+
+		nodeViewEventBus.off('newWorkflow', this.newWorkflow);
+		nodeViewEventBus.off('importWorkflowData', this.onImportWorkflowDataEvent);
+		nodeViewEventBus.off('importWorkflowUrl', this.onImportWorkflowUrlEvent);
+		nodeViewEventBus.off('openChat', this.onOpenChat);
+		historyBus.off('nodeMove', this.onMoveNode);
+		historyBus.off('revertAddNode', this.onRevertAddNode);
+		historyBus.off('revertRemoveNode', this.onRevertRemoveNode);
+		historyBus.off('revertAddConnection', this.onRevertAddConnection);
+		historyBus.off('revertRemoveConnection', this.onRevertRemoveConnection);
+		historyBus.off('revertRenameNode', this.onRevertNameChange);
+		historyBus.off('enableNodeToggle', this.onRevertEnableToggle);
+
+		dataPinningEventBus.off('pin-data', this.addPinDataConnections);
+		dataPinningEventBus.off('unpin-data', this.removePinDataConnections);
+		nodeViewEventBus.off('saveWorkflow', this.saveCurrentWorkflowExternal);
+	},
+	beforeMount() {
+		if (!this.isDemo) {
+			this.pushStore.pushConnect();
+		}
+	},
+	beforeUnmount() {
+		// Make sure the event listeners get removed again else we
+		// could add up with them registered multiple times
+		document.removeEventListener('keydown', this.keyDown);
+		document.removeEventListener('keyup', this.keyUp);
+		this.unregisterCustomAction('showNodeCreator');
+		this.unregisterCustomAction('openNodeDetail');
+		this.unregisterCustomAction('openSelectiveNodeCreator');
+
+		if (!this.isDemo) {
+			this.pushStore.pushDisconnect();
+		}
+
+		this.resetWorkspace();
+		this.instance.unbind();
+		this.instance.destroy();
+		this.uiStore.stateIsDirty = false;
+		window.removeEventListener('message', this.onPostMessageReceived);
+		nodeViewEventBus.off('newWorkflow', this.newWorkflow);
+		nodeViewEventBus.off('importWorkflowData', this.onImportWorkflowDataEvent);
+		nodeViewEventBus.off('importWorkflowUrl', this.onImportWorkflowUrlEvent);
+		this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
+		sourceControlEventBus.off('pull', this.onSourceControlPull);
+	},
 	methods: {
 		editAllowedCheck(): boolean {
 			if (this.readOnlyNotification?.visible) {
@@ -4694,229 +4917,6 @@ export default defineComponent({
 			console.error(error);
 		}
 	},
-	async mounted() {
-		this.resetWorkspace();
-		this.canvasStore.initInstance(this.$refs.nodeView as HTMLElement);
-		this.titleReset();
-		window.addEventListener('message', this.onPostMessageReceived);
-
-		this.startLoading();
-		const loadPromises = [
-			this.loadActiveWorkflows(),
-			this.loadCredentials(),
-			this.loadCredentialTypes(),
-			this.loadVariables(),
-			this.loadSecrets(),
-		];
-
-		if (this.nodeTypesStore.allNodeTypes.length === 0) {
-			loadPromises.push(this.loadNodeTypes());
-		}
-
-		try {
-			await Promise.all(loadPromises);
-		} catch (error) {
-			this.showError(
-				error,
-				this.$locale.baseText('nodeView.showError.mounted1.title'),
-				this.$locale.baseText('nodeView.showError.mounted1.message') + ':',
-			);
-			return;
-		}
-
-		ready(async () => {
-			try {
-				try {
-					this.bindCanvasEvents();
-				} catch {} // This will break if mounted after jsplumb has been initiated from executions preview, so continue if it breaks
-				await this.initView();
-				if (window.parent) {
-					window.parent.postMessage(
-						JSON.stringify({ command: 'n8nReady', version: this.rootStore.versionCli }),
-						'*',
-					);
-				}
-			} catch (error) {
-				this.showError(
-					error,
-					this.$locale.baseText('nodeView.showError.mounted2.title'),
-					this.$locale.baseText('nodeView.showError.mounted2.message') + ':',
-				);
-			}
-			this.stopLoading();
-
-			setTimeout(() => {
-				void this.usersStore.showPersonalizationSurvey();
-				this.addPinDataConnections(this.workflowsStore.getPinData || ({} as IPinData));
-			}, 0);
-		});
-
-		// TODO: This currently breaks since front-end hooks are still not updated to work with pinia store
-		void this.externalHooks.run('nodeView.mount').catch((e) => {});
-
-		if (
-			this.currentUser?.personalizationAnswers !== null &&
-			this.settingsStore.onboardingCallPromptEnabled &&
-			this.currentUser &&
-			getAccountAge(this.currentUser) <= ONBOARDING_PROMPT_TIMEBOX
-		) {
-			const onboardingResponse = await this.uiStore.getNextOnboardingPrompt();
-			const promptTimeout =
-				onboardingResponse.toast_sequence_number === 1 ? FIRST_ONBOARDING_PROMPT_TIMEOUT : 1000;
-
-			if (onboardingResponse.title && onboardingResponse.description) {
-				setTimeout(async () => {
-					this.showToast({
-						type: 'info',
-						title: onboardingResponse.title,
-						message: onboardingResponse.description,
-						duration: 0,
-						customClass: 'clickable',
-						closeOnClick: true,
-						onClick: () => {
-							this.$telemetry.track('user clicked onboarding toast', {
-								seq_num: onboardingResponse.toast_sequence_number,
-								title: onboardingResponse.title,
-								description: onboardingResponse.description,
-							});
-							this.uiStore.openModal(ONBOARDING_CALL_SIGNUP_MODAL_KEY);
-						},
-					});
-				}, promptTimeout);
-			}
-		}
-
-		sourceControlEventBus.on('pull', this.onSourceControlPull);
-
-		this.registerCustomAction({
-			key: 'openNodeDetail',
-			action: ({ node }: { node: string }) => {
-				this.nodeSelectedByName(node, true);
-			},
-		});
-
-		this.registerCustomAction({
-			key: 'openSelectiveNodeCreator',
-			action: async ({
-				connectiontype,
-				node,
-				creatorview,
-			}: {
-				connectiontype: NodeConnectionType;
-				node: string;
-				creatorview?: string;
-			}) => {
-				const nodeName = node ?? this.ndvStore.activeNodeName;
-				const nodeData = nodeName ? this.workflowsStore.getNodeByName(nodeName) : null;
-
-				this.ndvStore.activeNodeName = null;
-				await this.redrawNode(node);
-				// Wait for UI to update
-				setTimeout(() => {
-					if (creatorview) {
-						this.onToggleNodeCreator({
-							createNodeActive: true,
-							nodeCreatorView: creatorview,
-						});
-					} else if (connectiontype && nodeData) {
-						this.insertNodeAfterSelected({
-							index: 0,
-							endpointUuid: `${nodeData.id}-input${connectiontype}0`,
-							eventSource: NODE_CREATOR_OPEN_SOURCES.NOTICE_ERROR_MESSAGE,
-							outputType: connectiontype,
-							sourceId: nodeData.id,
-						});
-					}
-				}, 0);
-			},
-		});
-
-		this.readOnlyEnvRouteCheck();
-		this.canvasStore.isDemo = this.isDemo;
-	},
-	activated() {
-		const openSideMenu = this.uiStore.addFirstStepOnLoad;
-		if (openSideMenu) {
-			this.showTriggerCreator(NODE_CREATOR_OPEN_SOURCES.TRIGGER_PLACEHOLDER_BUTTON);
-		}
-		this.uiStore.addFirstStepOnLoad = false;
-		this.bindCanvasEvents();
-		document.addEventListener('keydown', this.keyDown);
-		document.addEventListener('keyup', this.keyUp);
-		window.addEventListener('message', this.onPostMessageReceived);
-		window.addEventListener('pageshow', this.onPageShow);
-
-		nodeViewEventBus.on('newWorkflow', this.newWorkflow);
-		nodeViewEventBus.on('importWorkflowData', this.onImportWorkflowDataEvent);
-		nodeViewEventBus.on('importWorkflowUrl', this.onImportWorkflowUrlEvent);
-		nodeViewEventBus.on('openChat', this.onOpenChat);
-		historyBus.on('nodeMove', this.onMoveNode);
-		historyBus.on('revertAddNode', this.onRevertAddNode);
-		historyBus.on('revertRemoveNode', this.onRevertRemoveNode);
-		historyBus.on('revertAddConnection', this.onRevertAddConnection);
-		historyBus.on('revertRemoveConnection', this.onRevertRemoveConnection);
-		historyBus.on('revertRenameNode', this.onRevertNameChange);
-		historyBus.on('enableNodeToggle', this.onRevertEnableToggle);
-
-		dataPinningEventBus.on('pin-data', this.addPinDataConnections);
-		dataPinningEventBus.on('unpin-data', this.removePinDataConnections);
-		nodeViewEventBus.on('saveWorkflow', this.saveCurrentWorkflowExternal);
-
-		this.canvasStore.isDemo = this.isDemo;
-	},
-	deactivated() {
-		this.unbindCanvasEvents();
-		document.removeEventListener('keydown', this.keyDown);
-		document.removeEventListener('keyup', this.keyUp);
-		window.removeEventListener('message', this.onPostMessageReceived);
-		window.removeEventListener('beforeunload', this.onBeforeUnload);
-		window.removeEventListener('pageshow', this.onPageShow);
-
-		nodeViewEventBus.off('newWorkflow', this.newWorkflow);
-		nodeViewEventBus.off('importWorkflowData', this.onImportWorkflowDataEvent);
-		nodeViewEventBus.off('importWorkflowUrl', this.onImportWorkflowUrlEvent);
-		nodeViewEventBus.off('openChat', this.onOpenChat);
-		historyBus.off('nodeMove', this.onMoveNode);
-		historyBus.off('revertAddNode', this.onRevertAddNode);
-		historyBus.off('revertRemoveNode', this.onRevertRemoveNode);
-		historyBus.off('revertAddConnection', this.onRevertAddConnection);
-		historyBus.off('revertRemoveConnection', this.onRevertRemoveConnection);
-		historyBus.off('revertRenameNode', this.onRevertNameChange);
-		historyBus.off('enableNodeToggle', this.onRevertEnableToggle);
-
-		dataPinningEventBus.off('pin-data', this.addPinDataConnections);
-		dataPinningEventBus.off('unpin-data', this.removePinDataConnections);
-		nodeViewEventBus.off('saveWorkflow', this.saveCurrentWorkflowExternal);
-	},
-	beforeMount() {
-		if (!this.isDemo) {
-			this.pushStore.pushConnect();
-		}
-	},
-	beforeUnmount() {
-		// Make sure the event listeners get removed again else we
-		// could add up with them registered multiple times
-		document.removeEventListener('keydown', this.keyDown);
-		document.removeEventListener('keyup', this.keyUp);
-		this.unregisterCustomAction('showNodeCreator');
-		this.unregisterCustomAction('openNodeDetail');
-		this.unregisterCustomAction('openSelectiveNodeCreator');
-
-		if (!this.isDemo) {
-			this.pushStore.pushDisconnect();
-		}
-
-		this.resetWorkspace();
-		this.instance.unbind();
-		this.instance.destroy();
-		this.uiStore.stateIsDirty = false;
-		window.removeEventListener('message', this.onPostMessageReceived);
-		nodeViewEventBus.off('newWorkflow', this.newWorkflow);
-		nodeViewEventBus.off('importWorkflowData', this.onImportWorkflowDataEvent);
-		nodeViewEventBus.off('importWorkflowUrl', this.onImportWorkflowUrlEvent);
-		this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
-		sourceControlEventBus.off('pull', this.onSourceControlPull);
-	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/views/SamlOnboarding.vue b/packages/editor-ui/src/views/SamlOnboarding.vue
index af6b11ac64..e003d5e457 100644
--- a/packages/editor-ui/src/views/SamlOnboarding.vue
+++ b/packages/editor-ui/src/views/SamlOnboarding.vue
@@ -57,5 +57,5 @@ const onSubmit = async (values: { firstName: string; lastName: string }) => {
 </script>
 
 <template>
-	<AuthView :form="FORM_CONFIG" :formLoading="loading" @submit="onSubmit" />
+	<AuthView :form="FORM_CONFIG" :form-loading="loading" @submit="onSubmit" />
 </template>
diff --git a/packages/editor-ui/src/views/SettingsApiView.vue b/packages/editor-ui/src/views/SettingsApiView.vue
index 2f6c33f6b1..a039562013 100644
--- a/packages/editor-ui/src/views/SettingsApiView.vue
+++ b/packages/editor-ui/src/views/SettingsApiView.vue
@@ -32,7 +32,7 @@
 			</p>
 			<n8n-card class="mb-4xs" :class="$style.card">
 				<span :class="$style.delete">
-					<n8n-link @click="showDeleteModal" :bold="true">
+					<n8n-link :bold="true" @click="showDeleteModal">
 						{{ $locale.baseText('generic.delete') }}
 					</n8n-link>
 				</span>
@@ -42,7 +42,7 @@
 						:value="apiKey"
 						:copy-button-text="$locale.baseText('generic.clickToCopy')"
 						:toast-title="$locale.baseText('settings.api.view.copy.toast')"
-						:redactValue="true"
+						:redact-value="true"
 						@copy="onCopy"
 					/>
 				</div>
@@ -54,7 +54,7 @@
 					}}
 				</n8n-text>
 				{{ ' ' }}
-				<n8n-link :to="apiDocsURL" :newWindow="true" size="small">
+				<n8n-link :to="apiDocsURL" :new-window="true" size="small">
 					{{
 						$locale.baseText(
 							`settings.api.view.${swaggerUIEnabled ? 'apiPlayground' : 'external-docs'}`,
@@ -68,12 +68,12 @@
 			data-test-id="public-api-upgrade-cta"
 			:heading="$locale.baseText('settings.api.trial.upgradePlan.title')"
 			:description="$locale.baseText('settings.api.trial.upgradePlan.description')"
-			:buttonText="$locale.baseText('settings.api.trial.upgradePlan.cta')"
+			:button-text="$locale.baseText('settings.api.trial.upgradePlan.cta')"
 			@click:button="onUpgrade"
 		/>
 		<n8n-action-box
 			v-else-if="mounted && !isLoadingCloudPlans"
-			:buttonText="
+			:button-text="
 				$locale.baseText(
 					loading ? 'settings.api.create.button.loading' : 'settings.api.create.button',
 				)
diff --git a/packages/editor-ui/src/views/SettingsAuditLogs.vue b/packages/editor-ui/src/views/SettingsAuditLogs.vue
index 5e0e469f5d..35664c0286 100644
--- a/packages/editor-ui/src/views/SettingsAuditLogs.vue
+++ b/packages/editor-ui/src/views/SettingsAuditLogs.vue
@@ -26,7 +26,7 @@ const goToUpgrade = () => {
 			data-test-id="audit-logs-content-unlicensed"
 			:class="$style.actionBox"
 			:description="locale.baseText('settings.auditLogs.actionBox.description')"
-			:buttonText="locale.baseText('settings.auditLogs.actionBox.buttonText')"
+			:button-text="locale.baseText('settings.auditLogs.actionBox.buttonText')"
 			@click:button="goToUpgrade"
 		>
 			<template #heading>
diff --git a/packages/editor-ui/src/views/SettingsCommunityNodesView.vue b/packages/editor-ui/src/views/SettingsCommunityNodesView.vue
index fd95bb7bbe..5ced100732 100644
--- a/packages/editor-ui/src/views/SettingsCommunityNodesView.vue
+++ b/packages/editor-ui/src/views/SettingsCommunityNodesView.vue
@@ -17,16 +17,16 @@
 			<n8n-action-box
 				:heading="$locale.baseText('settings.communityNodes.empty.title')"
 				:description="getEmptyStateDescription"
-				:calloutText="actionBoxConfig.calloutText"
-				:calloutTheme="actionBoxConfig.calloutTheme"
+				:callout-text="actionBoxConfig.calloutText"
+				:callout-theme="actionBoxConfig.calloutTheme"
 			/>
 		</div>
-		<div :class="$style.cardsContainer" v-else-if="loading">
-			<community-package-card
+		<div v-else-if="loading" :class="$style.cardsContainer">
+			<CommunityPackageCard
 				v-for="n in 2"
 				:key="'index-' + n"
 				:loading="true"
-			></community-package-card>
+			></CommunityPackageCard>
 		</div>
 		<div
 			v-else-if="communityNodesStore.getInstalledPackages.length === 0"
@@ -35,18 +35,18 @@
 			<n8n-action-box
 				:heading="$locale.baseText('settings.communityNodes.empty.title')"
 				:description="getEmptyStateDescription"
-				:buttonText="getEmptyStateButtonText"
-				:calloutText="actionBoxConfig.calloutText"
-				:calloutTheme="actionBoxConfig.calloutTheme"
+				:button-text="getEmptyStateButtonText"
+				:callout-text="actionBoxConfig.calloutText"
+				:callout-theme="actionBoxConfig.calloutTheme"
 				@click:button="onClickEmptyStateButton"
 			/>
 		</div>
-		<div :class="$style.cardsContainer" v-else>
-			<community-package-card
+		<div v-else :class="$style.cardsContainer">
+			<CommunityPackageCard
 				v-for="communityPackage in communityNodesStore.getInstalledPackages"
 				:key="communityPackage.packageName"
-				:communityPackage="communityPackage"
-			></community-package-card>
+				:community-package="communityPackage"
+			></CommunityPackageCard>
 		</div>
 	</div>
 </template>
@@ -74,10 +74,10 @@ const PACKAGE_COUNT_THRESHOLD = 31;
 
 export default defineComponent({
 	name: 'SettingsCommunityNodesView',
-	mixins: [pushConnection],
 	components: {
 		CommunityPackageCard,
 	},
+	mixins: [pushConnection],
 	setup(props, ctx) {
 		const externalHooks = useExternalHooks();
 
diff --git a/packages/editor-ui/src/views/SettingsExternalSecrets.vue b/packages/editor-ui/src/views/SettingsExternalSecrets.vue
index 02576fd0ce..886d70250c 100644
--- a/packages/editor-ui/src/views/SettingsExternalSecrets.vue
+++ b/packages/editor-ui/src/views/SettingsExternalSecrets.vue
@@ -55,7 +55,7 @@ function goToUpgrade() {
 			v-else
 			class="mt-2xl mb-l"
 			data-test-id="external-secrets-content-unlicensed"
-			:buttonText="i18n.baseText('settings.externalSecrets.actionBox.buttonText')"
+			:button-text="i18n.baseText('settings.externalSecrets.actionBox.buttonText')"
 			@click="goToUpgrade"
 		>
 			<template #heading>
diff --git a/packages/editor-ui/src/views/SettingsFakeDoorView.vue b/packages/editor-ui/src/views/SettingsFakeDoorView.vue
index 5973c1d4a3..b1b089b01b 100644
--- a/packages/editor-ui/src/views/SettingsFakeDoorView.vue
+++ b/packages/editor-ui/src/views/SettingsFakeDoorView.vue
@@ -1,5 +1,5 @@
 <template>
-	<feature-coming-soon :featureId="featureId" showTitle />
+	<FeatureComingSoon :feature-id="featureId" show-title />
 </template>
 
 <script lang="ts">
diff --git a/packages/editor-ui/src/views/SettingsLdapView.vue b/packages/editor-ui/src/views/SettingsLdapView.vue
index a2266b640a..6851d87af0 100644
--- a/packages/editor-ui/src/views/SettingsLdapView.vue
+++ b/packages/editor-ui/src/views/SettingsLdapView.vue
@@ -6,12 +6,12 @@
 			</n8n-heading>
 		</div>
 
-		<n8n-info-tip type="note" theme="info" tooltipPlacement="right" class="mb-l">
+		<n8n-info-tip type="note" theme="info" tooltip-placement="right" class="mb-l">
 			{{ $locale.baseText('settings.ldap.note') }}
 		</n8n-info-tip>
 		<n8n-action-box
 			:description="$locale.baseText('settings.ldap.disabled.description')"
-			:buttonText="$locale.baseText('settings.ldap.disabled.buttonText')"
+			:button-text="$locale.baseText('settings.ldap.disabled.buttonText')"
 			@click:button="goToUpgrade"
 		>
 			<template #heading>
@@ -36,9 +36,9 @@
 					v-if="formInputs"
 					ref="ldapConfigForm"
 					:inputs="formInputs"
-					:eventBus="formBus"
-					:columnView="true"
-					verticalSpacing="l"
+					:event-bus="formBus"
+					:column-view="true"
+					vertical-spacing="l"
 					@update="onInput"
 					@ready="onReadyToSubmit"
 					@submit="onSubmit"
@@ -71,7 +71,8 @@
 				$locale.baseText('settings.ldap.section.synchronization.title')
 			}}</n8n-heading>
 			<div :class="$style.syncTable">
-				<el-table
+				<ElTable
+					:key="tableKey"
 					v-loading="loadingTable"
 					:border="true"
 					:stripe="true"
@@ -79,44 +80,43 @@
 					:cell-style="cellClassStyle"
 					style="width: 100%"
 					height="250"
-					:key="tableKey"
 				>
-					<el-table-column
+					<ElTableColumn
 						prop="status"
 						:label="$locale.baseText('settings.ldap.synchronizationTable.column.status')"
 					>
-					</el-table-column>
-					<el-table-column
+					</ElTableColumn>
+					<ElTableColumn
 						prop="endedAt"
 						:label="$locale.baseText('settings.ldap.synchronizationTable.column.endedAt')"
 					>
-					</el-table-column>
-					<el-table-column
+					</ElTableColumn>
+					<ElTableColumn
 						prop="runMode"
 						:label="$locale.baseText('settings.ldap.synchronizationTable.column.runMode')"
 					>
-					</el-table-column>
-					<el-table-column
+					</ElTableColumn>
+					<ElTableColumn
 						prop="runTime"
 						:label="$locale.baseText('settings.ldap.synchronizationTable.column.runTime')"
 					>
-					</el-table-column>
-					<el-table-column
+					</ElTableColumn>
+					<ElTableColumn
 						prop="details"
 						:label="$locale.baseText('settings.ldap.synchronizationTable.column.details')"
 					>
-					</el-table-column>
+					</ElTableColumn>
 					<template #empty>{{
 						$locale.baseText('settings.ldap.synchronizationTable.empty.message')
 					}}</template>
 					<template #append>
-						<infinite-loading
-							@infinite="getLdapSynchronizations"
+						<InfiniteLoading
 							force-use-infinite-wrapper=".el-table__body-wrapper"
+							@infinite="getLdapSynchronizations"
 						>
-						</infinite-loading>
+						</InfiniteLoading>
 					</template>
-				</el-table>
+				</ElTable>
 			</div>
 			<div class="pb-3xl">
 				<n8n-button
diff --git a/packages/editor-ui/src/views/SettingsLogStreamingView.vue b/packages/editor-ui/src/views/SettingsLogStreamingView.vue
index e1925a6045..94f622ba82 100644
--- a/packages/editor-ui/src/views/SettingsLogStreamingView.vue
+++ b/packages/editor-ui/src/views/SettingsLogStreamingView.vue
@@ -19,15 +19,15 @@
 			</div>
 			<template v-if="storeHasItems()">
 				<el-row
-					:gutter="10"
 					v-for="item in sortedItemKeysByLabel"
 					:key="item.key"
+					:gutter="10"
 					:class="$style.destinationItem"
 				>
 					<el-col v-if="logStreamingStore.items[item.key]?.destination">
-						<event-destination-card
+						<EventDestinationCard
 							:destination="logStreamingStore.items[item.key]?.destination"
-							:eventBus="eventBus"
+							:event-bus="eventBus"
 							:readonly="!canManageLogStreaming"
 							@remove="onRemove(logStreamingStore.items[item.key]?.destination?.id)"
 							@edit="onEdit(logStreamingStore.items[item.key]?.destination?.id)"
@@ -42,7 +42,7 @@
 			</template>
 			<div v-else data-test-id="action-box-licensed">
 				<n8n-action-box
-					:buttonText="$locale.baseText(`settings.log-streaming.add`)"
+					:button-text="$locale.baseText(`settings.log-streaming.add`)"
 					@click:button="addDestination"
 				>
 					<template #heading>
@@ -60,7 +60,7 @@
 			<div data-test-id="action-box-unlicensed">
 				<n8n-action-box
 					:description="$locale.baseText('settings.log-streaming.actionBox.description')"
-					:buttonText="$locale.baseText('settings.log-streaming.actionBox.button')"
+					:button-text="$locale.baseText('settings.log-streaming.actionBox.button')"
 					@click:button="goToUpgrade"
 				>
 					<template #heading>
@@ -90,10 +90,10 @@ import { createEventBus } from 'n8n-design-system/utils';
 
 export default defineComponent({
 	name: 'SettingsLogStreamingView',
-	props: {},
 	components: {
 		EventDestinationCard,
 	},
+	props: {},
 	data() {
 		return {
 			eventBus: createEventBus(),
diff --git a/packages/editor-ui/src/views/SettingsPersonalView.vue b/packages/editor-ui/src/views/SettingsPersonalView.vue
index 2cdab44844..3627c390af 100644
--- a/packages/editor-ui/src/views/SettingsPersonalView.vue
+++ b/packages/editor-ui/src/views/SettingsPersonalView.vue
@@ -9,8 +9,8 @@
 					<n8n-text color="text-light">{{ currentUser.fullName }}</n8n-text>
 				</span>
 				<n8n-avatar
-					:firstName="currentUser.firstName"
-					:lastName="currentUser.lastName"
+					:first-name="currentUser.firstName"
+					:last-name="currentUser.lastName"
 					size="large"
 				/>
 			</div>
@@ -25,7 +25,7 @@
 				<n8n-form-inputs
 					v-if="formInputs"
 					:inputs="formInputs"
-					:eventBus="formBus"
+					:event-bus="formBus"
 					@update="onInput"
 					@ready="onReadyToSubmit"
 					@submit="onSubmit"
@@ -38,7 +38,7 @@
 			</div>
 			<div class="mb-s">
 				<n8n-input-label :label="i18n.baseText('auth.password')">
-					<n8n-link @click="openPasswordModal" data-test-id="change-password-link">{{
+					<n8n-link data-test-id="change-password-link" @click="openPasswordModal">{{
 						i18n.baseText('auth.changePassword')
 					}}</n8n-link>
 				</n8n-input-label>
@@ -87,9 +87,9 @@
 						:class="$style.themeSelect"
 						data-test-id="theme-select"
 						size="small"
-						@update:modelValue="selectTheme"
-						:modelValue="currentTheme"
+						:model-value="currentTheme"
 						filterable
+						@update:modelValue="selectTheme"
 					>
 						<n8n-option
 							v-for="item in themeOptions"
diff --git a/packages/editor-ui/src/views/SettingsSourceControl.vue b/packages/editor-ui/src/views/SettingsSourceControl.vue
index 5e310142bd..2326b7a619 100644
--- a/packages/editor-ui/src/views/SettingsSourceControl.vue
+++ b/packages/editor-ui/src/views/SettingsSourceControl.vue
@@ -209,25 +209,25 @@ const onSelectSshKeyType = async (sshKeyType: TupleToUnion<SshKeyTypes>) => {
 				<label for="repoUrl">{{ locale.baseText('settings.sourceControl.repoUrl') }}</label>
 				<div :class="$style.groupFlex">
 					<n8n-form-input
+						id="repoUrl"
+						v-model="sourceControlStore.preferences.repositoryUrl"
 						label
 						class="ml-0"
-						id="repoUrl"
 						name="repoUrl"
-						validateOnBlur
-						:validationRules="repoUrlValidationRules"
+						validate-on-blur
+						:validation-rules="repoUrlValidationRules"
 						:disabled="isConnected"
 						:placeholder="locale.baseText('settings.sourceControl.repoUrlPlaceholder')"
-						v-model="sourceControlStore.preferences.repositoryUrl"
 						@validate="(value) => onValidate('repoUrl', value)"
 					/>
 					<n8n-button
+						v-if="isConnected"
 						:class="$style.disconnectButton"
 						type="tertiary"
-						v-if="isConnected"
-						@click="onDisconnect"
 						size="large"
 						icon="trash"
 						data-test-id="source-control-disconnect-button"
+						@click="onDisconnect"
 						>{{ locale.baseText('settings.sourceControl.button.disconnect') }}</n8n-button
 					>
 				</div>
@@ -237,16 +237,16 @@ const onSelectSshKeyType = async (sshKeyType: TupleToUnion<SshKeyTypes>) => {
 				<div :class="{ [$style.sshInput]: !isConnected }">
 					<n8n-form-input
 						v-if="!isConnected"
+						id="keyGeneratorType"
 						:class="$style.sshKeyTypeSelect"
 						label
 						type="select"
-						id="keyGeneratorType"
 						name="keyGeneratorType"
 						data-test-id="source-control-ssh-key-type-select"
-						validateOnBlur
-						:validationRules="keyGeneratorTypeValidationRules"
+						validate-on-blur
+						:validation-rules="keyGeneratorTypeValidationRules"
 						:options="sourceControlStore.sshKeyTypesWithLabel"
-						:modelValue="sourceControlStore.preferences.keyGeneratorType"
+						:model-value="sourceControlStore.preferences.keyGeneratorType"
 						@validate="(value) => onValidate('keyGeneratorType', value)"
 						@update:modelValue="onSelectSshKeyType"
 					/>
@@ -262,8 +262,8 @@ const onSelectSshKeyType = async (sshKeyType: TupleToUnion<SshKeyTypes>) => {
 						size="large"
 						type="tertiary"
 						icon="sync"
-						@click="refreshSshKey"
 						data-test-id="source-control-refresh-ssh-key-button"
+						@click="refreshSshKey"
 					>
 						{{ locale.baseText('settings.sourceControl.refreshSshKey') }}
 					</n8n-button>
@@ -282,11 +282,11 @@ const onSelectSshKeyType = async (sshKeyType: TupleToUnion<SshKeyTypes>) => {
 			</div>
 			<n8n-button
 				v-if="!isConnected"
-				@click="onConnect"
 				size="large"
 				:disabled="!validForConnection"
 				:class="$style.connect"
 				data-test-id="source-control-connect-button"
+				@click="onConnect"
 				>{{ locale.baseText('settings.sourceControl.button.connect') }}</n8n-button
 			>
 			<div v-if="isConnected" data-test-id="source-control-connected-content">
@@ -298,16 +298,16 @@ const onSelectSshKeyType = async (sshKeyType: TupleToUnion<SshKeyTypes>) => {
 					<label>{{ locale.baseText('settings.sourceControl.branches') }}</label>
 					<div :class="$style.branchSelection">
 						<n8n-form-input
+							id="branchName"
 							label
 							type="select"
-							id="branchName"
 							name="branchName"
 							class="mb-s"
 							data-test-id="source-control-branch-select"
-							validateOnBlur
-							:validationRules="branchNameValidationRules"
+							validate-on-blur
+							:validation-rules="branchNameValidationRules"
 							:options="branchNameOptions"
-							:modelValue="sourceControlStore.preferences.branchName"
+							:model-value="sourceControlStore.preferences.branchName"
 							@validate="(value) => onValidate('branchName', value)"
 							@update:modelValue="onSelect"
 						/>
@@ -323,8 +323,8 @@ const onSelectSshKeyType = async (sshKeyType: TupleToUnion<SshKeyTypes>) => {
 								icon="sync"
 								square
 								:class="$style.refreshBranches"
-								@click="refreshBranches"
 								data-test-id="source-control-refresh-branches-button"
+								@click="refreshBranches"
 							/>
 						</n8n-tooltip>
 					</div>
@@ -342,15 +342,15 @@ const onSelectSshKeyType = async (sshKeyType: TupleToUnion<SshKeyTypes>) => {
 				<div :class="$style.group">
 					<label>{{ locale.baseText('settings.sourceControl.color') }}</label>
 					<div>
-						<n8n-color-picker size="small" v-model="sourceControlStore.preferences.branchColor" />
+						<n8n-color-picker v-model="sourceControlStore.preferences.branchColor" size="small" />
 					</div>
 				</div>
 				<div :class="[$style.group, 'pt-s']">
 					<n8n-button
-						@click="onSave"
 						size="large"
 						:disabled="!sourceControlStore.preferences.branchName"
 						data-test-id="source-control-save-settings-button"
+						@click="onSave"
 						>{{ locale.baseText('settings.sourceControl.button.save') }}</n8n-button
 					>
 				</div>
@@ -361,7 +361,7 @@ const onSelectSshKeyType = async (sshKeyType: TupleToUnion<SshKeyTypes>) => {
 			data-test-id="source-control-content-unlicensed"
 			:class="$style.actionBox"
 			:description="locale.baseText('settings.sourceControl.actionBox.description')"
-			:buttonText="locale.baseText('settings.sourceControl.actionBox.buttonText')"
+			:button-text="locale.baseText('settings.sourceControl.actionBox.buttonText')"
 			@click:button="goToUpgrade"
 		>
 			<template #heading>
diff --git a/packages/editor-ui/src/views/SettingsSso.vue b/packages/editor-ui/src/views/SettingsSso.vue
index 3856953527..674499944f 100644
--- a/packages/editor-ui/src/views/SettingsSso.vue
+++ b/packages/editor-ui/src/views/SettingsSso.vue
@@ -196,7 +196,7 @@ onMounted(async () => {
 			<div :class="$style.group">
 				<label>{{ i18n.baseText('settings.sso.settings.ips.label') }}</label>
 				<div class="mt-2xs mb-s">
-					<n8n-radio-buttons :options="ipsOptions" v-model="ipsType" />
+					<n8n-radio-buttons v-model="ipsType" :options="ipsOptions" />
 				</div>
 				<div v-show="ipsType === IdentityProviderSettingsType.URL">
 					<n8n-input
@@ -214,15 +214,15 @@ onMounted(async () => {
 				</div>
 			</div>
 			<div :class="$style.buttons">
-				<n8n-button :disabled="!isSaveEnabled" @click="onSave" size="large" data-test-id="sso-save">
+				<n8n-button :disabled="!isSaveEnabled" size="large" data-test-id="sso-save" @click="onSave">
 					{{ i18n.baseText('settings.sso.settings.save') }}
 				</n8n-button>
 				<n8n-button
 					:disabled="!isTestEnabled"
 					size="large"
 					type="tertiary"
-					@click="onTest"
 					data-test-id="sso-test"
+					@click="onTest"
 				>
 					{{ i18n.baseText('settings.sso.settings.test') }}
 				</n8n-button>
@@ -236,7 +236,7 @@ onMounted(async () => {
 			data-test-id="sso-content-unlicensed"
 			:class="$style.actionBox"
 			:description="i18n.baseText('settings.sso.actionBox.description')"
-			:buttonText="i18n.baseText('settings.sso.actionBox.buttonText')"
+			:button-text="i18n.baseText('settings.sso.actionBox.buttonText')"
 			@click:button="goToUpgrade"
 		>
 			<template #heading>
diff --git a/packages/editor-ui/src/views/SettingsUsageAndPlan.vue b/packages/editor-ui/src/views/SettingsUsageAndPlan.vue
index 83523fb355..333c2d0ca4 100644
--- a/packages/editor-ui/src/views/SettingsUsageAndPlan.vue
+++ b/packages/editor-ui/src/views/SettingsUsageAndPlan.vue
@@ -141,7 +141,7 @@ const openPricingPage = () => {
 			:class="$style.actionBox"
 			:heading="locale.baseText('settings.usageAndPlan.desktop.title')"
 			:description="locale.baseText('settings.usageAndPlan.desktop.description')"
-			:buttonText="locale.baseText('settings.usageAndPlan.button.plans')"
+			:button-text="locale.baseText('settings.usageAndPlan.button.plans')"
 			@click:button="openPricingPage"
 		/>
 		<div v-if="!usageStore.isDesktop && !usageStore.isLoading">
@@ -190,20 +190,20 @@ const openPricingPage = () => {
 
 			<div :class="$style.buttons">
 				<n8n-button
-					:class="$style.buttonTertiary"
-					@click="onAddActivationKey"
 					v-if="canUserActivateLicense"
+					:class="$style.buttonTertiary"
 					type="tertiary"
 					size="large"
+					@click="onAddActivationKey"
 				>
 					<span>{{ locale.baseText('settings.usageAndPlan.button.activation') }}</span>
 				</n8n-button>
-				<n8n-button v-if="usageStore.managementToken" @click="onManagePlan" size="large">
+				<n8n-button v-if="usageStore.managementToken" size="large" @click="onManagePlan">
 					<a :href="managePlanUrl" target="_blank">{{
 						locale.baseText('settings.usageAndPlan.button.manage')
 					}}</a>
 				</n8n-button>
-				<n8n-button v-else @click.prevent="onViewPlans" size="large">
+				<n8n-button v-else size="large" @click.prevent="onViewPlans">
 					<a :href="viewPlansUrl" target="_blank">{{
 						locale.baseText('settings.usageAndPlan.button.plans')
 					}}</a>
@@ -211,13 +211,13 @@ const openPricingPage = () => {
 			</div>
 
 			<el-dialog
+				v-model="activationKeyModal"
 				width="480px"
 				top="0"
-				@closed="onDialogClosed"
-				@opened="onDialogOpened"
-				v-model="activationKeyModal"
 				:title="locale.baseText('settings.usageAndPlan.dialog.activation.title')"
 				:modal-class="$style.center"
+				@closed="onDialogClosed"
+				@opened="onDialogOpened"
 			>
 				<template #default>
 					<n8n-input
@@ -227,7 +227,7 @@ const openPricingPage = () => {
 					/>
 				</template>
 				<template #footer>
-					<n8n-button @click="activationKeyModal = false" type="secondary">
+					<n8n-button type="secondary" @click="activationKeyModal = false">
 						{{ locale.baseText('settings.usageAndPlan.dialog.activation.cancel') }}
 					</n8n-button>
 					<n8n-button @click="onLicenseActivation">
diff --git a/packages/editor-ui/src/views/SettingsUsersView.vue b/packages/editor-ui/src/views/SettingsUsersView.vue
index 5cbeecf548..70c1f3f88c 100644
--- a/packages/editor-ui/src/views/SettingsUsersView.vue
+++ b/packages/editor-ui/src/views/SettingsUsersView.vue
@@ -2,7 +2,7 @@
 	<div :class="$style.container">
 		<div>
 			<n8n-heading size="2xlarge">{{ $locale.baseText('settings.users') }}</n8n-heading>
-			<div :class="$style.buttonContainer" v-if="!showUMSetupWarning">
+			<div v-if="!showUMSetupWarning" :class="$style.buttonContainer">
 				<n8n-tooltip :disabled="!ssoStore.isSamlLoginEnabled">
 					<template #content>
 						<span> {{ $locale.baseText('settings.users.invite.tooltip') }} </span>
@@ -11,9 +11,9 @@
 						<n8n-button
 							:disabled="ssoStore.isSamlLoginEnabled || !settingsStore.isBelowUserQuota"
 							:label="$locale.baseText('settings.users.invite')"
-							@click="onInvite"
 							size="large"
 							data-test-id="settings-users-invite-button"
+							@click="onInvite"
 						/>
 					</div>
 				</n8n-tooltip>
@@ -29,7 +29,7 @@
 						uiStore.contextBasedTranslationKeys.users.settings.unavailable.description,
 					)
 				"
-				:buttonText="
+				:button-text="
 					$locale.baseText(uiStore.contextBasedTranslationKeys.users.settings.unavailable.button)
 				"
 				@click:button="goToUpgrade"
@@ -47,14 +47,14 @@
 		<!-- If there's more than 1 user it means the account quota was more than 1 in the past. So we need to allow instance owner to be able to delete users and transfer workflows.
 		-->
 		<div
-			:class="$style.usersContainer"
 			v-if="settingsStore.isBelowUserQuota || usersStore.allUsers.length > 1"
+			:class="$style.usersContainer"
 		>
 			<n8n-users-list
 				:actions="usersListActions"
 				:users="usersStore.allUsers"
-				:currentUserId="usersStore.currentUserId"
-				:isSamlLoginEnabled="ssoStore.isSamlLoginEnabled"
+				:current-user-id="usersStore.currentUserId"
+				:is-saml-login-enabled="ssoStore.isSamlLoginEnabled"
 				@delete="onDelete"
 				@reinvite="onReinvite"
 				@copyInviteLink="onCopyInviteLink"
@@ -65,10 +65,10 @@
 				<template #actions="{ user }">
 					<n8n-select
 						v-if="user.id !== usersStore.currentUserId"
-						:modelValue="user?.globalRole?.name || 'member'"
-						@update:modelValue="onRoleChange(user, $event)"
+						:model-value="user?.globalRole?.name || 'member'"
 						:disabled="!canUpdateRole"
 						data-test-id="user-role-select"
+						@update:modelValue="onRoleChange(user, $event)"
 					>
 						<n8n-option
 							v-for="role in userRoles"
diff --git a/packages/editor-ui/src/views/SetupView.vue b/packages/editor-ui/src/views/SetupView.vue
index 4a50f052bf..fb50f2cb0c 100644
--- a/packages/editor-ui/src/views/SetupView.vue
+++ b/packages/editor-ui/src/views/SetupView.vue
@@ -1,7 +1,7 @@
 <template>
 	<AuthView
 		:form="FORM_CONFIG"
-		:formLoading="loading"
+		:form-loading="loading"
 		data-test-id="setup-form"
 		@submit="onSubmit"
 	/>
diff --git a/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/AppsRequiringCredsNotice.vue b/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/AppsRequiringCredsNotice.vue
index 87e44b489f..401a122ae2 100644
--- a/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/AppsRequiringCredsNotice.vue
+++ b/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/AppsRequiringCredsNotice.vue
@@ -22,11 +22,11 @@ const appNodeCounts = computed(() => {
 </script>
 
 <template>
-	<n8n-notice :class="$style.notice" theme="info">
+	<N8nNotice :class="$style.notice" theme="info">
 		<i18n-t tag="span" keypath="templateSetup.instructions" scope="global">
 			<span v-html="appNodeCounts" />
 		</i18n-t>
-	</n8n-notice>
+	</N8nNotice>
 </template>
 
 <style lang="scss" module>
diff --git a/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupTemplateFormStep.vue b/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupTemplateFormStep.vue
index f9ba10322f..31ca9422ec 100644
--- a/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupTemplateFormStep.vue
+++ b/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupTemplateFormStep.vue
@@ -87,13 +87,13 @@ const onCredentialModalOpened = () => {
 
 <template>
 	<li :class="$style.container" data-test-id="setup-credentials-form-step">
-		<n8n-heading tag="h2" size="large">
+		<N8nHeading tag="h2" size="large">
 			<div v-if="nodeType" :class="$style.heading" data-test-id="credential-step-heading">
 				<span :class="$style.headingOrder">{{ order }}.</span>
 				<span :class="$style.headingIcon"><NodeIcon :node-type="nodeType" /></span>
 				{{ appName }}
 			</div>
-		</n8n-heading>
+		</N8nHeading>
 
 		<p :class="$style.description" data-test-id="credential-step-description">
 			<i18n-t
@@ -110,8 +110,8 @@ const onCredentialModalOpened = () => {
 			<CredentialPicker
 				:class="$style.credentialPicker"
 				:app-name="appName"
-				:credentialType="props.credentials.credentialType"
-				:selectedCredentialId="selectedCredentialId"
+				:credential-type="props.credentials.credentialType"
+				:selected-credential-id="selectedCredentialId"
 				@credential-selected="onCredentialSelected"
 				@credential-deselected="onCredentialDeselected"
 				@credential-modal-opened="onCredentialModalOpened"
diff --git a/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupWorkflowFromTemplateView.vue b/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupWorkflowFromTemplateView.vue
index 3def689312..ae32b0202f 100644
--- a/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupWorkflowFromTemplateView.vue
+++ b/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupWorkflowFromTemplateView.vue
@@ -93,11 +93,11 @@ onMounted(async () => {
 </script>
 
 <template>
-	<TemplatesView :goBackEnabled="true">
+	<TemplatesView :go-back-enabled="true">
 		<template #header>
-			<n8n-heading v-if="isReady" tag="h1" size="2xlarge"
+			<N8nHeading v-if="isReady" tag="h1" size="2xlarge"
 				>{{ i18n.baseText('templateSetup.title', { interpolate: { name: title } }) }}
-			</n8n-heading>
+			</N8nHeading>
 			<n8n-loading v-else variant="h1" />
 		</template>
 
@@ -111,9 +111,9 @@ onMounted(async () => {
 				<div>
 					<ol v-if="isReady" :class="$style.appCredentialsContainer">
 						<SetupTemplateFormStep
-							:class="$style.appCredential"
-							:key="credentials.key"
 							v-for="(credentials, index) in setupTemplateStore.credentialUsages"
+							:key="credentials.key"
+							:class="$style.appCredential"
 							:order="index + 1"
 							:credentials="credentials"
 						/>
@@ -125,9 +125,9 @@ onMounted(async () => {
 				</div>
 
 				<div :class="$style.actions">
-					<n8n-link :href="skipSetupUrl" :newWindow="false" @click="onSkipSetup($event)">{{
+					<N8nLink :href="skipSetupUrl" :new-window="false" @click="onSkipSetup($event)">{{
 						i18n.baseText('templateSetup.skip')
-					}}</n8n-link>
+					}}</N8nLink>
 
 					<n8n-tooltip
 						v-if="isReady"
@@ -140,8 +140,8 @@ onMounted(async () => {
 							:disabled="
 								setupTemplateStore.isSaving || setupTemplateStore.numFilledCredentials === 0
 							"
-							@click="setupTemplateStore.createWorkflow({ router })"
 							data-test-id="continue-button"
+							@click="setupTemplateStore.createWorkflow({ router })"
 						/>
 					</n8n-tooltip>
 					<div v-else>
diff --git a/packages/editor-ui/src/views/SigninView.vue b/packages/editor-ui/src/views/SigninView.vue
index 5d6e0406ca..53bd1bc69e 100644
--- a/packages/editor-ui/src/views/SigninView.vue
+++ b/packages/editor-ui/src/views/SigninView.vue
@@ -3,17 +3,17 @@
 		<AuthView
 			v-if="!showMfaView"
 			:form="FORM_CONFIG"
-			:formLoading="loading"
+			:form-loading="loading"
 			:with-sso="true"
 			data-test-id="signin-form"
 			@submit="onEmailPasswordSubmitted"
 		/>
 		<MfaView
 			v-if="showMfaView"
+			:report-error="reportError"
 			@submit="onMFASubmitted"
 			@onBackClick="onBackClick"
 			@onFormChanged="onFormChanged"
-			:reportError="reportError"
 		/>
 	</div>
 </template>
@@ -34,11 +34,11 @@ import { genericHelpers } from '@/mixins/genericHelpers';
 
 export default defineComponent({
 	name: 'SigninView',
-	mixins: [genericHelpers],
 	components: {
 		AuthView,
 		MfaView,
 	},
+	mixins: [genericHelpers],
 	setup() {
 		return {
 			...useToast(),
diff --git a/packages/editor-ui/src/views/SignoutView.vue b/packages/editor-ui/src/views/SignoutView.vue
index a5d7576758..02dcc6aa34 100644
--- a/packages/editor-ui/src/views/SignoutView.vue
+++ b/packages/editor-ui/src/views/SignoutView.vue
@@ -15,6 +15,9 @@ export default defineComponent({
 	computed: {
 		...mapStores(useUsersStore),
 	},
+	mounted() {
+		void this.logout();
+	},
 	methods: {
 		async logout() {
 			try {
@@ -25,9 +28,6 @@ export default defineComponent({
 			}
 		},
 	},
-	mounted() {
-		void this.logout();
-	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/views/SignupView.vue b/packages/editor-ui/src/views/SignupView.vue
index 42e8c8368c..57db14bf48 100644
--- a/packages/editor-ui/src/views/SignupView.vue
+++ b/packages/editor-ui/src/views/SignupView.vue
@@ -1,7 +1,7 @@
 <template>
 	<AuthView
 		:form="FORM_CONFIG"
-		:formLoading="loading"
+		:form-loading="loading"
 		:subtitle="inviteMessage"
 		@submit="onSubmit"
 	/>
diff --git a/packages/editor-ui/src/views/TemplatesCollectionView.vue b/packages/editor-ui/src/views/TemplatesCollectionView.vue
index 1d69834dcf..f9e69e07cc 100644
--- a/packages/editor-ui/src/views/TemplatesCollectionView.vue
+++ b/packages/editor-ui/src/views/TemplatesCollectionView.vue
@@ -1,5 +1,5 @@
 <template>
-	<TemplatesView :goBackEnabled="true">
+	<TemplatesView :go-back-enabled="true">
 		<template #header>
 			<div v-if="!notFoundError" :class="$style.wrapper">
 				<div :class="$style.title">
@@ -12,7 +12,7 @@
 					<n8n-loading :loading="!collection || !collection.name" :rows="2" variant="h1" />
 				</div>
 			</div>
-			<div :class="$style.notFound" v-else>
+			<div v-else :class="$style.notFound">
 				<n8n-text color="text-base">{{
 					$locale.baseText('templates.collectionsNotFound')
 				}}</n8n-text>
@@ -21,7 +21,7 @@
 		<template v-if="!notFoundError" #content>
 			<div :class="$style.wrapper">
 				<div :class="$style.mainContent">
-					<div :class="$style.markdown" v-if="loading || (collection && collection.description)">
+					<div v-if="loading || (collection && collection.description)" :class="$style.markdown">
 						<n8n-markdown
 							:content="collection && collection.description"
 							:images="collection && collection.image"
@@ -74,12 +74,12 @@ import { useExternalHooks } from '@/composables/useExternalHooks';
 
 export default defineComponent({
 	name: 'TemplatesCollectionView',
-	mixins: [workflowHelpers],
 	components: {
 		TemplateDetails,
 		TemplateList,
 		TemplatesView,
 	},
+	mixins: [workflowHelpers],
 	setup() {
 		const externalHooks = useExternalHooks();
 
@@ -112,6 +112,30 @@ export default defineComponent({
 			notFoundError: false,
 		};
 	},
+	watch: {
+		collection(collection: ITemplatesCollection) {
+			if (collection) {
+				setPageTitle(`n8n - Template collection: ${collection.name}`);
+			} else {
+				setPageTitle('n8n - Templates');
+			}
+		},
+	},
+	async mounted() {
+		this.scrollToTop();
+
+		if (this.collection && this.collection.full) {
+			this.loading = false;
+			return;
+		}
+
+		try {
+			await this.templatesStore.fetchCollectionById(this.collectionId);
+		} catch (e) {
+			this.notFoundError = true;
+		}
+		this.loading = false;
+	},
 	methods: {
 		scrollToTop() {
 			setTimeout(() => {
@@ -157,30 +181,6 @@ export default defineComponent({
 			}
 		},
 	},
-	watch: {
-		collection(collection: ITemplatesCollection) {
-			if (collection) {
-				setPageTitle(`n8n - Template collection: ${collection.name}`);
-			} else {
-				setPageTitle('n8n - Templates');
-			}
-		},
-	},
-	async mounted() {
-		this.scrollToTop();
-
-		if (this.collection && this.collection.full) {
-			this.loading = false;
-			return;
-		}
-
-		try {
-			await this.templatesStore.fetchCollectionById(this.collectionId);
-		} catch (e) {
-			this.notFoundError = true;
-		}
-		this.loading = false;
-	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/views/TemplatesSearchView.vue b/packages/editor-ui/src/views/TemplatesSearchView.vue
index f8211093ac..80b838271e 100644
--- a/packages/editor-ui/src/views/TemplatesSearchView.vue
+++ b/packages/editor-ui/src/views/TemplatesSearchView.vue
@@ -24,7 +24,7 @@
 				<div :class="$style.filters">
 					<TemplateFilters
 						:categories="templatesStore.allCategories"
-						:sortOnPopulate="areCategoriesPrepopulated"
+						:sort-on-populate="areCategoriesPrepopulated"
 						:loading="loadingCategories"
 						:selected="categories"
 						@clear="onCategoryUnselected"
@@ -34,17 +34,17 @@
 				</div>
 				<div :class="$style.search">
 					<n8n-input
-						:modelValue="search"
+						:model-value="search"
 						:placeholder="$locale.baseText('templates.searchPlaceholder')"
+						clearable
 						@update:modelValue="onSearchInput"
 						@blur="trackSearch"
-						clearable
 					>
 						<template #prefix>
 							<font-awesome-icon icon="search" />
 						</template>
 					</n8n-input>
-					<div :class="$style.carouselContainer" v-show="collections.length || loadingCollections">
+					<div v-show="collections.length || loadingCollections" :class="$style.carouselContainer">
 						<div :class="$style.header">
 							<n8n-heading :bold="true" size="medium" color="text-light">
 								{{ $locale.baseText('templates.collections') }}
@@ -112,13 +112,13 @@ interface ISearchEvent {
 
 export default defineComponent({
 	name: 'TemplatesSearchView',
-	mixins: [genericHelpers, debounceHelper],
 	components: {
 		TemplatesInfoCarousel,
 		TemplateFilters,
 		TemplateList,
 		TemplatesView,
 	},
+	mixins: [genericHelpers, debounceHelper],
 	setup() {
 		return {
 			...useToast(),
@@ -181,6 +181,38 @@ export default defineComponent({
 			);
 		},
 	},
+	watch: {
+		workflows(newWorkflows) {
+			if (newWorkflows.length === 0) {
+				this.scrollTo(0);
+			}
+		},
+	},
+	async mounted() {
+		setPageTitle('n8n - Templates');
+		void this.loadCategories();
+		void this.loadWorkflowsAndCollections(true);
+		void this.usersStore.showPersonalizationSurvey();
+
+		setTimeout(() => {
+			// Check if there is scroll position saved in route and scroll to it
+			if (this.$route.meta && this.$route.meta.scrollOffset > 0) {
+				this.scrollTo(this.$route.meta.scrollOffset, 'auto');
+			}
+		}, 100);
+	},
+	async created() {
+		if (this.$route.query.search && typeof this.$route.query.search === 'string') {
+			this.search = this.$route.query.search;
+		}
+
+		if (typeof this.$route.query.categories === 'string' && this.$route.query.categories.length) {
+			this.categories = this.$route.query.categories
+				.split(',')
+				.map((categoryId) => parseInt(categoryId, 10));
+			this.areCategoriesPrepopulated = true;
+		}
+	},
 	methods: {
 		onOpenCollection({ event, id }: { event: MouseEvent; id: string }) {
 			this.navigateTo(event, VIEWS.COLLECTION, id);
@@ -351,13 +383,6 @@ export default defineComponent({
 			}, 0);
 		},
 	},
-	watch: {
-		workflows(newWorkflows) {
-			if (newWorkflows.length === 0) {
-				this.scrollTo(0);
-			}
-		},
-	},
 	beforeRouteLeave(to, from, next) {
 		const contentArea = document.getElementById('content');
 		if (contentArea) {
@@ -373,31 +398,6 @@ export default defineComponent({
 		this.trackSearch();
 		next();
 	},
-	async mounted() {
-		setPageTitle('n8n - Templates');
-		void this.loadCategories();
-		void this.loadWorkflowsAndCollections(true);
-		void this.usersStore.showPersonalizationSurvey();
-
-		setTimeout(() => {
-			// Check if there is scroll position saved in route and scroll to it
-			if (this.$route.meta && this.$route.meta.scrollOffset > 0) {
-				this.scrollTo(this.$route.meta.scrollOffset, 'auto');
-			}
-		}, 100);
-	},
-	async created() {
-		if (this.$route.query.search && typeof this.$route.query.search === 'string') {
-			this.search = this.$route.query.search;
-		}
-
-		if (typeof this.$route.query.categories === 'string' && this.$route.query.categories.length) {
-			this.categories = this.$route.query.categories
-				.split(',')
-				.map((categoryId) => parseInt(categoryId, 10));
-			this.areCategoriesPrepopulated = true;
-		}
-	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/views/TemplatesView.vue b/packages/editor-ui/src/views/TemplatesView.vue
index 2b5d8a48b1..d1efe2c900 100644
--- a/packages/editor-ui/src/views/TemplatesView.vue
+++ b/packages/editor-ui/src/views/TemplatesView.vue
@@ -2,7 +2,7 @@
 	<div :class="$style.template">
 		<div :class="$style.container">
 			<div :class="$style.header">
-				<div :class="$style.goBack" v-if="goBackEnabled">
+				<div v-if="goBackEnabled" :class="$style.goBack">
 					<GoBackButton />
 				</div>
 				<slot name="header"></slot>
diff --git a/packages/editor-ui/src/views/TemplatesWorkflowView.vue b/packages/editor-ui/src/views/TemplatesWorkflowView.vue
index 3534d7ec00..9e8125b122 100644
--- a/packages/editor-ui/src/views/TemplatesWorkflowView.vue
+++ b/packages/editor-ui/src/views/TemplatesWorkflowView.vue
@@ -1,5 +1,5 @@
 <template>
-	<TemplatesView :goBackEnabled="true">
+	<TemplatesView :go-back-enabled="true">
 		<template #header>
 			<div v-if="!notFoundError" :class="$style.wrapper">
 				<div :class="$style.title">
@@ -22,7 +22,7 @@
 					<n8n-loading :loading="!template" :rows="1" variant="button" />
 				</div>
 			</div>
-			<div :class="$style.notFound" v-else>
+			<div v-else :class="$style.notFound">
 				<n8n-text color="text-base">{{ $locale.baseText('templates.workflowsNotFound') }}</n8n-text>
 			</div>
 		</template>
@@ -74,12 +74,12 @@ import { TEMPLATE_CREDENTIAL_SETUP_EXPERIMENT } from '@/constants';
 
 export default defineComponent({
 	name: 'TemplatesWorkflowView',
-	mixins: [workflowHelpers],
 	components: {
 		TemplateDetails,
 		TemplatesView,
 		WorkflowPreview,
 	},
+	mixins: [workflowHelpers],
 	setup() {
 		const externalHooks = useExternalHooks();
 
@@ -105,6 +105,31 @@ export default defineComponent({
 			notFoundError: false,
 		};
 	},
+	watch: {
+		template(template: ITemplatesWorkflowFull) {
+			if (template) {
+				setPageTitle(`n8n - Template template: ${template.name}`);
+			} else {
+				setPageTitle('n8n - Templates');
+			}
+		},
+	},
+	async mounted() {
+		this.scrollToTop();
+
+		if (this.template && this.template.full) {
+			this.loading = false;
+			return;
+		}
+
+		try {
+			await this.templatesStore.fetchTemplateById(this.templateId);
+		} catch (e) {
+			this.notFoundError = true;
+		}
+
+		this.loading = false;
+	},
 	methods: {
 		async openTemplateSetup(id: string, e: PointerEvent) {
 			if (!this.posthogStore.isFeatureEnabled(TEMPLATE_CREDENTIAL_SETUP_EXPERIMENT)) {
@@ -140,31 +165,6 @@ export default defineComponent({
 			}
 		},
 	},
-	watch: {
-		template(template: ITemplatesWorkflowFull) {
-			if (template) {
-				setPageTitle(`n8n - Template template: ${template.name}`);
-			} else {
-				setPageTitle('n8n - Templates');
-			}
-		},
-	},
-	async mounted() {
-		this.scrollToTop();
-
-		if (this.template && this.template.full) {
-			this.loading = false;
-			return;
-		}
-
-		try {
-			await this.templatesStore.fetchTemplateById(this.templateId);
-		} catch (e) {
-			this.notFoundError = true;
-		}
-
-		this.loading = false;
-	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/views/VariablesView.vue b/packages/editor-ui/src/views/VariablesView.vue
index 2933981751..0c45a8e49d 100644
--- a/packages/editor-ui/src/views/VariablesView.vue
+++ b/packages/editor-ui/src/views/VariablesView.vue
@@ -229,17 +229,17 @@ onBeforeUnmount(() => {
 
 <template>
 	<ResourcesListLayout
-		class="variables-view"
 		ref="layoutRef"
+		class="variables-view"
 		resource-key="variables"
 		:disabled="!isFeatureEnabled"
 		:resources="allVariables"
 		:initialize="initialize"
 		:shareable="false"
-		:displayName="displayName"
-		:sortFns="sortFns"
-		:sortOptions="['nameAsc', 'nameDesc']"
-		:showFiltersDropdown="false"
+		:display-name="displayName"
+		:sort-fns="sortFns"
+		:sort-options="['nameAsc', 'nameDesc']"
+		:show-filters-dropdown="false"
 		type="datatable"
 		:type-props="{ columns: datatableColumns }"
 		@sort="resetNewVariablesList"
@@ -252,8 +252,8 @@ onBeforeUnmount(() => {
 						size="large"
 						block
 						:disabled="!canCreateVariables"
-						@click="addTemporaryVariable"
 						data-test-id="resources-list-add"
+						@click="addTemporaryVariable"
 					>
 						{{ $locale.baseText(`variables.add`) }}
 					</n8n-button>
@@ -275,8 +275,8 @@ onBeforeUnmount(() => {
 				:description="
 					$locale.baseText(contextBasedTranslationKeys.variables.unavailable.description)
 				"
-				:buttonText="$locale.baseText(contextBasedTranslationKeys.variables.unavailable.button)"
-				buttonType="secondary"
+				:button-text="$locale.baseText(contextBasedTranslationKeys.variables.unavailable.button)"
+				button-type="secondary"
 				@click:button="goToUpgrade"
 			/>
 		</template>
@@ -289,8 +289,8 @@ onBeforeUnmount(() => {
 				:description="
 					$locale.baseText(contextBasedTranslationKeys.variables.unavailable.description)
 				"
-				:buttonText="$locale.baseText(contextBasedTranslationKeys.variables.unavailable.button)"
-				buttonType="secondary"
+				:button-text="$locale.baseText(contextBasedTranslationKeys.variables.unavailable.button)"
+				button-type="secondary"
 				@click:button="goToUpgrade"
 			/>
 			<n8n-action-box
diff --git a/packages/editor-ui/src/views/WorkerView.vue b/packages/editor-ui/src/views/WorkerView.vue
index 9c895d67f0..966f1e50a8 100644
--- a/packages/editor-ui/src/views/WorkerView.vue
+++ b/packages/editor-ui/src/views/WorkerView.vue
@@ -8,7 +8,7 @@
 		data-test-id="worker-view-unlicensed"
 		:class="$style.actionBox"
 		:description="$locale.baseText('workerList.actionBox.description')"
-		:buttonText="$locale.baseText('workerList.actionBox.buttonText')"
+		:button-text="$locale.baseText('workerList.actionBox.buttonText')"
 		@click:button="goToUpgrade"
 	>
 		<template #heading>
diff --git a/packages/editor-ui/src/views/WorkflowHistory.vue b/packages/editor-ui/src/views/WorkflowHistory.vue
index a2ea3bcd0c..fbb2d0b870 100644
--- a/packages/editor-ui/src/views/WorkflowHistory.vue
+++ b/packages/editor-ui/src/views/WorkflowHistory.vue
@@ -328,16 +328,16 @@ watchEffect(async () => {
 			</router-link>
 		</div>
 		<div :class="$style.listComponentWrapper">
-			<workflow-history-list
+			<WorkflowHistoryList
 				v-if="canRender"
 				:items="workflowHistory"
-				:lastReceivedItemsLength="lastReceivedItemsLength"
-				:activeItem="activeWorkflowVersion"
+				:last-received-items-length="lastReceivedItemsLength"
+				:active-item="activeWorkflowVersion"
 				:actions="actions"
-				:requestNumberOfItems="requestNumberOfItems"
-				:shouldUpgrade="workflowHistoryStore.shouldUpgrade"
-				:evaluatedPruneTime="evaluatedPruneTime"
-				:isListLoading="isListLoading"
+				:request-number-of-items="requestNumberOfItems"
+				:should-upgrade="workflowHistoryStore.shouldUpgrade"
+				:evaluated-prune-time="evaluatedPruneTime"
+				:is-list-loading="isListLoading"
 				@action="onAction"
 				@preview="onPreview"
 				@load-more="loadMore"
@@ -345,13 +345,13 @@ watchEffect(async () => {
 			/>
 		</div>
 		<div :class="$style.contentComponentWrapper">
-			<workflow-history-content
+			<WorkflowHistoryContent
 				v-if="canRender"
 				:workflow="activeWorkflow"
-				:workflowVersion="activeWorkflowVersion"
+				:workflow-version="activeWorkflowVersion"
 				:actions="actions"
-				:isListLoading="isListLoading"
-				:isFirstItemShown="isFirstItemShown"
+				:is-list-loading="isListLoading"
+				:is-first-item-shown="isFirstItemShown"
 				@action="onAction"
 			/>
 		</div>
diff --git a/packages/editor-ui/src/views/WorkflowsView.vue b/packages/editor-ui/src/views/WorkflowsView.vue
index 80c9ef3325..e363cabf19 100644
--- a/packages/editor-ui/src/views/WorkflowsView.vue
+++ b/packages/editor-ui/src/views/WorkflowsView.vue
@@ -1,5 +1,5 @@
 <template>
-	<resources-list-layout
+	<ResourcesListLayout
 		ref="layout"
 		resource-key="workflows"
 		:resources="allWorkflows"
@@ -20,8 +20,8 @@
 						size="large"
 						block
 						:disabled="disabled"
-						@click="addWorkflow"
 						data-test-id="resources-list-add"
+						@click="addWorkflow"
 					>
 						{{ $locale.baseText(`workflows.add`) }}
 					</n8n-button>
@@ -32,17 +32,17 @@
 			</n8n-tooltip>
 		</template>
 		<template #default="{ data, updateItemSize }">
-			<workflow-card
+			<WorkflowCard
 				data-test-id="resources-list-item"
 				class="mb-2xs"
 				:data="data"
+				:read-only="readOnlyEnv"
 				@expand:tags="updateItemSize(data)"
 				@click:tag="onClickTag"
-				:readOnly="readOnlyEnv"
 			/>
 		</template>
 		<template #postListContent>
-			<suggested-templates-section
+			<SuggestedTemplatesSection
 				v-for="(section, key) in suggestedTemplates?.sections"
 				:key="key"
 				:section="section"
@@ -54,7 +54,7 @@
 			/>
 		</template>
 		<template #empty>
-			<suggested-templates-page v-if="suggestedTemplates" />
+			<SuggestedTemplatesPage v-if="suggestedTemplates" />
 			<div v-else>
 				<div class="text-center mt-s">
 					<n8n-heading tag="h2" size="xlarge" class="mb-2xs">
@@ -81,8 +81,8 @@
 					<n8n-card
 						:class="$style.emptyStateCard"
 						hoverable
-						@click="addWorkflow"
 						data-test-id="new-workflow-card"
+						@click="addWorkflow"
 					>
 						<n8n-icon :class="$style.emptyStateCardIcon" icon="file" />
 						<n8n-text size="large" class="mt-xs" color="text-base">
@@ -93,7 +93,7 @@
 			</div>
 		</template>
 		<template #filters="{ setKeyValue }">
-			<div class="mb-s" v-if="settingsStore.areTagsEnabled">
+			<div v-if="settingsStore.areTagsEnabled" class="mb-s">
 				<n8n-input-label
 					:label="$locale.baseText('workflows.filters.tags')"
 					:bold="false"
@@ -103,8 +103,8 @@
 				/>
 				<TagsDropdown
 					:placeholder="$locale.baseText('workflowOpen.filterWorkflows')"
-					:modelValue="filters.tags"
-					:createEnabled="false"
+					:model-value="filters.tags"
+					:create-enabled="false"
 					@update:modelValue="setKeyValue('tags', $event)"
 				/>
 			</div>
@@ -118,7 +118,7 @@
 				/>
 				<n8n-select
 					data-test-id="status-dropdown"
-					:modelValue="filters.status"
+					:model-value="filters.status"
 					@update:modelValue="setKeyValue('status', $event)"
 				>
 					<n8n-option
@@ -132,7 +132,7 @@
 				</n8n-select>
 			</div>
 		</template>
-	</resources-list-layout>
+	</ResourcesListLayout>
 </template>
 
 <script lang="ts">
@@ -164,7 +164,6 @@ const StatusFilter = {
 
 const WorkflowsView = defineComponent({
 	name: 'WorkflowsView',
-	mixins: [genericHelpers],
 	components: {
 		ResourcesListLayout,
 		WorkflowCard,
@@ -172,6 +171,7 @@ const WorkflowsView = defineComponent({
 		SuggestedTemplatesPage,
 		SuggestedTemplatesSection,
 	},
+	mixins: [genericHelpers],
 	data() {
 		return {
 			filters: {
@@ -223,6 +223,27 @@ const WorkflowsView = defineComponent({
 			return this.uiStore.suggestedTemplates;
 		},
 	},
+	watch: {
+		'filters.tags'() {
+			this.sendFiltersTelemetry('tags');
+		},
+	},
+	mounted() {
+		this.setFiltersFromQueryString();
+
+		void this.usersStore.showPersonalizationSurvey();
+
+		this.sourceControlStoreUnsubscribe = this.sourceControlStore.$onAction(({ name, after }) => {
+			if (name === 'pullWorkfolder' && after) {
+				after(() => {
+					void this.initialize();
+				});
+			}
+		});
+	},
+	beforeUnmount() {
+		this.sourceControlStoreUnsubscribe();
+	},
 	methods: {
 		addWorkflow() {
 			this.uiStore.nodeViewInitialized = false;
@@ -346,27 +367,6 @@ const WorkflowsView = defineComponent({
 			}
 		},
 	},
-	watch: {
-		'filters.tags'() {
-			this.sendFiltersTelemetry('tags');
-		},
-	},
-	mounted() {
-		this.setFiltersFromQueryString();
-
-		void this.usersStore.showPersonalizationSurvey();
-
-		this.sourceControlStoreUnsubscribe = this.sourceControlStore.$onAction(({ name, after }) => {
-			if (name === 'pullWorkfolder' && after) {
-				after(() => {
-					void this.initialize();
-				});
-			}
-		});
-	},
-	beforeUnmount() {
-		this.sourceControlStoreUnsubscribe();
-	},
 });
 
 export default WorkflowsView;