diff --git a/docs/config.json b/docs/config.json
index 3e77bad407..d8692593f7 100644
--- a/docs/config.json
+++ b/docs/config.json
@@ -983,6 +983,10 @@
             {
               "label": "Persister",
               "to": "framework/vue/examples/persister"
+            },
+            {
+              "label": "Devtools Embedded Panel",
+              "to": "framework/vue/examples/devtools-panel"
             }
           ]
         },
diff --git a/docs/framework/vue/devtools.md b/docs/framework/vue/devtools.md
index f242c033aa..0ff7c748e1 100644
--- a/docs/framework/vue/devtools.md
+++ b/docs/framework/vue/devtools.md
@@ -38,6 +38,10 @@ bun add @tanstack/vue-query-devtools
 
 By default, Vue Query Devtools are only included in bundles when `process.env.NODE_ENV === 'development'`, so you don't need to worry about excluding them during a production build.
 
+## Floating Mode
+
+@todo: blabla
+
 Devtools will be mounted as a fixed, floating element in your app and provide a toggle in the corner of the screen to show and hide the devtools. This toggle state will be stored and remembered in localStorage across reloads.
 
 Place the following code as high in your Vue app as you can. The closer it is to the root of the page, the better it will work!
@@ -57,9 +61,10 @@ import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
 
 - `initialIsOpen: Boolean`
   - Set this `true` if you want the dev tools to default to being open.
-- `buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right"`
+- `buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "relative"`
   - Defaults to `bottom-right`.
   - The position of the React Query logo to open and close the devtools panel.
+  - If `relative`, the button is placed in the location that you render the devtools.
 - `position?: "top" | "bottom" | "left" | "right"`
   - Defaults to `bottom`.
   - The position of the React Query devtools panel.
@@ -73,6 +78,33 @@ import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
   - Default behavior will apply the devtool's styles to the head tag within the DOM.
   - Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instead of within the head tag in the light DOM.
 
+## Embedded Mode
+
+@todo: blabla
+
+### Options
+
+- `style?: React.CSSProperties`
+  - Custom styles for the devtools panel
+  - Default: `{ height: '500px' }`
+  - Example: `{ height: '100%' }`
+  - Example: `{ height: '100%', width: '100%' }`
+- `onClose?: () => unknown`
+  - Callback function that is called when the devtools panel is closed
+- `client?: QueryClient`,
+  - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
+- `errorTypes?: { name: string; initializer: (query: Query) => TError}[]`
+  - Use this to predefine some errors that can be triggered on your queries. Initializer will be called (with the specific query) when that error is toggled on from the UI. It must return an Error.
+- `styleNonce?: string`
+  - Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+- `shadowDOMTarget?: ShadowRoot`
+  - Default behavior will apply the devtool's styles to the head tag within the DOM.
+  - Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instead of within the head tag in the light DOM.
+
+## Devtools in production
+
+@todo: blabla
+
 ## Traditional Devtools
 
 Vue Query will seamlessly integrate with the [Official Vue devtools](https://github.com/vuejs/devtools-next), adding custom inspector and timeline events.
diff --git a/examples/vue/devtools-panel/.gitignore b/examples/vue/devtools-panel/.gitignore
new file mode 100644
index 0000000000..449e8098b1
--- /dev/null
+++ b/examples/vue/devtools-panel/.gitignore
@@ -0,0 +1,9 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
diff --git a/examples/vue/devtools-panel/README.md b/examples/vue/devtools-panel/README.md
new file mode 100644
index 0000000000..a9aad379b0
--- /dev/null
+++ b/examples/vue/devtools-panel/README.md
@@ -0,0 +1,6 @@
+# Basic example
+
+To run this example:
+
+- `npm install` or `yarn` or `pnpm i` or `bun i`
+- `npm run dev` or `yarn dev` or `pnpm dev` or `bun dev`
diff --git a/examples/vue/devtools-panel/index.html b/examples/vue/devtools-panel/index.html
new file mode 100644
index 0000000000..8dc1c19096
--- /dev/null
+++ b/examples/vue/devtools-panel/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TanStack Query Vue Devtools Panel Example App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/vue/devtools-panel/package.json b/examples/vue/devtools-panel/package.json
new file mode 100644
index 0000000000..ed86bd1fdb
--- /dev/null
+++ b/examples/vue/devtools-panel/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@tanstack/query-example-vue-devtools-panel",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tanstack/vue-query": "^5.54.1",
+    "@tanstack/vue-query-devtools": "^5.54.1",
+    "vue": "^3.4.27",
+    "vue-demi": "^0.14.10"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.1.1",
+    "typescript": "5.3.3",
+    "vite": "^5.3.5"
+  }
+}
diff --git a/examples/vue/devtools-panel/src/App.vue b/examples/vue/devtools-panel/src/App.vue
new file mode 100644
index 0000000000..9d1a71052c
--- /dev/null
+++ b/examples/vue/devtools-panel/src/App.vue
@@ -0,0 +1,45 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useQuery } from '@tanstack/vue-query'
+import { VueQueryDevtoolsPanel } from '@tanstack/vue-query-devtools'
+
+export default defineComponent({
+  name: 'App',
+  components: { VueQueryDevtoolsPanel },
+  setup() {
+    const { data, error, isFetching, isPending } = useQuery({
+      queryKey: ['repoData'],
+      async queryFn() {
+        return await fetch('https://api.github.com/repos/Tanstack/query').then(
+          (response) => response.json(),
+        )
+      },
+    })
+
+    return {
+      data,
+      error,
+      isFetching,
+      isPending,
+    }
+  },
+})
+</script>
+
+// @todo: add button to switch between open & close devtools panel
+
+<template>
+  <template v-if="isPending"> Loading... </template>
+  <template v-else-if="error">
+    'An error has occurred: {{ error.message }}
+  </template>
+  <template v-else>
+    <h1>{{ data.name }}</h1>
+    <p>{{ data.description }}</p>
+    <strong>👀 {{ data.subscribers_count }}</strong>
+    <strong>✨ {{ data.stargazers_count }}</strong>
+    <strong>🍴 {{ data.forks_count }}</strong>
+    <div>{{ isFetching ? 'Updating...' : '' }}</div>
+  </template>
+  <VueQueryDevtoolsPanel />
+</template>
diff --git a/examples/vue/devtools-panel/src/main.ts b/examples/vue/devtools-panel/src/main.ts
new file mode 100644
index 0000000000..e8ac89a8ab
--- /dev/null
+++ b/examples/vue/devtools-panel/src/main.ts
@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import { VueQueryPlugin } from '@tanstack/vue-query'
+
+import App from './App.vue'
+
+createApp(App).use(VueQueryPlugin).mount('#app')
diff --git a/examples/vue/devtools-panel/src/shims-vue.d.ts b/examples/vue/devtools-panel/src/shims-vue.d.ts
new file mode 100644
index 0000000000..ac1ded7923
--- /dev/null
+++ b/examples/vue/devtools-panel/src/shims-vue.d.ts
@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/examples/vue/devtools-panel/src/types.d.ts b/examples/vue/devtools-panel/src/types.d.ts
new file mode 100644
index 0000000000..4851e81022
--- /dev/null
+++ b/examples/vue/devtools-panel/src/types.d.ts
@@ -0,0 +1,6 @@
+export interface Post {
+  userId: number
+  id: number
+  title: string
+  body: string
+}
diff --git a/examples/vue/devtools-panel/tsconfig.json b/examples/vue/devtools-panel/tsconfig.json
new file mode 100644
index 0000000000..7ca59bce5a
--- /dev/null
+++ b/examples/vue/devtools-panel/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "types": ["vite/client"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
+}
diff --git a/examples/vue/devtools-panel/vite.config.ts b/examples/vue/devtools-panel/vite.config.ts
new file mode 100644
index 0000000000..b597411977
--- /dev/null
+++ b/examples/vue/devtools-panel/vite.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  optimizeDeps: {
+    exclude: ['@tanstack/vue-query', 'vue-demi'],
+  },
+})
diff --git a/packages/react-query-devtools/src/ReactQueryDevtools.tsx b/packages/react-query-devtools/src/ReactQueryDevtools.tsx
index 6e9af58c69..1d26342126 100644
--- a/packages/react-query-devtools/src/ReactQueryDevtools.tsx
+++ b/packages/react-query-devtools/src/ReactQueryDevtools.tsx
@@ -11,23 +11,23 @@ import type { QueryClient } from '@tanstack/react-query'
 
 export interface DevtoolsOptions {
   /**
-   * Set this true if you want the dev tools to default to being open
+   * Set this true if you want the dev tools to default to being open.
    */
   initialIsOpen?: boolean
   /**
    * The position of the React Query logo to open and close the devtools panel.
-   * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
-   * Defaults to 'bottom-right'.
+   * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'relative'
+   * @default 'bottom-right'
    */
   buttonPosition?: DevtoolsButtonPosition
   /**
    * The position of the React Query devtools panel.
    * 'top' | 'bottom' | 'left' | 'right'
-   * Defaults to 'bottom'.
+   * @default 'bottom'
    */
   position?: DevtoolsPosition
   /**
-   * Custom instance of QueryClient
+   * Custom instance of QueryClient.
    */
   client?: QueryClient
   /**
diff --git a/packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx b/packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx
index 86afd0ba85..cac6a73b77 100644
--- a/packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx
+++ b/packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx
@@ -7,7 +7,7 @@ import type { QueryClient } from '@tanstack/react-query'
 
 export interface DevtoolsPanelOptions {
   /**
-   * Custom instance of QueryClient
+   * Custom instance of QueryClient.
    */
   client?: QueryClient
   /**
@@ -22,17 +22,15 @@ export interface DevtoolsPanelOptions {
    * Use this so you can attach the devtool's styles to specific element in the DOM.
    */
   shadowDOMTarget?: ShadowRoot
-
   /**
-   * Custom styles for the devtools panel
+   * Custom styles for the devtools panel.
    * @default { height: '500px' }
    * @example { height: '100%' }
    * @example { height: '100%', width: '100%' }
    */
   style?: React.CSSProperties
-
   /**
-   * Callback function that is called when the devtools panel is closed
+   * Callback function that is called when the devtools panel is closed.
    */
   onClose?: () => unknown
 }
diff --git a/packages/vue-query-devtools/package.json b/packages/vue-query-devtools/package.json
index feb949b4c3..cbf69e72ff 100644
--- a/packages/vue-query-devtools/package.json
+++ b/packages/vue-query-devtools/package.json
@@ -54,10 +54,12 @@
     "eslint-plugin-vue": "^9.27.0",
     "vite": "^5.3.5",
     "vue": "^3.4.27",
+    "vue-demi": "^0.14.10",
     "vue-tsc": "^2.0.26"
   },
   "peerDependencies": {
     "@tanstack/vue-query": "workspace:^",
-    "vue": "^3.3.0"
+    "vue": "^3.3.0",
+    "vue-demi": "^0.14.0"
   }
 }
diff --git a/packages/vue-query-devtools/src/devtools.vue b/packages/vue-query-devtools/src/VueQueryDevtools.vue
similarity index 100%
rename from packages/vue-query-devtools/src/devtools.vue
rename to packages/vue-query-devtools/src/VueQueryDevtools.vue
diff --git a/packages/vue-query-devtools/src/VueQueryDevtoolsPanel.vue b/packages/vue-query-devtools/src/VueQueryDevtoolsPanel.vue
new file mode 100644
index 0000000000..ddbb4e295d
--- /dev/null
+++ b/packages/vue-query-devtools/src/VueQueryDevtoolsPanel.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { onlineManager, useQueryClient } from '@tanstack/vue-query'
+import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'
+import { onMounted, onScopeDispose, ref, watchEffect } from 'vue'
+import { reactive } from 'vue-demi'
+import type { DevtoolsPanelOptions } from './types'
+
+const props = defineProps<DevtoolsPanelOptions>()
+
+const styleObject = reactive({
+  height: '500px',
+  ...props.style,
+})
+
+const div = ref<HTMLElement>()
+const client = props.client || useQueryClient()
+const devtools = new TanstackQueryDevtoolsPanel({
+  client,
+  queryFlavor: 'Vue Query',
+  version: '5',
+  onlineManager,
+  buttonPosition: 'bottom-left',
+  position: 'bottom',
+  initialIsOpen: true,
+  errorTypes: props.errorTypes,
+  styleNonce: props.styleNonce,
+  shadowDOMTarget: props.shadowDOMTarget,
+  onClose: props.onClose,
+})
+
+watchEffect(() => {
+  devtools.setOnClose(props.onClose ?? (() => {}))
+  devtools.setErrorTypes(props.errorTypes || [])
+})
+
+onMounted(() => {
+  devtools.mount(div.value as HTMLElement)
+})
+
+onScopeDispose(() => {
+  devtools.unmount()
+})
+</script>
+
+<template>
+  <div :style="styleObject" className="tsqd-parent-container" ref="div"></div>
+</template>
diff --git a/packages/vue-query-devtools/src/index.ts b/packages/vue-query-devtools/src/index.ts
index 39c4912e86..3311a88543 100644
--- a/packages/vue-query-devtools/src/index.ts
+++ b/packages/vue-query-devtools/src/index.ts
@@ -1,11 +1,20 @@
-import devtools from './devtools.vue'
+import Devtools from './VueQueryDevtools.vue'
+import DevtoolsPanel from './VueQueryDevtoolsPanel.vue'
 import type { DefineComponent } from 'vue'
-import type { DevtoolsOptions } from './types'
+import type { DevtoolsOptions, DevtoolsPanelOptions } from './types'
 
 export const VueQueryDevtools = (
   process.env.NODE_ENV !== 'development'
     ? function () {
         return null
       }
-    : devtools
+    : Devtools
 ) as DefineComponent<DevtoolsOptions, {}, unknown>
+
+export const VueQueryDevtoolsPanel = (
+  process.env.NODE_ENV !== 'development'
+    ? function () {
+        return null
+      }
+    : DevtoolsPanel
+) as DefineComponent<DevtoolsPanelOptions, {}, unknown>
diff --git a/packages/vue-query-devtools/src/production.ts b/packages/vue-query-devtools/src/production.ts
index 11cd60bd96..1488258c5c 100644
--- a/packages/vue-query-devtools/src/production.ts
+++ b/packages/vue-query-devtools/src/production.ts
@@ -1,3 +1,5 @@
-import devtools from './devtools.vue'
+import Devtools from './VueQueryDevtools.vue'
+import DevtoolsPanel from './VueQueryDevtoolsPanel.vue'
 
-export default devtools
+export const VueQueryDevtools = Devtools
+export const VueQueryDevtoolsPanel = DevtoolsPanel
diff --git a/packages/vue-query-devtools/src/types.ts b/packages/vue-query-devtools/src/types.ts
index a392aac51c..560fa591ac 100644
--- a/packages/vue-query-devtools/src/types.ts
+++ b/packages/vue-query-devtools/src/types.ts
@@ -4,24 +4,44 @@ import type {
   DevtoolsPosition,
 } from '@tanstack/query-devtools'
 import type { QueryClient } from '@tanstack/vue-query'
+import type { CSSProperties } from 'vue'
 
 export interface DevtoolsOptions {
   /**
-   * Set this true if you want the dev tools to default to being open
+   * Set this true if you want the dev tools to default to being open.
    */
   initialIsOpen?: boolean
   /**
-   * The position of the React Query logo to open and close the devtools panel.
-   * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
-   * Defaults to 'bottom-right'.
+   * The position of the Vue Query logo to open and close the devtools panel.
+   * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'relative'
+   * @default 'bottom-right'
    */
   buttonPosition?: DevtoolsButtonPosition
   /**
    * The position of the React Query devtools panel.
    * 'top' | 'bottom' | 'left' | 'right'
-   * Defaults to 'bottom'.
+   * @default 'bottom'
    */
   position?: DevtoolsPosition
+  /**
+   * Custom instance of QueryClient.
+   */
+  client?: QueryClient
+  /**
+   * Use this so you can define custom errors that can be shown in the devtools.
+   */
+  errorTypes?: Array<DevtoolsErrorType>
+  /**
+   * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+   */
+  styleNonce?: string
+  /**
+   * Use this so you can attach the devtool's styles to specific element in the DOM.
+   */
+  shadowDOMTarget?: ShadowRoot
+}
+
+export interface DevtoolsPanelOptions {
   /**
    * Custom instance of QueryClient
    */
@@ -38,4 +58,15 @@ export interface DevtoolsOptions {
    * Use this so you can attach the devtool's styles to specific element in the DOM.
    */
   shadowDOMTarget?: ShadowRoot
+  /**
+   * Custom styles for the devtools panel.
+   * @default { height: '500px' }
+   * @example { height: '100%' }
+   * @example { height: '100%', width: '100%' }
+   */
+  style?: CSSProperties
+  /**
+   * Callback function that is called when the devtools panel is closed.
+   */
+  onClose?: () => unknown
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ed942db507..3c70803332 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1125,7 +1125,7 @@ importers:
         version: 5.1.0(astro@4.12.3(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)(typescript@5.3.3))(tailwindcss@3.4.7)
       '@astrojs/vercel':
         specifier: ^7.7.2
-        version: 7.7.2(astro@4.12.3(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)(typescript@5.3.3))(encoding@0.1.13)(next@14.2.5(@babel/core@7.25.2)(react-dom@19.0.0-rc-4c2e457c7c-20240522(react@19.0.0-rc-4c2e457c7c-20240522))(react@18.3.1)(sass@1.77.8))(react@18.3.1)
+        version: 7.7.2(astro@4.12.3(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)(typescript@5.3.3))(encoding@0.1.13)(next@14.2.5(@babel/core@7.25.2)(react-dom@19.0.0-rc-4c2e457c7c-20240522(react@18.3.1))(react@18.3.1)(sass@1.77.8))(react@18.3.1)
       '@tanstack/solid-query':
         specifier: ^5.55.4
         version: link:../../../packages/solid-query
@@ -1567,6 +1567,31 @@ importers:
         specifier: ^5.3.5
         version: 5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)
 
+  examples/vue/devtools-panel:
+    dependencies:
+      '@tanstack/vue-query':
+        specifier: ^5.54.1
+        version: link:../../../packages/vue-query
+      '@tanstack/vue-query-devtools':
+        specifier: ^5.54.1
+        version: link:../../../packages/vue-query-devtools
+      vue:
+        specifier: ^3.4.27
+        version: 3.4.35(typescript@5.3.3)
+      vue-demi:
+        specifier: ^0.14.10
+        version: 0.14.10(@vue/composition-api@1.7.2(vue@3.4.35(typescript@5.3.3)))(vue@3.4.35(typescript@5.3.3))
+    devDependencies:
+      '@vitejs/plugin-vue':
+        specifier: ^5.1.1
+        version: 5.1.1(vite@5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))(vue@3.4.35(typescript@5.3.3))
+      typescript:
+        specifier: 5.3.3
+        version: 5.3.3
+      vite:
+        specifier: ^5.3.5
+        version: 5.3.5(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)
+
   examples/vue/persister:
     dependencies:
       '@tanstack/query-core':
@@ -2286,6 +2311,9 @@ importers:
       vue:
         specifier: ^3.4.27
         version: 3.4.35(typescript@5.4.2)
+      vue-demi:
+        specifier: ^0.14.10
+        version: 0.14.10(@vue/composition-api@1.7.2(vue@3.4.35(typescript@5.4.2)))(vue@3.4.35(typescript@5.4.2))
       vue-tsc:
         specifier: ^2.0.26
         version: 2.0.29(typescript@5.4.2)
@@ -17462,10 +17490,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@astrojs/vercel@7.7.2(astro@4.12.3(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)(typescript@5.3.3))(encoding@0.1.13)(next@14.2.5(@babel/core@7.25.2)(react-dom@19.0.0-rc-4c2e457c7c-20240522(react@19.0.0-rc-4c2e457c7c-20240522))(react@18.3.1)(sass@1.77.8))(react@18.3.1)':
+  '@astrojs/vercel@7.7.2(astro@4.12.3(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)(typescript@5.3.3))(encoding@0.1.13)(next@14.2.5(@babel/core@7.25.2)(react-dom@19.0.0-rc-4c2e457c7c-20240522(react@18.3.1))(react@18.3.1)(sass@1.77.8))(react@18.3.1)':
     dependencies:
       '@astrojs/internal-helpers': 0.4.1
-      '@vercel/analytics': 1.3.1(next@14.2.5(@babel/core@7.25.2)(react-dom@19.0.0-rc-4c2e457c7c-20240522(react@19.0.0-rc-4c2e457c7c-20240522))(react@18.3.1)(sass@1.77.8))(react@18.3.1)
+      '@vercel/analytics': 1.3.1(next@14.2.5(@babel/core@7.25.2)(react-dom@19.0.0-rc-4c2e457c7c-20240522(react@18.3.1))(react@18.3.1)(sass@1.77.8))(react@18.3.1)
       '@vercel/edge': 1.1.2
       '@vercel/nft': 0.27.3(encoding@0.1.13)
       astro: 4.12.3(@types/node@22.0.2)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)(typescript@5.3.3)
@@ -22723,11 +22751,11 @@ snapshots:
       graphql: 15.8.0
       wonka: 4.0.15
 
-  '@vercel/analytics@1.3.1(next@14.2.5(@babel/core@7.25.2)(react-dom@19.0.0-rc-4c2e457c7c-20240522(react@19.0.0-rc-4c2e457c7c-20240522))(react@18.3.1)(sass@1.77.8))(react@18.3.1)':
+  '@vercel/analytics@1.3.1(next@14.2.5(@babel/core@7.25.2)(react-dom@19.0.0-rc-4c2e457c7c-20240522(react@18.3.1))(react@18.3.1)(sass@1.77.8))(react@18.3.1)':
     dependencies:
       server-only: 0.0.1
     optionalDependencies:
-      next: 14.2.5(@babel/core@7.25.2)(react-dom@19.0.0-rc-4c2e457c7c-20240522(react@19.0.0-rc-4c2e457c7c-20240522))(react@18.3.1)(sass@1.77.8)
+      next: 14.2.5(@babel/core@7.25.2)(react-dom@19.0.0-rc-4c2e457c7c-20240522(react@18.3.1))(react@18.3.1)(sass@1.77.8)
       react: 18.3.1
 
   '@vercel/edge@1.1.2': {}
@@ -23018,6 +23046,11 @@ snapshots:
       de-indent: 1.0.2
       he: 1.2.0
 
+  '@vue/composition-api@1.7.2(vue@3.4.35(typescript@5.3.3))':
+    dependencies:
+      vue: 3.4.35(typescript@5.3.3)
+    optional: true
+
   '@vue/composition-api@1.7.2(vue@3.4.35(typescript@5.4.2))':
     dependencies:
       vue: 3.4.35(typescript@5.4.2)
@@ -29837,7 +29870,7 @@ snapshots:
 
   next-tick@1.1.0: {}
 
-  next@14.2.5(@babel/core@7.25.2)(react-dom@19.0.0-rc-4c2e457c7c-20240522(react@19.0.0-rc-4c2e457c7c-20240522))(react@18.3.1)(sass@1.77.8):
+  next@14.2.5(@babel/core@7.25.2)(react-dom@19.0.0-rc-4c2e457c7c-20240522(react@18.3.1))(react@18.3.1)(sass@1.77.8):
     dependencies:
       '@next/env': 14.2.5
       '@swc/helpers': 0.5.5
@@ -29846,7 +29879,7 @@ snapshots:
       graceful-fs: 4.2.11
       postcss: 8.4.31
       react: 18.3.1
-      react-dom: 19.0.0-rc-4c2e457c7c-20240522(react@19.0.0-rc-4c2e457c7c-20240522)
+      react-dom: 19.0.0-rc-4c2e457c7c-20240522(react@18.3.1)
       styled-jsx: 5.1.1(@babel/core@7.25.2)(react@18.3.1)
     optionalDependencies:
       '@next/swc-darwin-arm64': 14.2.5
@@ -32144,6 +32177,12 @@ snapshots:
       react: 18.3.1
       scheduler: 0.23.2
 
+  react-dom@19.0.0-rc-4c2e457c7c-20240522(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      scheduler: 0.25.0-rc-4c2e457c7c-20240522
+    optional: true
+
   react-dom@19.0.0-rc-4c2e457c7c-20240522(react@19.0.0-rc-4c2e457c7c-20240522):
     dependencies:
       react: 19.0.0-rc-4c2e457c7c-20240522
@@ -35322,6 +35361,12 @@ snapshots:
 
   vscode-uri@3.0.8: {}
 
+  vue-demi@0.14.10(@vue/composition-api@1.7.2(vue@3.4.35(typescript@5.3.3)))(vue@3.4.35(typescript@5.3.3)):
+    dependencies:
+      vue: 3.4.35(typescript@5.3.3)
+    optionalDependencies:
+      '@vue/composition-api': 1.7.2(vue@3.4.35(typescript@5.3.3))
+
   vue-demi@0.14.10(@vue/composition-api@1.7.2(vue@3.4.35(typescript@5.4.2)))(vue@3.4.35(typescript@5.4.2)):
     dependencies:
       vue: 3.4.35(typescript@5.4.2)