chore: laravel/vue-starter-kit#222

Author: Nick Menke

resources/js/components/TwoFactorRecoveryCodes.vue

@@ -2,7 +2,7 @@
 // packages
 import { Form } from '@inertiajs/vue3';
 import { Eye, EyeOff, LockKeyhole, RefreshCw } from 'lucide-vue-next';
-import { nextTick, onMounted, ref } from 'vue';
+import { nextTick, onMounted, ref, useTemplateRef } from 'vue';
 // shadcn ui
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
@@ -14,7 +14,7 @@ import { useTwoFactorAuth } from '@/composables/useTwoFactorAuth';
 
 const { recoveryCodesList, fetchRecoveryCodes, errors } = useTwoFactorAuth();
 const isRecoveryCodesVisible = ref<boolean>(false);
-const recoveryCodeSectionRef = ref<HTMLDivElement | null>(null);
+const recoveryCodeSectionRef = useTemplateRef('recoveryCodeSectionRef');
 
 const toggleRecoveryCodesVisibility = async () => {
     if (!isRecoveryCodesVisible.value && !recoveryCodesList.value.length) {

resources/js/components/TwoFactorSetupModal.vue

@@ -3,7 +3,7 @@
 import { Form } from '@inertiajs/vue3';
 import { useClipboard } from '@vueuse/core';
 import { Check, Copy, ScanLine } from 'lucide-vue-next';
-import { computed, nextTick, ref, watch } from 'vue';
+import { computed, nextTick, ref, useTemplateRef, watch } from 'vue';
 // shadcn ui
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
@@ -31,7 +31,7 @@ const showVerificationStep = ref(false);
 const code = ref<number[]>([]);
 const codeValue = computed<string>(() => code.value.join(''));
 
-const pinInputContainerRef = ref<HTMLElement | null>(null);
+const pinInputContainerRef = useTemplateRef('pinInputContainerRef');
 
 const modalConfig = computed<{
     title: string;

resources/js/components/users/DeleteUser.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // packages
 import { Form } from '@inertiajs/vue3';
-import { ref } from 'vue';
+import { useTemplateRef } from 'vue';
 // shadcn ui
 import { Button } from '@/components/ui/button';
 import {
@@ -22,7 +22,7 @@ import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileCo
 import HeadingSmall from '@/components/HeadingSmall.vue';
 import InputError from '@/components/InputError.vue';
 
-const passwordInput = ref<InstanceType<typeof Input> | null>(null);
+const passwordInput = useTemplateRef('passwordInput');
 </script>
 
 <template>

resources/js/pages/settings/Password.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 // packages
 import { Form, Head } from '@inertiajs/vue3';
-import { ref } from 'vue';
 // shadcn ui
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -22,9 +21,6 @@ const breadcrumbs: BreadcrumbItem[] = [
         href: edit(),
     },
 ];
-
-const passwordInput = ref<HTMLInputElement | null>(null);
-const currentPasswordInput = ref<HTMLInputElement | null>(null);
 </script>
 
 <template>
@@ -52,7 +48,6 @@ const currentPasswordInput = ref<HTMLInputElement | null>(null);
                         <Label for="current_password">Current password</Label>
                         <Input
                             id="current_password"
-                            ref="currentPasswordInput"
                             name="current_password"
                             type="password"
                             class="mt-1 block w-full"
@@ -66,7 +61,6 @@ const currentPasswordInput = ref<HTMLInputElement | null>(null);
                         <Label for="password">New password</Label>
                         <Input
                             id="password"
-                            ref="passwordInput"
                             name="password"
                             type="password"
                             class="mt-1 block w-full"