Docs: Add FAQ about generic Vue components in CSF Next

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">