From 106b0ac1a0bd187a3b28bc855cb23aedd9dc352a Mon Sep 17 00:00:00 2001
From: Ricardo Espinoza <ricardo@n8n.io>
Date: Wed, 19 Jun 2024 09:36:38 -0700
Subject: [PATCH] refactor(editor): Migrate `VersionCard.vue` to use
 composition API (no-changelog) (#9799)

---
 .../editor-ui/src/components/VersionCard.vue  | 32 ++++++++-----------
 1 file changed, 13 insertions(+), 19 deletions(-)

diff --git a/packages/editor-ui/src/components/VersionCard.vue b/packages/editor-ui/src/components/VersionCard.vue
index e34f857f0..9434e5a0b 100644
--- a/packages/editor-ui/src/components/VersionCard.vue
+++ b/packages/editor-ui/src/components/VersionCard.vue
@@ -44,36 +44,30 @@
 					v-for="node in version.nodes"
 					:key="node.name"
 					:node-type="node"
-					:title="$options.nodeName(node)"
+					:title="nodeName(node)"
 				/>
 			</div>
 		</div>
 	</a>
 </template>
 
-<script lang="ts">
-import type { PropType } from 'vue';
-import { defineComponent } from 'vue';
+<script setup lang="ts">
 import NodeIcon from './NodeIcon.vue';
 import TimeAgo from './TimeAgo.vue';
 import Badge from './Badge.vue';
 import WarningTooltip from './WarningTooltip.vue';
-import type { IVersionNode, IVersion } from '@/Interface';
+import type { IVersion, IVersionNode } from '@/Interface';
+import { useI18n } from '@/composables/useI18n';
 
-export default defineComponent({
-	name: 'VersionCard',
-	components: { NodeIcon, TimeAgo, Badge, WarningTooltip },
-	props: {
-		version: {
-			type: Object as PropType<IVersion>,
-			required: true,
-		},
-	},
-	// @ts-ignore
-	nodeName(node: IVersionNode): string {
-		return node !== null ? node.displayName : this.$locale.baseText('versionCard.unknown');
-	},
-});
+defineProps<{
+	version: IVersion;
+}>();
+
+const i18n = useI18n();
+
+const nodeName = (node: IVersionNode): string => {
+	return node !== null ? node.displayName : i18n.baseText('versionCard.unknown');
+};
 </script>
 
 <style module lang="scss">