+High performance async data rendering without overfetching. +
+ +[await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await) `useSuspense()` in Vue components. This means the remainder of the component only runs after the data has loaded, avoiding the complexity of handling loading and error conditions. Instead, fallback handling is +[centralized](../getting-started/data-dependency.md#boundaries) with Vue's built-in [Suspense](https://vuejs.org/guide/built-ins/suspense.html). + +`useSuspense()` is reactive to data [mutations](../getting-started/mutations.md); rerendering only when necessary. + +## Usage + +
+
+
+```
+
+
+
+ {{ profile.fullName }}
+{{ profile.bio }}
+
+
+
+```
+
+
+
+ {{ profile.fullName }}
+{{ profile.bio }}
+
+
+
+```
+
+
+
+
+
+ {{ profile.fullName }}
+{{ profile.bio }}
+
+
+
+
+```
+
+
+
+
+```
+
+{{ post.title }}
+
+
+
+```
+
+```html title="PostList.vue"
+
+
+
+
+
+ + + {{ post.title }} + +
+ by {{ post.author.name }} +
+
+
+```
+
+Error {{ error.status }}
+
+
+
+```
+
+
+
+
+
+ {{ profile.fullName }}
+{{ profile.bio }}
+
+
+
+
+```
+
+```html title="CreateTodo.vue" {10-13} collapsed
+
+
+
+
+
+
+
+```
+
+```html title="TodoList.vue" collapsed
+
+
+
+
+
+
+```
+
+
+
+
+
+
+
+
+
+
+```
+
diff --git a/docs/core/shared/_VoteDemo.vue.mdx b/docs/core/shared/_VoteDemo.vue.mdx
new file mode 100644
index 000000000000..9181947890b4
--- /dev/null
+++ b/docs/core/shared/_VoteDemo.vue.mdx
@@ -0,0 +1,130 @@
+import TypeScriptEditor from '@site/src/components/TypeScriptEditor';
+
+Dashboard
+Error: {{ error.message }}
+
+
+
+
+```
+
+```html title="TotalVotes.vue" collapsed
+
+
+
+
+
+
+ {{ post.votes }}
+
+ ![]()
+
+
+
+ {{ post.title }}
+{{ post.body }}
+
+
+
+```
+
+
+
+
+```
+
+```html title="LoadMore.vue"
+
+
+
+
+
+ {{ post.title }}
+ by {{ post.author.name }} +
+
+
+```
+
+
+
+
+```
+
+```html title="PostForm.vue" collapsed
+
+
+
+
+
+```
+
+```html title="PostCreate.vue"
+
+
+
+
+ ![]()
+
+
+
+ {{ post.title }}
+{{ post.body }}
+
+
+ {isOpen && (
+
+ );
+}
diff --git a/website/src/components/FrameworkTabs.tsx b/website/src/components/FrameworkTabs.tsx
new file mode 100644
index 000000000000..576f8a99cc61
--- /dev/null
+++ b/website/src/components/FrameworkTabs.tsx
@@ -0,0 +1,55 @@
+import React, { Children, ReactNode, isValidElement } from 'react';
+
+import { useFrameworkStorage, Framework } from './FrameworkSelector';
+
+interface TabItemProps {
+ value: Framework;
+ children: ReactNode;
+}
+
+// Helper component for specifying framework-specific content
+export function TabItem({ children }: TabItemProps): JSX.Element {
+ return <>{children};
+}
+
+interface FrameworkTabsProps {
+ children: ReactNode;
+}
+
+/**
+ * FrameworkTabs component that conditionally renders React or Vue content
+ * based on the global framework selector state.
+ *
+ * Usage in MDX:
+ * ```jsx
+ * -
+ {frameworks.map(({ value, label, Logo }) => (
+
- + + + ))} +
+
+ );
+}
+
diff --git a/website/src/theme/DocBreadcrumbs/styles.module.css b/website/src/theme/DocBreadcrumbs/styles.module.css
new file mode 100644
index 000000000000..bee1fa58d34b
--- /dev/null
+++ b/website/src/theme/DocBreadcrumbs/styles.module.css
@@ -0,0 +1,21 @@
+.wrapper {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 0.75rem;
+}
+
+/* Left side: native Docusaurus breadcrumbs */
+.left {
+ min-width: 0;
+ flex: 1;
+}
+
+/* Right side: framework selector */
+.right {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.5rem;
+ flex-shrink: 0;
+}
+
diff --git a/website/src/theme/MDXComponents.js b/website/src/theme/MDXComponents.js
index 90640295a062..522d6140cbfc 100644
--- a/website/src/theme/MDXComponents.js
+++ b/website/src/theme/MDXComponents.js
@@ -2,7 +2,13 @@
import { RestEndpoint } from '@data-client/rest';
import MDXComponents from '@theme-original/MDXComponents';
+import FrameworkTabs, {
+ TabItem as FrameworkTabItem,
+} from '@site/src/components/FrameworkTabs';
+
export default {
...MDXComponents,
RestEndpoint,
+ FrameworkTabs,
+ FrameworkTabItem,
};
diff --git a/website/src/theme/TOC/index.tsx b/website/src/theme/TOC/index.tsx
new file mode 100644
index 000000000000..582d3b1b9d2a
--- /dev/null
+++ b/website/src/theme/TOC/index.tsx
@@ -0,0 +1,102 @@
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useLocation } from '@docusaurus/router';
+
+import TOC from '@theme-original/TOC';
+import type TOCType from '@theme/TOC';
+import type { WrapperProps } from '@docusaurus/types';
+
+import FrameworkSelector from '@site/src/components/FrameworkSelector';
+import styles from './styles.module.css';
+
+type Props = WrapperProps
+
+
+
+
+
,
+ document.body,
+ );
+}
+
+export default function TOCWrapper(props: Props): JSX.Element {
+ return (
+ <>
+