From b340f5f548c2aa38b2036aae19f85705ced55900 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Wed, 28 Jan 2026 18:22:31 +0700
Subject: [PATCH 1/2] Docs: Add FAQ about generic Vue components in CSF Next

Documents that generic Vue components work seamlessly with CSF Next
by passing the type parameter directly to the component.
---
 docs/api/csf/csf-next.mdx | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/docs/api/csf/csf-next.mdx b/docs/api/csf/csf-next.mdx
index 2c64dc702b3b..78babee58f33 100644
--- a/docs/api/csf/csf-next.mdx
+++ b/docs/api/csf/csf-next.mdx
@@ -542,6 +542,35 @@ While using CSF Next, you can still use the older formats, as long as they are n
 
 Yes, the [doc blocks](../../writing-docs/doc-blocks.mdx) used to reference stories in MDX files support the CSF Next format with no changes needed.
 
+<If renderer="vue">
+
+### How do I use generic Vue components?
+
+Generic Vue components (using `<script lang="ts" setup generic="T">`) work seamlessly with CSF Next. Simply pass the type parameter directly to the component:
+
+```ts title="GenericList.stories.ts"
+import preview from '#.storybook/preview';
+
+import GenericList from './GenericList.vue';
+
+const meta = preview.meta({
+  // 👇 Pass the type parameter directly
+  component: GenericList<{ id: number; name: string }>,
+});
+
+export const Example = meta.story({
+  args: {
+    items: [{ id: 1, name: 'John Doe' }],
+    // 👇 item is correctly typed as { id: number; name: string }
+    getLabel: (item) => item.name,
+  },
+});
+```
+
+This solves a [long-standing type inference issue](https://github.com/storybookjs/storybook/issues/24238) where the generic type `T` would default to `unknown` in prior CSF versions.
+
+</If>
+
 ### How can I know more about this format and provide feedback?
 
 For more information on this experimental format's original proposal, refer to its [RFC on GitHub](https://github.com/storybookjs/storybook/discussions/30112). We welcome your comments!

From 686f66379793bb50bc2d9edcca0acb62b400e8f3 Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Wed, 28 Jan 2026 14:05:58 -0700
Subject: [PATCH 2/2] Move from CSF Next API reference to TypeScript guide

---
 docs/api/csf/csf-next.mdx           | 29 -------------
 docs/writing-stories/typescript.mdx | 65 ++++++++++++++++++++---------
 2 files changed, 45 insertions(+), 49 deletions(-)

diff --git a/docs/api/csf/csf-next.mdx b/docs/api/csf/csf-next.mdx
index 78babee58f33..2c64dc702b3b 100644
--- a/docs/api/csf/csf-next.mdx
+++ b/docs/api/csf/csf-next.mdx
@@ -542,35 +542,6 @@ While using CSF Next, you can still use the older formats, as long as they are n
 
 Yes, the [doc blocks](../../writing-docs/doc-blocks.mdx) used to reference stories in MDX files support the CSF Next format with no changes needed.
 
-<If renderer="vue">
-
-### How do I use generic Vue components?
-
-Generic Vue components (using `<script lang="ts" setup generic="T">`) work seamlessly with CSF Next. Simply pass the type parameter directly to the component:
-
-```ts title="GenericList.stories.ts"
-import preview from '#.storybook/preview';
-
-import GenericList from './GenericList.vue';
-
-const meta = preview.meta({
-  // 👇 Pass the type parameter directly
-  component: GenericList<{ id: number; name: string }>,
-});
-
-export const Example = meta.story({
-  args: {
-    items: [{ id: 1, name: 'John Doe' }],
-    // 👇 item is correctly typed as { id: number; name: string }
-    getLabel: (item) => item.name,
-  },
-});
-```
-
-This solves a [long-standing type inference issue](https://github.com/storybookjs/storybook/issues/24238) where the generic type `T` would default to `unknown` in prior CSF versions.
-
-</If>
-
 ### How can I know more about this format and provide feedback?
 
 For more information on this experimental format's original proposal, refer to its [RFC on GitHub](https://github.com/storybookjs/storybook/discussions/30112). We welcome your comments!
diff --git a/docs/writing-stories/typescript.mdx b/docs/writing-stories/typescript.mdx
index 220e985c6b20..a78660f8b960 100644
--- a/docs/writing-stories/typescript.mdx
+++ b/docs/writing-stories/typescript.mdx
@@ -69,32 +69,57 @@ Sometimes stories need to define args that aren’t included in the component's
 {/* prettier-ignore-end */}
 
 <IfRenderer renderer="vue">
-  ## Vue specific tips
 
-  Vue has excellent support for TypeScript, and we have done our utmost to take advantage of that in the stories files. For example, consider the following strongly typed Vue 3 single file component (SFC):
+## Vue specific tips
 
-  ```html
-  <script setup lang="ts">
-    defineProps<{ count: number; disabled: boolean }>();
+Vue has excellent support for TypeScript, and we have done our utmost to take advantage of that in the stories files. For example, consider the following strongly typed Vue 3 single file component (SFC):
 
-    const emit = defineEmits<{
-      (e: 'increaseBy', amount: number): void;
-      (e: 'decreaseBy', amount: number): void;
-    }>();
-  </script>
+```html
+<script setup lang="ts">
+  defineProps<{ count: number; disabled: boolean }>();
 
-  <template>
-    <div class="card">
-      {{ count }}
-      <button @click="emit('increaseBy', 1)" :disabled="disabled">Increase by 1</button>
-      <button @click="$emit('decreaseBy', 1)" :disabled="disabled">Decrease by 1</button>
-    </div>
-  </template>
-  ```
+  const emit = defineEmits<{
+    (e: 'increaseBy', amount: number): void;
+    (e: 'decreaseBy', amount: number): void;
+  }>();
+</script>
+
+<template>
+  <div class="card">
+    {{ count }}
+    <button @click="emit('increaseBy', 1)" :disabled="disabled">Increase by 1</button>
+    <button @click="$emit('decreaseBy', 1)" :disabled="disabled">Decrease by 1</button>
+  </div>
+</template>
+```
+
+You can type check SFC files with `vue-tsc` and get editor support in VSCode by installing the official [Vue extension](https://marketplace.visualstudio.com/items?itemName=Vue.volar).
+
+This setup will add type support for `*.vue` imports to your `*.stories.ts` files, providing the same type safety and autocomplete features.
+
+[CSF Next](../api/csf/csf-next.mdx) adds support for [Generic Vue components](https://vuejs.org/api/sfc-script-setup.html#generics) (using `<script lang="ts" setup generic="T">`). Simply pass the type parameter directly to the component:
+
+```ts title="GenericList.stories.ts"
+import preview from '../.storybook/preview';
+
+import GenericList from './GenericList.vue';
+
+const meta = preview.meta({
+  // 👇 Pass the type parameter directly
+  component: GenericList<{ id: number; name: string }>,
+});
+
+export const Example = meta.story({
+  args: {
+    items: [{ id: 1, name: 'John Doe' }],
+    // 👇 item is correctly typed as { id: number; name: string }
+    getLabel: (item) => item.name,
+  },
+});
+```
 
-  You can type check SFC files with vue-tsc and get editor support in VSCode by installing the official [Vue](https://marketplace.visualstudio.com/items?itemName=Vue.volar) extension.
+Prior CSF versions suffer from a [long-standing type inference issue](https://github.com/storybookjs/storybook/issues/24238) where the generic type `T` would default to `unknown`.
 
-  This setup will add type support for `*.vue` imports to your `*.stories.ts` files, providing the same type safety and autocomplete features.
 </IfRenderer>
 
 <IfRenderer renderer="svelte">