From 957b053580b7d7a41dff342ce74d73d4e7b676f1 Mon Sep 17 00:00:00 2001
From: Richard Simko <1245031+richardsimko@users.noreply.github.com>
Date: Tue, 23 Jul 2024 16:08:17 +0200
Subject: [PATCH] Add docs on how to reference generic components

---
 src/guide/typescript/composition-api.md | 35 +++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/src/guide/typescript/composition-api.md b/src/guide/typescript/composition-api.md
index 438fcc78ca..7093823e80 100644
--- a/src/guide/typescript/composition-api.md
+++ b/src/guide/typescript/composition-api.md
@@ -423,3 +423,38 @@ import type { ComponentPublicInstance } from 'vue'
 
 const child = ref<ComponentPublicInstance | null>(null)
 ```
+
+In cases where the component referenced is a [generic component](/guide/typescript/overview.html#generic-components), for instance `MyGenericModal`:
+
+```vue
+<!-- MyGenericModal.vue -->
+<script setup lang="ts" generic="ContentType extends string | number">
+import { ref } from 'vue'
+
+const content = ref<ContentType | null>(null)
+
+const open = (newContent: ContentType) => (content.value = newContent)
+
+defineExpose({
+  open
+})
+</script>
+```
+
+It needs to be referenced using `ComponentExposed` from the [`vue-component-type-helpers`](https://www.npmjs.com/package/vue-component-type-helpers) library as `InstanceType` won't work.
+
+```vue
+<!-- App.vue -->
+<script setup lang="ts">
+import MyGenericModal from './MyGenericModal.vue'
+
+import type { ComponentExposed } from 'vue-component-type-helpers';
+
+const modal = ref<ComponentExposed<typeof MyModal> | null>(null)
+
+const openModal = () => {
+  modal.value?.open('newValue')
+}
+</script>
+```
+