From e24f3ac5059cefc9a636c773ee02055e27ef0cf7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B3mulo=20Ochoa=20Valez?= <romulovalez@gmail.com>
Date: Sat, 2 May 2026 09:59:11 +0200
Subject: [PATCH] feat: Add styles support on head for vue router

---
 packages/vue-router/src/Matches.tsx          |  1 +
 packages/vue-router/src/headContentUtils.tsx | 16 ++++++++++++++++
 2 files changed, 17 insertions(+)

diff --git a/packages/vue-router/src/Matches.tsx b/packages/vue-router/src/Matches.tsx
index a9851aefdce..699770ef2b0 100644
--- a/packages/vue-router/src/Matches.tsx
+++ b/packages/vue-router/src/Matches.tsx
@@ -28,6 +28,7 @@ declare module '@tanstack/router-core' {
     meta?: Array<Vue.ComponentOptions['meta'] | undefined>
     links?: Array<Vue.ComponentOptions['link'] | undefined>
     scripts?: Array<Vue.ComponentOptions['script'] | undefined>
+    styles?: Array<Vue.ComponentOptions['style'] | undefined>
     headScripts?: Array<Vue.ComponentOptions['script'] | undefined>
   }
 }
diff --git a/packages/vue-router/src/headContentUtils.tsx b/packages/vue-router/src/headContentUtils.tsx
index 79d2ee282f0..ace8f1fb52f 100644
--- a/packages/vue-router/src/headContentUtils.tsx
+++ b/packages/vue-router/src/headContentUtils.tsx
@@ -117,6 +117,21 @@ export const useTags = (assetCrossOrigin?: AssetCrossOriginConfig) => {
     return preloadMeta
   })
 
+  const styles = Vue.computed<Array<RouterManagedTag>>(() =>
+    (
+      matches.value
+        .map((match) => match.styles!)
+        .flat(1)
+        .filter(Boolean) as Array<RouterManagedTag>
+    ).map(({ children, ...style }) => ({
+      tag: 'style',
+      attrs: {
+        ...style,
+      },
+      children,
+    })),
+  )
+
   const headScripts = Vue.computed<Array<RouterManagedTag>>(() =>
     (
       matches.value
@@ -182,6 +197,7 @@ export const useTags = (assetCrossOrigin?: AssetCrossOriginConfig) => {
         ...meta.value,
         ...preloadMeta.value,
         ...links.value,
+        ...styles.value,
         ...headScripts.value,
       ] as Array<RouterManagedTag>,
       (d) => {