fix nuxt useForm

apps/blog-next/app/forgot-password/page.tsx

@@ -39,7 +39,7 @@ export default function ForgotPasswordPage() {
           <input
             name="email"
             type="email"
-            value={form.fields.email.value}
+            value={form.values.email}
             onInput={(event) => form.fields.email.onInput(event.currentTarget.value)}
             onBlur={() => form.fields.email.onBlur()}
           />

apps/blog-next/app/login/page.tsx

@@ -43,7 +43,7 @@ export default function LoginPage() {
           <input
             name="email"
             type="email"
-            value={form.fields.email.value}
+            value={form.values.email}
             onInput={(event) => form.fields.email.onInput(event.currentTarget.value)}
             onBlur={() => form.fields.email.onBlur()}
           />
@@ -55,7 +55,7 @@ export default function LoginPage() {
           <input
             name="password"
             type="password"
-            value={form.fields.password.value}
+            value={form.values.password}
             onInput={(event) => form.fields.password.onInput(event.currentTarget.value)}
             onBlur={() => form.fields.password.onBlur()}
           />
@@ -66,7 +66,7 @@ export default function LoginPage() {
           <input
             name="remember"
             type="checkbox"
-            checked={form.fields.remember.value}
+            checked={form.values.remember}
             onChange={(event) => form.fields.remember.onInput(event.currentTarget.checked)}
           />
           Remember me

apps/blog-next/app/register/page.tsx

@@ -44,7 +44,7 @@ export default function RegisterPage() {
           <span>Name</span>
           <input
             name="name"
-            value={form.fields.name.value}
+            value={form.values.name}
             onInput={(event) => form.fields.name.onInput(event.currentTarget.value)}
             onBlur={() => form.fields.name.onBlur()}
           />
@@ -56,7 +56,7 @@ export default function RegisterPage() {
           <input
             name="email"
             type="email"
-            value={form.fields.email.value}
+            value={form.values.email}
             onInput={(event) => form.fields.email.onInput(event.currentTarget.value)}
             onBlur={() => form.fields.email.onBlur()}
           />
@@ -68,7 +68,7 @@ export default function RegisterPage() {
           <input
             name="password"
             type="password"
-            value={form.fields.password.value}
+            value={form.values.password}
             onInput={(event) => form.fields.password.onInput(event.currentTarget.value)}
             onBlur={() => form.fields.password.onBlur()}
           />
@@ -80,7 +80,7 @@ export default function RegisterPage() {
           <input
             name="passwordConfirmation"
             type="password"
-            value={form.fields.passwordConfirmation.value}
+            value={form.values.passwordConfirmation}
             onInput={(event) => form.fields.passwordConfirmation.onInput(event.currentTarget.value)}
             onBlur={() => form.fields.passwordConfirmation.onBlur()}
           />

apps/blog-next/app/reset-password/page.tsx

@@ -45,14 +45,14 @@ function ResetPasswordPageContent() {
 
       {token.length > 0 ? (
         <form onSubmit={(event) => { event.preventDefault(); form.submit() }} style={{ display: 'grid', gap: '0.9rem' }}>
-          <input name="token" type="hidden" value={form.fields.token.value} />
+          <input name="token" type="hidden" value={form.values.token} />
 
           <label style={{ display: 'grid', gap: '0.35rem' }}>
             <span>New password</span>
             <input
               name="password"
               type="password"
-              value={form.fields.password.value}
+              value={form.values.password}
               onInput={(event) => form.fields.password.onInput(event.currentTarget.value)}
               onBlur={() => form.fields.password.onBlur()}
             />
@@ -64,7 +64,7 @@ function ResetPasswordPageContent() {
             <input
               name="passwordConfirmation"
               type="password"
-              value={form.fields.passwordConfirmation.value}
+              value={form.values.passwordConfirmation}
               onInput={(event) => form.fields.passwordConfirmation.onInput(event.currentTarget.value)}
               onBlur={() => form.fields.passwordConfirmation.onBlur()}
             />

apps/blog-next/app/verify-email/page.tsx

@@ -80,7 +80,7 @@ function VerifyEmailPageContent() {
 
       {token.length > 0 ? (
         <form onSubmit={(event) => { event.preventDefault(); form.submit() }} style={{ display: 'grid', gap: '0.9rem' }}>
-          <input name="token" type="hidden" value={form.fields.token.value} />
+          <input name="token" type="hidden" value={form.values.token} />
           {form.errors.has('token') ? <span style={{ color: '#fca5a5' }}>{form.errors.first('token')}</span> : null}
           <button type="submit" disabled={form.submitting}>
             {form.submitting ? 'Verifying...' : 'Verify email'}

apps/blog-nuxt/pages/forgot-password.vue

@@ -21,7 +21,7 @@ const form = useForm(forgotPasswordForm, {
     <form class="stack" @submit.prevent="form.submit()">
       <label class="field">
         <span>Email</span>
-        <input name="email" type="email" v-model="form.fields.email.value" @blur="form.fields.email.onBlur()" />
+        <input name="email" type="email" v-model="form.values.email" @blur="form.fields.email.onBlur()" />
         <span v-if="form.errors.has('email')" class="error">{{ form.errors.first('email') }}</span>
       </label>
 

apps/blog-nuxt/pages/login.vue

@@ -27,18 +27,18 @@ const form = useForm(loginForm, {
     <form class="stack" @submit.prevent="form.submit()">
       <label class="field">
         <span>Email</span>
-        <input name="email" type="email" v-model="form.fields.email.value" @blur="form.fields.email.onBlur()" />
+        <input name="email" type="email" v-model="form.values.email" @blur="form.fields.email.onBlur()" />
         <span v-if="form.errors.has('email')" class="error">{{ form.errors.first('email') }}</span>
       </label>
 
       <label class="field">
         <span>Password</span>
-        <input name="password" type="password" v-model="form.fields.password.value" @blur="form.fields.password.onBlur()" />
+        <input name="password" type="password" v-model="form.values.password" @blur="form.fields.password.onBlur()" />
         <span v-if="form.errors.has('password')" class="error">{{ form.errors.first('password') }}</span>
       </label>
 
       <label class="remember">
-        <input name="remember" type="checkbox" v-model="form.fields.remember.value" />
+        <input name="remember" type="checkbox" v-model="form.values.remember" />
         Remember me
       </label>
 

apps/blog-nuxt/pages/register.vue

@@ -28,19 +28,19 @@ const form = useForm(registerForm, {
     <form class="stack" @submit.prevent="form.submit()">
       <label class="field">
         <span>Name</span>
-        <input name="name" v-model="form.fields.name.value" @blur="form.fields.name.onBlur()" />
+        <input name="name" v-model="form.values.name" @blur="form.fields.name.onBlur()" />
         <span v-if="form.errors.has('name')" class="error">{{ form.errors.first('name') }}</span>
       </label>
 
       <label class="field">
         <span>Email</span>
-        <input name="email" type="email" v-model="form.fields.email.value" @blur="form.fields.email.onBlur()" />
+        <input name="email" type="email" v-model="form.values.email" @blur="form.fields.email.onBlur()" />
         <span v-if="form.errors.has('email')" class="error">{{ form.errors.first('email') }}</span>
       </label>
 
       <label class="field">
         <span>Password</span>
-        <input name="password" type="password" v-model="form.fields.password.value" @blur="form.fields.password.onBlur()" />
+        <input name="password" type="password" v-model="form.values.password" @blur="form.fields.password.onBlur()" />
         <span v-if="form.errors.has('password')" class="error">{{ form.errors.first('password') }}</span>
       </label>
 
@@ -49,7 +49,7 @@ const form = useForm(registerForm, {
         <input
           name="passwordConfirmation"
           type="password"
-          v-model="form.fields.passwordConfirmation.value"
+          v-model="form.values.passwordConfirmation"
           @blur="form.fields.passwordConfirmation.onBlur()"
         />
         <span v-if="form.errors.has('passwordConfirmation')" class="error">{{ form.errors.first('passwordConfirmation') }}</span>

apps/blog-nuxt/pages/reset-password.vue

@@ -23,11 +23,11 @@ const form = useForm(resetPasswordForm, {
     </div>
 
     <form v-if="token" class="stack" @submit.prevent="form.submit()">
-      <input name="token" type="hidden" v-model="form.fields.token.value">
+      <input name="token" type="hidden" :value="form.values.token">
 
       <label class="field">
         <span>New password</span>
-        <input name="password" type="password" v-model="form.fields.password.value" @blur="form.fields.password.onBlur()" />
+        <input name="password" type="password" v-model="form.values.password" @blur="form.fields.password.onBlur()" />
         <span v-if="form.errors.has('password')" class="error">{{ form.errors.first('password') }}</span>
       </label>
 
@@ -36,7 +36,7 @@ const form = useForm(resetPasswordForm, {
         <input
           name="passwordConfirmation"
           type="password"
-          v-model="form.fields.passwordConfirmation.value"
+          v-model="form.values.passwordConfirmation"
           @blur="form.fields.passwordConfirmation.onBlur()"
         />
         <span v-if="form.errors.has('passwordConfirmation')" class="error">{{ form.errors.first('passwordConfirmation') }}</span>

apps/blog-nuxt/pages/verify-email.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useRoute } from '#imports'
-import { ref } from 'vue'
 import { useForm } from '@holo-js/adapter-nuxt/client'
+import { ref } from 'vue'
 import { verifyEmailForm } from '~/lib/schemas/auth'
 
 const route = useRoute()
@@ -53,7 +53,7 @@ async function resendVerificationEmail() {
     </div>
 
     <form v-if="token" class="stack" @submit.prevent="form.submit()">
-      <input name="token" type="hidden" v-model="form.fields.token.value">
+      <input name="token" type="hidden" v-model="form.values.token">
       <span v-if="form.errors.has('token')" class="error">{{ form.errors.first('token') }}</span>
       <button :disabled="form.submitting">
         {{ form.submitting ? 'Verifying...' : 'Verify email' }}

apps/blog-sveltekit/src/routes/forgot-password/+page.svelte

@@ -21,7 +21,13 @@
   <form class="stack" on:submit={(event) => { event.preventDefault(); form.submit() }}>
     <label class="field">
       <span>Email</span>
-      <input name="email" type="email" bind:value={form.fields.email.value} on:blur={() => form.fields.email.onBlur()} />
+      <input
+        name="email"
+        type="email"
+        value={form.values.email}
+        on:input={(event) => form.fields.email.onInput(event.currentTarget.value)}
+        on:blur={() => form.fields.email.onBlur()}
+      />
       {#if form.errors.has('email')}
         <span class="error">{form.errors.first('email')}</span>
       {/if}

apps/blog-sveltekit/src/routes/login/+page.svelte

@@ -26,22 +26,39 @@
   <form class="stack" on:submit={(event) => { event.preventDefault(); form.submit() }}>
     <label class="field">
       <span>Email</span>
-      <input name="email" type="email" bind:value={form.fields.email.value} on:blur={() => form.fields.email.onBlur()} />
+      <input
+        name="email"
+        type="email"
+        value={form.values.email}
+        on:input={(event) => form.fields.email.onInput(event.currentTarget.value)}
+        on:blur={() => form.fields.email.onBlur()}
+      />
       {#if form.errors.has('email')}
         <span class="error">{form.errors.first('email')}</span>
       {/if}
     </label>
 
     <label class="field">
       <span>Password</span>
-      <input name="password" type="password" bind:value={form.fields.password.value} on:blur={() => form.fields.password.onBlur()} />
+      <input
+        name="password"
+        type="password"
+        value={form.values.password}
+        on:input={(event) => form.fields.password.onInput(event.currentTarget.value)}
+        on:blur={() => form.fields.password.onBlur()}
+      />
       {#if form.errors.has('password')}
         <span class="error">{form.errors.first('password')}</span>
       {/if}
     </label>
 
     <label class="remember">
-      <input name="remember" type="checkbox" bind:checked={form.fields.remember.value} />
+      <input
+        name="remember"
+        type="checkbox"
+        checked={form.values.remember}
+        on:change={(event) => form.fields.remember.onInput(event.currentTarget.checked)}
+      />
       Remember me
     </label>
 

apps/blog-sveltekit/src/routes/register/+page.svelte

@@ -26,23 +26,40 @@
   <form class="stack" on:submit={(event) => { event.preventDefault(); form.submit() }}>
     <label class="field">
       <span>Name</span>
-      <input name="name" bind:value={form.fields.name.value} on:blur={() => form.fields.name.onBlur()} />
+      <input
+        name="name"
+        value={form.values.name}
+        on:input={(event) => form.fields.name.onInput(event.currentTarget.value)}
+        on:blur={() => form.fields.name.onBlur()}
+      />
       {#if form.errors.has('name')}
         <span class="error">{form.errors.first('name')}</span>
       {/if}
     </label>
 
     <label class="field">
       <span>Email</span>
-      <input name="email" type="email" bind:value={form.fields.email.value} on:blur={() => form.fields.email.onBlur()} />
+      <input
+        name="email"
+        type="email"
+        value={form.values.email}
+        on:input={(event) => form.fields.email.onInput(event.currentTarget.value)}
+        on:blur={() => form.fields.email.onBlur()}
+      />
       {#if form.errors.has('email')}
         <span class="error">{form.errors.first('email')}</span>
       {/if}
     </label>
 
     <label class="field">
       <span>Password</span>
-      <input name="password" type="password" bind:value={form.fields.password.value} on:blur={() => form.fields.password.onBlur()} />
+      <input
+        name="password"
+        type="password"
+        value={form.values.password}
+        on:input={(event) => form.fields.password.onInput(event.currentTarget.value)}
+        on:blur={() => form.fields.password.onBlur()}
+      />
       {#if form.errors.has('password')}
         <span class="error">{form.errors.first('password')}</span>
       {/if}
@@ -53,7 +70,8 @@
       <input
         name="passwordConfirmation"
         type="password"
-        bind:value={form.fields.passwordConfirmation.value}
+        value={form.values.passwordConfirmation}
+        on:input={(event) => form.fields.passwordConfirmation.onInput(event.currentTarget.value)}
         on:blur={() => form.fields.passwordConfirmation.onBlur()}
       />
       {#if form.errors.has('passwordConfirmation')}

apps/blog-sveltekit/src/routes/reset-password/+page.svelte

@@ -24,11 +24,17 @@
 
   {#if data.token}
     <form class="stack" on:submit={(event) => { event.preventDefault(); form.submit() }}>
-      <input name="token" type="hidden" bind:value={form.fields.token.value} />
+      <input name="token" type="hidden" value={form.values.token} />
 
       <label class="field">
         <span>New password</span>
-        <input name="password" type="password" bind:value={form.fields.password.value} on:blur={() => form.fields.password.onBlur()} />
+        <input
+          name="password"
+          type="password"
+          value={form.values.password}
+          on:input={(event) => form.fields.password.onInput(event.currentTarget.value)}
+          on:blur={() => form.fields.password.onBlur()}
+        />
         {#if form.errors.has('password')}
           <span class="error">{form.errors.first('password')}</span>
         {/if}
@@ -39,7 +45,8 @@
         <input
           name="passwordConfirmation"
           type="password"
-          bind:value={form.fields.passwordConfirmation.value}
+          value={form.values.passwordConfirmation}
+          on:input={(event) => form.fields.passwordConfirmation.onInput(event.currentTarget.value)}
           on:blur={() => form.fields.passwordConfirmation.onBlur()}
         />
         {#if form.errors.has('passwordConfirmation')}

apps/blog-sveltekit/src/routes/verify-email/+page.svelte

@@ -56,7 +56,7 @@
 
   {#if data.token}
     <form class="stack" on:submit={(event) => { event.preventDefault(); form.submit() }}>
-      <input name="token" type="hidden" bind:value={form.fields.token.value} />
+      <input name="token" type="hidden" value={form.values.token} />
       {#if form.errors.has('token')}
         <span class="error">{form.errors.first('token')}</span>
       {/if}