Add docs on how to reference generic components (#309)

.vitepress/theme/styles/style-guide.css

@@ -59,3 +59,7 @@
 .style-verb.avoid {
  background-color: var(--vt-c-red);
 }
+.vt-doc summary {
+ width: fit-content;
+ cursor: pointer;
+}

src/guide/components/v-model.md

@@ -68,7 +68,7 @@ const emit = defineEmits(['update:modelValue'])
 
 <template>
  <input
- :value="props.modelValue"
+ :value="modelValue"
  @input="emit('update:modelValue', $event.target.value)"
  />
 </template>

src/guide/quick-start.md

@@ -46,7 +46,11 @@ Zkontrolujte, že máte nainstalovanou nejnovější verzi [Node.js](https://nod
  <VTCodeGroupTab label="yarn">
 
  ```sh
+ # For Yarn Modern (v2+)
  $ yarn create vue@latest
+
+ # For Yarn ^v4.11
+ $ yarn dlx create-vue@latest
  ```
 
  </VTCodeGroupTab>

src/guide/scaling-up/tooling.md

@@ -43,7 +43,11 @@ Pro zahájení práce s Vite + Vue jednoduše spusťte:
  <VTCodeGroupTab label="yarn">
 
  ```sh
+ # For Yarn Modern (v2+)
  $ yarn create vue@latest
+
+ # For Yarn ^v4.11
+ $ yarn dlx create-vue@latest
  ```
 
  </VTCodeGroupTab>

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>
+```
+