From 913f0668104bde607e5c4e8d3d3a1cc5d12b1e70 Mon Sep 17 00:00:00 2001
From: Florian Heuberger <fh@flogersoft.de>
Date: Fri, 27 Feb 2026 09:10:15 +0100
Subject: [PATCH 1/9] feat: implement nuxt.care

---
 app/components/module/ModuleItem.vue | 14 +++++++
 app/pages/modules/[slug].vue         | 19 +++++++++
 server/api/v1/modules/[name].get.ts  |  8 ++--
 server/api/v1/modules/index.get.ts   |  6 ++-
 server/utils/module.ts               | 59 +++++++++++++++++++++++++++-
 shared/types/modules.ts              |  7 ++++
 6 files changed, 108 insertions(+), 5 deletions(-)

diff --git a/app/components/module/ModuleItem.vue b/app/components/module/ModuleItem.vue
index 476e1f0e0..a7ac46f34 100644
--- a/app/components/module/ModuleItem.vue
+++ b/app/components/module/ModuleItem.vue
@@ -153,6 +153,20 @@ const items = computed(() => [
                 <span class="text-sm font-medium whitespace-normal">{{ formatNumber(module.stats.stars || 0) }}</span>
               </NuxtLink>
             </UTooltip>
+            <UTooltip v-if="module.health" :text="`nuxt.care Score: ${module.health.score}/100`">
+              <NuxtLink
+                class="flex items-center gap-1.5 hover:opacity-80 transition-opacity"
+                :to="`https://nuxt.care/?search=npm:${module.npm}`"
+                target="_blank"
+              >
+                <span
+                  class="inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-xs font-medium text-white capitalize"
+                  :style="{ backgroundColor: module.health.color }"
+                >
+                  {{ module.health.status }}
+                </span>
+              </NuxtLink>
+            </UTooltip>
 
             <UTooltip v-if="selectedSort.key === 'publishedAt'" :text="`Updated ${formatDateByLocale('en', module.stats.publishedAt)}`">
               <NuxtLink
diff --git a/app/pages/modules/[slug].vue b/app/pages/modules/[slug].vue
index 42978efff..65e7657a0 100644
--- a/app/pages/modules/[slug].vue
+++ b/app/pages/modules/[slug].vue
@@ -151,6 +151,25 @@ defineOgImageComponent('Module', {
           </NuxtLink>
         </UTooltip>
 
+        <template v-if="module.health">
+          <span class="hidden lg:block text-muted">&bull;</span>
+
+          <UTooltip :text="`nuxt.care Score: ${module.health.score}/100`">
+            <NuxtLink
+              class="flex items-center gap-1.5 hover:opacity-80 transition-opacity"
+              :to="`https://nuxt.care/?search=npm:${module.npm}`"
+              target="_blank"
+            >
+              <span
+                class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium text-white capitalize"
+                :style="{ backgroundColor: module.health.color }"
+              >
+                {{ module.health.status }}
+              </span>
+            </NuxtLink>
+          </UTooltip>
+        </template>
+
         <div class="mx-3 h-6 border-l border-gray-200 dark:border-gray-800 w-px hidden lg:block" />
 
         <div v-for="(maintainer, index) in module.maintainers" :key="maintainer.github" class="flex items-center gap-3">
diff --git a/server/api/v1/modules/[name].get.ts b/server/api/v1/modules/[name].get.ts
index 5d324b84c..92ed40082 100644
--- a/server/api/v1/modules/[name].get.ts
+++ b/server/api/v1/modules/[name].get.ts
@@ -16,17 +16,19 @@ export default defineCachedEventHandler(async (event) => {
     })
   }
 
-  const [stats, contributors, readme] = await Promise.all([
+  const [stats, contributors, readme, bulkHealth] = await Promise.all([
     fetchModuleStats(event, module),
     fetchModuleContributors(event, module),
-    fetchModuleReadme(event, module)
+    fetchModuleReadme(event, module),
+    fetchBulkModuleHealth(event, [module])
   ])
   return {
     ...module,
     generatedAt: new Date().toISOString(),
     contributors,
     stats,
-    readme
+    readme,
+    health: bulkHealth[module.name] || null
   } satisfies Module
 }, {
   name: 'modules:v1',
diff --git a/server/api/v1/modules/index.get.ts b/server/api/v1/modules/index.get.ts
index a9c14b9eb..912660209 100644
--- a/server/api/v1/modules/index.get.ts
+++ b/server/api/v1/modules/index.get.ts
@@ -55,7 +55,10 @@ export default defineCachedEventHandler(async (event) => {
     modules: string[]
   }
 
-  const bulkNpmStats = await npm.fetchBulkPackageStats(modules.map(m => m.npm), 'last-month')
+  const [bulkNpmStats, bulkHealth] = await Promise.all([
+    npm.fetchBulkPackageStats(modules.map(m => m.npm), 'last-month'),
+    fetchBulkModuleHealth(event, modules)
+  ])
 
   const maintainers: Record<string, MaintainerWithModules> = {}
   const contributors: Record<string, ContributorWithModules> = {}
@@ -66,6 +69,7 @@ export default defineCachedEventHandler(async (event) => {
     ])
     module.stats = mStats
     module.contributors = mContributors
+    module.health = bulkHealth[module.name] || null
 
     if (module.maintainers) {
       for (const maintainer of module.maintainers) {
diff --git a/server/utils/module.ts b/server/utils/module.ts
index 759218e4b..db9950b02 100644
--- a/server/utils/module.ts
+++ b/server/utils/module.ts
@@ -1,7 +1,7 @@
 import { parseMarkdown } from '@nuxtjs/mdc/runtime'
 
 import type { H3Event } from 'h3'
-import type { BaseModule, Module, ModuleContributor, ModuleStats } from '#shared/types'
+import type { BaseModule, Module, ModuleContributor, ModuleHealth, ModuleStats } from '#shared/types'
 import type { NpmDownloadStats } from '../types/npm'
 
 export function isBot(username: string) {
@@ -83,6 +83,63 @@ export async function fetchModuleContributors(_event: H3Event, module: BaseModul
   }
 }
 
+interface NuxtCareModuleSlim {
+  name: string
+  npm: string
+  score: number
+  status: string
+  lastUpdated: string | null
+}
+
+export async function fetchBulkModuleHealth(_event: H3Event, modules: BaseModule[]): Promise<Record<string, ModuleHealth>> {
+  const result: Record<string, ModuleHealth> = {}
+  const uncached: BaseModule[] = []
+
+  // Check KV cache first
+  for (const module of modules) {
+    const cached = await kv.get<ModuleHealth>(`module:health:${module.name}`)
+    if (cached) {
+      result[module.name] = cached
+    } else {
+      uncached.push(module)
+    }
+  }
+
+  if (!uncached.length) return result
+
+  console.info(`Fetching health for ${uncached.length} modules from nuxt.care...`)
+  try {
+    const query = new URLSearchParams()
+    query.set('slim', 'true')
+    for (const m of uncached) {
+      query.append('package', m.npm)
+    }
+    const statusColorMap: Record<string, string> = {
+      optimal: '#22c55e',
+      stable: '#84cc16',
+      degraded: '#eab308',
+      critical: '#ef4444',
+      unknown: '#6b7280'
+    }
+    const data = await $fetch<NuxtCareModuleSlim[]>(`https://nuxt.care/api/v1/modules?${query.toString()}`)
+    for (const item of data) {
+      const module = uncached.find(m => m.npm === item.npm)
+      if (!module) continue
+      const health: ModuleHealth = {
+        score: item.score,
+        color: statusColorMap[item.status] || '#6b7280',
+        status: item.status
+      }
+      result[module.name] = health
+      await kv.set(`module:health:${module.name}`, health, { ttl: 60 * 60 * 24 })
+    }
+  } catch (err) {
+    console.error(`Cannot fetch bulk health from nuxt.care: ${err}`)
+  }
+
+  return result
+}
+
 export async function fetchModuleReadme(_event: H3Event, module: BaseModule) {
   console.info(`Fetching module ${module.name} readme ...`)
   const readme = await $fetch(`https://unpkg.com/${module.npm}/README.md`).catch(() => {
diff --git a/shared/types/modules.ts b/shared/types/modules.ts
index 839dd5155..6e0427b6c 100644
--- a/shared/types/modules.ts
+++ b/shared/types/modules.ts
@@ -56,8 +56,15 @@ export interface ModuleStats {
   createdAt: number
 }
 
+export interface ModuleHealth {
+  score: number
+  color: string
+  status: string
+}
+
 export interface Module extends BaseModule {
   stats?: ModuleStats
+  health?: ModuleHealth | null
   contributors?: ModuleContributor[]
   maintainers?: ModuleMaintainer[]
   readme?: MDCParserResult

From 36ba6334d05402bbc4b2f45eeede9d940527750a Mon Sep 17 00:00:00 2001
From: Florian Heuberger <fh@flogersoft.de>
Date: Fri, 27 Feb 2026 09:18:21 +0100
Subject: [PATCH 2/9] fix: type and css

---
 app/components/AdminDashboard.vue | 2 +-
 app/pages/modules/[slug].vue      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/AdminDashboard.vue b/app/components/AdminDashboard.vue
index 5d7b3d06c..68fe9bfb0 100644
--- a/app/components/AdminDashboard.vue
+++ b/app/components/AdminDashboard.vue
@@ -43,7 +43,7 @@ const items = computed<DropdownMenuItem[][]>(() => [
   ]
 ])
 
-const { data: rawFeedback, refresh: refreshFeedback } = await useFetch('/api/feedback')
+const { data: rawFeedback, refresh: refreshFeedback } = await useFetch<FeedbackItem[]>('/api/feedback')
 const { deleteFeedback } = useFeedbackDelete()
 const { exportFeedbackData, exportPageAnalytics } = useFeedbackExport()
 
diff --git a/app/pages/modules/[slug].vue b/app/pages/modules/[slug].vue
index 65e7657a0..7dd967a53 100644
--- a/app/pages/modules/[slug].vue
+++ b/app/pages/modules/[slug].vue
@@ -112,7 +112,7 @@ defineOgImageComponent('Module', {
             :icon="moduleIcon(module.category)"
             :alt="module.name"
             size="xl"
-            class="-m-[4px] rounded-none bg-transparent"
+            class="-m-1 rounded-none bg-transparent"
           />
 
           <div>

From 1e573d498b6b82d2abd67e7c5e758cc92f292d3c Mon Sep 17 00:00:00 2001
From: Florian Heuberger <fh@flogersoft.de>
Date: Fri, 27 Feb 2026 09:19:01 +0100
Subject: [PATCH 3/9] docs: add nuxt.care badge

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 9428ece31..a66c6eb6d 100644
--- a/README.md
+++ b/README.md
@@ -8,6 +8,7 @@
 Welcome to the Nuxt website repository available on [nuxt.com](https://nuxt.com).
 
 [![Nuxt UI](https://img.shields.io/badge/Made%20with-Nuxt%20UI-00DC82?logo=nuxt.js&labelColor=020420)](https://ui.nuxt.com)
+[![nuxt.care](https://img.shields.io/badge/Health%20by-nuxt.care-84cc16?labelColor=020420)](https://nuxt.care)
 
 ## Setup
 

From d452aff75117a2778274b188791b29ca0a7b3ba6 Mon Sep 17 00:00:00 2001
From: Florian Heuberger <fh@flogersoft.de>
Date: Fri, 27 Feb 2026 09:36:52 +0100
Subject: [PATCH 4/9] fix: contrast color

---
 app/components/module/ModuleItem.vue | 4 ++--
 app/pages/modules/[slug].vue         | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/module/ModuleItem.vue b/app/components/module/ModuleItem.vue
index a7ac46f34..a04054a31 100644
--- a/app/components/module/ModuleItem.vue
+++ b/app/components/module/ModuleItem.vue
@@ -160,8 +160,8 @@ const items = computed(() => [
                 target="_blank"
               >
                 <span
-                  class="inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-xs font-medium text-white capitalize"
-                  :style="{ backgroundColor: module.health.color }"
+                  class="inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-xs font-medium capitalize"
+                  :style="{ backgroundColor: module.health.color, color: module.health.status === 'degraded' ? '#451a03' : '#fff' }"
                 >
                   {{ module.health.status }}
                 </span>
diff --git a/app/pages/modules/[slug].vue b/app/pages/modules/[slug].vue
index 7dd967a53..91d623f6a 100644
--- a/app/pages/modules/[slug].vue
+++ b/app/pages/modules/[slug].vue
@@ -161,8 +161,8 @@ defineOgImageComponent('Module', {
               target="_blank"
             >
               <span
-                class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium text-white capitalize"
-                :style="{ backgroundColor: module.health.color }"
+                class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium capitalize"
+                :style="{ backgroundColor: module.health.color, color: module.health.status === 'degraded' ? '#451a03' : '#fff' }"
               >
                 {{ module.health.status }}
               </span>

From b284b5eae628675b5af2f741bd9929f1223b7a91 Mon Sep 17 00:00:00 2001
From: Florian Heuberger <fh@flogersoft.de>
Date: Fri, 27 Feb 2026 12:06:49 +0100
Subject: [PATCH 5/9] fix: load health in chunks

---
 server/utils/module.ts | 58 +++++++++++++++++++++++-------------------
 1 file changed, 32 insertions(+), 26 deletions(-)

diff --git a/server/utils/module.ts b/server/utils/module.ts
index db9950b02..8fa3c2bad 100644
--- a/server/utils/module.ts
+++ b/server/utils/module.ts
@@ -107,34 +107,40 @@ export async function fetchBulkModuleHealth(_event: H3Event, modules: BaseModule
 
   if (!uncached.length) return result
 
-  console.info(`Fetching health for ${uncached.length} modules from nuxt.care...`)
-  try {
-    const query = new URLSearchParams()
-    query.set('slim', 'true')
-    for (const m of uncached) {
-      query.append('package', m.npm)
-    }
-    const statusColorMap: Record<string, string> = {
-      optimal: '#22c55e',
-      stable: '#84cc16',
-      degraded: '#eab308',
-      critical: '#ef4444',
-      unknown: '#6b7280'
-    }
-    const data = await $fetch<NuxtCareModuleSlim[]>(`https://nuxt.care/api/v1/modules?${query.toString()}`)
-    for (const item of data) {
-      const module = uncached.find(m => m.npm === item.npm)
-      if (!module) continue
-      const health: ModuleHealth = {
-        score: item.score,
-        color: statusColorMap[item.status] || '#6b7280',
-        status: item.status
+  const CHUNK_SIZE = 50
+  const statusColorMap: Record<string, string> = {
+    optimal: '#22c55e',
+    stable: '#84cc16',
+    degraded: '#eab308',
+    critical: '#ef4444',
+    unknown: '#6b7280'
+  }
+  const npmToModule = new Map(uncached.map(m => [m.npm, m]))
+
+  console.info(`Fetching health for ${uncached.length} modules from nuxt.care (${Math.ceil(uncached.length / CHUNK_SIZE)} chunks)...`)
+  for (let i = 0; i < uncached.length; i += CHUNK_SIZE) {
+    const chunk = uncached.slice(i, i + CHUNK_SIZE)
+    try {
+      const query = new URLSearchParams()
+      query.set('slim', 'true')
+      for (const m of chunk) {
+        query.append('package', m.npm)
+      }
+      const data = await $fetch<NuxtCareModuleSlim[]>(`https://nuxt.care/api/v1/modules?${query.toString()}`)
+      for (const item of data) {
+        const module = npmToModule.get(item.npm)
+        if (!module) continue
+        const health: ModuleHealth = {
+          score: item.score,
+          color: statusColorMap[item.status] || '#6b7280',
+          status: item.status
+        }
+        result[module.name] = health
+        await kv.set(`module:health:${module.name}`, health, { ttl: 60 * 60 * 24 })
       }
-      result[module.name] = health
-      await kv.set(`module:health:${module.name}`, health, { ttl: 60 * 60 * 24 })
+    } catch (err) {
+      console.error(`Cannot fetch bulk health from nuxt.care (chunk ${Math.floor(i / CHUNK_SIZE) + 1}): ${err}`)
     }
-  } catch (err) {
-    console.error(`Cannot fetch bulk health from nuxt.care: ${err}`)
   }
 
   return result

From b2d7124c2bc514716d390527a031451db71fa6d1 Mon Sep 17 00:00:00 2001
From: Florian Heuberger <fh@flogersoft.de>
Date: Fri, 27 Feb 2026 12:45:10 +0100
Subject: [PATCH 6/9] fix: timeout

---
 server/utils/module.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/server/utils/module.ts b/server/utils/module.ts
index 8fa3c2bad..a4876eb94 100644
--- a/server/utils/module.ts
+++ b/server/utils/module.ts
@@ -126,7 +126,11 @@ export async function fetchBulkModuleHealth(_event: H3Event, modules: BaseModule
       for (const m of chunk) {
         query.append('package', m.npm)
       }
-      const data = await $fetch<NuxtCareModuleSlim[]>(`https://nuxt.care/api/v1/modules?${query.toString()}`)
+      const data = await $fetch<NuxtCareModuleSlim[]>(`https://nuxt.care/api/v1/modules?${query.toString()}`, {
+        timeout: 10_000,
+        retry: 2,
+        retryDelay: 1000
+      })
       for (const item of data) {
         const module = npmToModule.get(item.npm)
         if (!module) continue

From 86b216d77c5c03a57eb7b7253dec2781c65b723b Mon Sep 17 00:00:00 2001
From: Florian Heuberger <fh@flogersoft.de>
Date: Wed, 4 Mar 2026 20:10:42 +0100
Subject: [PATCH 7/9] chore: refactor health badge

---
 .vscode/settings.json                       |  5 ++
 app/components/module/ModuleHealthBadge.vue | 33 ++++++++++++
 app/components/module/ModuleItem.vue        | 56 +++++++++------------
 app/pages/modules/[slug].vue                | 18 ++-----
 4 files changed, 67 insertions(+), 45 deletions(-)
 create mode 100644 .vscode/settings.json
 create mode 100644 app/components/module/ModuleHealthBadge.vue

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..55d849c4b
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "always"
+  }, 
+}
\ No newline at end of file
diff --git a/app/components/module/ModuleHealthBadge.vue b/app/components/module/ModuleHealthBadge.vue
new file mode 100644
index 000000000..fd9696848
--- /dev/null
+++ b/app/components/module/ModuleHealthBadge.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { ModuleHealth } from '#shared/types'
+
+defineProps<{
+  health: ModuleHealth
+  npm: string
+}>()
+</script>
+
+<template>
+  <UTooltip :text="`Score: ${health.score}/100`">
+    <NuxtLink
+      :to="`https://nuxt.care/?search=npm:${npm}`"
+      target="_blank"
+      class="inline-flex hover:opacity-80 transition-opacity"
+      @click.stop
+    >
+      <span class="inline-flex items-center font-medium text-xs px-2 py-1 rounded-l-md ring ring-inset ring-accented text-default bg-elevated">
+        nuxt.care
+      </span>
+      <span
+        class="inline-flex items-center font-medium capitalize text-xs px-2 py-1 rounded-r-md"
+        :style="{
+          backgroundColor: `color-mix(in srgb, ${health.color} 10%, transparent)`,
+          color: health.color,
+          boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${health.color} 25%, transparent)`
+        }"
+      >
+        {{ health.status }}
+      </span>
+    </NuxtLink>
+  </UTooltip>
+</template>
diff --git a/app/components/module/ModuleItem.vue b/app/components/module/ModuleItem.vue
index a04054a31..6974e34cb 100644
--- a/app/components/module/ModuleItem.vue
+++ b/app/components/module/ModuleItem.vue
@@ -97,7 +97,7 @@ const items = computed(() => [
         container: 'flex flex-col',
         wrapper: 'flex flex-col min-h-0 items-start',
         body: 'flex-none',
-        footer: 'w-full mt-auto pointer-events-auto pt-4 z-[1]'
+        footer: 'w-full mt-auto pointer-events-auto pt-4 z-1'
       }"
       @click="handleCardClick"
     >
@@ -111,21 +111,30 @@ const items = computed(() => [
         />
       </template>
 
-      <UBadge
-        v-if="showBadge && module.type === 'official'"
-        class="shine absolute top-4 right-4 sm:top-6 sm:right-6"
-        variant="subtle"
-        color="primary"
-        label="Official"
-      />
-
-      <UBadge
-        v-if="showBadge && module.sponsor"
-        class="shine absolute top-4 right-4 sm:top-6 sm:right-6"
-        variant="subtle"
-        color="important"
-        label="Sponsor"
-      />
+      <div
+        v-if="showBadge && (module.type === 'official' || module.sponsor || module.health)"
+        class="absolute top-4 right-4 sm:top-6 sm:right-6 flex items-center gap-2 z-1 pointer-events-auto"
+      >
+        <ModuleHealthBadge
+          v-if="module.health"
+          :health="module.health"
+          :npm="module.npm"
+        />
+        <UBadge
+          v-if="module.type === 'official'"
+          class="shine"
+          variant="subtle"
+          color="primary"
+          label="Official"
+        />
+        <UBadge
+          v-if="module.sponsor"
+          class="shine"
+          variant="subtle"
+          color="important"
+          label="Sponsor"
+        />
+      </div>
 
       <template #footer>
         <USeparator type="dashed" class="mb-4" />
@@ -153,21 +162,6 @@ const items = computed(() => [
                 <span class="text-sm font-medium whitespace-normal">{{ formatNumber(module.stats.stars || 0) }}</span>
               </NuxtLink>
             </UTooltip>
-            <UTooltip v-if="module.health" :text="`nuxt.care Score: ${module.health.score}/100`">
-              <NuxtLink
-                class="flex items-center gap-1.5 hover:opacity-80 transition-opacity"
-                :to="`https://nuxt.care/?search=npm:${module.npm}`"
-                target="_blank"
-              >
-                <span
-                  class="inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-xs font-medium capitalize"
-                  :style="{ backgroundColor: module.health.color, color: module.health.status === 'degraded' ? '#451a03' : '#fff' }"
-                >
-                  {{ module.health.status }}
-                </span>
-              </NuxtLink>
-            </UTooltip>
-
             <UTooltip v-if="selectedSort.key === 'publishedAt'" :text="`Updated ${formatDateByLocale('en', module.stats.publishedAt)}`">
               <NuxtLink
                 class="flex items-center gap-1 hover:text-highlighted"
diff --git a/app/pages/modules/[slug].vue b/app/pages/modules/[slug].vue
index 91d623f6a..4d43f5677 100644
--- a/app/pages/modules/[slug].vue
+++ b/app/pages/modules/[slug].vue
@@ -154,20 +154,10 @@ defineOgImageComponent('Module', {
         <template v-if="module.health">
           <span class="hidden lg:block text-muted">&bull;</span>
 
-          <UTooltip :text="`nuxt.care Score: ${module.health.score}/100`">
-            <NuxtLink
-              class="flex items-center gap-1.5 hover:opacity-80 transition-opacity"
-              :to="`https://nuxt.care/?search=npm:${module.npm}`"
-              target="_blank"
-            >
-              <span
-                class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium capitalize"
-                :style="{ backgroundColor: module.health.color, color: module.health.status === 'degraded' ? '#451a03' : '#fff' }"
-              >
-                {{ module.health.status }}
-              </span>
-            </NuxtLink>
-          </UTooltip>
+          <ModuleHealthBadge
+            :health="module.health"
+            :npm="module.npm"
+          />
         </template>
 
         <div class="mx-3 h-6 border-l border-gray-200 dark:border-gray-800 w-px hidden lg:block" />

From cbd6a7822da822994c098a05103e66a89316cac3 Mon Sep 17 00:00:00 2001
From: Florian Heuberger <fh@flogersoft.de>
Date: Thu, 5 Mar 2026 19:21:47 +0100
Subject: [PATCH 8/9] fix: badge name, remove wrong settings.json

---
 .vscode/settings.json                       | 5 -----
 app/components/module/ModuleHealthBadge.vue | 2 +-
 2 files changed, 1 insertion(+), 6 deletions(-)
 delete mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index 55d849c4b..000000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "always"
-  }, 
-}
\ No newline at end of file
diff --git a/app/components/module/ModuleHealthBadge.vue b/app/components/module/ModuleHealthBadge.vue
index fd9696848..502070319 100644
--- a/app/components/module/ModuleHealthBadge.vue
+++ b/app/components/module/ModuleHealthBadge.vue
@@ -16,7 +16,7 @@ defineProps<{
       @click.stop
     >
       <span class="inline-flex items-center font-medium text-xs px-2 py-1 rounded-l-md ring ring-inset ring-accented text-default bg-elevated">
-        nuxt.care
+        Health
       </span>
       <span
         class="inline-flex items-center font-medium capitalize text-xs px-2 py-1 rounded-r-md"

From 80d765dff25c29d7aaad56a2a5a4c0f3de3ca88a Mon Sep 17 00:00:00 2001
From: Florian Heuberger <florian.heuberger@da-dg.de>
Date: Mon, 9 Mar 2026 08:56:54 +0100
Subject: [PATCH 9/9] chore: health badge makeover

---
 app/components/module/ModuleHealthBadge.vue | 33 ---------------------
 app/components/module/ModuleItem.vue        | 21 +++++++++----
 app/pages/modules/[slug].vue                | 15 ++++++----
 3 files changed, 26 insertions(+), 43 deletions(-)
 delete mode 100644 app/components/module/ModuleHealthBadge.vue

diff --git a/app/components/module/ModuleHealthBadge.vue b/app/components/module/ModuleHealthBadge.vue
deleted file mode 100644
index 502070319..000000000
--- a/app/components/module/ModuleHealthBadge.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import type { ModuleHealth } from '#shared/types'
-
-defineProps<{
-  health: ModuleHealth
-  npm: string
-}>()
-</script>
-
-<template>
-  <UTooltip :text="`Score: ${health.score}/100`">
-    <NuxtLink
-      :to="`https://nuxt.care/?search=npm:${npm}`"
-      target="_blank"
-      class="inline-flex hover:opacity-80 transition-opacity"
-      @click.stop
-    >
-      <span class="inline-flex items-center font-medium text-xs px-2 py-1 rounded-l-md ring ring-inset ring-accented text-default bg-elevated">
-        Health
-      </span>
-      <span
-        class="inline-flex items-center font-medium capitalize text-xs px-2 py-1 rounded-r-md"
-        :style="{
-          backgroundColor: `color-mix(in srgb, ${health.color} 10%, transparent)`,
-          color: health.color,
-          boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${health.color} 25%, transparent)`
-        }"
-      >
-        {{ health.status }}
-      </span>
-    </NuxtLink>
-  </UTooltip>
-</template>
diff --git a/app/components/module/ModuleItem.vue b/app/components/module/ModuleItem.vue
index 6974e34cb..d91692cd8 100644
--- a/app/components/module/ModuleItem.vue
+++ b/app/components/module/ModuleItem.vue
@@ -115,11 +115,6 @@ const items = computed(() => [
         v-if="showBadge && (module.type === 'official' || module.sponsor || module.health)"
         class="absolute top-4 right-4 sm:top-6 sm:right-6 flex items-center gap-2 z-1 pointer-events-auto"
       >
-        <ModuleHealthBadge
-          v-if="module.health"
-          :health="module.health"
-          :npm="module.npm"
-        />
         <UBadge
           v-if="module.type === 'official'"
           class="shine"
@@ -162,6 +157,22 @@ const items = computed(() => [
                 <span class="text-sm font-medium whitespace-normal">{{ formatNumber(module.stats.stars || 0) }}</span>
               </NuxtLink>
             </UTooltip>
+
+            <template v-if="module.health">
+              <UTooltip :text="`Health: ${module.health.status} - ${module.health.score}/100`">
+                <NuxtLink
+                  :to="`https://nuxt.care/?search=npm:${module.npm}`"
+                  class="flex items-center gap-1 hover:text-highlighted"
+                  target="_blank"
+                >
+                  <UIcon name="i-lucide-heart-pulse" class="size-4 shrink-0" :style="{ color: module.health.color }" />
+                  <span class="text-sm font-medium whitespace-normal">
+                    {{ module.health.score }}
+                  </span>
+                </NuxtLink>
+              </UTooltip>
+            </template>
+
             <UTooltip v-if="selectedSort.key === 'publishedAt'" :text="`Updated ${formatDateByLocale('en', module.stats.publishedAt)}`">
               <NuxtLink
                 class="flex items-center gap-1 hover:text-highlighted"
diff --git a/app/pages/modules/[slug].vue b/app/pages/modules/[slug].vue
index 4d43f5677..f31c3c8d3 100644
--- a/app/pages/modules/[slug].vue
+++ b/app/pages/modules/[slug].vue
@@ -153,11 +153,16 @@ defineOgImageComponent('Module', {
 
         <template v-if="module.health">
           <span class="hidden lg:block text-muted">&bull;</span>
-
-          <ModuleHealthBadge
-            :health="module.health"
-            :npm="module.npm"
-          />
+          <UTooltip :text="`Health: ${module.health.status} - ${module.health.score}/100`">
+            <NuxtLink
+              :to="`https://nuxt.care/?search=npm:${module.npm}`"
+              class="flex items-center gap-1.5"
+              target="_blank"
+            >
+              <UIcon name="i-lucide-heart-pulse" class="size-5 shrink-0" :style="{ color: module.health.color }" />
+              <span class="text-sm font-medium">{{ module.health.score }}</span>
+            </NuxtLink>
+          </UTooltip>
         </template>
 
         <div class="mx-3 h-6 border-l border-gray-200 dark:border-gray-800 w-px hidden lg:block" />