@tanstack/vue-router 1.140.1 → 1.141.0

package/dist/esm/Asset.js

@@ -1,4 +1,119 @@
+import * as Vue from "vue";
 import { createVNode, mergeProps } from "vue";
+import { useRouter } from "./useRouter.js";
+const Title = Vue.defineComponent({
+  name: "Title",
+  props: {
+    children: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(props) {
+    const router = useRouter();
+    if (!router.isServer) {
+      Vue.onMounted(() => {
+        if (props.children) {
+          document.title = props.children;
+        }
+      });
+      Vue.watch(() => props.children, (newTitle) => {
+        if (newTitle) {
+          document.title = newTitle;
+        }
+      });
+    }
+    return () => Vue.h("title", {}, props.children);
+  }
+});
+const Script = Vue.defineComponent({
+  name: "Script",
+  props: {
+    attrs: {
+      type: Object,
+      default: () => ({})
+    },
+    children: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props) {
+    const router = useRouter();
+    if (!router.isServer) {
+      Vue.onMounted(() => {
+        const attrs = props.attrs;
+        const children = props.children;
+        if (attrs?.src) {
+          const normSrc = (() => {
+            try {
+              const base = document.baseURI || window.location.href;
+              return new URL(attrs.src, base).href;
+            } catch {
+              return attrs.src;
+            }
+          })();
+          const existingScript = Array.from(document.querySelectorAll("script[src]")).find((el) => el.src === normSrc);
+          if (existingScript) {
+            return;
+          }
+          const script = document.createElement("script");
+          for (const [key, value] of Object.entries(attrs)) {
+            if (value !== void 0 && value !== false) {
+              script.setAttribute(key, typeof value === "boolean" ? "" : String(value));
+            }
+          }
+          document.head.appendChild(script);
+        } else if (typeof children === "string") {
+          const typeAttr = typeof attrs?.type === "string" ? attrs.type : "text/javascript";
+          const nonceAttr = typeof attrs?.nonce === "string" ? attrs.nonce : void 0;
+          const existingScript = Array.from(document.querySelectorAll("script:not([src])")).find((el) => {
+            if (!(el instanceof HTMLScriptElement)) return false;
+            const sType = el.getAttribute("type") ?? "text/javascript";
+            const sNonce = el.getAttribute("nonce") ?? void 0;
+            return el.textContent === children && sType === typeAttr && sNonce === nonceAttr;
+          });
+          if (existingScript) {
+            return;
+          }
+          const script = document.createElement("script");
+          script.textContent = children;
+          if (attrs) {
+            for (const [key, value] of Object.entries(attrs)) {
+              if (value !== void 0 && value !== false) {
+                script.setAttribute(key, typeof value === "boolean" ? "" : String(value));
+              }
+            }
+          }
+          document.head.appendChild(script);
+        }
+      });
+    }
+    return () => {
+      if (!router.isServer) {
+        const {
+          src: _src,
+          ...rest
+        } = props.attrs || {};
+        return Vue.h("script", {
+          ...rest,
+          "data-allow-mismatch": true,
+          innerHTML: ""
+        });
+      }
+      if (props.attrs?.src && typeof props.attrs.src === "string") {
+        return Vue.h("script", props.attrs);
+      }
+      if (typeof props.children === "string") {
+        return Vue.h("script", {
+          ...props.attrs,
+          innerHTML: props.children
+        });
+      }
+      return null;
+    };
+  }
+});
 function Asset({
   tag,
   attrs,
@@ -6,7 +121,9 @@ function Asset({
 }) {
   switch (tag) {
     case "title":
-      return createVNode("title", attrs, [children]);
+      return Vue.h(Title, {
+        children
+      });
     case "meta":
       return createVNode("meta", attrs, null);
     case "link":
@@ -16,13 +133,10 @@ function Asset({
         "innerHTML": children
       }), null);
     case "script":
-      if (attrs && attrs.src) {
-        return createVNode("script", attrs, null);
-      }
-      if (typeof children === "string") return createVNode("script", mergeProps(attrs, {
-        "innerHTML": children
-      }), null);
-      return null;
+      return Vue.h(Script, {
+        attrs,
+        children
+      });
     default:
       return null;
   }

package/dist/esm/Asset.js.map

@@ -1 +1 @@
-{"version":3,"file":"Asset.js","sources":["../../src/Asset.tsx"],"sourcesContent":["import type { RouterManagedTag } from '@tanstack/router-core'\n\nexport function Asset({ tag, attrs, children }: RouterManagedTag): any {\n  switch (tag) {\n    case 'title':\n      return <title {...attrs}>{children}</title>\n    case 'meta':\n      return <meta {...attrs} />\n    case 'link':\n      return <link {...attrs} />\n    case 'style':\n      return <style {...attrs} innerHTML={children} />\n    case 'script':\n      if ((attrs as any) && (attrs as any).src) {\n        return <script {...attrs} />\n      }\n      if (typeof children === 'string')\n        return <script {...attrs} innerHTML={children} />\n      return null\n    default:\n      return null\n  }\n}\n"],"names":["Asset","tag","attrs","children","_createVNode","_mergeProps","src"],"mappings":";AAEO,SAASA,MAAM;AAAA,EAAEC;AAAAA,EAAKC;AAAAA,EAAOC;AAA2B,GAAQ;AACrE,UAAQF,KAAG;AAAA,IACT,KAAK;AACH,aAAAG,YAAA,SAAkBF,OAAK,CAAGC,QAAQ,CAAA;AAAA,IACpC,KAAK;AACH,aAAAC,oBAAiBF,OAAK,IAAA;AAAA,IACxB,KAAK;AACH,aAAAE,oBAAiBF,OAAK,IAAA;AAAA,IACxB,KAAK;AACH,aAAAE,YAAA,SAAAC,WAAkBH,OAAK;AAAA,QAAA,aAAaC;AAAAA,MAAQ,CAAA,GAAA,IAAA;AAAA,IAC9C,KAAK;AACH,UAAKD,SAAkBA,MAAcI,KAAK;AACxC,eAAAF,sBAAmBF,OAAK,IAAA;AAAA,MAC1B;AACA,UAAI,OAAOC,aAAa,SACtB,QAAAC,YAAA,UAAAC,WAAmBH,OAAK;AAAA,QAAA,aAAaC;AAAAA,MAAQ,CAAA,GAAA,IAAA;AAC/C,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;"}
+{"version":3,"file":"Asset.js","sources":["../../src/Asset.tsx"],"sourcesContent":["import * as Vue from 'vue'\nimport { useRouter } from './useRouter'\nimport type { RouterManagedTag } from '@tanstack/router-core'\n\ninterface ScriptAttrs {\n  [key: string]: string | boolean | undefined\n  src?: string\n}\n\nconst Title = Vue.defineComponent({\n  name: 'Title',\n  props: {\n    children: {\n      type: String,\n      default: '',\n    },\n  },\n  setup(props) {\n    const router = useRouter()\n\n    if (!router.isServer) {\n      Vue.onMounted(() => {\n        if (props.children) {\n          document.title = props.children\n        }\n      })\n\n      Vue.watch(\n        () => props.children,\n        (newTitle) => {\n          if (newTitle) {\n            document.title = newTitle\n          }\n        },\n      )\n    }\n\n    return () => Vue.h('title', {}, props.children)\n  },\n})\n\nconst Script = Vue.defineComponent({\n  name: 'Script',\n  props: {\n    attrs: {\n      type: Object as Vue.PropType<ScriptAttrs>,\n      default: () => ({}),\n    },\n    children: {\n      type: String,\n      default: undefined,\n    },\n  },\n  setup(props) {\n    const router = useRouter()\n\n    if (!router.isServer) {\n      Vue.onMounted(() => {\n        const attrs = props.attrs\n        const children = props.children\n\n        if (attrs?.src) {\n          const normSrc = (() => {\n            try {\n              const base = document.baseURI || window.location.href\n              return new URL(attrs.src, base).href\n            } catch {\n              return attrs.src\n            }\n          })()\n          const existingScript = Array.from(\n            document.querySelectorAll('script[src]'),\n          ).find((el) => (el as HTMLScriptElement).src === normSrc)\n\n          if (existingScript) {\n            return\n          }\n\n          const script = document.createElement('script')\n\n          for (const [key, value] of Object.entries(attrs)) {\n            if (value !== undefined && value !== false) {\n              script.setAttribute(\n                key,\n                typeof value === 'boolean' ? '' : String(value),\n              )\n            }\n          }\n\n          document.head.appendChild(script)\n        } else if (typeof children === 'string') {\n          const typeAttr =\n            typeof attrs?.type === 'string' ? attrs.type : 'text/javascript'\n          const nonceAttr =\n            typeof attrs?.nonce === 'string' ? attrs.nonce : undefined\n          const existingScript = Array.from(\n            document.querySelectorAll('script:not([src])'),\n          ).find((el) => {\n            if (!(el instanceof HTMLScriptElement)) return false\n            const sType = el.getAttribute('type') ?? 'text/javascript'\n            const sNonce = el.getAttribute('nonce') ?? undefined\n            return (\n              el.textContent === children &&\n              sType === typeAttr &&\n              sNonce === nonceAttr\n            )\n          })\n\n          if (existingScript) {\n            return\n          }\n\n          const script = document.createElement('script')\n          script.textContent = children\n\n          if (attrs) {\n            for (const [key, value] of Object.entries(attrs)) {\n              if (value !== undefined && value !== false) {\n                script.setAttribute(\n                  key,\n                  typeof value === 'boolean' ? '' : String(value),\n                )\n              }\n            }\n          }\n\n          document.head.appendChild(script)\n        }\n      })\n    }\n\n    return () => {\n      if (!router.isServer) {\n        const { src: _src, ...rest } = props.attrs || {}\n        return Vue.h('script', {\n          ...rest,\n          'data-allow-mismatch': true,\n          innerHTML: '',\n        })\n      }\n\n      if (props.attrs?.src && typeof props.attrs.src === 'string') {\n        return Vue.h('script', props.attrs)\n      }\n\n      if (typeof props.children === 'string') {\n        return Vue.h('script', {\n          ...props.attrs,\n          innerHTML: props.children,\n        })\n      }\n\n      return null\n    }\n  },\n})\n\nexport function Asset({ tag, attrs, children }: RouterManagedTag): any {\n  switch (tag) {\n    case 'title':\n      return Vue.h(Title, { children: children })\n    case 'meta':\n      return <meta {...attrs} />\n    case 'link':\n      return <link {...attrs} />\n    case 'style':\n      return <style {...attrs} innerHTML={children} />\n    case 'script':\n      return Vue.h(Script, { attrs, children: children })\n    default:\n      return null\n  }\n}\n"],"names":["Title","Vue","defineComponent","name","props","children","type","String","default","setup","router","useRouter","isServer","onMounted","document","title","watch","newTitle","h","Script","attrs","Object","undefined","src","normSrc","base","baseURI","window","location","href","URL","existingScript","Array","from","querySelectorAll","find","el","script","createElement","key","value","entries","setAttribute","head","appendChild","typeAttr","nonceAttr","nonce","HTMLScriptElement","sType","getAttribute","sNonce","textContent","_src","rest","innerHTML","Asset","tag","_createVNode","_mergeProps"],"mappings":";;;AASA,MAAMA,QAAQC,IAAIC,gBAAgB;AAAA,EAChCC,MAAM;AAAA,EACNC,OAAO;AAAA,IACLC,UAAU;AAAA,MACRC,MAAMC;AAAAA,MACNC,SAAS;AAAA,IACX;AAAA;EAEFC,MAAML,OAAO;AACX,UAAMM,SAASC,UAAS;AAExB,QAAI,CAACD,OAAOE,UAAU;AACpBX,UAAIY,UAAU,MAAM;AAClB,YAAIT,MAAMC,UAAU;AAClBS,mBAASC,QAAQX,MAAMC;AAAAA,QACzB;AAAA,MACF,CAAC;AAEDJ,UAAIe,MACF,MAAMZ,MAAMC,UACXY,cAAa;AACZ,YAAIA,UAAU;AACZH,mBAASC,QAAQE;AAAAA,QACnB;AAAA,MACF,CACF;AAAA,IACF;AAEA,WAAO,MAAMhB,IAAIiB,EAAE,SAAS,CAAA,GAAId,MAAMC,QAAQ;AAAA,EAChD;AACF,CAAC;AAED,MAAMc,SAASlB,IAAIC,gBAAgB;AAAA,EACjCC,MAAM;AAAA,EACNC,OAAO;AAAA,IACLgB,OAAO;AAAA,MACLd,MAAMe;AAAAA,MACNb,SAASA,OAAO,CAAA;AAAA;IAElBH,UAAU;AAAA,MACRC,MAAMC;AAAAA,MACNC,SAASc;AAAAA,IACX;AAAA;EAEFb,MAAML,OAAO;AACX,UAAMM,SAASC,UAAS;AAExB,QAAI,CAACD,OAAOE,UAAU;AACpBX,UAAIY,UAAU,MAAM;AAClB,cAAMO,QAAQhB,MAAMgB;AACpB,cAAMf,WAAWD,MAAMC;AAEvB,YAAIe,OAAOG,KAAK;AACd,gBAAMC,WAAW,MAAM;AACrB,gBAAI;AACF,oBAAMC,OAAOX,SAASY,WAAWC,OAAOC,SAASC;AACjD,qBAAO,IAAIC,IAAIV,MAAMG,KAAKE,IAAI,EAAEI;AAAAA,YAClC,QAAQ;AACN,qBAAOT,MAAMG;AAAAA,YACf;AAAA,UACF,GAAC;AACD,gBAAMQ,iBAAiBC,MAAMC,KAC3BnB,SAASoB,iBAAiB,aAAa,CACzC,EAAEC,KAAMC,QAAQA,GAAyBb,QAAQC,OAAO;AAExD,cAAIO,gBAAgB;AAClB;AAAA,UACF;AAEA,gBAAMM,SAASvB,SAASwB,cAAc,QAAQ;AAE9C,qBAAW,CAACC,KAAKC,KAAK,KAAKnB,OAAOoB,QAAQrB,KAAK,GAAG;AAChD,gBAAIoB,UAAUlB,UAAakB,UAAU,OAAO;AAC1CH,qBAAOK,aACLH,KACA,OAAOC,UAAU,YAAY,KAAKjC,OAAOiC,KAAK,CAChD;AAAA,YACF;AAAA,UACF;AAEA1B,mBAAS6B,KAAKC,YAAYP,MAAM;AAAA,QAClC,WAAW,OAAOhC,aAAa,UAAU;AACvC,gBAAMwC,WACJ,OAAOzB,OAAOd,SAAS,WAAWc,MAAMd,OAAO;AACjD,gBAAMwC,YACJ,OAAO1B,OAAO2B,UAAU,WAAW3B,MAAM2B,QAAQzB;AACnD,gBAAMS,iBAAiBC,MAAMC,KAC3BnB,SAASoB,iBAAiB,mBAAmB,CAC/C,EAAEC,KAAMC,QAAO;AACb,gBAAI,EAAEA,cAAcY,mBAAoB,QAAO;AAC/C,kBAAMC,QAAQb,GAAGc,aAAa,MAAM,KAAK;AACzC,kBAAMC,SAASf,GAAGc,aAAa,OAAO,KAAK5B;AAC3C,mBACEc,GAAGgB,gBAAgB/C,YACnB4C,UAAUJ,YACVM,WAAWL;AAAAA,UAEf,CAAC;AAED,cAAIf,gBAAgB;AAClB;AAAA,UACF;AAEA,gBAAMM,SAASvB,SAASwB,cAAc,QAAQ;AAC9CD,iBAAOe,cAAc/C;AAErB,cAAIe,OAAO;AACT,uBAAW,CAACmB,KAAKC,KAAK,KAAKnB,OAAOoB,QAAQrB,KAAK,GAAG;AAChD,kBAAIoB,UAAUlB,UAAakB,UAAU,OAAO;AAC1CH,uBAAOK,aACLH,KACA,OAAOC,UAAU,YAAY,KAAKjC,OAAOiC,KAAK,CAChD;AAAA,cACF;AAAA,YACF;AAAA,UACF;AAEA1B,mBAAS6B,KAAKC,YAAYP,MAAM;AAAA,QAClC;AAAA,MACF,CAAC;AAAA,IACH;AAEA,WAAO,MAAM;AACX,UAAI,CAAC3B,OAAOE,UAAU;AACpB,cAAM;AAAA,UAAEW,KAAK8B;AAAAA,UAAM,GAAGC;AAAAA,QAAK,IAAIlD,MAAMgB,SAAS,CAAA;AAC9C,eAAOnB,IAAIiB,EAAE,UAAU;AAAA,UACrB,GAAGoC;AAAAA,UACH,uBAAuB;AAAA,UACvBC,WAAW;AAAA,QACb,CAAC;AAAA,MACH;AAEA,UAAInD,MAAMgB,OAAOG,OAAO,OAAOnB,MAAMgB,MAAMG,QAAQ,UAAU;AAC3D,eAAOtB,IAAIiB,EAAE,UAAUd,MAAMgB,KAAK;AAAA,MACpC;AAEA,UAAI,OAAOhB,MAAMC,aAAa,UAAU;AACtC,eAAOJ,IAAIiB,EAAE,UAAU;AAAA,UACrB,GAAGd,MAAMgB;AAAAA,UACTmC,WAAWnD,MAAMC;AAAAA,QACnB,CAAC;AAAA,MACH;AAEA,aAAO;AAAA,IACT;AAAA,EACF;AACF,CAAC;AAEM,SAASmD,MAAM;AAAA,EAAEC;AAAAA,EAAKrC;AAAAA,EAAOf;AAA2B,GAAQ;AACrE,UAAQoD,KAAG;AAAA,IACT,KAAK;AACH,aAAOxD,IAAIiB,EAAElB,OAAO;AAAA,QAAEK;AAAAA,MAAmB,CAAC;AAAA,IAC5C,KAAK;AACH,aAAAqD,oBAAiBtC,OAAK,IAAA;AAAA,IACxB,KAAK;AACH,aAAAsC,oBAAiBtC,OAAK,IAAA;AAAA,IACxB,KAAK;AACH,aAAAsC,YAAA,SAAAC,WAAkBvC,OAAK;AAAA,QAAA,aAAaf;AAAAA,MAAQ,CAAA,GAAA,IAAA;AAAA,IAC9C,KAAK;AACH,aAAOJ,IAAIiB,EAAEC,QAAQ;AAAA,QAAEC;AAAAA,QAAOf;AAAAA,MAAmB,CAAC;AAAA,IACpD;AACE,aAAO;AAAA,EACX;AACF;"}

package/dist/esm/Body.d.ts

@@ -0,0 +1,4 @@
+import * as Vue from 'vue';
+export declare const Body: Vue.DefineComponent<{}, () => Vue.VNode<Vue.RendererNode, Vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, Vue.ComponentProvideOptions, true, {}, any>;

package/dist/esm/Body.js

@@ -0,0 +1,26 @@
+import * as Vue from "vue";
+const Body = Vue.defineComponent({
+  name: "Body",
+  setup(_, {
+    slots
+  }) {
+    const isServer = typeof window === "undefined";
+    return () => {
+      const children = slots.default?.();
+      if (isServer) {
+        return Vue.h("body", {}, Vue.h("div", {
+          id: "__app"
+        }, Vue.h("div", {
+          "data-allow-mismatch": ""
+        }, children)));
+      }
+      return Vue.h("div", {
+        "data-allow-mismatch": ""
+      }, children);
+    };
+  }
+});
+export {
+  Body
+};
+//# sourceMappingURL=Body.js.map

package/dist/esm/Body.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Body.js","sources":["../../src/Body.tsx"],"sourcesContent":["import * as Vue from 'vue'\n\nexport const Body = Vue.defineComponent({\n  name: 'Body',\n  setup(_, { slots }) {\n    const isServer = typeof window === 'undefined'\n\n    return () => {\n      const children = slots.default?.()\n\n      if (isServer) {\n        return Vue.h(\n          'body',\n          {},\n          Vue.h(\n            'div',\n            { id: '__app' },\n            Vue.h('div', { 'data-allow-mismatch': '' }, children),\n          ),\n        )\n      }\n\n      return Vue.h('div', { 'data-allow-mismatch': '' }, children)\n    }\n  },\n})\n"],"names":["Body","Vue","defineComponent","name","setup","_","slots","isServer","window","children","default","h","id"],"mappings":";MAEaA,OAAOC,IAAIC,gBAAgB;AAAA,EACtCC,MAAM;AAAA,EACNC,MAAMC,GAAG;AAAA,IAAEC;AAAAA,EAAM,GAAG;AAClB,UAAMC,WAAW,OAAOC,WAAW;AAEnC,WAAO,MAAM;AACX,YAAMC,WAAWH,MAAMI,UAAO;AAE9B,UAAIH,UAAU;AACZ,eAAON,IAAIU,EACT,QACA,CAAA,GACAV,IAAIU,EACF,OACA;AAAA,UAAEC,IAAI;AAAA,QAAQ,GACdX,IAAIU,EAAE,OAAO;AAAA,UAAE,uBAAuB;AAAA,QAAG,GAAGF,QAAQ,CACtD,CACF;AAAA,MACF;AAEA,aAAOR,IAAIU,EAAE,OAAO;AAAA,QAAE,uBAAuB;AAAA,SAAMF,QAAQ;AAAA,IAC7D;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/CatchBoundary.d.ts

@@ -3,7 +3,7 @@ import * as Vue from 'vue';
 export declare function CatchBoundary(props: {
     getResetKey: () => number | string;
     children: Vue.VNode;
-    errorComponent?: ErrorRouteComponent;
+    errorComponent?: ErrorRouteComponent | Vue.Component;
     onCatch?: (error: Error) => void;
 }): Vue.VNode<Vue.RendererNode, Vue.RendererElement, {
     [key: string]: any;

package/dist/esm/CatchBoundary.js

@@ -32,12 +32,14 @@ const VueErrorBoundary = Vue.defineComponent({
     });
     return () => {
       if (error.value && slots.fallback) {
-        return slots.fallback({
+        const fallbackContent = slots.fallback({
           error: error.value,
           reset
         });
+        return Array.isArray(fallbackContent) && fallbackContent.length === 1 ? fallbackContent[0] : fallbackContent;
       }
-      return slots.default && slots.default();
+      const defaultContent = slots.default && slots.default();
+      return Array.isArray(defaultContent) && defaultContent.length === 1 ? defaultContent[0] : defaultContent;
     };
   }
 });
@@ -48,7 +50,6 @@ function CatchBoundary(props) {
     setup() {
       const resetKey = Vue.computed(() => props.getResetKey());
       return () => {
-        const defaultErrorComponent = ErrorComponent;
         return Vue.h(VueErrorBoundary, {
           resetKey: resetKey.value,
           onError: props.onCatch
@@ -63,12 +64,11 @@ function CatchBoundary(props) {
                 error,
                 reset
               });
-            } else {
-              return Vue.h(defaultErrorComponent, {
-                error,
-                reset
-              });
             }
+            return Vue.h(ErrorComponent, {
+              error,
+              reset
+            });
           }
         });
       };

package/dist/esm/CatchBoundary.js.map

@@ -1 +1 @@
-{"version":3,"file":"CatchBoundary.js","sources":["../../src/CatchBoundary.tsx"],"sourcesContent":["import * as Vue from 'vue'\nimport type { ErrorRouteComponent } from './route'\n\n// Define the error component props interface\ninterface ErrorComponentProps {\n  error: Error\n  reset: () => void\n}\n\n// Create a Vue error boundary component\nconst VueErrorBoundary = Vue.defineComponent({\n  name: 'VueErrorBoundary',\n  props: {\n    onError: Function,\n    resetKey: [String, Number],\n  },\n  emits: ['catch'],\n  setup(props, { slots }) {\n    const error = Vue.ref<Error | null>(null)\n    const resetFn = Vue.ref<(() => void) | null>(null)\n\n    const reset = () => {\n      error.value = null\n    }\n\n    // Watch for changes in the reset key\n    Vue.watch(\n      () => props.resetKey,\n      (newKey, oldKey) => {\n        if (newKey !== oldKey && error.value) {\n          reset()\n        }\n      },\n    )\n\n    // Capture errors from child components\n    Vue.onErrorCaptured((err: Error) => {\n      // If the error is a Promise (thrown for Suspense), don't treat it as an error\n      // Just ignore it - Suspense will handle it\n      if (\n        err instanceof Promise ||\n        (err && typeof (err as any).then === 'function')\n      ) {\n        return false // Prevent from propagating as an error, but don't set error state\n      }\n\n      error.value = err\n      resetFn.value = reset\n\n      // Call the onError callback if provided\n      if (props.onError) {\n        props.onError(err)\n      }\n\n      // Prevent the error from propagating further\n      return false\n    })\n\n    return () => {\n      // If there's an error, render the fallback\n      if (error.value && slots.fallback) {\n        return slots.fallback({\n          error: error.value,\n          reset,\n        })\n      }\n\n      // Otherwise render the default slot\n      return slots.default && slots.default()\n    }\n  },\n})\n\n// Main CatchBoundary component\nexport function CatchBoundary(props: {\n  getResetKey: () => number | string\n  children: Vue.VNode\n  errorComponent?: ErrorRouteComponent\n  onCatch?: (error: Error) => void\n}) {\n  // Create a component to use in the template\n  const CatchBoundaryWrapper = Vue.defineComponent({\n    name: 'CatchBoundaryWrapper',\n    inheritAttrs: false,\n    setup() {\n      const resetKey = Vue.computed(() => props.getResetKey())\n\n      return () => {\n        // Always use our default component as a safe fallback\n        const defaultErrorComponent = ErrorComponent\n\n        return Vue.h(\n          VueErrorBoundary,\n          {\n            resetKey: resetKey.value,\n            onError: props.onCatch,\n          },\n          {\n            default: () => props.children,\n            fallback: ({ error, reset }: ErrorComponentProps) => {\n              // Safely render the error component - either the provided one or the default\n              if (props.errorComponent) {\n                // Use the provided error component\n                return Vue.h(props.errorComponent, { error, reset })\n              } else {\n                // Use the default error component\n                return Vue.h(defaultErrorComponent, { error, reset })\n              }\n            },\n          },\n        )\n      }\n    },\n  })\n\n  return Vue.h(CatchBoundaryWrapper)\n}\n\n// Error component\nexport const ErrorComponent = Vue.defineComponent({\n  name: 'ErrorComponent',\n  props: {\n    error: Object,\n    reset: Function,\n  },\n  setup(props) {\n    const show = Vue.ref(process.env.NODE_ENV !== 'production')\n\n    const toggleShow = () => {\n      show.value = !show.value\n    }\n\n    return () =>\n      Vue.h('div', { style: { padding: '.5rem', maxWidth: '100%' } }, [\n        Vue.h(\n          'div',\n          { style: { display: 'flex', alignItems: 'center', gap: '.5rem' } },\n          [\n            Vue.h(\n              'strong',\n              { style: { fontSize: '1rem' } },\n              'Something went wrong!',\n            ),\n            Vue.h(\n              'button',\n              {\n                style: {\n                  appearance: 'none',\n                  fontSize: '.6em',\n                  border: '1px solid currentColor',\n                  padding: '.1rem .2rem',\n                  fontWeight: 'bold',\n                  borderRadius: '.25rem',\n                },\n                onClick: toggleShow,\n              },\n              show.value ? 'Hide Error' : 'Show Error',\n            ),\n          ],\n        ),\n        Vue.h('div', { style: { height: '.25rem' } }),\n        show.value\n          ? Vue.h('div', {}, [\n              Vue.h(\n                'pre',\n                {\n                  style: {\n                    fontSize: '.7em',\n                    border: '1px solid red',\n                    borderRadius: '.25rem',\n                    padding: '.3rem',\n                    color: 'red',\n                    overflow: 'auto',\n                  },\n                },\n                [\n                  props.error?.message\n                    ? Vue.h('code', {}, props.error.message)\n                    : null,\n                ],\n              ),\n            ])\n          : null,\n      ])\n  },\n})\n"],"names":["VueErrorBoundary","Vue","defineComponent","name","props","onError","Function","resetKey","String","Number","emits","setup","slots","error","ref","resetFn","reset","value","watch","newKey","oldKey","onErrorCaptured","err","Promise","then","fallback","default","CatchBoundary","CatchBoundaryWrapper","inheritAttrs","computed","getResetKey","defaultErrorComponent","ErrorComponent","h","onCatch","children","errorComponent","Object","show","process","env","NODE_ENV","toggleShow","style","padding","maxWidth","display","alignItems","gap","fontSize","appearance","border","fontWeight","borderRadius","onClick","height","color","overflow","message"],"mappings":"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"}
+{"version":3,"file":"CatchBoundary.js","sources":["../../src/CatchBoundary.tsx"],"sourcesContent":["import * as Vue from 'vue'\nimport type { ErrorRouteComponent } from './route'\n\ninterface ErrorComponentProps {\n  error: Error\n  reset: () => void\n}\n\nconst VueErrorBoundary = Vue.defineComponent({\n  name: 'VueErrorBoundary',\n  props: {\n    onError: Function,\n    resetKey: [String, Number],\n  },\n  emits: ['catch'],\n  setup(props, { slots }) {\n    const error = Vue.ref<Error | null>(null)\n    const resetFn = Vue.ref<(() => void) | null>(null)\n\n    const reset = () => {\n      error.value = null\n    }\n\n    Vue.watch(\n      () => props.resetKey,\n      (newKey, oldKey) => {\n        if (newKey !== oldKey && error.value) {\n          reset()\n        }\n      },\n    )\n\n    Vue.onErrorCaptured((err: Error) => {\n      if (\n        err instanceof Promise ||\n        (err && typeof (err as any).then === 'function')\n      ) {\n        return false\n      }\n\n      error.value = err\n      resetFn.value = reset\n\n      if (props.onError) {\n        props.onError(err)\n      }\n\n      return false\n    })\n\n    return () => {\n      if (error.value && slots.fallback) {\n        const fallbackContent = slots.fallback({\n          error: error.value,\n          reset,\n        })\n        return Array.isArray(fallbackContent) && fallbackContent.length === 1\n          ? fallbackContent[0]\n          : fallbackContent\n      }\n\n      const defaultContent = slots.default && slots.default()\n      return Array.isArray(defaultContent) && defaultContent.length === 1\n        ? defaultContent[0]\n        : defaultContent\n    }\n  },\n})\n\nexport function CatchBoundary(props: {\n  getResetKey: () => number | string\n  children: Vue.VNode\n  errorComponent?: ErrorRouteComponent | Vue.Component\n  onCatch?: (error: Error) => void\n}) {\n  const CatchBoundaryWrapper = Vue.defineComponent({\n    name: 'CatchBoundaryWrapper',\n    inheritAttrs: false,\n    setup() {\n      const resetKey = Vue.computed(() => props.getResetKey())\n\n      return () => {\n        return Vue.h(\n          VueErrorBoundary,\n          {\n            resetKey: resetKey.value,\n            onError: props.onCatch,\n          },\n          {\n            default: () => props.children,\n            fallback: ({ error, reset }: ErrorComponentProps) => {\n              if (props.errorComponent) {\n                return Vue.h(props.errorComponent, { error, reset })\n              }\n              return Vue.h(ErrorComponent, { error, reset })\n            },\n          },\n        )\n      }\n    },\n  })\n\n  return Vue.h(CatchBoundaryWrapper)\n}\n\nexport const ErrorComponent = Vue.defineComponent({\n  name: 'ErrorComponent',\n  props: {\n    error: Object,\n    reset: Function,\n  },\n  setup(props) {\n    const show = Vue.ref(process.env.NODE_ENV !== 'production')\n\n    const toggleShow = () => {\n      show.value = !show.value\n    }\n\n    return () =>\n      Vue.h('div', { style: { padding: '.5rem', maxWidth: '100%' } }, [\n        Vue.h(\n          'div',\n          { style: { display: 'flex', alignItems: 'center', gap: '.5rem' } },\n          [\n            Vue.h(\n              'strong',\n              { style: { fontSize: '1rem' } },\n              'Something went wrong!',\n            ),\n            Vue.h(\n              'button',\n              {\n                style: {\n                  appearance: 'none',\n                  fontSize: '.6em',\n                  border: '1px solid currentColor',\n                  padding: '.1rem .2rem',\n                  fontWeight: 'bold',\n                  borderRadius: '.25rem',\n                },\n                onClick: toggleShow,\n              },\n              show.value ? 'Hide Error' : 'Show Error',\n            ),\n          ],\n        ),\n        Vue.h('div', { style: { height: '.25rem' } }),\n        show.value\n          ? Vue.h('div', {}, [\n              Vue.h(\n                'pre',\n                {\n                  style: {\n                    fontSize: '.7em',\n                    border: '1px solid red',\n                    borderRadius: '.25rem',\n                    padding: '.3rem',\n                    color: 'red',\n                    overflow: 'auto',\n                  },\n                },\n                [\n                  props.error?.message\n                    ? Vue.h('code', {}, props.error.message)\n                    : null,\n                ],\n              ),\n            ])\n          : null,\n      ])\n  },\n})\n"],"names":["VueErrorBoundary","Vue","defineComponent","name","props","onError","Function","resetKey","String","Number","emits","setup","slots","error","ref","resetFn","reset","value","watch","newKey","oldKey","onErrorCaptured","err","Promise","then","fallback","fallbackContent","Array","isArray","length","defaultContent","default","CatchBoundary","CatchBoundaryWrapper","inheritAttrs","computed","getResetKey","h","onCatch","children","errorComponent","ErrorComponent","Object","show","process","env","NODE_ENV","toggleShow","style","padding","maxWidth","display","alignItems","gap","fontSize","appearance","border","fontWeight","borderRadius","onClick","height","color","overflow","message"],"mappings":"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"}

package/dist/esm/Html.d.ts

@@ -0,0 +1,4 @@
+import * as Vue from 'vue';
+export declare const Html: Vue.DefineComponent<{}, () => Vue.VNode<Vue.RendererNode, Vue.RendererElement, {
+    [key: string]: any;
+}> | undefined, {}, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, Vue.ComponentProvideOptions, true, {}, any>;

package/dist/esm/Html.js

@@ -0,0 +1,63 @@
+import * as Vue from "vue";
+import { Body } from "./Body.js";
+const Html = Vue.defineComponent({
+  name: "Html",
+  setup(_, {
+    slots
+  }) {
+    const isServer = typeof window === "undefined";
+    const hydrated = Vue.ref(false);
+    if (!isServer) {
+      Vue.onMounted(() => {
+        hydrated.value = true;
+      });
+    }
+    return () => {
+      if (isServer) {
+        return Vue.h("html", {}, slots.default?.());
+      }
+      const children = slots.default?.() || [];
+      const flatChildren = Array.isArray(children) ? children : [children];
+      let bodyVnode = null;
+      const headChildren = [];
+      for (const child of flatChildren) {
+        if (typeof child === "object" && child !== null) {
+          const vnode = child;
+          if (vnode.type === "head") {
+            if (vnode.children) {
+              if (Array.isArray(vnode.children)) {
+                for (const c of vnode.children) {
+                  if (typeof c === "object" && c !== null && "type" in c) {
+                    headChildren.push(c);
+                  }
+                }
+              }
+            }
+            continue;
+          }
+          if (vnode.type === Body) {
+            bodyVnode = vnode;
+            continue;
+          }
+          if (!bodyVnode) {
+            bodyVnode = vnode;
+          }
+        }
+      }
+      const result = [];
+      if (bodyVnode) {
+        result.push(bodyVnode);
+      }
+      if (hydrated.value && headChildren.length > 0) {
+        result.push(Vue.h(Vue.Teleport, {
+          to: "head"
+        }, headChildren));
+      }
+      return result.length === 1 ? result[0] : Vue.h(Vue.Fragment, result);
+    };
+  }
+});
+export {
+  Html
+};
+//# sourceMappingURL=Html.js.map

package/dist/esm/Html.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Html.js","sources":["../../src/Html.tsx"],"sourcesContent":["import * as Vue from 'vue'\nimport { Body } from './Body'\n\nexport const Html = Vue.defineComponent({\n  name: 'Html',\n  setup(_, { slots }) {\n    const isServer = typeof window === 'undefined'\n\n    const hydrated = Vue.ref(false)\n\n    if (!isServer) {\n      Vue.onMounted(() => {\n        hydrated.value = true\n      })\n    }\n\n    return () => {\n      if (isServer) {\n        return Vue.h('html', {}, slots.default?.())\n      }\n\n      const children = slots.default?.() || []\n      const flatChildren = Array.isArray(children) ? children : [children]\n      let bodyVnode: Vue.VNode | null = null\n      const headChildren: Array<Vue.VNode> = []\n\n      for (const child of flatChildren) {\n        if (typeof child === 'object' && child !== null) {\n          const vnode = child\n          if (vnode.type === 'head') {\n            if (vnode.children) {\n              if (Array.isArray(vnode.children)) {\n                for (const c of vnode.children) {\n                  if (typeof c === 'object' && c !== null && 'type' in c) {\n                    headChildren.push(c as Vue.VNode)\n                  }\n                }\n              }\n            }\n            continue\n          }\n          if (vnode.type === Body) {\n            bodyVnode = vnode\n            continue\n          }\n          if (!bodyVnode) {\n            bodyVnode = vnode\n          }\n        }\n      }\n\n      const result: Array<Vue.VNode> = []\n\n      if (bodyVnode) {\n        result.push(bodyVnode)\n      }\n\n      if (hydrated.value && headChildren.length > 0) {\n        result.push(Vue.h(Vue.Teleport, { to: 'head' }, headChildren))\n      }\n\n      return result.length === 1 ? result[0] : Vue.h(Vue.Fragment, result)\n    }\n  },\n})\n"],"names":["Html","Vue","defineComponent","name","setup","_","slots","isServer","window","hydrated","ref","onMounted","value","h","default","children","flatChildren","Array","isArray","bodyVnode","headChildren","child","vnode","type","c","push","Body","result","length","Teleport","to","Fragment"],"mappings":";;MAGaA,OAAOC,IAAIC,gBAAgB;AAAA,EACtCC,MAAM;AAAA,EACNC,MAAMC,GAAG;AAAA,IAAEC;AAAAA,EAAM,GAAG;AAClB,UAAMC,WAAW,OAAOC,WAAW;AAEnC,UAAMC,WAAWR,IAAIS,IAAI,KAAK;AAE9B,QAAI,CAACH,UAAU;AACbN,UAAIU,UAAU,MAAM;AAClBF,iBAASG,QAAQ;AAAA,MACnB,CAAC;AAAA,IACH;AAEA,WAAO,MAAM;AACX,UAAIL,UAAU;AACZ,eAAON,IAAIY,EAAE,QAAQ,CAAA,GAAIP,MAAMQ,WAAW;AAAA,MAC5C;AAEA,YAAMC,WAAWT,MAAMQ,UAAO,KAAQ,CAAA;AACtC,YAAME,eAAeC,MAAMC,QAAQH,QAAQ,IAAIA,WAAW,CAACA,QAAQ;AACnE,UAAII,YAA8B;AAClC,YAAMC,eAAiC,CAAA;AAEvC,iBAAWC,SAASL,cAAc;AAChC,YAAI,OAAOK,UAAU,YAAYA,UAAU,MAAM;AAC/C,gBAAMC,QAAQD;AACd,cAAIC,MAAMC,SAAS,QAAQ;AACzB,gBAAID,MAAMP,UAAU;AAClB,kBAAIE,MAAMC,QAAQI,MAAMP,QAAQ,GAAG;AACjC,2BAAWS,KAAKF,MAAMP,UAAU;AAC9B,sBAAI,OAAOS,MAAM,YAAYA,MAAM,QAAQ,UAAUA,GAAG;AACtDJ,iCAAaK,KAAKD,CAAc;AAAA,kBAClC;AAAA,gBACF;AAAA,cACF;AAAA,YACF;AACA;AAAA,UACF;AACA,cAAIF,MAAMC,SAASG,MAAM;AACvBP,wBAAYG;AACZ;AAAA,UACF;AACA,cAAI,CAACH,WAAW;AACdA,wBAAYG;AAAAA,UACd;AAAA,QACF;AAAA,MACF;AAEA,YAAMK,SAA2B,CAAA;AAEjC,UAAIR,WAAW;AACbQ,eAAOF,KAAKN,SAAS;AAAA,MACvB;AAEA,UAAIV,SAASG,SAASQ,aAAaQ,SAAS,GAAG;AAC7CD,eAAOF,KAAKxB,IAAIY,EAAEZ,IAAI4B,UAAU;AAAA,UAAEC,IAAI;AAAA,WAAUV,YAAY,CAAC;AAAA,MAC/D;AAEA,aAAOO,OAAOC,WAAW,IAAID,OAAO,CAAC,IAAI1B,IAAIY,EAAEZ,IAAI8B,UAAUJ,MAAM;AAAA,IACrE;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/Match.js

@@ -19,13 +19,33 @@ const Match = Vue.defineComponent({
   },
   setup(props) {
     const router = useRouter();
-    const routeId = useRouterState({
+    let lastKnownRouteId = null;
+    const matchData = useRouterState({
       select: (s) => {
-        return s.matches.find((d) => d.id === props.matchId)?.routeId;
+        let match = s.matches.find((d) => d.id === props.matchId);
+        let matchIndex = match ? s.matches.findIndex((d) => d.id === props.matchId) : -1;
+        if (match) {
+          lastKnownRouteId = match.routeId;
+        } else if (lastKnownRouteId) {
+          match = s.matches.find((d) => d.routeId === lastKnownRouteId);
+          matchIndex = match ? s.matches.findIndex((d) => d.routeId === lastKnownRouteId) : -1;
+        }
+        if (!match) {
+          return null;
+        }
+        const routeId = match.routeId;
+        const parentRouteId = matchIndex > 0 ? s.matches[matchIndex - 1]?.routeId : null;
+        return {
+          matchId: match.id,
+          // Return the actual matchId (may differ from props.matchId)
+          routeId,
+          parentRouteId,
+          loadedAt: s.loadedAt
+        };
       }
     });
-    invariant(routeId.value, `Could not find routeId for matchId "${props.matchId}". Please file an issue!`);
-    const route = Vue.computed(() => router.routesById[routeId.value]);
+    invariant(matchData.value, `Could not find routeId for matchId "${props.matchId}". Please file an issue!`);
+    const route = Vue.computed(() => matchData.value ? router.routesById[matchData.value.routeId] : null);
     const PendingComponent = Vue.computed(() => route.value?.options?.pendingComponent ?? router?.options?.defaultPendingComponent);
     const routeErrorComponent = Vue.computed(() => route.value?.options?.errorComponent ?? router?.options?.defaultErrorComponent);
     const routeOnCatch = Vue.computed(() => route.value?.options?.onCatch ?? router?.options?.defaultOnCatch);
@@ -33,30 +53,22 @@ const Match = Vue.defineComponent({
       // If it's the root route, use the globalNotFound option, with fallback to the notFoundRoute's component
       route.value?.options?.notFoundComponent ?? router?.options?.notFoundRoute?.options?.component
     ) : route.value?.options?.notFoundComponent);
-    const resetKey = useRouterState({
-      select: (s) => s.loadedAt
-    });
-    const parentRouteId = useRouterState({
-      select: (s) => {
-        const index = s.matches.findIndex((d) => d.id === props.matchId);
-        return s.matches[index - 1]?.routeId;
-      }
-    });
-    const matchIdRef = Vue.ref(props.matchId);
-    Vue.watch(() => props.matchId, (newMatchId) => {
-      matchIdRef.value = newMatchId;
+    const matchIdRef = Vue.ref(matchData.value?.matchId ?? props.matchId);
+    Vue.watch([() => props.matchId, () => matchData.value?.matchId], ([propsMatchId, dataMatchId]) => {
+      matchIdRef.value = dataMatchId ?? propsMatchId;
     }, {
       immediate: true
     });
     Vue.provide(matchContext, matchIdRef);
     return () => {
+      const actualMatchId = matchData.value?.matchId ?? props.matchId;
       let content = Vue.h(MatchInner, {
-        matchId: props.matchId
+        matchId: actualMatchId
       });
       if (routeNotFoundComponent.value) {
         content = Vue.h(CatchNotFound, {
           fallback: (error) => {
-            if (!routeNotFoundComponent.value || error.routeId && error.routeId !== routeId.value || !error.routeId && route.value && !route.value.isRoot) throw error;
+            if (!routeNotFoundComponent.value || error.routeId && error.routeId !== matchData.value?.routeId || !error.routeId && route.value && !route.value.isRoot) throw error;
             return Vue.h(routeNotFoundComponent.value, error);
           },
           children: content
@@ -64,11 +76,11 @@ const Match = Vue.defineComponent({
       }
       if (routeErrorComponent.value) {
         content = CatchBoundary({
-          getResetKey: () => resetKey.value,
+          getResetKey: () => matchData.value?.loadedAt ?? 0,
           errorComponent: routeErrorComponent.value || ErrorComponent,
           onCatch: (error) => {
             if (isNotFound(error)) throw error;
-            warning(false, `Error in route match: ${props.matchId}`);
+            warning(false, `Error in route match: ${actualMatchId}`);
             routeOnCatch.value?.(error);
           },
           children: content
@@ -82,7 +94,10 @@ const Match = Vue.defineComponent({
           default: () => content
         });
       }
-      const withScrollRestoration = [content, parentRouteId.value === rootRouteId && router.options.scrollRestoration ? Vue.h(Vue.Fragment, null, [Vue.h(OnRendered), Vue.h(ScrollRestoration)]) : null].filter(Boolean);
+      const withScrollRestoration = [content, matchData.value?.parentRouteId === rootRouteId && router.options.scrollRestoration ? Vue.h(Vue.Fragment, null, [Vue.h(OnRendered), Vue.h(ScrollRestoration)]) : null].filter(Boolean);
+      if (withScrollRestoration.length === 1) {
+        return withScrollRestoration[0];
+      }
       return Vue.h(Vue.Fragment, null, withScrollRestoration);
     };
   }
@@ -117,47 +132,52 @@ const MatchInner = Vue.defineComponent({
   },
   setup(props) {
     const router = useRouter();
-    const matchState = useRouterState({
+    let lastKnownRouteId = null;
+    const combinedState = useRouterState({
       select: (s) => {
-        const match2 = s.matches.find((d) => d.id === props.matchId);
+        let match2 = s.matches.find((d) => d.id === props.matchId);
+        if (match2) {
+          lastKnownRouteId = match2.routeId;
+        } else if (lastKnownRouteId) {
+          const sameRouteMatch = s.matches.find((d) => d.routeId === lastKnownRouteId);
+          if (sameRouteMatch) {
+            match2 = sameRouteMatch;
+          }
+        }
         if (!match2) {
           return null;
         }
         const routeId = match2.routeId;
         const remountFn = router.routesById[routeId].options.remountDeps ?? router.options.defaultRemountDeps;
-        const remountDeps = remountFn?.({
-          routeId,
-          loaderDeps: match2.loaderDeps,
-          params: match2._strictParams,
-          search: match2._strictSearch
-        });
-        const key = remountDeps ? JSON.stringify(remountDeps) : void 0;
+        let remountKey2;
+        if (remountFn) {
+          const remountDeps = remountFn({
+            routeId,
+            loaderDeps: match2.loaderDeps,
+            params: match2._strictParams,
+            search: match2._strictSearch
+          });
+          remountKey2 = remountDeps ? JSON.stringify(remountDeps) : void 0;
+        }
         return {
-          key,
           routeId,
           match: {
             id: match2.id,
             status: match2.status,
             error: match2.error
-          }
+          },
+          remountKey: remountKey2
         };
       }
     });
     const route = Vue.computed(() => {
-      if (!matchState.value) return null;
-      return router.routesById[matchState.value.routeId];
-    });
-    const match = Vue.computed(() => matchState.value?.match);
-    const out = Vue.computed(() => {
-      if (!route.value) return null;
-      const Comp = route.value.options.component ?? router.options.defaultComponent;
-      if (Comp) {
-        return Vue.h(Comp);
-      }
-      return Vue.h(Outlet);
+      if (!combinedState.value) return null;
+      return router.routesById[combinedState.value.routeId];
     });
+    const match = Vue.computed(() => combinedState.value?.match);
+    const remountKey = Vue.computed(() => combinedState.value?.remountKey);
     return () => {
-      if (!matchState.value || !match.value || !route.value) {
+      if (!combinedState.value || !match.value || !route.value) {
         return null;
       }
       if (match.value.status === "notFound") {
@@ -202,7 +222,16 @@ const MatchInner = Vue.defineComponent({
         }
         return null;
       }
-      return out.value;
+      const Comp = route.value.options.component ?? router.options.defaultComponent;
+      const key = remountKey.value;
+      if (Comp) {
+        return Vue.h(Comp, key !== void 0 ? {
+          key
+        } : void 0);
+      }
+      return Vue.h(Outlet, key !== void 0 ? {
+        key
+      } : void 0);
     };
   }
 });
@@ -226,22 +255,31 @@ const Outlet = Vue.defineComponent({
         return parentMatch.globalNotFound;
       }
     });
-    const childMatchId = useRouterState({
+    const childMatchData = useRouterState({
       select: (s) => {
         const matches = s.matches;
         const index = matches.findIndex((d) => d.id === safeMatchId.value);
-        return matches[index + 1]?.id;
+        const child = matches[index + 1];
+        if (!child) return null;
+        return {
+          id: child.id,
+          // Key based on routeId + params only (not loaderDeps)
+          // This ensures component recreates when params change,
+          // but NOT when only loaderDeps change
+          paramsKey: child.routeId + JSON.stringify(child._strictParams)
+        };
       }
     });
     return () => {
       if (parentGlobalNotFound.value) {
         return renderRouteNotFound(router, route.value, void 0);
       }
-      if (!childMatchId.value) {
+      if (!childMatchData.value) {
         return null;
       }
       const nextMatch = Vue.h(Match, {
-        matchId: childMatchId.value
+        matchId: childMatchData.value.id,
+        key: childMatchData.value.paramsKey
       });
       if (safeMatchId.value === rootRouteId) {
         return Vue.h(Vue.Suspense, {