@tanstack/vue-router-devtools 1.141.2 → 1.141.4

package/dist/esm/TanStackRouterDevtools.js

@@ -6,6 +6,7 @@ const TanStackRouterDevtools = /* @__PURE__ */ defineComponent({
   props: ["initialIsOpen", "panelProps", "closeButtonProps", "toggleButtonProps", "position", "containerElement", "router", "shadowDOMTarget"],
   setup(props) {
     const devToolRef = ref(null);
+    let isMounted = false;
     const hookRouter = useRouter({
       warn: false
     });
@@ -44,10 +45,13 @@ const TanStackRouterDevtools = /* @__PURE__ */ defineComponent({
     onMounted(() => {
       if (devToolRef.value) {
         devtools.mount(devToolRef.value);
+        isMounted = true;
       }
     });
     onUnmounted(() => {
-      devtools.unmount();
+      if (isMounted) {
+        devtools.unmount();
+      }
     });
     return () => h("div", {
       ref: devToolRef

package/dist/esm/TanStackRouterDevtools.js.map

@@ -1 +1 @@
-{"version":3,"file":"TanStackRouterDevtools.js","sources":["../../src/TanStackRouterDevtools.tsx"],"sourcesContent":["import { TanStackRouterDevtoolsCore } from '@tanstack/router-devtools-core'\nimport { defineComponent, h, onMounted, onUnmounted, ref, watch } from 'vue'\nimport { useRouter, useRouterState } from '@tanstack/vue-router'\nimport type { AnyRouter } from '@tanstack/vue-router'\n\nexport interface TanStackRouterDevtoolsOptions {\n  /**\n   * Set this true if you want the dev tools to default to being open\n   */\n  initialIsOpen?: boolean\n  /**\n   * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.\n   */\n  panelProps?: Record<string, any>\n  /**\n   * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  closeButtonProps?: Record<string, any>\n  /**\n   * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  toggleButtonProps?: Record<string, any>\n  /**\n   * The position of the TanStack Router logo to open and close the devtools panel.\n   * Defaults to 'bottom-left'.\n   */\n  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n  /**\n   * Use this to render the devtools inside a different type of container element for a11y purposes.\n   * Any string which corresponds to a valid intrinsic JSX element is allowed.\n   * Defaults to 'footer'.\n   */\n  containerElement?: string | any\n  /**\n   * The router instance to use for the devtools.\n   */\n  router?: AnyRouter\n  /**\n   * Use this to attach the devtool's styles to specific element in the DOM.\n   */\n  shadowDOMTarget?: ShadowRoot\n}\n\nexport const TanStackRouterDevtools = /* #__PURE__ */ defineComponent({\n  name: 'TanStackRouterDevtools',\n  props: [\n    'initialIsOpen',\n    'panelProps',\n    'closeButtonProps',\n    'toggleButtonProps',\n    'position',\n    'containerElement',\n    'router',\n    'shadowDOMTarget',\n  ] as unknown as undefined,\n  setup(props: TanStackRouterDevtoolsOptions) {\n    const devToolRef = ref<HTMLDivElement | null>(null)\n\n    const hookRouter = useRouter({ warn: false })\n    const activeRouter = props.router ?? hookRouter\n\n    const activeRouterState = useRouterState({ router: activeRouter })\n\n    const devtools = new TanStackRouterDevtoolsCore({\n      initialIsOpen: props.initialIsOpen,\n      panelProps: props.panelProps,\n      closeButtonProps: props.closeButtonProps,\n      toggleButtonProps: props.toggleButtonProps,\n      position: props.position,\n      containerElement: props.containerElement,\n      shadowDOMTarget: props.shadowDOMTarget,\n      router: activeRouter,\n      routerState: activeRouterState.value,\n    })\n\n    // Update devtools when router changes\n    watch(\n      () => activeRouter,\n      (router) => {\n        devtools.setRouter(router)\n      },\n    )\n\n    // Update devtools when router state changes\n    watch(activeRouterState, (routerState) => {\n      devtools.setRouterState(routerState)\n    })\n\n    // Update devtools when options change\n    watch(\n      () => [\n        props.initialIsOpen,\n        props.panelProps,\n        props.closeButtonProps,\n        props.toggleButtonProps,\n        props.position,\n        props.containerElement,\n        props.shadowDOMTarget,\n      ],\n      () => {\n        devtools.setOptions({\n          initialIsOpen: props.initialIsOpen,\n          panelProps: props.panelProps,\n          closeButtonProps: props.closeButtonProps,\n          toggleButtonProps: props.toggleButtonProps,\n          position: props.position,\n          containerElement: props.containerElement,\n          shadowDOMTarget: props.shadowDOMTarget,\n        })\n      },\n    )\n\n    onMounted(() => {\n      if (devToolRef.value) {\n        devtools.mount(devToolRef.value)\n      }\n    })\n\n    onUnmounted(() => {\n      devtools.unmount()\n    })\n\n    return () => h('div', { ref: devToolRef })\n  },\n})\n"],"names":["TanStackRouterDevtools","name","props","setup","devToolRef","ref","hookRouter","useRouter","warn","activeRouter","router","activeRouterState","useRouterState","devtools","TanStackRouterDevtoolsCore","initialIsOpen","panelProps","closeButtonProps","toggleButtonProps","position","containerElement","shadowDOMTarget","routerState","value","watch","setRouter","setRouterState","setOptions","onMounted","mount","onUnmounted","unmount","h"],"mappings":";;;AA2CO,MAAMA,yDAAyD;AAAA,EACpEC,MAAM;AAAA,EACNC,OAAO,CACL,iBACA,cACA,oBACA,qBACA,YACA,oBACA,UACA,iBAAiB;AAAA,EAEnBC,MAAMD,OAAsC;AAC1C,UAAME,aAAaC,IAA2B,IAAI;AAElD,UAAMC,aAAaC,UAAU;AAAA,MAAEC,MAAM;AAAA,IAAM,CAAC;AAC5C,UAAMC,eAAeP,MAAMQ,UAAUJ;AAErC,UAAMK,oBAAoBC,eAAe;AAAA,MAAEF,QAAQD;AAAAA,IAAa,CAAC;AAEjE,UAAMI,WAAW,IAAIC,2BAA2B;AAAA,MAC9CC,eAAeb,MAAMa;AAAAA,MACrBC,YAAYd,MAAMc;AAAAA,MAClBC,kBAAkBf,MAAMe;AAAAA,MACxBC,mBAAmBhB,MAAMgB;AAAAA,MACzBC,UAAUjB,MAAMiB;AAAAA,MAChBC,kBAAkBlB,MAAMkB;AAAAA,MACxBC,iBAAiBnB,MAAMmB;AAAAA,MACvBX,QAAQD;AAAAA,MACRa,aAAaX,kBAAkBY;AAAAA,IACjC,CAAC;AAGDC,UACE,MAAMf,cACLC,YAAW;AACVG,eAASY,UAAUf,MAAM;AAAA,IAC3B,CACF;AAGAc,UAAMb,mBAAoBW,iBAAgB;AACxCT,eAASa,eAAeJ,WAAW;AAAA,IACrC,CAAC;AAGDE,UACE,MAAM,CACJtB,MAAMa,eACNb,MAAMc,YACNd,MAAMe,kBACNf,MAAMgB,mBACNhB,MAAMiB,UACNjB,MAAMkB,kBACNlB,MAAMmB,eAAe,GAEvB,MAAM;AACJR,eAASc,WAAW;AAAA,QAClBZ,eAAeb,MAAMa;AAAAA,QACrBC,YAAYd,MAAMc;AAAAA,QAClBC,kBAAkBf,MAAMe;AAAAA,QACxBC,mBAAmBhB,MAAMgB;AAAAA,QACzBC,UAAUjB,MAAMiB;AAAAA,QAChBC,kBAAkBlB,MAAMkB;AAAAA,QACxBC,iBAAiBnB,MAAMmB;AAAAA,MACzB,CAAC;AAAA,IACH,CACF;AAEAO,cAAU,MAAM;AACd,UAAIxB,WAAWmB,OAAO;AACpBV,iBAASgB,MAAMzB,WAAWmB,KAAK;AAAA,MACjC;AAAA,IACF,CAAC;AAEDO,gBAAY,MAAM;AAChBjB,eAASkB,QAAO;AAAA,IAClB,CAAC;AAED,WAAO,MAAMC,EAAE,OAAO;AAAA,MAAE3B,KAAKD;AAAAA,IAAW,CAAC;AAAA,EAC3C;AACF,CAAC;"}
+{"version":3,"file":"TanStackRouterDevtools.js","sources":["../../src/TanStackRouterDevtools.tsx"],"sourcesContent":["import { TanStackRouterDevtoolsCore } from '@tanstack/router-devtools-core'\nimport { defineComponent, h, onMounted, onUnmounted, ref, watch } from 'vue'\nimport { useRouter, useRouterState } from '@tanstack/vue-router'\nimport type { AnyRouter } from '@tanstack/vue-router'\n\nexport interface TanStackRouterDevtoolsOptions {\n  /**\n   * Set this true if you want the dev tools to default to being open\n   */\n  initialIsOpen?: boolean\n  /**\n   * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.\n   */\n  panelProps?: Record<string, any>\n  /**\n   * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  closeButtonProps?: Record<string, any>\n  /**\n   * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  toggleButtonProps?: Record<string, any>\n  /**\n   * The position of the TanStack Router logo to open and close the devtools panel.\n   * Defaults to 'bottom-left'.\n   */\n  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n  /**\n   * Use this to render the devtools inside a different type of container element for a11y purposes.\n   * Any string which corresponds to a valid intrinsic JSX element is allowed.\n   * Defaults to 'footer'.\n   */\n  containerElement?: string | any\n  /**\n   * The router instance to use for the devtools.\n   */\n  router?: AnyRouter\n  /**\n   * Use this to attach the devtool's styles to specific element in the DOM.\n   */\n  shadowDOMTarget?: ShadowRoot\n}\n\nexport const TanStackRouterDevtools = /* #__PURE__ */ defineComponent({\n  name: 'TanStackRouterDevtools',\n  props: [\n    'initialIsOpen',\n    'panelProps',\n    'closeButtonProps',\n    'toggleButtonProps',\n    'position',\n    'containerElement',\n    'router',\n    'shadowDOMTarget',\n  ] as unknown as undefined,\n  setup(props: TanStackRouterDevtoolsOptions) {\n    const devToolRef = ref<HTMLDivElement | null>(null)\n    let isMounted = false\n\n    const hookRouter = useRouter({ warn: false })\n    const activeRouter = props.router ?? hookRouter\n\n    const activeRouterState = useRouterState({ router: activeRouter })\n\n    const devtools = new TanStackRouterDevtoolsCore({\n      initialIsOpen: props.initialIsOpen,\n      panelProps: props.panelProps,\n      closeButtonProps: props.closeButtonProps,\n      toggleButtonProps: props.toggleButtonProps,\n      position: props.position,\n      containerElement: props.containerElement,\n      shadowDOMTarget: props.shadowDOMTarget,\n      router: activeRouter,\n      routerState: activeRouterState.value,\n    })\n\n    // Update devtools when router changes\n    watch(\n      () => activeRouter,\n      (router) => {\n        devtools.setRouter(router)\n      },\n    )\n\n    // Update devtools when router state changes\n    watch(activeRouterState, (routerState) => {\n      devtools.setRouterState(routerState)\n    })\n\n    // Update devtools when options change\n    watch(\n      () => [\n        props.initialIsOpen,\n        props.panelProps,\n        props.closeButtonProps,\n        props.toggleButtonProps,\n        props.position,\n        props.containerElement,\n        props.shadowDOMTarget,\n      ],\n      () => {\n        devtools.setOptions({\n          initialIsOpen: props.initialIsOpen,\n          panelProps: props.panelProps,\n          closeButtonProps: props.closeButtonProps,\n          toggleButtonProps: props.toggleButtonProps,\n          position: props.position,\n          containerElement: props.containerElement,\n          shadowDOMTarget: props.shadowDOMTarget,\n        })\n      },\n    )\n\n    onMounted(() => {\n      if (devToolRef.value) {\n        devtools.mount(devToolRef.value)\n        isMounted = true\n      }\n    })\n\n    onUnmounted(() => {\n      if (isMounted) {\n        devtools.unmount()\n      }\n    })\n\n    return () => h('div', { ref: devToolRef })\n  },\n})\n"],"names":["TanStackRouterDevtools","name","props","setup","devToolRef","ref","isMounted","hookRouter","useRouter","warn","activeRouter","router","activeRouterState","useRouterState","devtools","TanStackRouterDevtoolsCore","initialIsOpen","panelProps","closeButtonProps","toggleButtonProps","position","containerElement","shadowDOMTarget","routerState","value","watch","setRouter","setRouterState","setOptions","onMounted","mount","onUnmounted","unmount","h"],"mappings":";;;AA2CO,MAAMA,yDAAyD;AAAA,EACpEC,MAAM;AAAA,EACNC,OAAO,CACL,iBACA,cACA,oBACA,qBACA,YACA,oBACA,UACA,iBAAiB;AAAA,EAEnBC,MAAMD,OAAsC;AAC1C,UAAME,aAAaC,IAA2B,IAAI;AAClD,QAAIC,YAAY;AAEhB,UAAMC,aAAaC,UAAU;AAAA,MAAEC,MAAM;AAAA,IAAM,CAAC;AAC5C,UAAMC,eAAeR,MAAMS,UAAUJ;AAErC,UAAMK,oBAAoBC,eAAe;AAAA,MAAEF,QAAQD;AAAAA,IAAa,CAAC;AAEjE,UAAMI,WAAW,IAAIC,2BAA2B;AAAA,MAC9CC,eAAed,MAAMc;AAAAA,MACrBC,YAAYf,MAAMe;AAAAA,MAClBC,kBAAkBhB,MAAMgB;AAAAA,MACxBC,mBAAmBjB,MAAMiB;AAAAA,MACzBC,UAAUlB,MAAMkB;AAAAA,MAChBC,kBAAkBnB,MAAMmB;AAAAA,MACxBC,iBAAiBpB,MAAMoB;AAAAA,MACvBX,QAAQD;AAAAA,MACRa,aAAaX,kBAAkBY;AAAAA,IACjC,CAAC;AAGDC,UACE,MAAMf,cACLC,YAAW;AACVG,eAASY,UAAUf,MAAM;AAAA,IAC3B,CACF;AAGAc,UAAMb,mBAAoBW,iBAAgB;AACxCT,eAASa,eAAeJ,WAAW;AAAA,IACrC,CAAC;AAGDE,UACE,MAAM,CACJvB,MAAMc,eACNd,MAAMe,YACNf,MAAMgB,kBACNhB,MAAMiB,mBACNjB,MAAMkB,UACNlB,MAAMmB,kBACNnB,MAAMoB,eAAe,GAEvB,MAAM;AACJR,eAASc,WAAW;AAAA,QAClBZ,eAAed,MAAMc;AAAAA,QACrBC,YAAYf,MAAMe;AAAAA,QAClBC,kBAAkBhB,MAAMgB;AAAAA,QACxBC,mBAAmBjB,MAAMiB;AAAAA,QACzBC,UAAUlB,MAAMkB;AAAAA,QAChBC,kBAAkBnB,MAAMmB;AAAAA,QACxBC,iBAAiBpB,MAAMoB;AAAAA,MACzB,CAAC;AAAA,IACH,CACF;AAEAO,cAAU,MAAM;AACd,UAAIzB,WAAWoB,OAAO;AACpBV,iBAASgB,MAAM1B,WAAWoB,KAAK;AAC/BlB,oBAAY;AAAA,MACd;AAAA,IACF,CAAC;AAEDyB,gBAAY,MAAM;AAChB,UAAIzB,WAAW;AACbQ,iBAASkB,QAAO;AAAA,MAClB;AAAA,IACF,CAAC;AAED,WAAO,MAAMC,EAAE,OAAO;AAAA,MAAE5B,KAAKD;AAAAA,IAAW,CAAC;AAAA,EAC3C;AACF,CAAC;"}

package/dist/esm/TanStackRouterDevtoolsPanel.js

@@ -6,6 +6,7 @@ const TanStackRouterDevtoolsPanel = /* @__PURE__ */ defineComponent({
   props: ["style", "className", "isOpen", "setIsOpen", "handleDragStart", "router", "shadowDOMTarget"],
   setup(props) {
     const devToolRef = ref(null);
+    let isMounted = false;
     const hookRouter = useRouter({
       warn: false
     });
@@ -39,10 +40,13 @@ const TanStackRouterDevtoolsPanel = /* @__PURE__ */ defineComponent({
     onMounted(() => {
       if (devToolRef.value) {
         devtools.mount(devToolRef.value);
+        isMounted = true;
       }
     });
     onUnmounted(() => {
-      devtools.unmount();
+      if (isMounted) {
+        devtools.unmount();
+      }
     });
     return () => h("div", {
       ref: devToolRef

package/dist/esm/TanStackRouterDevtoolsPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TanStackRouterDevtoolsPanel.js","sources":["../../src/TanStackRouterDevtoolsPanel.tsx"],"sourcesContent":["import { TanStackRouterDevtoolsPanelCore } from '@tanstack/router-devtools-core'\nimport { defineComponent, h, onMounted, onUnmounted, ref, watch } from 'vue'\nimport { useRouter, useRouterState } from '@tanstack/vue-router'\nimport type { AnyRouter } from '@tanstack/vue-router'\n\nexport interface TanStackRouterDevtoolsPanelOptions {\n  /**\n   * The standard style object used to style a component with inline styles\n   */\n  style?: any\n  /**\n   * The standard class property used to style a component with classes\n   */\n  className?: string\n  /**\n   * A boolean variable indicating whether the panel is open or closed\n   */\n  isOpen?: boolean\n  /**\n   * A function that toggles the open and close state of the panel\n   */\n  setIsOpen?: (isOpen: boolean) => void\n  /**\n   * Handles the opening and closing the devtools panel\n   */\n  handleDragStart?: (e: any) => void\n  /**\n   * The router instance to use for the devtools.\n   */\n  router?: AnyRouter\n  /**\n   * Use this to attach the devtool's styles to specific element in the DOM.\n   */\n  shadowDOMTarget?: ShadowRoot\n}\n\nexport const TanStackRouterDevtoolsPanel = /* #__PURE__ */ defineComponent({\n  name: 'TanStackRouterDevtoolsPanel',\n  props: [\n    'style',\n    'className',\n    'isOpen',\n    'setIsOpen',\n    'handleDragStart',\n    'router',\n    'shadowDOMTarget',\n  ] as unknown as undefined,\n  setup(props: TanStackRouterDevtoolsPanelOptions) {\n    const devToolRef = ref<HTMLDivElement | null>(null)\n\n    const hookRouter = useRouter({ warn: false })\n    const activeRouter = props.router ?? hookRouter\n\n    const activeRouterState = useRouterState({ router: activeRouter })\n\n    const devtools = new TanStackRouterDevtoolsPanelCore({\n      style: props.style,\n      className: props.className,\n      isOpen: props.isOpen,\n      setIsOpen: props.setIsOpen,\n      handleDragStart: props.handleDragStart,\n      shadowDOMTarget: props.shadowDOMTarget,\n      router: activeRouter,\n      routerState: activeRouterState.value,\n    })\n\n    // Update devtools when router changes\n    watch(\n      () => activeRouter,\n      (router) => {\n        devtools.setRouter(router)\n      },\n    )\n\n    // Update devtools when router state changes\n    watch(activeRouterState, (routerState) => {\n      devtools.setRouterState(routerState)\n    })\n\n    // Update devtools when options change\n    watch(\n      () => [props.className, props.style, props.shadowDOMTarget],\n      () => {\n        devtools.setOptions({\n          className: props.className,\n          style: props.style,\n          shadowDOMTarget: props.shadowDOMTarget,\n        })\n      },\n    )\n\n    onMounted(() => {\n      if (devToolRef.value) {\n        devtools.mount(devToolRef.value)\n      }\n    })\n\n    onUnmounted(() => {\n      devtools.unmount()\n    })\n\n    return () => h('div', { ref: devToolRef })\n  },\n})\n"],"names":["TanStackRouterDevtoolsPanel","name","props","setup","devToolRef","ref","hookRouter","useRouter","warn","activeRouter","router","activeRouterState","useRouterState","devtools","TanStackRouterDevtoolsPanelCore","style","className","isOpen","setIsOpen","handleDragStart","shadowDOMTarget","routerState","value","watch","setRouter","setRouterState","setOptions","onMounted","mount","onUnmounted","unmount","h"],"mappings":";;;AAoCO,MAAMA,8DAA8D;AAAA,EACzEC,MAAM;AAAA,EACNC,OAAO,CACL,SACA,aACA,UACA,aACA,mBACA,UACA,iBAAiB;AAAA,EAEnBC,MAAMD,OAA2C;AAC/C,UAAME,aAAaC,IAA2B,IAAI;AAElD,UAAMC,aAAaC,UAAU;AAAA,MAAEC,MAAM;AAAA,IAAM,CAAC;AAC5C,UAAMC,eAAeP,MAAMQ,UAAUJ;AAErC,UAAMK,oBAAoBC,eAAe;AAAA,MAAEF,QAAQD;AAAAA,IAAa,CAAC;AAEjE,UAAMI,WAAW,IAAIC,gCAAgC;AAAA,MACnDC,OAAOb,MAAMa;AAAAA,MACbC,WAAWd,MAAMc;AAAAA,MACjBC,QAAQf,MAAMe;AAAAA,MACdC,WAAWhB,MAAMgB;AAAAA,MACjBC,iBAAiBjB,MAAMiB;AAAAA,MACvBC,iBAAiBlB,MAAMkB;AAAAA,MACvBV,QAAQD;AAAAA,MACRY,aAAaV,kBAAkBW;AAAAA,IACjC,CAAC;AAGDC,UACE,MAAMd,cACLC,YAAW;AACVG,eAASW,UAAUd,MAAM;AAAA,IAC3B,CACF;AAGAa,UAAMZ,mBAAoBU,iBAAgB;AACxCR,eAASY,eAAeJ,WAAW;AAAA,IACrC,CAAC;AAGDE,UACE,MAAM,CAACrB,MAAMc,WAAWd,MAAMa,OAAOb,MAAMkB,eAAe,GAC1D,MAAM;AACJP,eAASa,WAAW;AAAA,QAClBV,WAAWd,MAAMc;AAAAA,QACjBD,OAAOb,MAAMa;AAAAA,QACbK,iBAAiBlB,MAAMkB;AAAAA,MACzB,CAAC;AAAA,IACH,CACF;AAEAO,cAAU,MAAM;AACd,UAAIvB,WAAWkB,OAAO;AACpBT,iBAASe,MAAMxB,WAAWkB,KAAK;AAAA,MACjC;AAAA,IACF,CAAC;AAEDO,gBAAY,MAAM;AAChBhB,eAASiB,QAAO;AAAA,IAClB,CAAC;AAED,WAAO,MAAMC,EAAE,OAAO;AAAA,MAAE1B,KAAKD;AAAAA,IAAW,CAAC;AAAA,EAC3C;AACF,CAAC;"}
+{"version":3,"file":"TanStackRouterDevtoolsPanel.js","sources":["../../src/TanStackRouterDevtoolsPanel.tsx"],"sourcesContent":["import { TanStackRouterDevtoolsPanelCore } from '@tanstack/router-devtools-core'\nimport { defineComponent, h, onMounted, onUnmounted, ref, watch } from 'vue'\nimport { useRouter, useRouterState } from '@tanstack/vue-router'\nimport type { AnyRouter } from '@tanstack/vue-router'\n\nexport interface TanStackRouterDevtoolsPanelOptions {\n  /**\n   * The standard style object used to style a component with inline styles\n   */\n  style?: any\n  /**\n   * The standard class property used to style a component with classes\n   */\n  className?: string\n  /**\n   * A boolean variable indicating whether the panel is open or closed\n   */\n  isOpen?: boolean\n  /**\n   * A function that toggles the open and close state of the panel\n   */\n  setIsOpen?: (isOpen: boolean) => void\n  /**\n   * Handles the opening and closing the devtools panel\n   */\n  handleDragStart?: (e: any) => void\n  /**\n   * The router instance to use for the devtools.\n   */\n  router?: AnyRouter\n  /**\n   * Use this to attach the devtool's styles to specific element in the DOM.\n   */\n  shadowDOMTarget?: ShadowRoot\n}\n\nexport const TanStackRouterDevtoolsPanel = /* #__PURE__ */ defineComponent({\n  name: 'TanStackRouterDevtoolsPanel',\n  props: [\n    'style',\n    'className',\n    'isOpen',\n    'setIsOpen',\n    'handleDragStart',\n    'router',\n    'shadowDOMTarget',\n  ] as unknown as undefined,\n  setup(props: TanStackRouterDevtoolsPanelOptions) {\n    const devToolRef = ref<HTMLDivElement | null>(null)\n    let isMounted = false\n\n    const hookRouter = useRouter({ warn: false })\n    const activeRouter = props.router ?? hookRouter\n\n    const activeRouterState = useRouterState({ router: activeRouter })\n\n    const devtools = new TanStackRouterDevtoolsPanelCore({\n      style: props.style,\n      className: props.className,\n      isOpen: props.isOpen,\n      setIsOpen: props.setIsOpen,\n      handleDragStart: props.handleDragStart,\n      shadowDOMTarget: props.shadowDOMTarget,\n      router: activeRouter,\n      routerState: activeRouterState.value,\n    })\n\n    // Update devtools when router changes\n    watch(\n      () => activeRouter,\n      (router) => {\n        devtools.setRouter(router)\n      },\n    )\n\n    // Update devtools when router state changes\n    watch(activeRouterState, (routerState) => {\n      devtools.setRouterState(routerState)\n    })\n\n    // Update devtools when options change\n    watch(\n      () => [props.className, props.style, props.shadowDOMTarget],\n      () => {\n        devtools.setOptions({\n          className: props.className,\n          style: props.style,\n          shadowDOMTarget: props.shadowDOMTarget,\n        })\n      },\n    )\n\n    onMounted(() => {\n      if (devToolRef.value) {\n        devtools.mount(devToolRef.value)\n        isMounted = true\n      }\n    })\n\n    onUnmounted(() => {\n      if (isMounted) {\n        devtools.unmount()\n      }\n    })\n\n    return () => h('div', { ref: devToolRef })\n  },\n})\n"],"names":["TanStackRouterDevtoolsPanel","name","props","setup","devToolRef","ref","isMounted","hookRouter","useRouter","warn","activeRouter","router","activeRouterState","useRouterState","devtools","TanStackRouterDevtoolsPanelCore","style","className","isOpen","setIsOpen","handleDragStart","shadowDOMTarget","routerState","value","watch","setRouter","setRouterState","setOptions","onMounted","mount","onUnmounted","unmount","h"],"mappings":";;;AAoCO,MAAMA,8DAA8D;AAAA,EACzEC,MAAM;AAAA,EACNC,OAAO,CACL,SACA,aACA,UACA,aACA,mBACA,UACA,iBAAiB;AAAA,EAEnBC,MAAMD,OAA2C;AAC/C,UAAME,aAAaC,IAA2B,IAAI;AAClD,QAAIC,YAAY;AAEhB,UAAMC,aAAaC,UAAU;AAAA,MAAEC,MAAM;AAAA,IAAM,CAAC;AAC5C,UAAMC,eAAeR,MAAMS,UAAUJ;AAErC,UAAMK,oBAAoBC,eAAe;AAAA,MAAEF,QAAQD;AAAAA,IAAa,CAAC;AAEjE,UAAMI,WAAW,IAAIC,gCAAgC;AAAA,MACnDC,OAAOd,MAAMc;AAAAA,MACbC,WAAWf,MAAMe;AAAAA,MACjBC,QAAQhB,MAAMgB;AAAAA,MACdC,WAAWjB,MAAMiB;AAAAA,MACjBC,iBAAiBlB,MAAMkB;AAAAA,MACvBC,iBAAiBnB,MAAMmB;AAAAA,MACvBV,QAAQD;AAAAA,MACRY,aAAaV,kBAAkBW;AAAAA,IACjC,CAAC;AAGDC,UACE,MAAMd,cACLC,YAAW;AACVG,eAASW,UAAUd,MAAM;AAAA,IAC3B,CACF;AAGAa,UAAMZ,mBAAoBU,iBAAgB;AACxCR,eAASY,eAAeJ,WAAW;AAAA,IACrC,CAAC;AAGDE,UACE,MAAM,CAACtB,MAAMe,WAAWf,MAAMc,OAAOd,MAAMmB,eAAe,GAC1D,MAAM;AACJP,eAASa,WAAW;AAAA,QAClBV,WAAWf,MAAMe;AAAAA,QACjBD,OAAOd,MAAMc;AAAAA,QACbK,iBAAiBnB,MAAMmB;AAAAA,MACzB,CAAC;AAAA,IACH,CACF;AAEAO,cAAU,MAAM;AACd,UAAIxB,WAAWmB,OAAO;AACpBT,iBAASe,MAAMzB,WAAWmB,KAAK;AAC/BjB,oBAAY;AAAA,MACd;AAAA,IACF,CAAC;AAEDwB,gBAAY,MAAM;AAChB,UAAIxB,WAAW;AACbQ,iBAASiB,QAAO;AAAA,MAClB;AAAA,IACF,CAAC;AAED,WAAO,MAAMC,EAAE,OAAO;AAAA,MAAE3B,KAAKD;AAAAA,IAAW,CAAC;AAAA,EAC3C;AACF,CAAC;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-router-devtools",
-  "version": "1.141.2",
+  "version": "1.141.4",
   "description": "Modern and scalable routing for Vue applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "vite": "^7.1.7",
-    "@tanstack/router-devtools-core": "1.141.2"
+    "@tanstack/router-devtools-core": "1.141.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue-jsx": "^4.1.2",
@@ -53,8 +53,8 @@
   },
   "peerDependencies": {
     "vue": "^3.5.13",
-    "@tanstack/vue-router": "^1.141.2",
-    "@tanstack/router-core": "^1.141.2"
+    "@tanstack/router-core": "^1.141.4",
+    "@tanstack/vue-router": "^1.141.4"
   },
   "peerDependenciesMeta": {
     "@tanstack/router-core": {

package/src/TanStackRouterDevtools.tsx

@@ -55,6 +55,7 @@ export const TanStackRouterDevtools = /* #__PURE__ */ defineComponent({
   ] as unknown as undefined,
   setup(props: TanStackRouterDevtoolsOptions) {
     const devToolRef = ref<HTMLDivElement | null>(null)
+    let isMounted = false
 
     const hookRouter = useRouter({ warn: false })
     const activeRouter = props.router ?? hookRouter
@@ -113,11 +114,14 @@ export const TanStackRouterDevtools = /* #__PURE__ */ defineComponent({
     onMounted(() => {
       if (devToolRef.value) {
         devtools.mount(devToolRef.value)
+        isMounted = true
       }
     })
 
     onUnmounted(() => {
-      devtools.unmount()
+      if (isMounted) {
+        devtools.unmount()
+      }
     })
 
     return () => h('div', { ref: devToolRef })

package/src/TanStackRouterDevtoolsPanel.tsx

@@ -47,6 +47,7 @@ export const TanStackRouterDevtoolsPanel = /* #__PURE__ */ defineComponent({
   ] as unknown as undefined,
   setup(props: TanStackRouterDevtoolsPanelOptions) {
     const devToolRef = ref<HTMLDivElement | null>(null)
+    let isMounted = false
 
     const hookRouter = useRouter({ warn: false })
     const activeRouter = props.router ?? hookRouter
@@ -92,11 +93,14 @@ export const TanStackRouterDevtoolsPanel = /* #__PURE__ */ defineComponent({
     onMounted(() => {
       if (devToolRef.value) {
         devtools.mount(devToolRef.value)
+        isMounted = true
       }
     })
 
     onUnmounted(() => {
-      devtools.unmount()
+      if (isMounted) {
+        devtools.unmount()
+      }
     })
 
     return () => h('div', { ref: devToolRef })