fix: Remove Vue.component usage and refactor plugins into Vue Plugins (no-changelog) (#6445)

* fix: remove Vue.component usage and refactor plugins into Vue Plugins system (no-changelog)

* fix linting issues

---------

Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in>

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

@@ -44,6 +44,7 @@ import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
 import { useUsersStore } from '@/stores/users.store';
 import { useCredentialsStore } from '@/stores/credentials.store';
+import TimeAgo from '@/components/TimeAgo.vue';
 
 export const CREDENTIAL_LIST_ITEM_ACTIONS = {
 	OPEN: 'open',
@@ -62,6 +63,7 @@ export default defineComponent({
 		};
 	},
 	components: {
+		TimeAgo,
 		CredentialIcon,
 	},
 	props: {

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

@@ -14,8 +14,12 @@ import { useCredentialsStore } from '@/stores/credentials.store';
 import { useRootStore } from '@/stores/n8nRoot.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import type { ICredentialType, INodeTypeDescription } from 'n8n-workflow';
+import NodeIcon from '@/components/NodeIcon.vue';
 
 export default defineComponent({
+	components: {
+		NodeIcon,
+	},
 	props: {
 		credentialTypeName: {
 			type: String,

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

@@ -41,9 +41,13 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import NodeIcon from '@/components/NodeIcon.vue';
 
 export default defineComponent({
 	name: 'NodeTitle',
+	components: {
+		NodeIcon,
+	},
 	props: {
 		value: {
 			type: String,

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

@@ -49,6 +49,7 @@ import { defineComponent } from 'vue';
 import { genericHelpers } from '@/mixins/genericHelpers';
 import { filterTemplateNodes, abbreviateNumber } from '@/utils';
 import NodeList from './NodeList.vue';
+import TimeAgo from '@/components/TimeAgo.vue';
 
 export default defineComponent({
 	name: 'TemplateCard',
@@ -73,6 +74,7 @@ export default defineComponent({
 		},
 	},
 	components: {
+		TimeAgo,
 		NodeList,
 	},
 	data() {

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

@@ -55,18 +55,13 @@
 </template>
 
 <script lang="ts">
-import Vue, { defineComponent } from 'vue';
+import { defineComponent } from 'vue';
 import NodeIcon from './NodeIcon.vue';
 import TimeAgo from './TimeAgo.vue';
 import Badge from './Badge.vue';
 import WarningTooltip from './WarningTooltip.vue';
 import type { IVersionNode } from '@/Interface';
 
-Vue.component('NodeIcon', NodeIcon);
-Vue.component('TimeAgo', TimeAgo);
-Vue.component('Badge', Badge);
-Vue.component('WarningTooltip', WarningTooltip);
-
 export default defineComponent({
 	name: 'VersionCard',
 	components: { NodeIcon, TimeAgo, Badge, WarningTooltip },

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

@@ -81,6 +81,7 @@ import { useUIStore } from '@/stores/ui.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUsersStore } from '@/stores/users.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
+import TimeAgo from '@/components/TimeAgo.vue';
 
 type ActivatorRef = InstanceType<typeof WorkflowActivator>;
 
@@ -104,6 +105,7 @@ export default defineComponent({
 		};
 	},
 	components: {
+		TimeAgo,
 		WorkflowActivator,
 	},
 	props: {