From 46bd1cb002e45db4ffee511da709ae82a3c114e5 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 15 Oct 2024 15:21:53 +0200
Subject: [PATCH] docs(carousel): use `useTemplateRef`

---
 docs/content/3.components/carousel.md | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/docs/content/3.components/carousel.md b/docs/content/3.components/carousel.md
index 0556543e..ecef5b16 100644
--- a/docs/content/3.components/carousel.md
+++ b/docs/content/3.components/carousel.md
@@ -257,13 +257,29 @@ ignore:
 
 ### Expose
 
-When accessing the component via a template ref, you can use the following:
+You can access the typed component instance using [`useTemplateRef`](https://vuejs.org/api/composition-api-helpers.html#usetemplateref).
+
+```vue
+<script setup lang="ts">
+const carousel = useTemplateRef('carousel')
+</script>
+
+<template>
+  <UCarousel ref="carousel" />
+</template>
+```
+
+This will give you access to the following:
 
 | Name | Type |
 | ---- | ---- |
 | `emblaRef`{lang="ts-type"} | `Ref<HTMLElement \| null>`{lang="ts-type"} |
 | `emblaApi`{lang="ts-type"} | [`Ref<EmblaCarouselType \| null>`{lang="ts-type"}](https://www.embla-carousel.com/api/methods/#typescript) |
 
+::note{to="https://vuejs.org/api/composition-api-helpers.html#usetemplateref" target="_blank"}
+You can use `useTemplateRef` to get the component instance.
+::
+
 ## Theme
 
 :component-theme