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

---
 .../content/examples/form/FormExampleElements.vue  |  5 +++--
 .../examples/form/FormExampleNestedList.vue        |  3 +--
 docs/content/3.components/form.md                  | 14 +++++++++++++-
 playground/app/components/FormElementsExample.vue  |  5 +++--
 .../app/components/FormNestedListExample.vue       |  2 --
 5 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/docs/app/components/content/examples/form/FormExampleElements.vue b/docs/app/components/content/examples/form/FormExampleElements.vue
index 23a434df..cbf60b8f 100644
--- a/docs/app/components/content/examples/form/FormExampleElements.vue
+++ b/docs/app/components/content/examples/form/FormExampleElements.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { z } from 'zod'
-import type { FormSubmitEvent, Form } from '@nuxt/ui'
+import type { FormSubmitEvent } from '@nuxt/ui'
 
 const schema = z.object({
   input: z.string().min(10),
@@ -35,7 +35,8 @@ const schema = z.object({
 type Schema = z.output<typeof schema>
 
 const state = reactive<Partial<Schema>>({})
-const form = ref<Form<Schema>>()
+
+const form = useTemplateRef('form')
 
 const items = [
   { label: 'Option 1', value: 'option-1' },
diff --git a/docs/app/components/content/examples/form/FormExampleNestedList.vue b/docs/app/components/content/examples/form/FormExampleNestedList.vue
index 13f303f4..df1465af 100644
--- a/docs/app/components/content/examples/form/FormExampleNestedList.vue
+++ b/docs/app/components/content/examples/form/FormExampleNestedList.vue
@@ -31,9 +31,9 @@ function removeItem() {
     state.items.pop()
   }
 }
-const formItemRef = ref()
 
 const toast = useToast()
+
 async function onSubmit(event: FormSubmitEvent<any>) {
   toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
   console.log(event.data)
@@ -42,7 +42,6 @@ async function onSubmit(event: FormSubmitEvent<any>) {
 
 <template>
   <UForm
-    ref="formItemRef"
     :state="state"
     :schema="schema"
     class="gap-4 flex flex-col w-60"
diff --git a/docs/content/3.components/form.md b/docs/content/3.components/form.md
index d6fa0d3a..f348aec2 100644
--- a/docs/content/3.components/form.md
+++ b/docs/content/3.components/form.md
@@ -167,7 +167,19 @@ name: 'form-example-nested-list'
 
 ### 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 form = useTemplateRef('form')
+</script>
+
+<template>
+  <UForm ref="form" />
+</template>
+```
+
+This will give you access to the following:
 
 | Name | Type |
 | ---- | ---- |
diff --git a/playground/app/components/FormElementsExample.vue b/playground/app/components/FormElementsExample.vue
index 5b338de5..a9ce8a14 100644
--- a/playground/app/components/FormElementsExample.vue
+++ b/playground/app/components/FormElementsExample.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { z } from 'zod'
-import type { FormSubmitEvent, Form } from '@nuxt/ui'
+import type { FormSubmitEvent } from '@nuxt/ui'
 
 const schema = z.object({
   input: z.string().min(10),
@@ -35,7 +35,8 @@ const schema = z.object({
 type Schema = z.output<typeof schema>
 
 const state = reactive<Partial<Schema>>({})
-const form = ref<Form<Schema>>()
+
+const form = useTemplateRef('form')
 
 const items = [
   { label: 'Option 1', value: 'option-1' },
diff --git a/playground/app/components/FormNestedListExample.vue b/playground/app/components/FormNestedListExample.vue
index e5fab7ff..b2fdd3ba 100644
--- a/playground/app/components/FormNestedListExample.vue
+++ b/playground/app/components/FormNestedListExample.vue
@@ -30,7 +30,6 @@ function removeItem() {
     state.items.pop()
   }
 }
-const formItemRef = ref()
 
 function onSubmit(event: FormSubmitEvent<Schema>) {
   console.log('Success', event.data)
@@ -43,7 +42,6 @@ function onError(event: any) {
 
 <template>
   <UForm
-    ref="formItemRef"
     :state="state"
     :schema="schema"
     class="gap-4 flex flex-col w-60"