diff --git a/packages/@n8n_io/eslint-config/frontend.js b/packages/@n8n_io/eslint-config/frontend.js
index e82df9033c..9abd67aed6 100644
--- a/packages/@n8n_io/eslint-config/frontend.js
+++ b/packages/@n8n_io/eslint-config/frontend.js
@@ -32,5 +32,9 @@ module.exports = {
 		'comma-dangle': ['error', 'always-multiline'],
 		'no-tabs': 0,
 		'no-labels': 0,
+		'vue/no-deprecated-slot-attribute': 'error',
+		'vue/no-deprecated-slot-scope-attribute': 'error',
+		'vue/no-multiple-template-root': 'error',
+		'vue/v-slot-style': 'error',
 	},
 };
diff --git a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
index 40855b19dc..6dd046009f 100644
--- a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
+++ b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
@@ -9,30 +9,32 @@
 			<div :class="$style.activator" @click.prevent @blur="onButtonBlur">
 				<n8n-icon :icon="activatorIcon" />
 			</div>
-			<el-dropdown-menu slot="dropdown" :class="$style.userActionsMenu">
-				<el-dropdown-item
-					v-for="item in items"
-					:key="item.id"
-					:command="item.id"
-					:disabled="item.disabled"
-					:divided="item.divided"
-				>
-					<div
-						:class="{
-							[$style.itemContainer]: true,
-							[$style.hasCustomStyling]: item.customClass !== undefined,
-							[item.customClass]: item.customClass !== undefined,
-						}"
+			<template #dropdown>
+				<el-dropdown-menu :class="$style.userActionsMenu">
+					<el-dropdown-item
+						v-for="item in items"
+						:key="item.id"
+						:command="item.id"
+						:disabled="item.disabled"
+						:divided="item.divided"
 					>
-						<span v-if="item.icon" :class="$style.icon">
-							<n8n-icon :icon="item.icon" :size="item.iconSize" />
-						</span>
-						<span :class="$style.label">
-							{{ item.label }}
-						</span>
-					</div>
-				</el-dropdown-item>
-			</el-dropdown-menu>
+						<div
+							:class="{
+								[$style.itemContainer]: true,
+								[$style.hasCustomStyling]: item.customClass !== undefined,
+								[item.customClass]: item.customClass !== undefined,
+							}"
+						>
+							<span v-if="item.icon" :class="$style.icon">
+								<n8n-icon :icon="item.icon" :size="item.iconSize" />
+							</span>
+							<span :class="$style.label">
+								{{ item.label }}
+							</span>
+						</div>
+					</el-dropdown-item>
+				</el-dropdown-menu>
+			</template>
 		</el-dropdown>
 	</div>
 </template>
diff --git a/packages/design-system/src/components/N8nActionDropdown/__tests__/__snapshots__/ActionDropdown.spec.ts.snap b/packages/design-system/src/components/N8nActionDropdown/__tests__/__snapshots__/ActionDropdown.spec.ts.snap
index cfeb3fa9ee..365732dd6b 100644
--- a/packages/design-system/src/components/N8nActionDropdown/__tests__/__snapshots__/ActionDropdown.spec.ts.snap
+++ b/packages/design-system/src/components/N8nActionDropdown/__tests__/__snapshots__/ActionDropdown.spec.ts.snap
@@ -6,17 +6,6 @@ exports[`components > N8nActionDropdown > should render custom styling correctly
     <div class=\\"_activator_lf4ng_1\\">
       <n8n-icon-stub icon=\\"ellipsis-v\\" size=\\"medium\\"></n8n-icon-stub>
     </div>
-    <el-dropdown-menu-stub transformorigin=\\"true\\" placement=\\"bottom\\" boundariespadding=\\"5\\" offset=\\"0\\" visiblearrow=\\"true\\" arrowoffset=\\"0\\" appendtobody=\\"true\\" popperoptions=\\"[object Object]\\">
-      <el-dropdown-item-stub command=\\"item1\\">
-        <div class=\\"_itemContainer_lf4ng_16\\"><span class=\\"_icon_lf4ng_20\\"><n8n-icon-stub icon=\\"thumbs-up\\" size=\\"medium\\"></n8n-icon-stub></span><span> Action 1 </span></div>
-      </el-dropdown-item-stub>
-      <el-dropdown-item-stub command=\\"item2\\" disabled=\\"true\\">
-        <div class=\\"_itemContainer_lf4ng_16\\"><span class=\\"_icon_lf4ng_20\\"><n8n-icon-stub icon=\\"thumbs-down\\" size=\\"medium\\"></n8n-icon-stub></span><span> Action 2 </span></div>
-      </el-dropdown-item-stub>
-      <el-dropdown-item-stub command=\\"item3\\" divided=\\"true\\">
-        <div class=\\"_itemContainer_lf4ng_16\\"><span class=\\"_icon_lf4ng_20\\"><n8n-icon-stub icon=\\"heart\\" size=\\"medium\\"></n8n-icon-stub></span><span> Action 3 </span></div>
-      </el-dropdown-item-stub>
-    </el-dropdown-menu-stub>
   </el-dropdown-stub>
 </div>"
 `;
@@ -27,16 +16,6 @@ exports[`components > N8nActionDropdown > should render default styling correctl
     <div class=\\"_activator_lf4ng_1\\">
       <n8n-icon-stub icon=\\"ellipsis-v\\" size=\\"medium\\"></n8n-icon-stub>
     </div>
-    <el-dropdown-menu-stub transformorigin=\\"true\\" placement=\\"bottom\\" boundariespadding=\\"5\\" offset=\\"0\\" visiblearrow=\\"true\\" arrowoffset=\\"0\\" appendtobody=\\"true\\" popperoptions=\\"[object Object]\\">
-      <el-dropdown-item-stub command=\\"item1\\">
-        <div class=\\"_itemContainer_lf4ng_16\\">
-          <!----><span> Action 1 </span></div>
-      </el-dropdown-item-stub>
-      <el-dropdown-item-stub command=\\"item2\\">
-        <div class=\\"_itemContainer_lf4ng_16\\">
-          <!----><span> Action 2 </span></div>
-      </el-dropdown-item-stub>
-    </el-dropdown-menu-stub>
   </el-dropdown-stub>
 </div>"
 `;
diff --git a/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue b/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue
index 1bed9e6888..e48a1c3d5a 100644
--- a/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue
+++ b/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue
@@ -11,25 +11,28 @@
 			<span :class="{ [$style.button]: true, [$style[theme]]: !!theme }">
 				<component :is="$options.components.N8nIcon" icon="ellipsis-v" :size="iconSize" />
 			</span>
-			<el-dropdown-menu slot="dropdown" data-test-id="action-toggle-dropdown">
-				<el-dropdown-item
-					v-for="action in actions"
-					:key="action.value"
-					:command="action.value"
-					:disabled="action.disabled"
-				>
-					{{ action.label }}
-					<div :class="$style.iconContainer">
-						<component
-							v-if="action.type === 'external-link'"
-							:is="$options.components.N8nIcon"
-							icon="external-link-alt"
-							size="xsmall"
-							color="text-base"
-						/>
-					</div>
-				</el-dropdown-item>
-			</el-dropdown-menu>
+
+			<template #dropdown>
+				<el-dropdown-menu data-test-id="action-toggle-dropdown">
+					<el-dropdown-item
+						v-for="action in actions"
+						:key="action.value"
+						:command="action.value"
+						:disabled="action.disabled"
+					>
+						{{ action.label }}
+						<div :class="$style.iconContainer">
+							<component
+								v-if="action.type === 'external-link'"
+								:is="$options.components.N8nIcon"
+								icon="external-link-alt"
+								size="xsmall"
+								color="text-base"
+							/>
+						</div>
+					</el-dropdown-item>
+				</el-dropdown-menu>
+			</template>
 		</el-dropdown>
 	</span>
 </template>
diff --git a/packages/design-system/src/components/N8nFormInputs/FormInputs.vue b/packages/design-system/src/components/N8nFormInputs/FormInputs.vue
index 97b0933455..a5a0efebb7 100644
--- a/packages/design-system/src/components/N8nFormInputs/FormInputs.vue
+++ b/packages/design-system/src/components/N8nFormInputs/FormInputs.vue
@@ -1,6 +1,6 @@
 <template>
 	<ResizeObserver :breakpoints="[{ bp: 'md', width: 500 }]">
-		<template v-slot="{ bp }">
+		<template #default="{ bp }">
 			<div :class="bp === 'md' || columnView ? $style.grid : $style.gridMulti">
 				<div v-for="input in filteredInputs" :key="input.name">
 					<n8n-text
diff --git a/packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue b/packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue
index dfbff7651f..4e72eaca24 100644
--- a/packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue
+++ b/packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue
@@ -22,11 +22,9 @@
 			<div v-if="items.length > 0" :class="$style.accordionItems">
 				<div v-for="item in items" :key="item.id" :class="$style.accordionItem">
 					<n8n-tooltip :disabled="!item.tooltip">
-						<div
-							slot="content"
-							v-html="item.tooltip"
-							@click="onTooltipClick(item.id, $event)"
-						></div>
+						<template #content>
+							<div v-html="item.tooltip" @click="onTooltipClick(item.id, $event)"></div>
+						</template>
 						<n8n-icon :icon="item.icon" :color="item.iconColor" size="small" class="mr-2xs" />
 					</n8n-tooltip>
 					<n8n-text size="small" color="text-base">{{ item.label }}</n8n-text>
diff --git a/packages/design-system/src/components/N8nInfoTip/InfoTip.vue b/packages/design-system/src/components/N8nInfoTip/InfoTip.vue
index 5378891ee9..778e33dd1a 100644
--- a/packages/design-system/src/components/N8nInfoTip/InfoTip.vue
+++ b/packages/design-system/src/components/N8nInfoTip/InfoTip.vue
@@ -16,9 +16,11 @@
 			<span :class="$style.iconText">
 				<n8n-icon :icon="theme.startsWith('info') ? 'info-circle' : 'exclamation-triangle'" />
 			</span>
-			<span slot="content">
-				<slot />
-			</span>
+			<template #content>
+				<span>
+					<slot name="content" />
+				</span>
+			</template>
 		</n8n-tooltip>
 		<span :class="$style.iconText" v-else>
 			<n8n-icon :icon="theme.startsWith('info') ? 'info-circle' : 'exclamation-triangle'" />
diff --git a/packages/design-system/src/components/N8nInfoTip/__tests__/__snapshots__/InfoTip.spec.ts.snap b/packages/design-system/src/components/N8nInfoTip/__tests__/__snapshots__/InfoTip.spec.ts.snap
index b758b70dab..5db03b96e6 100644
--- a/packages/design-system/src/components/N8nInfoTip/__tests__/__snapshots__/InfoTip.spec.ts.snap
+++ b/packages/design-system/src/components/N8nInfoTip/__tests__/__snapshots__/InfoTip.spec.ts.snap
@@ -4,6 +4,6 @@ exports[`N8nInfoTip > should render correctly as note 1`] = `"<div class=\\"n8n-
 
 exports[`N8nInfoTip > should render correctly as tooltip 1`] = `
 "<div class=\\"n8n-info-tip _info_3egb8_33 _tooltip_3egb8_23 _base_3egb8_1 _bold_3egb8_12\\">
-  <n8n-tooltip-stub justifybuttons=\\"flex-end\\" buttons=\\"\\" placement=\\"top\\"><span class=\\"_iconText_3egb8_28\\"><span class=\\"n8n-icon n8n-text _compact_e4k11_34 _size-medium_e4k11_19 _regular_e4k11_5\\"></span></span><span>Need help doing something?<a href=\\"/docs\\" target=\\"_blank\\">Open docs</a></span></n8n-tooltip-stub>
+  <n8n-tooltip-stub justifybuttons=\\"flex-end\\" buttons=\\"\\" placement=\\"top\\"><span class=\\"_iconText_3egb8_28\\"><span class=\\"n8n-icon n8n-text _compact_e4k11_34 _size-medium_e4k11_19 _regular_e4k11_5\\"></span></span></n8n-tooltip-stub>
 </div>"
 `;
diff --git a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
index d1eff05398..4ba6974d5d 100644
--- a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
+++ b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
@@ -23,7 +23,9 @@
 			>
 				<n8n-tooltip placement="top" :popper-class="$style.tooltipPopper">
 					<n8n-icon icon="question-circle" size="small" />
-					<div slot="content" v-html="addTargetBlank(tooltipText)" />
+					<template #content>
+						<div v-html="addTargetBlank(tooltipText)" />
+					</template>
 				</n8n-tooltip>
 			</span>
 			<div
diff --git a/packages/design-system/src/components/N8nLoading/Loading.vue b/packages/design-system/src/components/N8nLoading/Loading.vue
index 2b04a1ba95..0821dba20a 100644
--- a/packages/design-system/src/components/N8nLoading/Loading.vue
+++ b/packages/design-system/src/components/N8nLoading/Loading.vue
@@ -4,7 +4,7 @@
 		:animated="animated"
 		:class="['n8n-loading', `n8n-loading-${variant}`]"
 	>
-		<template slot="template">
+		<template #template>
 			<div v-if="variant === 'h1'">
 				<div
 					v-for="(item, index) in rows"
diff --git a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
index d1ab085945..5367d560e3 100644
--- a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
+++ b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
@@ -12,7 +12,7 @@
 			popper-append-to-body
 			:popper-class="`${$style.submenuPopper} ${popperClass}`"
 		>
-			<template slot="title">
+			<template #title>
 				<n8n-icon
 					v-if="item.icon"
 					:class="$style.icon"
diff --git a/packages/design-system/src/components/N8nTabs/Tabs.vue b/packages/design-system/src/components/N8nTabs/Tabs.vue
index f7292e6461..d5e65df0a8 100644
--- a/packages/design-system/src/components/N8nTabs/Tabs.vue
+++ b/packages/design-system/src/components/N8nTabs/Tabs.vue
@@ -14,11 +14,9 @@
 				:class="{ [$style.alignRight]: option.align === 'right' }"
 			>
 				<n8n-tooltip :disabled="!option.tooltip" placement="bottom">
-					<div
-						slot="content"
-						v-html="option.tooltip"
-						@click="handleTooltipClick(option.value, $event)"
-					></div>
+					<template #content>
+						<div v-html="option.tooltip" @click="handleTooltipClick(option.value, $event)" />
+					</template>
 					<a
 						v-if="option.href"
 						target="_blank"
diff --git a/packages/design-system/src/components/N8nTree/Tree.vue b/packages/design-system/src/components/N8nTree/Tree.vue
index 45df18d179..d033f2260d 100644
--- a/packages/design-system/src/components/N8nTree/Tree.vue
+++ b/packages/design-system/src/components/N8nTree/Tree.vue
@@ -31,7 +31,7 @@
 					:value="value[label]"
 					:nodeClass="nodeClass"
 				>
-					<template v-for="(index, name) in $scopedSlots" v-slot:[name]="data">
+					<template v-for="(index, name) in $scopedSlots" #[name]="data">
 						<slot :name="name" v-bind="data"></slot>
 					</template>
 				</n8n-tree>
diff --git a/packages/editor-ui/package.json b/packages/editor-ui/package.json
index 62ee2ddc34..7d829cdd9b 100644
--- a/packages/editor-ui/package.json
+++ b/packages/editor-ui/package.json
@@ -80,7 +80,6 @@
     "xss": "^1.0.10"
   },
   "devDependencies": {
-    "@intlify/vue-i18n-loader": "^1.1.0",
     "@pinia/testing": "^0.0.14",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/vue": "^5.8.3",
@@ -96,7 +95,6 @@
     "@types/uuid": "^8.3.2",
     "@vitejs/plugin-legacy": "^1.8.2",
     "@vitejs/plugin-vue2": "^1.1.2",
-    "@yfwz100/vite-plugin-vue2-i18n": "^1.0.0-2",
     "c8": "^7.12.0",
     "jshint": "^2.9.7",
     "sass": "^1.55.0",
diff --git a/packages/editor-ui/src/components/AboutModal.vue b/packages/editor-ui/src/components/AboutModal.vue
index 211f4d6010..04149d4cff 100644
--- a/packages/editor-ui/src/components/AboutModal.vue
+++ b/packages/editor-ui/src/components/AboutModal.vue
@@ -6,7 +6,7 @@
 		:name="ABOUT_MODAL_KEY"
 		:center="true"
 	>
-		<template slot="content">
+		<template #content>
 			<div :class="$style.container">
 				<el-row>
 					<el-col :span="8" class="info-name">
@@ -45,7 +45,7 @@
 			</div>
 		</template>
 
-		<template slot="footer">
+		<template #footer>
 			<div class="action-buttons">
 				<n8n-button @click="closeDialog" float="right" :label="$locale.baseText('about.close')" />
 			</div>
diff --git a/packages/editor-ui/src/components/ActivationModal.vue b/packages/editor-ui/src/components/ActivationModal.vue
index 000ada2e72..9934c5e6e6 100644
--- a/packages/editor-ui/src/components/ActivationModal.vue
+++ b/packages/editor-ui/src/components/ActivationModal.vue
@@ -4,7 +4,7 @@
 		:title="$locale.baseText('activationModal.workflowActivated')"
 		width="460px"
 	>
-		<template v-slot:content>
+		<template #content>
 			<div>
 				<n8n-text>{{ triggerContent }}</n8n-text>
 			</div>
@@ -24,7 +24,7 @@
 		</template>
 
 
-		<template v-slot:footer="{ close }">
+		<template #footer="{ close }">
 			<div :class="$style.footer">
 				<el-checkbox :value="checked" @change="handleCheckboxChange">{{ $locale.baseText('activationModal.dontShowAgain') }}</el-checkbox>
 				<n8n-button @click="close" :label="$locale.baseText('activationModal.gotIt')" />
diff --git a/packages/editor-ui/src/components/ChangePasswordModal.vue b/packages/editor-ui/src/components/ChangePasswordModal.vue
index 26a361e2a6..934042a9f4 100644
--- a/packages/editor-ui/src/components/ChangePasswordModal.vue
+++ b/packages/editor-ui/src/components/ChangePasswordModal.vue
@@ -7,7 +7,7 @@
 		width="460px"
 		:eventBus="modalBus"
 	>
-		<template slot="content">
+		<template #content>
 			<n8n-form-inputs
 				:inputs="config"
 				:eventBus="formBus"
@@ -16,7 +16,7 @@
 				@submit="onSubmit"
 			/>
 		</template>
-		<template slot="footer">
+		<template #footer>
 			<n8n-button :loading="loading" :label="$locale.baseText('auth.changePassword')" @click="onSubmitClick" float="right" />
 		</template>
 	</Modal>
diff --git a/packages/editor-ui/src/components/CollectionCard.vue b/packages/editor-ui/src/components/CollectionCard.vue
index 55b9c0d48f..0a50a20186 100644
--- a/packages/editor-ui/src/components/CollectionCard.vue
+++ b/packages/editor-ui/src/components/CollectionCard.vue
@@ -4,7 +4,7 @@
 		:title="collection.name"
 		@click="onClick"
 	>
-		<template v-slot:footer>
+		<template #footer>
 			<n8n-text size="small" color="text-light">
 				{{ collection.workflows.length }}
 				{{ $locale.baseText('templates.workflows') }}
diff --git a/packages/editor-ui/src/components/CommunityPackageCard.vue b/packages/editor-ui/src/components/CommunityPackageCard.vue
index 6a4ca080e8..c5c1038a7f 100644
--- a/packages/editor-ui/src/components/CommunityPackageCard.vue
+++ b/packages/editor-ui/src/components/CommunityPackageCard.vue
@@ -29,21 +29,27 @@
 					v{{ communityPackage.installedVersion }}
 				</n8n-text>
 				<n8n-tooltip v-if="communityPackage.failedLoading === true" placement="top">
-					<div slot="content">
-						{{ $locale.baseText('settings.communityNodes.failedToLoad.tooltip') }}
-					</div>
+					<template #content>
+						<div>
+							{{ $locale.baseText('settings.communityNodes.failedToLoad.tooltip') }}
+						</div>
+					</template>
 					<n8n-icon icon="exclamation-triangle" color="danger" size="large" />
 				</n8n-tooltip>
 				<n8n-tooltip v-else-if="communityPackage.updateAvailable" placement="top">
-					<div slot="content">
-						{{ $locale.baseText('settings.communityNodes.updateAvailable.tooltip') }}
-					</div>
+					<template #content>
+						<div>
+							{{ $locale.baseText('settings.communityNodes.updateAvailable.tooltip') }}
+						</div>
+					</template>
 					<n8n-button type="outline" label="Update" @click="onUpdateClick"/>
 				</n8n-tooltip>
 				<n8n-tooltip v-else placement="top">
-					<div slot="content">
-						{{ $locale.baseText('settings.communityNodes.upToDate.tooltip') }}
-					</div>
+					<template #content>
+						<div>
+							{{ $locale.baseText('settings.communityNodes.upToDate.tooltip') }}
+						</div>
+					</template>
 					<n8n-icon icon="check-circle" color="text-light" size="large" />
 				</n8n-tooltip>
 				<div :class="$style.cardActions">
diff --git a/packages/editor-ui/src/components/CommunityPackageInstallModal.vue b/packages/editor-ui/src/components/CommunityPackageInstallModal.vue
index bcc6fa7d1f..adc033bab5 100644
--- a/packages/editor-ui/src/components/CommunityPackageInstallModal.vue
+++ b/packages/editor-ui/src/components/CommunityPackageInstallModal.vue
@@ -8,7 +8,7 @@
 		:beforeClose="onModalClose"
 		:showClose="!loading"
 	>
-		<template slot="content">
+		<template #content>
 			<div :class="[$style.descriptionContainer, 'p-s']">
 				<div>
 					<n8n-text>
@@ -66,7 +66,7 @@
 				</el-checkbox>
 			</div>
 		</template>
-		<template slot="footer">
+		<template #footer>
 			<n8n-button
 				:loading="loading"
 				:disabled="packageName === '' || loading"
diff --git a/packages/editor-ui/src/components/CommunityPackageManageConfirmModal.vue b/packages/editor-ui/src/components/CommunityPackageManageConfirmModal.vue
index b910b6d647..d43f22285d 100644
--- a/packages/editor-ui/src/components/CommunityPackageManageConfirmModal.vue
+++ b/packages/editor-ui/src/components/CommunityPackageManageConfirmModal.vue
@@ -8,7 +8,7 @@
 		:showClose="!loading"
 		:beforeClose="onModalClose"
 	>
-		<template slot="content">
+		<template #content>
 			<n8n-text>{{ getModalContent.message }}</n8n-text>
 			<div :class="$style.descriptionContainer" v-if="this.mode === COMMUNITY_PACKAGE_MANAGE_ACTIONS.UPDATE">
 				<n8n-info-tip theme="info" type="note" :bold="false">
@@ -18,7 +18,7 @@
 				</n8n-info-tip>
 			</div>
 		</template>
-		<template slot="footer">
+		<template #footer>
 			<n8n-button
 				:loading="loading"
 				:disabled="loading"
diff --git a/packages/editor-ui/src/components/ContactPromptModal.vue b/packages/editor-ui/src/components/ContactPromptModal.vue
index 208694187c..5b5594c550 100644
--- a/packages/editor-ui/src/components/ContactPromptModal.vue
+++ b/packages/editor-ui/src/components/ContactPromptModal.vue
@@ -8,10 +8,10 @@
 		customClass="contact-prompt-modal"
 		width="460px"
 	>
-		<template slot="header">
+		<template #header>
 			<n8n-heading tag="h2" size="xlarge" color="text-dark">{{ title }}</n8n-heading>
 		</template>
-		<template v-slot:content>
+		<template #content>
 			<div :class="$style.description">
 				<n8n-text size="medium" color="text-base">{{ description }}</n8n-text>
 			</div>
@@ -24,7 +24,7 @@
 				>
 			</div>
 		</template>
-		<template v-slot:footer>
+		<template #footer>
 			<div :class="$style.footer">
 				<n8n-button label="Send" float="right" @click="send" :disabled="!isEmailValid" />
 			</div>
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
index 07aea62ae6..63aa1f3a94 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
@@ -8,7 +8,7 @@
 		width="70%"
 		height="80%"
 	>
-		<template slot="header">
+		<template #header>
 			<div :class="$style.header">
 				<div :class="$style.credInfo">
 					<div :class="$style.credIcon">
@@ -46,7 +46,7 @@
 			</div>
 			<hr />
 		</template>
-		<template slot="content">
+		<template #content>
 			<div :class="$style.container">
 				<div :class="$style.sidebar">
 					<n8n-menu mode="tabs" :items="sidebarItems" @select="onTabSelect" ></n8n-menu>
diff --git a/packages/editor-ui/src/components/CredentialsSelectModal.vue b/packages/editor-ui/src/components/CredentialsSelectModal.vue
index ad4255967f..5734f15f36 100644
--- a/packages/editor-ui/src/components/CredentialsSelectModal.vue
+++ b/packages/editor-ui/src/components/CredentialsSelectModal.vue
@@ -8,10 +8,10 @@
 		maxWidth="460px"
 		minHeight="250px"
 	>
-		<template slot="header">
+		<template #header>
 			<h2 :class="$style.title">{{ $locale.baseText('credentialSelectModal.addNewCredential') }}</h2>
 		</template>
-		<template slot="content">
+		<template #content>
 			<div>
 				<div :class="$style.subtitle">{{ $locale.baseText('credentialSelectModal.selectAnAppOrServiceToConnectTo') }}</div>
 				<n8n-select
@@ -23,7 +23,9 @@
 					:value="selected"
 					@change="onSelect"
 				>
-					<font-awesome-icon icon="search" slot="prefix" />
+					<template #prefix>
+						<font-awesome-icon icon="search" />
+					</template>
 					<n8n-option
 						v-for="credential in credentialsStore.allCredentialTypes"
 						:value="credential.name"
@@ -34,7 +36,7 @@
 				</n8n-select>
 			</div>
 		</template>
-		<template slot="footer">
+		<template #footer>
 			<div :class="$style.footer">
 				<n8n-button
 					:label="$locale.baseText('credentialSelectModal.continue')"
diff --git a/packages/editor-ui/src/components/DeleteUserModal.vue b/packages/editor-ui/src/components/DeleteUserModal.vue
index 0b02ccf03c..3ba7496af5 100644
--- a/packages/editor-ui/src/components/DeleteUserModal.vue
+++ b/packages/editor-ui/src/components/DeleteUserModal.vue
@@ -7,7 +7,7 @@
 		width="460px"
 		:eventBus="modalBus"
 	>
-		<template slot="content">
+		<template #content>
 			<div>
 				<div v-if="isPending">
 					<n8n-text color="text-base">{{ $locale.baseText('settings.users.confirmUserDeletion') }}</n8n-text>
@@ -39,7 +39,7 @@
 				</div>
 			</div>
 		</template>
-		<template slot="footer">
+		<template #footer>
 			<n8n-button :loading="loading" :disabled="!enabled" :label="$locale.baseText('settings.users.delete')" @click="onSubmit" float="right" />
 		</template>
 	</Modal>
diff --git a/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue b/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
index 4e679da3f5..7c2af9fb36 100644
--- a/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
+++ b/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
@@ -7,7 +7,7 @@
 		:center="true"
 		width="420px"
 	>
-		<template v-slot:content>
+		<template #content>
 			<div :class="$style.content">
 				<n8n-input
 					v-model="name"
@@ -28,7 +28,7 @@
 				/>
 			</div>
 		</template>
-		<template v-slot:footer="{ close }">
+		<template #footer="{ close }">
 			<div :class="$style.footer">
 				<n8n-button @click="save" :loading="isSaving" :label="$locale.baseText('duplicateWorkflowDialog.save')" float="right" />
 				<n8n-button type="secondary" @click="close" :disabled="isSaving" :label="$locale.baseText('duplicateWorkflowDialog.cancel')" float="right" />
diff --git a/packages/editor-ui/src/components/Error/NodeErrorView.vue b/packages/editor-ui/src/components/Error/NodeErrorView.vue
index 5c45478755..9b61bcdc4c 100644
--- a/packages/editor-ui/src/components/Error/NodeErrorView.vue
+++ b/packages/editor-ui/src/components/Error/NodeErrorView.vue
@@ -18,9 +18,11 @@
 				</div>
 				<div v-if="error.timestamp">
 					<el-card class="box-card" shadow="never">
-						<div slot="header" class="clearfix box-card__title">
-							<span>{{ $locale.baseText('nodeErrorView.time') }}</span>
-						</div>
+						<template #header>
+							<div class="clearfix box-card__title">
+								<span>{{ $locale.baseText('nodeErrorView.time') }}</span>
+							</div>
+						</template>
 						<div>
 							{{new Date(error.timestamp).toLocaleString()}}
 						</div>
@@ -40,9 +42,11 @@
 			</div>
 				<div v-if="error.httpCode">
 					<el-card class="box-card" shadow="never">
-						<div slot="header" class="clearfix box-card__title">
-							<span>{{ $locale.baseText('nodeErrorView.httpCode') }}</span>
-						</div>
+						<template #header>
+							<div class="clearfix box-card__title">
+								<span>{{ $locale.baseText('nodeErrorView.httpCode') }}</span>
+							</div>
+						</template>
 						<div>
 							{{error.httpCode}}
 						</div>
@@ -50,11 +54,13 @@
 				</div>
 				<div v-if="error.cause">
 					<el-card class="box-card" shadow="never">
-						<div slot="header" class="clearfix box-card__title">
-							<span>{{ $locale.baseText('nodeErrorView.cause') }}</span>
-							<br>
-							<span class="box-card__subtitle">{{ $locale.baseText('nodeErrorView.dataBelowMayContain') }}</span>
-						</div>
+						<template #header>
+							<div class="clearfix box-card__title">
+								<span>{{ $locale.baseText('nodeErrorView.cause') }}</span>
+								<br>
+								<span class="box-card__subtitle">{{ $locale.baseText('nodeErrorView.dataBelowMayContain') }}</span>
+							</div>
+							</template>
 						<div>
 							<div class="copy-button" v-if="displayCause">
 								<n8n-icon-button @click="copyCause" :title="$locale.baseText('nodeErrorView.copyToClipboard')" icon="copy" />
@@ -76,9 +82,11 @@
 				</div>
 				<div v-if="error.stack">
 					<el-card class="box-card" shadow="never">
-						<div slot="header" class="clearfix box-card__title">
-							<span>{{ $locale.baseText('nodeErrorView.stack') }}</span>
-						</div>
+						<template #header>
+							<div class="clearfix box-card__title">
+								<span>{{ $locale.baseText('nodeErrorView.stack') }}</span>
+							</div>
+						</template>
 						<div>
 							<pre><code>{{error.stack}}</code></pre>
 						</div>
diff --git a/packages/editor-ui/src/components/ExecutionsList.vue b/packages/editor-ui/src/components/ExecutionsList.vue
index 65f35aef38..686072e06b 100644
--- a/packages/editor-ui/src/components/ExecutionsList.vue
+++ b/packages/editor-ui/src/components/ExecutionsList.vue
@@ -5,7 +5,7 @@
 		:title="`${$locale.baseText('executionsList.workflowExecutions')} ${combinedExecutions.length}/${finishedExecutionsCountEstimated === true ? '~' : ''}${combinedExecutionsCount}`"
 		:eventBus="modalBus"
 	>
-		<template v-slot:content>
+		<template #content>
 
 			<div class="filters">
 				<el-row>
@@ -50,21 +50,21 @@
 			<el-table :data="combinedExecutions" stripe v-loading="isDataLoading" :row-class-name="getRowClass">
 				<el-table-column label="" width="30">
 					<!-- eslint-disable-next-line vue/no-unused-vars -->
-					<template slot="header" slot-scope="scope">
+					<template #header="scope" >
 						<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" label=" "></el-checkbox>
 					</template>
-					<template slot-scope="scope">
+					<template #default="scope">
 						<el-checkbox v-if="scope.row.stoppedAt !== undefined && scope.row.id" :value="selectedItems[scope.row.id.toString()] || checkAll" @change="handleCheckboxChanged(scope.row.id)" label=" "></el-checkbox>
 					</template>
 				</el-table-column>
 				<el-table-column property="startedAt" :label="$locale.baseText('executionsList.startedAtId')" width="205">
-					<template slot-scope="scope">
+					<template #default="scope">
 						{{convertToDisplayDate(scope.row.startedAt)}}<br />
 						<small v-if="scope.row.id">ID: {{scope.row.id}}</small>
 					</template>
 				</el-table-column>
 				<el-table-column property="workflowName" :label="$locale.baseText('executionsList.name')">
-					<template slot-scope="scope">
+					<template #default="scope">
 						<div class="ph-no-capture">
 							<span class="workflow-name">
 								{{ scope.row.workflowName || $locale.baseText('executionsList.unsavedWorkflow') }}
@@ -83,9 +83,11 @@
 					</template>
 				</el-table-column>
 				<el-table-column :label="$locale.baseText('executionsList.status')" width="122" align="center">
-					<template slot-scope="scope" align="center">
+					<template #default="scope" align="center">
 						<n8n-tooltip placement="top" >
-							<div slot="content" v-html="statusTooltipText(scope.row)"></div>
+							<template #content>
+								<div v-html="statusTooltipText(scope.row)"></div>
+							</template>
 							<span class="status-badge running" v-if="scope.row.waitTill">
 								{{ $locale.baseText('executionsList.waiting') }}
 							</span>
@@ -114,25 +116,27 @@
 									icon="redo"
 								/>
 							</span>
-							<el-dropdown-menu slot="dropdown">
-								<el-dropdown-item :command="{command: 'currentlySaved', row: scope.row}">
-									{{ $locale.baseText('executionsList.retryWithCurrentlySavedWorkflow') }}
-								</el-dropdown-item>
-								<el-dropdown-item :command="{command: 'original', row: scope.row}">
-									{{ $locale.baseText('executionsList.retryWithOriginalworkflow') }}
-								</el-dropdown-item>
-							</el-dropdown-menu>
+							<template #dropdown>
+								<el-dropdown-menu>
+									<el-dropdown-item :command="{command: 'currentlySaved', row: scope.row}">
+										{{ $locale.baseText('executionsList.retryWithCurrentlySavedWorkflow') }}
+									</el-dropdown-item>
+									<el-dropdown-item :command="{command: 'original', row: scope.row}">
+										{{ $locale.baseText('executionsList.retryWithOriginalworkflow') }}
+									</el-dropdown-item>
+								</el-dropdown-menu>
+							</template>
 						</el-dropdown>
 
 					</template>
 				</el-table-column>
 				<el-table-column property="mode" :label="$locale.baseText('executionsList.mode')" width="100" align="center">
-					<template slot-scope="scope">
+					<template #default="scope">
 						{{ $locale.baseText(`executionsList.modes.${scope.row.mode}`) }}
 					</template>
 				</el-table-column>
 				<el-table-column :label="$locale.baseText('executionsList.runningTime')" width="150" align="center">
-					<template slot-scope="scope">
+					<template #default="scope">
 						<span v-if="scope.row.stoppedAt === undefined">
 							<font-awesome-icon icon="spinner" spin />
 							<execution-time :start-time="scope.row.startedAt"/>
@@ -147,7 +151,7 @@
 					</template>
 				</el-table-column>
 				<el-table-column label="" width="100" align="center">
-					<template slot-scope="scope">
+					<template #default="scope">
 						<div class="actions-container">
 							<span v-if="scope.row.stoppedAt === undefined || scope.row.waitTill">
 								<n8n-icon-button icon="stop" size="small" :title="$locale.baseText('executionsList.stopExecution')" @click.stop="stopExecution(scope.row.id)" :loading="stoppingExecutions.includes(scope.row.id)" />
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
index 5804d4b687..5a57fc61f3 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
@@ -46,14 +46,16 @@
 							@blur="onRetryButtonBlur"
 						/>
 					</span>
-					<el-dropdown-menu slot="dropdown">
-						<el-dropdown-item command="current-workflow">
-							{{ $locale.baseText('executionsList.retryWithCurrentlySavedWorkflow') }}
-						</el-dropdown-item>
-						<el-dropdown-item command="original-workflow">
-							{{ $locale.baseText('executionsList.retryWithOriginalWorkflow') }}
-						</el-dropdown-item>
-					</el-dropdown-menu>
+					<template #dropdown>
+						<el-dropdown-menu>
+							<el-dropdown-item command="current-workflow">
+								{{ $locale.baseText('executionsList.retryWithCurrentlySavedWorkflow') }}
+							</el-dropdown-item>
+							<el-dropdown-item command="original-workflow">
+								{{ $locale.baseText('executionsList.retryWithOriginalWorkflow') }}
+							</el-dropdown-item>
+						</el-dropdown-menu>
+					</template>
 				</el-dropdown>
 				<n8n-icon-button :title="$locale.baseText('executionDetails.deleteExecution')" icon="trash" size="large" type="tertiary" @click="onDeleteExecution" />
 			</div>
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionsInfoAccordion.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionsInfoAccordion.vue
index 360a11ea7d..5e76a1616a 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionsInfoAccordion.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionsInfoAccordion.vue
@@ -12,10 +12,12 @@
 			<footer class="mt-2xs">
 				{{ $locale.baseText('executionsLandingPage.emptyState.accordion.footer') }}
 				<n8n-tooltip :disabled="!isNewWorkflow">
-					<div slot="content">
-						<n8n-link @click.prevent="onSaveWorkflowClick">{{ $locale.baseText('executionsLandingPage.emptyState.accordion.footer.tooltipLink') }}</n8n-link>
-						{{ $locale.baseText('executionsLandingPage.emptyState.accordion.footer.tooltipText') }}
-					</div>
+					<template #content>
+						<div>
+							<n8n-link @click.prevent="onSaveWorkflowClick">{{ $locale.baseText('executionsLandingPage.emptyState.accordion.footer.tooltipLink') }}</n8n-link>
+							{{ $locale.baseText('executionsLandingPage.emptyState.accordion.footer.tooltipText') }}
+						</div>
+					</template>
 					<n8n-link @click.prevent="openWorkflowSettings" :class="{[$style.disabled]: isNewWorkflow}" size="small">
 						{{ $locale.baseText('executionsLandingPage.emptyState.accordion.footer.settingsLink') }}
 					</n8n-link>
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue
index 232a070795..a6b5886bf7 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue
@@ -8,7 +8,7 @@
 		<div :class="$style.controls">
 			<el-checkbox v-model="autoRefresh" @change="onAutoRefreshToggle">{{ $locale.baseText('executionsList.autoRefresh') }}</el-checkbox>
 			<n8n-popover trigger="click" >
-				<template slot="reference">
+				<template #reference>
 					<div :class="$style.filterButton">
 						<n8n-button icon="filter" type="tertiary" size="medium" :active="statusFilterApplied">
 							<n8n-badge v-if="statusFilterApplied" theme="primary" class="mr-4xs">1</n8n-badge>
diff --git a/packages/editor-ui/src/components/HoverableNodeIcon.vue b/packages/editor-ui/src/components/HoverableNodeIcon.vue
index a31b32f5f0..e22e734b7a 100644
--- a/packages/editor-ui/src/components/HoverableNodeIcon.vue
+++ b/packages/editor-ui/src/components/HoverableNodeIcon.vue
@@ -8,7 +8,9 @@
 	>
 		<div :class="$style.tooltip">
 			<n8n-tooltip placement="top" manual :value="showTooltip">
-				<div slot="content" v-text="nodeType.displayName"></div>
+				<template #content>
+					<div v-text="nodeType.displayName"></div>
+				</template>
 				<span />
 			</n8n-tooltip>
 		</div>
diff --git a/packages/editor-ui/src/components/ImportCurlModal.vue b/packages/editor-ui/src/components/ImportCurlModal.vue
index 7b8cade157..da2f007350 100644
--- a/packages/editor-ui/src/components/ImportCurlModal.vue
+++ b/packages/editor-ui/src/components/ImportCurlModal.vue
@@ -6,7 +6,7 @@
 		:name="IMPORT_CURL_MODAL_KEY"
 		:center="true"
 	>
-		<template slot="content">
+		<template #content>
 			<div :class="$style.container">
 				<n8n-input-label :label="$locale.baseText('importCurlModal.input.label')" color="text-dark">
 					<n8n-input
@@ -21,7 +21,7 @@
 				</n8n-input-label>
 			</div>
 		</template>
-		<template slot="footer">
+		<template #footer>
 			<div :class="$style.modalFooter">
 				<n8n-notice
 					:class="$style.notice"
diff --git a/packages/editor-ui/src/components/InputPanel.vue b/packages/editor-ui/src/components/InputPanel.vue
index 550253ab8d..e70507fa17 100644
--- a/packages/editor-ui/src/components/InputPanel.vue
+++ b/packages/editor-ui/src/components/InputPanel.vue
@@ -21,10 +21,10 @@
 		@runChange="onRunIndexChange"
 		@tableMounted="$emit('tableMounted', $event)"
 		>
-		<template v-slot:header>
+		<template #header>
 			<div :class="$style.titleSection">
 				<n8n-select v-if="parentNodes.length" :popper-append-to-body="true" size="small" :value="currentNodeName" @input="onSelect" :no-data-text="$locale.baseText('ndv.input.noNodesFound')" :placeholder="$locale.baseText('ndv.input.parentNodes')" filterable>
-					<template slot="prepend">
+					<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" class="node-option" :label="`${truncate(node.name)} ${getMultipleNodesText(node.name)}`">
@@ -37,11 +37,13 @@
 			</div>
 		</template>
 
-		<template v-slot:node-not-run>
+		<template #node-not-run>
 			<div :class="$style.noOutputData" v-if="parentNodes.length">
 				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{ $locale.baseText('ndv.input.noOutputData.title') }}</n8n-text>
 				<n8n-tooltip v-if="!readOnly" :manual="true" :value="showDraggableHint && showDraggableHintWithDelay">
-					<div slot="content" v-html="$locale.baseText('dataMapping.dragFromPreviousHint',  { interpolate: { name: focusedMappableInput } })"></div>
+					<template #content>
+						<div v-html="$locale.baseText('dataMapping.dragFromPreviousHint',  { interpolate: { name: focusedMappableInput } })"></div>
+					</template>
 					<NodeExecuteButton type="secondary" :transparent="true" :nodeName="currentNodeName" :label="$locale.baseText('ndv.input.noOutputData.executePrevious')" @execute="onNodeExecute" telemetrySource="inputs" />
 				</n8n-tooltip>
 				<n8n-text v-if="!readOnly" tag="div" size="small">
@@ -62,7 +64,7 @@
 			</div>
 		</template>
 
-		<template v-slot:no-output-data>
+		<template #no-output-data>
 			<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{ $locale.baseText('ndv.input.noOutputData') }}</n8n-text>
 		</template>
 	</RunData>
diff --git a/packages/editor-ui/src/components/InviteUsersModal.vue b/packages/editor-ui/src/components/InviteUsersModal.vue
index 67620595c3..b6f5a45d50 100644
--- a/packages/editor-ui/src/components/InviteUsersModal.vue
+++ b/packages/editor-ui/src/components/InviteUsersModal.vue
@@ -7,7 +7,7 @@
 		width="460px"
 		:eventBus="modalBus"
 	>
-		<template slot="content">
+		<template #content>
 			<n8n-form-inputs
 				:inputs="config"
 				:eventBus="formBus"
@@ -16,7 +16,7 @@
 				@submit="onSubmit"
 			/>
 		</template>
-		<template slot="footer">
+		<template #footer>
 			<n8n-button :loading="loading" :disabled="!enabledButton" :label="buttonLabel" @click="onSubmitClick" float="right" />
 		</template>
 	</Modal>
diff --git a/packages/editor-ui/src/components/MainHeader/ExecutionDetails/ExecutionDetails.vue b/packages/editor-ui/src/components/MainHeader/ExecutionDetails/ExecutionDetails.vue
index 12dcb93b03..0d1f58ef61 100644
--- a/packages/editor-ui/src/components/MainHeader/ExecutionDetails/ExecutionDetails.vue
+++ b/packages/editor-ui/src/components/MainHeader/ExecutionDetails/ExecutionDetails.vue
@@ -27,7 +27,7 @@
 			{{ $locale.baseText('executionDetails.of') }}
 			<span class="primary-color clickable" :title="$locale.baseText('executionDetails.openWorkflow')">
 				<ShortenName :name="workflowName">
-					<template v-slot="{ shortenedName }">
+					<template #default="{ shortenedName }">
 						<span @click="openWorkflow(workflowExecution.workflowId)">
 							"{{ shortenedName }}"
 						</span>
diff --git a/packages/editor-ui/src/components/MainHeader/ExecutionDetails/ReadOnly.vue b/packages/editor-ui/src/components/MainHeader/ExecutionDetails/ReadOnly.vue
index de7792068d..7f86d8aece 100644
--- a/packages/editor-ui/src/components/MainHeader/ExecutionDetails/ReadOnly.vue
+++ b/packages/editor-ui/src/components/MainHeader/ExecutionDetails/ReadOnly.vue
@@ -1,8 +1,10 @@
 <template>
 	<n8n-tooltip class="primary-color" placement="bottom-end" >
-		<div slot="content">
-			<span v-html="$locale.baseText('executionDetails.readOnly.youreViewingTheLogOf')"></span>
-		</div>
+		<template #content>
+			<div>
+				<span v-html="$locale.baseText('executionDetails.readOnly.youreViewingTheLogOf')"></span>
+			</div>
+		</template>
 		<div>
 			<font-awesome-icon icon="exclamation-triangle" />
 			<span v-text="$locale.baseText('executionDetails.readOnly.readOnly')"></span>
diff --git a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
index 7979532acf..5e43bbe1a4 100644
--- a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
+++ b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@@ -1,13 +1,13 @@
 <template>
 	<div class="container" v-if="workflowName">
 		<BreakpointsObserver :valueXS="15" :valueSM="25" :valueMD="50" class="name-container">
-			<template v-slot="{ value }">
+			<template #default="{ value }">
 				<ShortenName
 					:name="workflowName"
 					:limit="value"
 					:custom="true"
 				>
-					<template v-slot="{ shortenedName }">
+					<template #default="{ shortenedName }">
 						<InlineTextEdit
 							:value="workflowName"
 							:previewValue="shortenedName"
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index efad4f9cc7..e3a9f9960a 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -32,11 +32,13 @@
 						<el-dropdown :disabled="!isCollapsed" placement="right-end" trigger="click" @command="onUserActionToggle">
 							<div :class="{[$style.avatar]: true, ['clickable']: isCollapsed }">
 								<n8n-avatar :firstName="usersStore.currentUser.firstName" :lastName="usersStore.currentUser.lastName" size="small" />
-								<el-dropdown-menu slot="dropdown">
+							</div>
+							<template #dropdown>
+								<el-dropdown-menu>
 									<el-dropdown-item command="settings">{{ $locale.baseText('settings') }}</el-dropdown-item>
 									<el-dropdown-item command="logout">{{ $locale.baseText('auth.signout') }}</el-dropdown-item>
 								</el-dropdown-menu>
-							</div>
+							</template>
 						</el-dropdown>
 					</div>
 					<div :class="{ ['ml-2xs']: true, [$style.userName]: true, [$style.expanded]: fullyExpanded }">
diff --git a/packages/editor-ui/src/components/Modal.vue b/packages/editor-ui/src/components/Modal.vue
index b3e7bd39a1..dc1ea1ced1 100644
--- a/packages/editor-ui/src/components/Modal.vue
+++ b/packages/editor-ui/src/components/Modal.vue
@@ -11,10 +11,10 @@
 		:style="styles"
 		append-to-body
 	>
-		<template v-slot:title v-if="$scopedSlots.header">
+		<template #title v-if="$scopedSlots.header">
 			<slot name="header" v-if="!loading" />
 		</template>
-		<template v-slot:title v-else-if="title">
+		<template #title v-else-if="title">
 			<div :class="centerTitle ? $style.centerTitle : ''">
 				<div v-if="title">
 					<n8n-heading tag="h1" size="xlarge">{{title}}</n8n-heading>
diff --git a/packages/editor-ui/src/components/ModalDrawer.vue b/packages/editor-ui/src/components/ModalDrawer.vue
index af031bf15b..43eb0386a2 100644
--- a/packages/editor-ui/src/components/ModalDrawer.vue
+++ b/packages/editor-ui/src/components/ModalDrawer.vue
@@ -7,7 +7,7 @@
 		:modal="modal"
 		:wrapperClosable="wrapperClosable"
 		>
-		<template v-slot:title>
+		<template #title>
 			<slot name="header" />
 		</template>
 		<template>
diff --git a/packages/editor-ui/src/components/Modals.vue b/packages/editor-ui/src/components/Modals.vue
index d237a9b435..aa66a3bddb 100644
--- a/packages/editor-ui/src/components/Modals.vue
+++ b/packages/editor-ui/src/components/Modals.vue
@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<ModalRoot :name="CONTACT_PROMPT_MODAL_KEY">
-			<template v-slot:default="{ modalName }">
+			<template #default="{ modalName }">
 				<ContactPromptModal
 					:modalName="modalName"
 				/>
@@ -9,7 +9,7 @@
 		</ModalRoot>
 
 		<ModalRoot :name="CREDENTIAL_EDIT_MODAL_KEY">
-			<template v-slot="{ modalName, activeId, mode }">
+			<template #default="{ modalName, activeId, mode }">
 				<CredentialEdit
 					:modalName="modalName"
 					:mode="mode"
@@ -26,7 +26,7 @@
 		</ModalRoot>
 
 		<ModalRoot :name="DUPLICATE_MODAL_KEY">
-			<template v-slot:default="{ modalName, active, data }">
+			<template #default="{ modalName, active, data }">
 				<DuplicateWorkflowDialog
 					:data="data"
 					:isActive="active"
@@ -48,7 +48,7 @@
 		</ModalRoot>
 
 		<ModalRoot :name="VALUE_SURVEY_MODAL_KEY" :keepAlive="true">
-			<template v-slot:default="{ active }">
+			<template #default="{ active }">
 				<ValueSurvey :isActive="active"/>
 			</template>
 		</ModalRoot>
@@ -66,7 +66,7 @@
 		</ModalRoot>
 
 		<ModalRoot :name="DELETE_USER_MODAL_KEY">
-			<template v-slot="{ modalName, activeId }">
+			<template #default="{ modalName, activeId }">
 				<DeleteUserModal
 					:modalName="modalName"
 					:activeId="activeId"
@@ -99,7 +99,7 @@
 		</ModalRoot>
 
 		<ModalRoot :name="COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY">
-			<template v-slot="{ modalName, activeId, mode }">
+			<template #default="{ modalName, activeId, mode }">
 				<CommunityPackageManageConfirmModal
 					:modalName="modalName"
 					:activePackageName="activeId"
diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
index 652b912470..41198a1040 100644
--- a/packages/editor-ui/src/components/Node.vue
+++ b/packages/editor-ui/src/components/Node.vue
@@ -6,13 +6,17 @@
 				<div v-if="!data.disabled" :class="{'node-info-icon': true, 'shift-icon': shiftOutputCount}">
 					<div v-if="hasIssues" class="node-issues">
 						<n8n-tooltip placement="bottom" >
-							<titled-list slot="content" :title="`${$locale.baseText('node.issues')}:`" :items="nodeIssues" />
+							<template #content>
+								<titled-list :title="`${$locale.baseText('node.issues')}:`" :items="nodeIssues" />
+							</template>
 							<font-awesome-icon icon="exclamation-triangle" />
 						</n8n-tooltip>
 					</div>
 					<div v-else-if="waiting" class="waiting">
 						<n8n-tooltip placement="bottom">
-							<div slot="content" v-text="waiting"></div>
+							<template #content>
+								<div v-text="waiting"></div>
+							</template>
 							<font-awesome-icon icon="clock" />
 						</n8n-tooltip>
 					</div>
@@ -32,7 +36,9 @@
 
 				<div class="node-trigger-tooltip__wrapper">
 					<n8n-tooltip placement="top" manual :value="showTriggerNodeTooltip" popper-class="node-trigger-tooltip__wrapper--item">
-						<div slot="content" v-text="getTriggerNodeTooltip"></div>
+						<template #content>
+							<div v-text="getTriggerNodeTooltip"></div>
+						</template>
 						<span />
 					</n8n-tooltip>
 					<n8n-tooltip
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue b/packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue
index 5dec3bf5d3..24722b3141 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue
@@ -44,18 +44,32 @@
 				/>
 			</div>
 			<no-results v-else :showRequest="filteredAllNodeTypes.length === 0" :show-icon="filteredAllNodeTypes.length === 0">
-					<!-- There are results in other sub-categories/tabs  -->
-					<template v-if="filteredAllNodeTypes.length > 0">
-						<p
-							v-html="$locale.baseText('nodeCreator.noResults.clickToSeeResults')"
-							slot="title"
-						/>
+				<!-- There are results in other sub-categories/tabs  -->
+				<template #title>
+					<p v-if="filteredAllNodeTypes.length === 0" v-text="$locale.baseText('nodeCreator.noResults.weDidntMakeThatYet')" />
+					<p v-else v-html="$locale.baseText('nodeCreator.noResults.clickToSeeResults')" />
+				</template>
+
+				<!-- Regular Search -->
+				<template v-if="filteredAllNodeTypes.length === 0" #action>
+					{{ $locale.baseText('nodeCreator.noResults.dontWorryYouCanProbablyDoItWithThe') }}
+					<n8n-link @click="selectHttpRequest" v-if="[REGULAR_NODE_FILTER, ALL_NODE_FILTER].includes(selectedType)">
+						{{ $locale.baseText('nodeCreator.noResults.httpRequest') }}
+					</n8n-link>
+					<template v-if="selectedType === ALL_NODE_FILTER">
+						{{ $locale.baseText('nodeCreator.noResults.or') }}
 					</template>
 
-					<!-- Regular Search -->
-					<template v-else>
-						<p v-text="$locale.baseText('nodeCreator.noResults.weDidntMakeThatYet')" slot="title" />
-						<template slot="action">
+					<no-results v-else :showRequest="filteredAllNodeTypes.length === 0" :show-icon="filteredAllNodeTypes.length === 0">
+						<!-- There are results in other sub-categories/tabs  -->
+						<template #title>
+							<p v-html="$locale.baseText('nodeCreator.noResults.clickToSeeResults')" />
+							<p v-if="filteredAllNodeTypes.length === 0" v-text="$locale.baseText('nodeCreator.noResults.weDidntMakeThatYet')" />
+							<p v-else v-html="$locale.baseText('nodeCreator.noResults.clickToSeeResults')" />
+						</template>
+
+						<!-- Regular Search -->
+						<template v-if="filteredAllNodeTypes.length === 0" #action>
 							{{ $locale.baseText('nodeCreator.noResults.dontWorryYouCanProbablyDoItWithThe') }}
 							<n8n-link @click="selectHttpRequest" v-if="[REGULAR_NODE_FILTER, ALL_NODE_FILTER].includes(selectedType)">
 								{{ $locale.baseText('nodeCreator.noResults.httpRequest') }}
@@ -69,7 +83,8 @@
 							</n8n-link>
 							{{ $locale.baseText('nodeCreator.noResults.node') }}
 						</template>
-					</template>
+					</no-results>
+				</template>
 			</no-results>
 		</div>
 	</transition>
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/MainPanel.vue b/packages/editor-ui/src/components/Node/NodeCreator/MainPanel.vue
index c9eceb57de..9fdad64e8c 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/MainPanel.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/MainPanel.vue
@@ -9,7 +9,9 @@
 				:searchItems="searchItems"
 				@nodeTypeSelected="nodeType => $emit('nodeTypeSelected', nodeType)"
 			>
-				<type-selector slot="header" />
+				<template #header>
+					<type-selector/>
+				</template>
 			</trigger-helper-panel>
 			<categorized-items
 				v-else
@@ -18,7 +20,9 @@
 				:initialActiveCategories="[CORE_NODES_CATEGORY]"
 				@nodeTypeSelected="nodeType => $emit('nodeTypeSelected', nodeType)"
 			>
-				<type-selector slot="header" />
+				<template #header>
+					<type-selector />
+				</template>
 			</categorized-items>
 		</div>
 	</div>
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/NodeItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/NodeItem.vue
index 574f55f77b..019935f4e3 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/NodeItem.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/NodeItem.vue
@@ -19,13 +19,14 @@
 					<trigger-icon />
 				</span>
 				<n8n-tooltip v-if="isCommunityNode" placement="top">
-					<div
-						:class="$style['community-node-icon']"
-						slot="content"
-						v-html="$locale.baseText('generic.communityNode.tooltip', { interpolate: { packageName: nodeType.name.split('.')[0], docURL: COMMUNITY_NODES_INSTALLATION_DOCS_URL } })"
-						@click="onCommunityNodeTooltipClick"
-					>
-					</div>
+					<template #content>
+						<div
+							:class="$style['community-node-icon']"
+							v-html="$locale.baseText('generic.communityNode.tooltip', { interpolate: { packageName: nodeType.name.split('.')[0], docURL: COMMUNITY_NODES_INSTALLATION_DOCS_URL } })"
+							@click="onCommunityNodeTooltipClick"
+						>
+						</div>
+					</template>
 					<n8n-icon icon="cube" />
 				</n8n-tooltip>
 			</div>
diff --git a/packages/editor-ui/src/components/NodeCredentials.vue b/packages/editor-ui/src/components/NodeCredentials.vue
index b188ef3b56..af2b82f6c9 100644
--- a/packages/editor-ui/src/components/NodeCredentials.vue
+++ b/packages/editor-ui/src/components/NodeCredentials.vue
@@ -43,7 +43,9 @@
 
 					<div :class="$style.warning" v-if="issues.length">
 						<n8n-tooltip placement="top" >
-							<titled-list slot="content" :title="`${$locale.baseText('nodeCredentials.issues')}:`" :items="issues" />
+							<template #content>
+								<titled-list :title="`${$locale.baseText('nodeCredentials.issues')}:`" :items="issues" />
+							</template>
 							<font-awesome-icon icon="exclamation-triangle" />
 						</n8n-tooltip>
 					</div>
diff --git a/packages/editor-ui/src/components/NodeDetailsView.vue b/packages/editor-ui/src/components/NodeDetailsView.vue
index b71c35bb31..e00a3aaff1 100644
--- a/packages/editor-ui/src/components/NodeDetailsView.vue
+++ b/packages/editor-ui/src/components/NodeDetailsView.vue
@@ -14,9 +14,11 @@
 			:disabled="!showTriggerWaitingWarning"
 			manual
 		>
-			<div slot="content" :class="$style.triggerWarning">
-				{{ $locale.baseText('ndv.backToCanvas.waitingForTriggerWarning') }}
-			</div>
+			<template #content>
+				<div :class="$style.triggerWarning">
+					{{ $locale.baseText('ndv.backToCanvas.waitingForTriggerWarning') }}
+				</div>
+			</template>
 			<div :class="$style.backToCanvas" @click="close" data-test-id="back-to-canvas">
 				<n8n-icon icon="arrow-left" color="text-xlight" size="medium" />
 				<n8n-text color="text-xlight" size="medium" :bold="true">
diff --git a/packages/editor-ui/src/components/NodeExecuteButton.vue b/packages/editor-ui/src/components/NodeExecuteButton.vue
index 962a7d6b57..3219f2e685 100644
--- a/packages/editor-ui/src/components/NodeExecuteButton.vue
+++ b/packages/editor-ui/src/components/NodeExecuteButton.vue
@@ -1,6 +1,8 @@
 <template>
 	<n8n-tooltip placement="bottom" :disabled="!disabledHint">
-		<div slot="content">{{ disabledHint }}</div>
+		<template #content>
+			<div>{{ disabledHint }}</div>
+		</template>
 		<div>
 			<n8n-button
 				:loading="nodeRunning && !isListeningForEvents && !isListeningForWorkflowEvents"
diff --git a/packages/editor-ui/src/components/NodeTitle.vue b/packages/editor-ui/src/components/NodeTitle.vue
index 4aff37c49b..fff28cffd1 100644
--- a/packages/editor-ui/src/components/NodeTitle.vue
+++ b/packages/editor-ui/src/components/NodeTitle.vue
@@ -16,12 +16,14 @@
 					<n8n-button type="primary" size="small" @click="onRename" :label="$locale.baseText('ndv.title.rename')" />
 				</div>
 			</div>
-			<div class="ph-no-capture" slot="reference" :class="{[$style.title]: true, [$style.hoverable]: !readOnly}">
-				{{ value }}
-				<div :class="$style.editIconContainer">
-					<font-awesome-icon :class="$style.editIcon" icon="pencil-alt" v-if="!readOnly" />
+			<template #reference>
+				<div class="ph-no-capture" :class="{[$style.title]: true, [$style.hoverable]: !readOnly}">
+					{{ value }}
+					<div :class="$style.editIconContainer">
+						<font-awesome-icon :class="$style.editIcon" icon="pencil-alt" v-if="!readOnly" />
+					</div>
 				</div>
-			</div>
+			</template>
 		</n8n-popover>
 	</span>
 </template>
diff --git a/packages/editor-ui/src/components/OnboardingCallSignupModal.vue b/packages/editor-ui/src/components/OnboardingCallSignupModal.vue
index 7bda99bde2..3c97e9e8d2 100644
--- a/packages/editor-ui/src/components/OnboardingCallSignupModal.vue
+++ b/packages/editor-ui/src/components/OnboardingCallSignupModal.vue
@@ -8,7 +8,7 @@
 		:beforeClose="onModalClose"
 		width="460px"
 	>
-		<template slot="content">
+		<template #content>
 			<div class="pb-m">
 				<n8n-text>
 					{{ $locale.baseText('onboardingCallSignupModal.description') }}
@@ -21,7 +21,7 @@
 				</n8n-text>
 			</div>
 		</template>
-		<template slot="footer">
+		<template #footer>
 			<div :class="$style.buttonsContainer">
 				<n8n-button
 					:label="$locale.baseText('onboardingCallSignupModal.cancelButton.label')"
diff --git a/packages/editor-ui/src/components/OutputPanel.vue b/packages/editor-ui/src/components/OutputPanel.vue
index ea27e5505c..1b005547f8 100644
--- a/packages/editor-ui/src/components/OutputPanel.vue
+++ b/packages/editor-ui/src/components/OutputPanel.vue
@@ -20,7 +20,7 @@
 		@itemHover="$emit('itemHover', $event)"
 		ref="runData"
 	>
-		<template v-slot:header>
+		<template #header>
 			<div :class="$style.titleSection">
 				<span :class="$style.title">
 					{{ $locale.baseText(outputPanelEditMode.enabled ? 'ndv.output.edit' : 'ndv.output') }}
@@ -46,7 +46,7 @@
 			</div>
 		</template>
 
-		<template v-slot:node-not-run>
+		<template #node-not-run>
 			<n8n-text v-if="workflowRunning && !isTriggerNode">{{ $locale.baseText('ndv.output.waitingToRun') }}</n8n-text>
 			<n8n-text v-if="!workflowRunning">
 				{{ $locale.baseText('ndv.output.runNodeHint') }}
@@ -64,7 +64,7 @@
 			</n8n-text>
 		</template>
 
-		<template v-slot:no-output-data>
+		<template #no-output-data>
 			<n8n-text :bold="true" color="text-dark" size="large">{{ $locale.baseText('ndv.output.noOutputData.title') }}</n8n-text>
 			<n8n-text>
 				{{ $locale.baseText('ndv.output.noOutputData.message') }}
diff --git a/packages/editor-ui/src/components/PanelDragButton.vue b/packages/editor-ui/src/components/PanelDragButton.vue
index 4eba8703ef..4d06c549ab 100644
--- a/packages/editor-ui/src/components/PanelDragButton.vue
+++ b/packages/editor-ui/src/components/PanelDragButton.vue
@@ -1,6 +1,6 @@
 <template>
 	<Draggable type="panel-resize" @drag="onDrag" @dragstart="onDragStart" @dragend="onDragEnd" :class="$style.dragContainer">
-		<template v-slot="{ isDragging }">
+		<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 8877a2ccde..04e5311c3c 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -105,15 +105,17 @@
 					:title="displayTitle"
 					:placeholder="getPlaceholder()"
 				>
-					<div slot="suffix" class="expand-input-icon-container">
-						<font-awesome-icon
-							v-if="!isReadOnly"
-							icon="expand-alt"
-							class="edit-window-button clickable"
-							:title="$locale.baseText('parameterInput.openEditWindow')"
-							@click="displayEditDialog()"
-						/>
-					</div>
+					<template #suffix>
+						<div class="expand-input-icon-container">
+							<font-awesome-icon
+								v-if="!isReadOnly"
+								icon="expand-alt"
+								class="edit-window-button clickable"
+								:title="$locale.baseText('parameterInput.openEditWindow')"
+								@click="displayEditDialog()"
+							/>
+						</div>
+					</template>
 				</n8n-input>
 			</div>
 
@@ -200,7 +202,7 @@
 				@setFocus="setFocus"
 				@onBlur="onBlur"
 			>
-				<template v-slot:issues-and-options>
+				<template #issues-and-options>
 					<parameter-issues :issues="getIssues" />
 				</template>
 			</credentials-select>
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 05cf663f55..bf332a781d 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -27,14 +27,16 @@
 				:stickyOffset="4"
 				@drop="onDrop"
 			>
-				<template v-slot="{ droppable, activeDrop }">
+				<template #default="{ droppable, activeDrop }">
 					<n8n-tooltip
 						placement="left"
 						:manual="true"
 						:value="showMappingTooltip"
 						:buttons="dataMappingTooltipButtons"
 					>
-						<span slot="content" v-html="$locale.baseText(`dataMapping.${displayMode}Hint`, { interpolate: { name: parameter.displayName } })" />
+						<template #content>
+							<span v-html="$locale.baseText(`dataMapping.${displayMode}Hint`, { interpolate: { name: parameter.displayName } })" />
+						</template>
 						<parameter-input-wrapper
 							ref="param"
 							:parameter="parameter"
diff --git a/packages/editor-ui/src/components/ParameterIssues.vue b/packages/editor-ui/src/components/ParameterIssues.vue
index 9105424f3f..e7dd869374 100644
--- a/packages/editor-ui/src/components/ParameterIssues.vue
+++ b/packages/editor-ui/src/components/ParameterIssues.vue
@@ -1,7 +1,9 @@
 <template>
 	<div :class="$style['parameter-issues']" v-if="issues.length">
 		<n8n-tooltip placement="top" >
-			<titled-list slot="content" :title="`${$locale.baseText('parameterInput.issues')}:`" :items="issues" />
+			<template #content>
+				<titled-list :title="`${$locale.baseText('parameterInput.issues')}:`" :items="issues" />
+			</template>
 			<font-awesome-icon icon="exclamation-triangle" />
 		</n8n-tooltip>
 	</div>
diff --git a/packages/editor-ui/src/components/PersonalizationModal.vue b/packages/editor-ui/src/components/PersonalizationModal.vue
index beb98f6e90..64ae26abdc 100644
--- a/packages/editor-ui/src/components/PersonalizationModal.vue
+++ b/packages/editor-ui/src/components/PersonalizationModal.vue
@@ -16,7 +16,7 @@
 		data-test-id="personalization-form"
 		@enter="onSave"
 	>
-		<template v-slot:content>
+		<template #content>
 			<div v-if="submitted" :class="$style.submittedContainer">
 				<img :class="$style.demoImage" :src="rootStore.baseUrl + 'suggestednodes.png'" />
 				<n8n-text>{{ $locale.baseText('personalizationModal.lookOutForThingsMarked') }}</n8n-text>
@@ -25,7 +25,7 @@
 				<n8n-form-inputs :inputs="survey" :columnView="true" :eventBus="formBus" @submit="onSubmit"/>
 			</div>
 		</template>
-		<template v-slot:footer>
+		<template #footer>
 			<div>
 				<n8n-button
 					v-if="submitted"
diff --git a/packages/editor-ui/src/components/PushConnectionTracker.vue b/packages/editor-ui/src/components/PushConnectionTracker.vue
index aaf8afa217..348f6d0609 100644
--- a/packages/editor-ui/src/components/PushConnectionTracker.vue
+++ b/packages/editor-ui/src/components/PushConnectionTracker.vue
@@ -2,7 +2,9 @@
 	<span>
 		<div class="push-connection-lost primary-color" v-if="!rootStore.pushConnectionActive">
 			<n8n-tooltip placement="bottom-end" >
-				<div slot="content" v-html="$locale.baseText('pushConnectionTracker.cannotConnectToServer')"></div>
+				<template #current>
+					<div v-html="$locale.baseText('pushConnectionTracker.cannotConnectToServer')"></div>
+				</template>
 				<span>
 					<font-awesome-icon icon="exclamation-triangle" />&nbsp; {{ $locale.baseText('pushConnectionTracker.connectionLost') }}
 				</span>
diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
index d9c3b5cbbb..255eb6f140 100644
--- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
+++ b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
@@ -69,7 +69,7 @@
 						:stickyOffset="4"
 						@drop="onDrop"
 					>
-						<template v-slot="{ droppable, activeDrop }">
+						<template #default="{ droppable, activeDrop }">
 							<div
 								:class="{
 									[$style.listModeInputContainer]: isListMode,
@@ -103,19 +103,18 @@
 									@focus="onInputFocus"
 									@blur="onInputBlur"
 								>
-									<div
-										v-if="isListMode"
-										slot="suffix"
-									>
-										<i
-											:class="{
-												['el-input__icon']: true,
-												['el-icon-arrow-down']: true,
-												[$style.selectIcon]: true,
-												[$style.isReverse]: showResourceDropdown,
-											}"
-										></i>
-									</div>
+									<template #suffix>
+										<div v-if="isListMode">
+											<i
+												:class="{
+													['el-input__icon']: true,
+													['el-icon-arrow-down']: true,
+													[$style.selectIcon]: true,
+													[$style.isReverse]: showResourceDropdown,
+												}"
+											></i>
+										</div>
+									</template>
 								</n8n-input>
 							</div>
 						</template>
diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
index b95038699f..efcb1c11f9 100644
--- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
+++ b/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
@@ -11,7 +11,9 @@
 		</div>
 		<div :class="$style.searchInput" v-if="filterable && !errorView" @keydown="onKeyDown">
 			<n8n-input size="medium" :value="filter" :clearable="true" @input="onFilterInput" @blur="onSearchBlur" ref="search" :placeholder="$locale.baseText('resourceLocator.search.placeholder')">
-				<font-awesome-icon :class="$style.searchIcon" icon="search" slot="prefix" />
+				<template #prefix>
+					<font-awesome-icon :class="$style.searchIcon" icon="search" />
+				</template>
 			</n8n-input>
 		</div>
 		<div v-if="filterRequired && !filter && !errorView && !loading" :class="$style.searchRequired">
@@ -48,7 +50,7 @@
 				</div>
 			</div>
 		</div>
-		<slot slot="reference" />
+		<slot name="reference" />
 	</n8n-popover>
 </template>
 
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 18bc439121..95d7a48f95 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -107,7 +107,7 @@
 
 		<div :class="$style.runSelector" v-if="maxRunIndex > 0" v-show="!editMode.enabled">
 			<n8n-select size="small" :value="runIndex" @input="onRunIndexChange" @click.stop popper-append-to-body>
-				<template slot="prepend">{{ $locale.baseText('ndv.output.run') }}</template>
+				<template #prepend>{{ $locale.baseText('ndv.output.run') }}</template>
 				<n8n-option v-for="option in (maxRunIndex + 1)" :label="getRunLabel(option)" :value="option - 1" :key="option"></n8n-option>
 			</n8n-select>
 
@@ -307,7 +307,7 @@
 
 			<div :class="$style.pageSizeSelector">
 				<n8n-select size="mini" :value="pageSize" @input="onPageSizeChange" popper-append-to-body>
-					<template slot="prepend">{{ $locale.baseText('ndv.output.pageSize') }}</template>
+					<template #prepend>{{ $locale.baseText('ndv.output.pageSize') }}</template>
 					<n8n-option
 						v-for="size in pageSizes"
 						:key="size"
diff --git a/packages/editor-ui/src/components/RunDataJsonActions.vue b/packages/editor-ui/src/components/RunDataJsonActions.vue
index 883ed23217..76e41393bc 100644
--- a/packages/editor-ui/src/components/RunDataJsonActions.vue
+++ b/packages/editor-ui/src/components/RunDataJsonActions.vue
@@ -9,17 +9,19 @@
 					:circle="false"
 				/>
 			</span>
-			<el-dropdown-menu slot="dropdown">
-				<el-dropdown-item :command="{command: 'value'}">
-					{{ $locale.baseText('runData.copyValue') }}
-				</el-dropdown-item>
-				<el-dropdown-item :command="{command: 'itemPath'}" divided>
-					{{ $locale.baseText('runData.copyItemPath') }}
-				</el-dropdown-item>
-				<el-dropdown-item :command="{command: 'parameterPath'}">
-					{{ $locale.baseText('runData.copyParameterPath') }}
-				</el-dropdown-item>
-			</el-dropdown-menu>
+			<template #dropdown>
+				<el-dropdown-menu>
+					<el-dropdown-item :command="{command: 'value'}">
+						{{ $locale.baseText('runData.copyValue') }}
+					</el-dropdown-item>
+					<el-dropdown-item :command="{command: 'itemPath'}" divided>
+						{{ $locale.baseText('runData.copyItemPath') }}
+					</el-dropdown-item>
+					<el-dropdown-item :command="{command: 'parameterPath'}">
+						{{ $locale.baseText('runData.copyParameterPath') }}
+					</el-dropdown-item>
+				</el-dropdown-menu>
+			</template>
 		</el-dropdown>
 	</div>
 </template>
diff --git a/packages/editor-ui/src/components/RunDataTable.vue b/packages/editor-ui/src/components/RunDataTable.vue
index 97b0493a68..771972c15e 100644
--- a/packages/editor-ui/src/components/RunDataTable.vue
+++ b/packages/editor-ui/src/components/RunDataTable.vue
@@ -26,10 +26,12 @@
 							:disabled="!mappingEnabled"
 							:open-delay="1000"
 						>
-							<div slot="content">
-								<img src='/static/data-mapping-gif.gif'/>
-								{{ $locale.baseText('dataMapping.dragColumnToFieldHint') }}
-							</div>
+							<template #content>
+								<div>
+									<img src='/static/data-mapping-gif.gif'/>
+									{{ $locale.baseText('dataMapping.dragColumnToFieldHint') }}
+								</div>
+							</template>
 							<draggable
 								type="mapping"
 								:data="getExpression(column)"
@@ -37,7 +39,7 @@
 								@dragstart="onDragStart"
 								@dragend="(column) => onDragEnd(column, 'column')"
 							>
-								<template v-slot:preview="{ canDrop }">
+								<template #preview="{ canDrop }">
 									<div
 										:class="[$style.dragPill, canDrop ? $style.droppablePill : $style.defaultPill]"
 									>
@@ -48,7 +50,7 @@
 										}}
 									</div>
 								</template>
-								<template v-slot="{ isDragging }">
+								<template #default="{ isDragging }">
 									<div
 										:class="{
 											[$style.header]: true,
@@ -68,11 +70,13 @@
 					</th>
 					<th v-if="columnLimitExceeded" :class="$style.header">
 						<n8n-tooltip placement="bottom-end">
-							<div slot="content">
-								<i18n path="dataMapping.tableView.tableColumnsExceeded.tooltip">
-									<a @click="switchToJsonView">{{ $locale.baseText('dataMapping.tableView.tableColumnsExceeded.tooltip.link') }}</a>
-								</i18n>
-							</div>
+							<template #content>
+								<div>
+									<i18n path="dataMapping.tableView.tableColumnsExceeded.tooltip">
+										<a @click="switchToJsonView">{{ $locale.baseText('dataMapping.tableView.tableColumnsExceeded.tooltip.link') }}</a>
+									</i18n>
+								</div>
+							</template>
 							<span>
 								<font-awesome-icon :class="$style['warningTooltip']" icon="exclamation-triangle"></font-awesome-icon>
 								{{ $locale.baseText('dataMapping.tableView.tableColumnsExceeded') }}
@@ -91,7 +95,7 @@
 				@dragend="onCellDragEnd"
 				ref="draggable"
 			>
-				<template v-slot:preview="{ canDrop, el }">
+				<template #preview="{ canDrop, el }">
 					<div :class="[$style.dragPill, canDrop ? $style.droppablePill : $style.defaultPill]">
 						{{
 							$locale.baseText(
@@ -118,7 +122,7 @@
 						>
 							<span v-if="isSimple(data)" :class="{[$style.value]: true, [$style.empty]: isEmpty(data)}">{{ getValueToRender(data) }}</span>
 							<n8n-tree :nodeClass="$style.nodeClass" v-else :value="data">
-								<template v-slot:label="{ label, path }">
+								<template #label="{ label, path }">
 									<span
 										@mouseenter="() => onMouseEnterKey(path, index2)"
 										@mouseleave="onMouseLeaveKey"
@@ -135,7 +139,7 @@
 										>{{ label || $locale.baseText('runData.unnamedField') }}</span
 									>
 								</template>
-								<template v-slot:value="{ value }">
+								<template #value="{ value }">
 									<span :class="{ [$style.nestedValue]: true, [$style.empty]: isEmpty(value) }">{{
 										getValueToRender(value)
 									}}</span>
diff --git a/packages/editor-ui/src/components/SettingsSidebar.vue b/packages/editor-ui/src/components/SettingsSidebar.vue
index d5ec9c9662..99bf90fea8 100644
--- a/packages/editor-ui/src/components/SettingsSidebar.vue
+++ b/packages/editor-ui/src/components/SettingsSidebar.vue
@@ -6,9 +6,11 @@
 					<i class="mr-xs">
 						<font-awesome-icon icon="arrow-left" />
 					</i>
-					<n8n-heading slot="title" size="large" :class="$style.settingsHeading" :bold="true">{{ $locale.baseText('settings') }}</n8n-heading>
 				</div>
 			</template>
+			<template #title>
+				<n8n-heading size="large" :class="$style.settingsHeading" :bold="true">{{ $locale.baseText('settings') }}</n8n-heading>
+			</template>
 			<template #menuSuffix>
 				<div :class="$style.versionContainer">
 					<n8n-link @click="onVersionClick" size="small">
diff --git a/packages/editor-ui/src/components/TagsManager/TagsManager.vue b/packages/editor-ui/src/components/TagsManager/TagsManager.vue
index 0094525dfe..c6b390c620 100644
--- a/packages/editor-ui/src/components/TagsManager/TagsManager.vue
+++ b/packages/editor-ui/src/components/TagsManager/TagsManager.vue
@@ -7,7 +7,7 @@
 		minWidth="620px"
 		minHeight="420px"
 	>
-		<template v-slot:content>
+		<template #content>
 			<el-row>
 				<TagsView
 					v-if="hasTags || isCreating"
@@ -24,7 +24,7 @@
 					v-else />
 			</el-row>
 		</template>
-		<template v-slot:footer="{ close }">
+		<template #footer="{ close }">
 			<n8n-button :label="$locale.baseText('tagsManager.done')" @click="close" float="right" />
 		</template>
 	</Modal>
diff --git a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue
index 9a48a1dbaa..a546994d9f 100644
--- a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue
+++ b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue
@@ -10,7 +10,7 @@
 		v-loading="isLoading"
 	>
 		<el-table-column :label="$locale.baseText('tagsTable.name')">
-			<template slot-scope="scope">
+			<template #default="scope">
 				<div class="name" :key="scope.row.id" @keydown.stop>
 					<transition name="fade" mode="out-in">
 						<n8n-input
@@ -32,7 +32,7 @@
 			</template>
 		</el-table-column>
 		<el-table-column :label="$locale.baseText('tagsTable.usage')" width="150">
-			<template slot-scope="scope">
+			<template #default="scope">
 				<transition name="fade" mode="out-in">
 						<div v-if="!scope.row.create && !scope.row.delete" :class="{ disabled: scope.row.disable }">
 							{{ scope.row.usage }}
@@ -41,7 +41,7 @@
 				</template>
 		</el-table-column>
 		<el-table-column>
-			<template slot-scope="scope">
+			<template #default="scope">
 				<transition name="fade" mode="out-in">
 					<div class="ops" v-if="scope.row.create">
 						<n8n-button :label="$locale.baseText('tagsTable.cancel')" @click.stop="cancel" type="secondary" :disabled="isSaving" />
diff --git a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTableHeader.vue b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTableHeader.vue
index ae43b0287c..44c647704f 100644
--- a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTableHeader.vue
+++ b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTableHeader.vue
@@ -9,7 +9,9 @@
 				clearable
 				:maxlength="maxLength"
 			>
-				<font-awesome-icon slot="prefix" icon="search" />
+				<template #prefix>
+					<font-awesome-icon icon="search" />
+				</template>
 			</n8n-input>
 		</el-col>
 		<el-col :span="14">
diff --git a/packages/editor-ui/src/components/UpdatesPanel.vue b/packages/editor-ui/src/components/UpdatesPanel.vue
index 2472d10f4b..4f4638ba1c 100644
--- a/packages/editor-ui/src/components/UpdatesPanel.vue
+++ b/packages/editor-ui/src/components/UpdatesPanel.vue
@@ -4,12 +4,12 @@
 		direction="ltr"
 		width="520px"
 	>
-		<template slot="header">
+		<template #header>
 			<span :class="$style.title">
 				{{ $locale.baseText('updatesPanel.weVeBeenBusy') }}
 			</span>
 		</template>
-		<template slot="content">
+		<template #content>
 			<section :class="$style['description']">
 				<p v-if="currentVersion">
 					{{ $locale.baseText(
diff --git a/packages/editor-ui/src/components/ValueSurvey.vue b/packages/editor-ui/src/components/ValueSurvey.vue
index f940a9a060..30efa69367 100644
--- a/packages/editor-ui/src/components/ValueSurvey.vue
+++ b/packages/editor-ui/src/components/ValueSurvey.vue
@@ -9,12 +9,12 @@
 		width="120px"
 		class="value-survey"
 	>
-		<template slot="header">
+		<template #header>
 			<div :class="$style.title">
 				<n8n-heading tag="h2" size="medium" color="text-xlight">{{ getTitle }}</n8n-heading>
 			</div>
 		</template>
-		<template slot="content">
+		<template #content>
 			<section :class="$style.content">
 				<div v-if="showButtons" :class="$style.wrapper">
 					<div :class="$style.buttons">
diff --git a/packages/editor-ui/src/components/VariableSelectorItem.vue b/packages/editor-ui/src/components/VariableSelectorItem.vue
index 0fa7ce1236..ca69065e38 100644
--- a/packages/editor-ui/src/components/VariableSelectorItem.vue
+++ b/packages/editor-ui/src/components/VariableSelectorItem.vue
@@ -13,9 +13,11 @@
 						<span class="el-dropdown-link clickable" @click.stop>
 							<font-awesome-icon icon="dot-circle" :title="$locale.baseText('variableSelectorItem.selectItem')" />
 						</span>
-						<el-dropdown-menu slot="dropdown">
-							<el-dropdown-item :command="operation.command" v-for="operation in itemAddOperations" :key="operation.command">{{operation.displayName}}</el-dropdown-item>
-						</el-dropdown-menu>
+						<template #dropdown>
+							<el-dropdown-menu>
+								<el-dropdown-item :command="operation.command" v-for="operation in itemAddOperations" :key="operation.command">{{operation.displayName}}</el-dropdown-item>
+							</el-dropdown-menu>
+						</template>
 					</el-dropdown>
 
 				</div>
diff --git a/packages/editor-ui/src/components/WarningTooltip.vue b/packages/editor-ui/src/components/WarningTooltip.vue
index 31b7ef8e76..3ab11eaff6 100644
--- a/packages/editor-ui/src/components/WarningTooltip.vue
+++ b/packages/editor-ui/src/components/WarningTooltip.vue
@@ -1,6 +1,8 @@
 <template>
 	<n8n-tooltip  content=" " placement="top" >
-		<div slot="content"><slot /></div>
+		<template #content>
+			<slot />
+		</template>
 		<font-awesome-icon :class="$style['icon']" icon="exclamation-triangle"></font-awesome-icon>
 	</n8n-tooltip>
 </template>
diff --git a/packages/editor-ui/src/components/WorkflowActivator.vue b/packages/editor-ui/src/components/WorkflowActivator.vue
index 27d9ddb51c..ff46e76748 100644
--- a/packages/editor-ui/src/components/WorkflowActivator.vue
+++ b/packages/editor-ui/src/components/WorkflowActivator.vue
@@ -9,7 +9,9 @@
 			</n8n-text>
 		</div>
 		<n8n-tooltip :disabled="!disabled" placement="bottom">
-			<div slot="content">{{ $locale.baseText('workflowActivator.thisWorkflowHasNoTriggerNodes') }}</div>
+			<template #content>
+				<div>{{ $locale.baseText('workflowActivator.thisWorkflowHasNoTriggerNodes') }}</div>
+			</template>
 			<el-switch
 				v-loading="updatingWorkflowActivation"
 				:value="workflowActive"
@@ -24,7 +26,9 @@
 
 		<div class="could-not-be-started" v-if="couldNotBeStarted">
 			<n8n-tooltip placement="top">
-				<div @click="displayActivationError" slot="content" v-html="$locale.baseText('workflowActivator.theWorkflowIsSetToBeActiveBut')"></div>
+				<template #content>
+					<div @click="displayActivationError" v-html="$locale.baseText('workflowActivator.theWorkflowIsSetToBeActiveBut')"></div>
+				</template>
 				<font-awesome-icon @click="displayActivationError" icon="exclamation-triangle" />
 			</n8n-tooltip>
 		</div>
diff --git a/packages/editor-ui/src/components/WorkflowSettings.vue b/packages/editor-ui/src/components/WorkflowSettings.vue
index 77a0820d37..494cfd2f92 100644
--- a/packages/editor-ui/src/components/WorkflowSettings.vue
+++ b/packages/editor-ui/src/components/WorkflowSettings.vue
@@ -7,13 +7,15 @@
 		:eventBus="modalBus"
 		:scrollable="true"
 	>
-		<template v-slot:content>
+		<template #content>
 			<div v-loading="isLoading" class="workflow-settings">
 				<el-row>
 					<el-col :span="10" class="setting-name">
 						{{ $locale.baseText('workflowSettings.errorWorkflow') + ":" }}
 						<n8n-tooltip class="setting-info" placement="top" >
-							<div slot="content" v-html="helpTexts.errorWorkflow"></div>
+							<template #content>
+								<div v-html="helpTexts.errorWorkflow"></div>
+							</template>
 							<font-awesome-icon icon="question-circle" />
 						</n8n-tooltip>
 					</el-col>
@@ -32,7 +34,9 @@
 					<el-col :span="10" class="setting-name">
 						{{ $locale.baseText('workflowSettings.timezone') + ":" }}
 						<n8n-tooltip class="setting-info" placement="top" >
-							<div slot="content" v-text="helpTexts.timezone"></div>
+							<template #content>
+								<div v-text="helpTexts.timezone"></div>
+							</template>
 							<font-awesome-icon icon="question-circle" />
 						</n8n-tooltip>
 					</el-col>
@@ -51,7 +55,9 @@
 					<el-col :span="10" class="setting-name">
 						{{ $locale.baseText('workflowSettings.saveDataErrorExecution') + ":" }}
 						<n8n-tooltip class="setting-info" placement="top" >
-							<div slot="content" v-text="helpTexts.saveDataErrorExecution"></div>
+							<template #content>
+								<div v-text="helpTexts.saveDataErrorExecution"></div>
+							</template>
 							<font-awesome-icon icon="question-circle" />
 						</n8n-tooltip>
 					</el-col>
@@ -70,7 +76,9 @@
 					<el-col :span="10" class="setting-name">
 						{{ $locale.baseText('workflowSettings.saveDataSuccessExecution') + ":" }}
 						<n8n-tooltip class="setting-info" placement="top" >
-							<div slot="content" v-text="helpTexts.saveDataSuccessExecution"></div>
+							<template #content>
+								<div v-text="helpTexts.saveDataSuccessExecution"></div>
+							</template>
 							<font-awesome-icon icon="question-circle" />
 						</n8n-tooltip>
 					</el-col>
@@ -89,7 +97,9 @@
 					<el-col :span="10" class="setting-name">
 						{{ $locale.baseText('workflowSettings.saveManualExecutions') + ":" }}
 						<n8n-tooltip class="setting-info" placement="top" >
-							<div slot="content" v-text="helpTexts.saveManualExecutions"></div>
+							<template #content>
+								<div v-text="helpTexts.saveManualExecutions"></div>
+							</template>
 							<font-awesome-icon icon="question-circle" />
 						</n8n-tooltip>
 					</el-col>
@@ -108,7 +118,9 @@
 					<el-col :span="10" class="setting-name">
 						{{ $locale.baseText('workflowSettings.saveExecutionProgress') + ":" }}
 						<n8n-tooltip class="setting-info" placement="top" >
-							<div slot="content" v-text="helpTexts.saveExecutionProgress"></div>
+							<template #content>
+								<div v-text="helpTexts.saveExecutionProgress"></div>
+							</template>
 							<font-awesome-icon icon="question-circle" />
 						</n8n-tooltip>
 					</el-col>
@@ -128,7 +140,9 @@
 						<el-col :span="10" class="setting-name">
 							{{ $locale.baseText('workflowSettings.callerPolicy') + ":" }}
 							<n8n-tooltip class="setting-info" placement="top" >
-								<div slot="content" v-text="helpTexts.workflowCallerPolicy"></div>
+								<template #content>
+									<div v-text="helpTexts.workflowCallerPolicy"></div>
+								</template>
 								<font-awesome-icon icon="question-circle" />
 							</n8n-tooltip>
 						</el-col>
@@ -148,7 +162,9 @@
 						<el-col :span="10" class="setting-name">
 							{{ $locale.baseText('workflowSettings.callerIds') + ":" }}
 							<n8n-tooltip class="setting-info" placement="top" >
-								<div slot="content" v-text="helpTexts.workflowCallerIds"></div>
+								<template #content>
+									<div v-text="helpTexts.workflowCallerIds"></div>
+								</template>
 								<font-awesome-icon icon="question-circle" />
 							</n8n-tooltip>
 						</el-col>
@@ -166,7 +182,9 @@
 					<el-col :span="10" class="setting-name">
 						{{ $locale.baseText('workflowSettings.timeoutWorkflow') + ":" }}
 						<n8n-tooltip class="setting-info" placement="top" >
-							<div slot="content" v-text="helpTexts.executionTimeoutToggle"></div>
+							<template #content>
+								<div v-text="helpTexts.executionTimeoutToggle"></div>
+							</template>
 							<font-awesome-icon icon="question-circle" />
 						</n8n-tooltip>
 					</el-col>
@@ -181,30 +199,32 @@
 						<el-col :span="10" class="setting-name">
 							{{ $locale.baseText('workflowSettings.timeoutAfter') + ":" }}
 							<n8n-tooltip class="setting-info" placement="top" >
-								<div slot="content" v-text="helpTexts.executionTimeout"></div>
+								<template #content>
+									<div v-text="helpTexts.executionTimeout"></div>
+								</template>
 								<font-awesome-icon icon="question-circle" />
 							</n8n-tooltip>
 						</el-col>
 						<el-col :span="4">
 							<n8n-input size="medium" :value="timeoutHMS.hours" @input="(value) => setTimeout('hours', value)" :min="0">
-								<template slot="append">{{ $locale.baseText('workflowSettings.hours') }}</template>
+								<template #append>{{ $locale.baseText('workflowSettings.hours') }}</template>
 							</n8n-input>
 						</el-col>
 						<el-col :span="4" class="timeout-input">
 							<n8n-input size="medium" :value="timeoutHMS.minutes" @input="(value) => setTimeout('minutes', value)" :min="0" :max="60">
-								<template slot="append">{{ $locale.baseText('workflowSettings.minutes') }}</template>
+								<template #append>{{ $locale.baseText('workflowSettings.minutes') }}</template>
 							</n8n-input>
 						</el-col>
 						<el-col :span="4" class="timeout-input">
 							<n8n-input size="medium" :value="timeoutHMS.seconds" @input="(value) => setTimeout('seconds', value)" :min="0" :max="60">
-								<template slot="append">{{ $locale.baseText('workflowSettings.seconds') }}</template>
+								<template #append>{{ $locale.baseText('workflowSettings.seconds') }}</template>
 							</n8n-input>
 						</el-col>
 					</el-row>
 				</div>
 			</div>
 		</template>
-		<template v-slot:footer>
+		<template #footer>
 			<div class="action-buttons">
 				<n8n-button :label="$locale.baseText('workflowSettings.save')" size="large" float="right" @click="saveSettings" />
 			</div>
diff --git a/packages/editor-ui/src/components/WorkflowShareModal.ee.vue b/packages/editor-ui/src/components/WorkflowShareModal.ee.vue
index 343f4f0665..3fd05ee7fe 100644
--- a/packages/editor-ui/src/components/WorkflowShareModal.ee.vue
+++ b/packages/editor-ui/src/components/WorkflowShareModal.ee.vue
@@ -6,7 +6,7 @@
 		:name="WORKFLOW_SHARE_MODAL_KEY"
 		:center="true"
 	>
-		<template slot="content">
+		<template #content>
 			<div :class="$style.container">
 				<enterprise-edition :features="[EnterpriseEditionFeature.WorkflowSharing]">
 					<n8n-user-select
@@ -29,7 +29,7 @@
 						:readonly="!workflowPermissions.updateSharing"
 						@delete="onRemoveSharee"
 					>
-						<template v-slot:actions="{ user }">
+						<template #actions="{ user }">
 							<n8n-select
 								:class="$style.roleSelect"
 								value="editor"
@@ -57,7 +57,7 @@
 			</div>
 		</template>
 
-		<template slot="footer">
+		<template #footer>
 			<enterprise-edition :features="[EnterpriseEditionFeature.WorkflowSharing]" :class="$style.actionButtons">
 				<n8n-text
 					v-show="isDirty"
diff --git a/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue b/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue
index c741529172..f19a39cf0c 100644
--- a/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue
+++ b/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue
@@ -2,7 +2,7 @@
 	<n8n-popover
 		trigger="click"
 	>
-		<template slot="reference">
+		<template #reference>
 			<n8n-button
 				icon="filter"
 				type="tertiary"
diff --git a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
index 75720314ad..a20be4cd69 100644
--- a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
+++ b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
@@ -55,7 +55,9 @@
 								ref="search"
 								data-test-id="resources-list-search"
 							>
-								<n8n-icon icon="search" slot="prefix"/>
+								<template #prefix>
+									<n8n-icon icon="search"/>
+								</template>
 							</n8n-input>
 							<div :class="$style['sort-and-filter']">
 								<n8n-select
@@ -75,7 +77,7 @@
 									@input="$emit('update:filters', $event)"
 									@update:filtersLength="onUpdateFiltersLength"
 								>
-									<template v-slot="resourceFiltersSlotProps">
+									<template #default="resourceFiltersSlotProps">
 										<slot name="filters" v-bind="resourceFiltersSlotProps" />
 									</template>
 								</resource-filters-dropdown>
@@ -407,4 +409,3 @@ export default mixins(
 	height: 69px;
 }
 </style>
-
diff --git a/packages/editor-ui/src/views/CredentialsView.vue b/packages/editor-ui/src/views/CredentialsView.vue
index d8a716348f..38caa92601 100644
--- a/packages/editor-ui/src/views/CredentialsView.vue
+++ b/packages/editor-ui/src/views/CredentialsView.vue
@@ -9,10 +9,10 @@
 		@click:add="addCredential"
 		@update:filters="filters = $event"
 	>
-		<template v-slot="{ data }">
+		<template #default="{ data }">
 			<credential-card :data="data"/>
 		</template>
-		<template v-slot:filters="{ setKeyValue }">
+		<template #filters="{ setKeyValue }">
 			<div class="mb-s">
 				<n8n-input-label
 					:label="$locale.baseText('credentials.filters.type')"
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 82c7566ed1..819d92af2c 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -51,10 +51,11 @@
 						:hideActions="pullConnActive"
 						:isProductionExecutionPreview="isProductionExecutionPreview"
 					>
-						<span
-							slot="custom-tooltip"
-							v-text="$locale.baseText('nodeView.placeholderNode.addTriggerNodeBeforeExecuting')"
-						/>
+						<template #custom-tooltip>
+							<span
+								v-text="$locale.baseText('nodeView.placeholderNode.addTriggerNodeBeforeExecuting')"
+							/>
+						</template>
 					</node>
 					<sticky
 						v-else
diff --git a/packages/editor-ui/src/views/SettingsUsersView.vue b/packages/editor-ui/src/views/SettingsUsersView.vue
index ff0beaa907..c6201e052e 100644
--- a/packages/editor-ui/src/views/SettingsUsersView.vue
+++ b/packages/editor-ui/src/views/SettingsUsersView.vue
@@ -4,15 +4,17 @@
 			<n8n-heading size="2xlarge">{{ $locale.baseText('settings.users') }}</n8n-heading>
 			<div :class="$style.buttonContainer" v-if="!usersStore.showUMSetupWarning">
 					<n8n-tooltip :disabled="settingsStore.isSmtpSetup" placement="bottom">
-						<i18n slot="content" path="settings.users.setupSMTPToInviteUsers" tag="span">
-							<template #action>
-								<a
-									href="https://docs.n8n.io/reference/user-management.html#step-one-smtp"
-									target="_blank"
-									v-text="$locale.baseText('settings.users.setupSMTPToInviteUsers.instructions')"
-								/>
-							</template>
-						</i18n>
+						<template #content>
+							<i18n path="settings.users.setupSMTPToInviteUsers" tag="span">
+								<template #action>
+									<a
+										href="https://docs.n8n.io/reference/user-management.html#step-one-smtp"
+										target="_blank"
+										v-text="$locale.baseText('settings.users.setupSMTPToInviteUsers.instructions')"
+									/>
+								</template>
+							</i18n>
+						</template>
 						<div>
 							<n8n-button :label="$locale.baseText('settings.users.invite')" @click="onInvite" size="large" :disabled="!settingsStore.isSmtpSetup" />
 						</div>
diff --git a/packages/editor-ui/src/views/TemplatesCollectionView.vue b/packages/editor-ui/src/views/TemplatesCollectionView.vue
index 2340d93b30..d82eca5858 100644
--- a/packages/editor-ui/src/views/TemplatesCollectionView.vue
+++ b/packages/editor-ui/src/views/TemplatesCollectionView.vue
@@ -1,6 +1,6 @@
 <template>
 	<TemplatesView :goBackEnabled="true">
-		<template v-slot:header>
+		<template #header>
 			<div v-if="!notFoundError" :class="$style.wrapper">
 				<div :class="$style.title">
 					<n8n-heading v-if="collection && collection.name" tag="h1" size="2xlarge">
@@ -16,7 +16,7 @@
 				<n8n-text color="text-base">{{ $locale.baseText('templates.collectionsNotFound') }}</n8n-text>
 			</div>
 		</template>
-		<template v-if="!notFoundError" v-slot:content>
+		<template v-if="!notFoundError" #content>
 			<div :class="$style.wrapper">
 				<div :class="$style.mainContent">
 					<div :class="$style.markdown" v-if="loading || (collection && collection.description)">
diff --git a/packages/editor-ui/src/views/TemplatesSearchView.vue b/packages/editor-ui/src/views/TemplatesSearchView.vue
index 95a579b5e7..abfc62283d 100644
--- a/packages/editor-ui/src/views/TemplatesSearchView.vue
+++ b/packages/editor-ui/src/views/TemplatesSearchView.vue
@@ -1,6 +1,6 @@
 <template>
 	<TemplatesView>
-		<template v-slot:header>
+		<template #header>
 			<div :class="$style.wrapper">
 				<div :class="$style.title">
 					<n8n-heading tag="h1" size="2xlarge">
@@ -16,7 +16,7 @@
 				</div>
 			</div>
 		</template>
-		<template v-slot:content>
+		<template #content>
 			<div :class="$style.contentWrapper">
 				<div :class="$style.filters">
 					<TemplateFilters
@@ -37,7 +37,9 @@
 						@blur="trackSearch"
 						clearable
 					>
-						<font-awesome-icon icon="search" slot="prefix" />
+						<template #prefix>
+							<font-awesome-icon icon="search" />
+						</template>
 					</n8n-input>
 					<div :class="$style.carouselContainer" v-show="collections.length || loadingCollections">
 						<div :class="$style.header">
diff --git a/packages/editor-ui/src/views/TemplatesWorkflowView.vue b/packages/editor-ui/src/views/TemplatesWorkflowView.vue
index 5f391b4041..dcd208e7f3 100644
--- a/packages/editor-ui/src/views/TemplatesWorkflowView.vue
+++ b/packages/editor-ui/src/views/TemplatesWorkflowView.vue
@@ -1,6 +1,6 @@
 <template>
 	<TemplatesView :goBackEnabled="true">
-		<template v-slot:header>
+		<template #header>
 			<div v-if="!notFoundError" :class="$style.wrapper">
 				<div :class="$style.title">
 					<n8n-heading v-if="template && template.name" tag="h1" size="2xlarge">{{
@@ -25,7 +25,7 @@
 				<n8n-text color="text-base">{{ $locale.baseText('templates.workflowsNotFound') }}</n8n-text>
 			</div>
 		</template>
-		<template v-if="!notFoundError" v-slot:content>
+		<template v-if="!notFoundError" #content>
 			<div :class="$style.image">
 				<WorkflowPreview
 					v-if="showPreview"
diff --git a/packages/editor-ui/src/views/WorkflowsView.vue b/packages/editor-ui/src/views/WorkflowsView.vue
index f7e151d384..14ebe1e820 100644
--- a/packages/editor-ui/src/views/WorkflowsView.vue
+++ b/packages/editor-ui/src/views/WorkflowsView.vue
@@ -11,7 +11,7 @@
 		@click:add="addWorkflow"
 		@update:filters="filters = $event"
 	>
-		<template v-slot="{ data }">
+		<template #default="{ data }">
 			<workflow-card :data="data" @click:tag="onClickTag" />
 		</template>
 		<template #empty>
@@ -38,7 +38,7 @@
 				</n8n-card>
 			</div>
 		</template>
-		<template v-slot:filters="{ setKeyValue }">
+		<template #filters="{ setKeyValue }">
 			<div class="mb-s" v-if="settingsStore.areTagsEnabled">
 				<n8n-input-label
 					:label="$locale.baseText('workflows.filters.tags')"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0cdac00cc2..bb9406899c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -471,7 +471,6 @@ importers:
       '@fortawesome/free-regular-svg-icons': ^6.1.1
       '@fortawesome/free-solid-svg-icons': ^5.15.3
       '@fortawesome/vue-fontawesome': ^2.0.2
-      '@intlify/vue-i18n-loader': ^1.1.0
       '@pinia/testing': ^0.0.14
       '@testing-library/jest-dom': ^5.16.5
       '@testing-library/vue': ^5.8.3
@@ -487,7 +486,6 @@ importers:
       '@types/uuid': ^8.3.2
       '@vitejs/plugin-legacy': ^1.8.2
       '@vitejs/plugin-vue2': ^1.1.2
-      '@yfwz100/vite-plugin-vue2-i18n': ^1.0.0-2
       axios: ^0.21.1
       c8: ^7.12.0
       dateformat: ^3.0.3
@@ -592,7 +590,6 @@ importers:
       vue2-touch-events: 3.2.2
       xss: 1.0.14
     devDependencies:
-      '@intlify/vue-i18n-loader': 1.1.0
       '@pinia/testing': 0.0.14_pinia@2.0.23+vue@2.7.13
       '@testing-library/jest-dom': 5.16.5
       '@testing-library/vue': 5.8.3_2s2ymob7v2oigx3hqbmnjuqthq
@@ -608,7 +605,6 @@ importers:
       '@types/uuid': 8.3.4
       '@vitejs/plugin-legacy': 1.8.2_vite@2.9.5
       '@vitejs/plugin-vue2': 1.1.2_vite@2.9.5+vue@2.7.13
-      '@yfwz100/vite-plugin-vue2-i18n': 1.0.0-3_vite@2.9.5
       c8: 7.12.0
       jshint: 2.13.5
       sass: 1.55.0
@@ -2863,20 +2859,6 @@ packages:
       xregexp: 2.0.0
     dev: false
 
-  /@intlify/shared/9.2.2:
-    resolution: {integrity: sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==}
-    engines: {node: '>= 14'}
-    dev: true
-
-  /@intlify/vue-i18n-loader/1.1.0:
-    resolution: {integrity: sha512-9LXiztMtYKTE8t/hRwwGUp+ofrwU0sxLQLzFEOZ38zvn0DonUIQmZUj1cfz5p1Lu8BllxKbCrn6HnsRJ+LYA6g==}
-    engines: {node: '>= 10'}
-    dependencies:
-      '@intlify/shared': 9.2.2
-      js-yaml: 3.14.1
-      json5: 2.2.1
-    dev: true
-
   /@istanbuljs/load-nyc-config/1.1.0:
     resolution: {integrity: sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==}
     engines: {node: '>=8'}
@@ -6877,14 +6859,6 @@ packages:
     resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
     dev: true
 
-  /@yfwz100/vite-plugin-vue2-i18n/1.0.0-3_vite@2.9.5:
-    resolution: {integrity: sha512-HlhVMhrOpBHlkkdSm5wQ6YN65ZqdF9YqP7HS1at6NjQgEOIhBiP7tRZ+dYM3ymztKAX0ovhyKCY9ZnQ/GMK0Qg==}
-    peerDependencies:
-      vite: ^2.1.5 || ^3.0.5
-    dependencies:
-      vite: 2.9.5_sass@1.55.0
-    dev: true
-
   /a-sync-waterfall/1.0.1:
     resolution: {integrity: sha512-RYTOHHdWipFUliRFMCS4X2Yn2X8M87V/OpSqWzKKOGhzqyUxzyVmhHDH9sAvG+ZuQf/TAOFsLCpMw09I1ufUnA==}
     dev: false