From 74ee2d2dcea436c8cef06a4cf32b329cc30276f8 Mon Sep 17 00:00:00 2001
From: Gareth Jones <Jones258@Gmail.com>
Date: Fri, 11 Apr 2025 07:31:26 +1200
Subject: [PATCH] docs: include example of `@vue-generic` directive

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

diff --git a/src/api/sfc-script-setup.md b/src/api/sfc-script-setup.md
index 89bd6f4440..d569b18235 100644
--- a/src/api/sfc-script-setup.md
+++ b/src/api/sfc-script-setup.md
@@ -522,6 +522,18 @@ defineProps<{
 </script>
 ```
 
+You can use `@vue-generic` the directive to pass in explicit types, for when the type cannot be inferred:
+
+```vue
+<template>
+  <!-- @vue-generic {import('@/api').Actor} -->
+  <ApiSelect v-model="selectedPeopleIds" endpoint="/api/actors" id-prop="actorId" />
+
+  <!-- @vue-generic {import('@/api').Genre} -->
+  <ApiSelect v-model="selectedGenreIds" endpoint="/api/genres" id-prop="genreId" />
+</template>
+```
+
 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