login aas function

Author: jannescb

playground/components/LoginForm.vue

@@ -1,23 +1,33 @@
 <template>
-    <div>
-        <input
-            v-model="fields.email"
-            type="text"
-            placeholder="Email"
-        />
-        <input
-            v-model="fields.password"
-            type="password"
-            placeholder="Password"
-        />
+    <Form :form>
+        <FormInput
+            :form
+            name="email"
+        >
+            <input
+                v-model="form.fields.email"
+                type="text"
+                placeholder="Email"
+            />
+        </FormInput>
+        <FormInput
+            :form
+            name="password"
+        >
+            <input
+                v-model="form.fields.password"
+                type="password"
+                placeholder="Password"
+            />
+        </FormInput>
 
-        <button @click="submit()">Login</button>
-    </div>
+        <button>Login</button>
+    </Form>
 </template>
 
 <script setup lang="ts">
 import { useLaravelSanctum } from '#imports'
 
 const { login } = useLaravelSanctum()
-const { fields, submit } = login
+const form = login()
 </script>

src/runtime/composables/useLaravelSanctum.ts

@@ -19,18 +19,20 @@ export const useLaravelSanctum = () => {
         password: z.string().min(6),
     })
 
-    const login = useLaravelForm<LoginForm>({
-        initialValues: {
-            email: '',
-            password: '',
-        },
-        submitUrl: '/login',
-        schema: loginSchema,
-        onSubmitSuccess: async () => {
-            const redirectTo = config.sanctum?.redirectAuthenticated || '/'
-            await router.push(redirectTo)
-        },
-    })
+    const login = () => {
+        return useLaravelForm<LoginForm>({
+            initialValues: {
+                email: '',
+                password: '',
+            },
+            submitUrl: '/login',
+            schema: loginSchema,
+            onSubmitSuccess: async () => {
+                const redirectTo = config.sanctum?.redirectAuthenticated || '/'
+                await router.push(redirectTo)
+            },
+        })
+    }
 
     const registerSchema = z.object({
         name: z.string().min(1),
@@ -39,20 +41,22 @@ export const useLaravelSanctum = () => {
         password_confirmation: z.string().min(6),
     })
 
-    const register = useLaravelForm<RegisterRequest>({
-        initialValues: {
-            name: '',
-            email: '',
-            password: '',
-            password_confirmation: '',
-        },
-        submitUrl: '/register',
-        schema: registerSchema,
-        onSubmitSuccess: async () => {
-            const redirectTo = config.sanctum?.redirectAuthenticated || '/'
-            await router.push(redirectTo)
-        },
-    })
+    const register = () => {
+        return useLaravelForm<RegisterRequest>({
+            initialValues: {
+                name: '',
+                email: '',
+                password: '',
+                password_confirmation: '',
+            },
+            submitUrl: '/register',
+            schema: registerSchema,
+            onSubmitSuccess: async () => {
+                const redirectTo = config.sanctum?.redirectAuthenticated || '/'
+                await router.push(redirectTo)
+            },
+        })
+    }
 
     const logout = async () => {
         try {