src/pages/Admin/ConnectionsView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, inject, onBeforeUnmount } from 'vue';
+import { ref, onMounted, inject, onBeforeUnmount, h } from 'vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
@@ -103,6 +103,13 @@ onMounted(async () => {
 });
 
 onBeforeUnmount(() => clearInterval(intervalId.value));
+
+const renderAgentDetails = connection => {
+    const agent = connection.visitAgent;
+    return agent?.platform && agent?.browser && agent?.version
+        ? h('span', `${agent.platform} - ${agent.browser} - ${agent.version}`)
+        : null;
+};
 </script>
 
 <template>
@@ -152,17 +159,7 @@ onBeforeUnmount(() => clearInterval(intervalId.value));
                             )
                         }}</span
                     >
-                    <span
-                        v-if="
-                            connection.visitAgent?.platform &&
-                            connection.visitAgent?.browser &&
-                            connection.visitAgent?.version
-                        "
-                    >
-                        {{ connection.visitAgent?.platform }} -
-                        {{ connection.visitAgent?.browser }} -
-                        {{ connection.visitAgent?.version }}
-                    </span>
+                    <component :is="renderAgentDetails(connection)" />
                 </template>
                 <template #actions>
                     <QBtn