From 04088889e1610aae4bc95941e6f4f1bfcbcac630 Mon Sep 17 00:00:00 2001
From: Richard Simko <1245031+richardsimko@users.noreply.github.com>
Date: Tue, 23 Jul 2024 13:35:54 +0200
Subject: [PATCH] Add note about how to reference generic components (#2945)

---
 src/api/sfc-script-setup.md | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/api/sfc-script-setup.md b/src/api/sfc-script-setup.md
index be00c381a9..d7ee22d963 100644
--- a/src/api/sfc-script-setup.md
+++ b/src/api/sfc-script-setup.md
@@ -469,6 +469,25 @@ defineProps<{
 </script>
 ```
 
+In order to use a reference to a generic component in a `ref` you need to use the [`vue-component-type-helpers`](https://www.npmjs.com/package/vue-component-type-helpers) library as `InstanceType` won't work.
+
+```vue
+<script
+  setup
+  lang="ts"
+>
+import componentWithoutGenerics from '../component-without-generics.vue';
+import genericComponent from '../generic-component.vue';
+
+import type { ComponentExposed } from 'vue-component-type-helpers';
+
+// Works for a component without generics
+ref<InstanceType<typeof componentWithoutGenerics>>();
+
+ref<ComponentExposed<typeof genericComponent>>();
+```
+
+
 ## Restrictions {#restrictions}
 
 - Due to the difference in module execution semantics, code inside `<script setup>` relies on the context of an SFC. When moved into external `.js` or `.ts` files, it may lead to confusion for both developers and tools. Therefore, **`<script setup>`** cannot be used with the `src` attribute.