Nuxt•2mo ago

issue with nuxtui4 and authform

<template>
    <div class="flex flex-col items-center justify-center gap-4 p-4 min-h-screen">
        <UPageCard class="w-full max-w-md">
            <UAuthForm 
            
            title="Sign Up for [name]"
            description="Enter your credentials to access your account."
            icon="i-lucide-user"
            :fields="fields"
            :providers="providers"
            
            @submit="onSubmit"
            :state="state"
            
            />
        </UPageCard>
    </div>
</template>

<script setup>
import { useToast } from '@nuxt/ui/runtime/composables/useToast.js'
import { reactive } from 'vue'


const toast = useToast()

const fields = [{
  name: 'email',
  type: 'email',
  label: 'Email',
  placeholder: 'Enter your email',
  required: true
}, {
  name: 'password',
  label: 'Password',
  type: 'password',
  placeholder: 'Enter your password',
  required: true
}]

const providers = [
    {
        label: 'Google',
        icon: 'logos:google-icon',
        onClick: () => {
            toast.add({ title: 'Google', description: 'Login with Google' })
        }
    }, 
    {
        label: 'GitHub',
        icon: 'logos:github-icon',
        onClick: () => {
            toast.add({ title: 'GitHub', description: 'Login with GitHub' })
        }
    }
]

const state = reactive({
    email: '',
    password: '',
})

const validate = (state) => {
    console.log(state)
    const errors = []
    if (!state.email) errors.push({ name: 'email', message: 'Email is required' })
    if (!state.password) errors.push({ name: 'password', message: 'Password is required' })
    console.log('Validation errors', errors)
    return errors
}

function onSubmit(payload) {
    console.log('Form submitted', payload)
}

</script>

<template>
    <div class="flex flex-col items-center justify-center gap-4 p-4 min-h-screen">
        <UPageCard class="w-full max-w-md">
            <UAuthForm 
            
            title="Sign Up for [name]"
            description="Enter your credentials to access your account."
            icon="i-lucide-user"
            :fields="fields"
            :providers="providers"
            
            @submit="onSubmit"
            :state="state"
            
            />
        </UPageCard>
    </div>
</template>

<script setup>
import { useToast } from '@nuxt/ui/runtime/composables/useToast.js'
import { reactive } from 'vue'


const toast = useToast()

const fields = [{
  name: 'email',
  type: 'email',
  label: 'Email',
  placeholder: 'Enter your email',
  required: true
}, {
  name: 'password',
  label: 'Password',
  type: 'password',
  placeholder: 'Enter your password',
  required: true
}]

const providers = [
    {
        label: 'Google',
        icon: 'logos:google-icon',
        onClick: () => {
            toast.add({ title: 'Google', description: 'Login with Google' })
        }
    }, 
    {
        label: 'GitHub',
        icon: 'logos:github-icon',
        onClick: () => {
            toast.add({ title: 'GitHub', description: 'Login with GitHub' })
        }
    }
]

const state = reactive({
    email: '',
    password: '',
})

const validate = (state) => {
    console.log(state)
    const errors = []
    if (!state.email) errors.push({ name: 'email', message: 'Email is required' })
    if (!state.password) errors.push({ name: 'password', message: 'Password is required' })
    console.log('Validation errors', errors)
    return errors
}

function onSubmit(payload) {
    console.log('Form submitted', payload)
}

</script>

so for some reason my onSubmit isnt being called. and i have no idea why. most of this code is copied straight from the website but my nuxtui4 just isnt working

5 Replies

kapa.ai•2mo ago

Hi @Paul. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Your issue is that you are passing a custom :state and :validate prop to the UAuthForm component, but according to the Nuxt UI documentation, UAuthForm manages its own internal state and validation. The documentation examples do not show passing a :state or :validate prop to UAuthForm—these are used with UForm, not UAuthForm. UAuthForm expects you to provide the fields and (optionally) a schema for validation, and it will handle the state internally. You should not pass a :state or :validate prop to UAuthForm. Doing so may interfere with its internal logic and prevent events like @submit from firing as expected. How to fix: - Remove :state and :validate from your UAuthForm usage. - If you want validation, use the :schema prop with a supported validation library (e.g., Zod, Yup, etc.). Example from the docs:

<script setup lang="ts">
import * as z from 'zod'
import type { FormSubmitEvent } from '@nuxt/ui'

const fields = [
  { name: 'email', type: 'text', label: 'Email', required: true },
  { name: 'password', type: 'password', label: 'Password', required: true }
]

const schema = z.object({
  email: z.string().email('Invalid email'),
  password: z.string().min(8, 'Must be at least 8 characters')
})

function onSubmit(payload: FormSubmitEvent<any>) {
  console.log('Submitted', payload)
}
</script>

<template>
  <UAuthForm
    :fields="fields"
    :schema="schema"
    title="Sign Up"
    description="Enter your credentials to access your account."
    icon="i-lucide-user"
    @submit="onSubmit"
  />
</template>

<script setup lang="ts">
import * as z from 'zod'
import type { FormSubmitEvent } from '@nuxt/ui'

const fields = [
  { name: 'email', type: 'text', label: 'Email', required: true },
  { name: 'password', type: 'password', label: 'Password', required: true }
]

const schema = z.object({
  email: z.string().email('Invalid email'),
  password: z.string().min(8, 'Must be at least 8 characters')
})

function onSubmit(payload: FormSubmitEvent<any>) {
  console.log('Submitted', payload)
}
</script>

<template>
  <UAuthForm
    :fields="fields"
    :schema="schema"
    title="Sign Up"
    description="Enter your credentials to access your account."
    icon="i-lucide-user"
    @submit="onSubmit"
  />
</template>

Notice there is no :state or :validate prop on UAuthForm. This matches the official documentation and should resolve your issue with the @submit event not firing Docs: AuthForm Usage. If you need to access the form state, you can use the exposed instance via useTemplateRef, but you should not try to control the state directly via props Docs: AuthForm Expose. Summary:
Remove :state and :validate from your UAuthForm. Use :schema for validation, and @submit will work as expected.
If you need more advanced control, consider using UForm directly instead of UAuthForm. --- References:
- AuthForm Usage - AuthForm Expose ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@1267552151454875751> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

PaulOP•2mo ago

@kapa.ai well i was able to use state and validate and it DID infact work since UAUthForm inherist UForm, however i did remove them and still nothing works.

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for clarifying. You are correct that UAuthForm is built on top of UForm and does inherit its props, including state and validate—so using them is technically supported. However, the official documentation and examples focus on using fields and (optionally) schema for validation, letting UAuthForm manage state internally AuthForm Usage. Given that removing :state and :validate did not resolve your issue and your @submit handler is still not being called, here are some things to check based on the knowledge sources: 1. Required Props - Make sure you are passing the required fields prop. Your code does this correctly. - If you use validation, pass a schema prop using a supported validation library (e.g., Zod, Yup, etc.). 2. Event Emission - UAuthForm emits a submit event with the signature [payload: FormSubmitEvent<any>] AuthForm Emits. - Your usage of @submit="onSubmit" matches the documentation. 3. Providers - Your providers array is fine and should not interfere with form submission. 4. Example from Docs Here is a minimal working example from the documentation:

<script setup lang="ts">
import * as z from 'zod'
import type { FormSubmitEvent } from '@nuxt/ui'

const fields = [
  { name: 'email', type: 'text', label: 'Email', required: true },
  { name: 'password', type: 'password', label: 'Password', required: true }
]

const schema = z.object({
  email: z.string().email('Invalid email'),
  password: z.string().min(8, 'Must be at least 8 characters')
})

function onSubmit(payload: FormSubmitEvent<any>) {
  console.log('Submitted', payload)
}
</script>
<template>
  <UAuthForm
    :fields="fields"
    :schema="schema"
    title="Sign Up"
    description="Enter your credentials to access your account."
    icon="i-lucide-user"
    @submit="onSubmit"
  />
</template>

<script setup lang="ts">
import * as z from 'zod'
import type { FormSubmitEvent } from '@nuxt/ui'

const fields = [
  { name: 'email', type: 'text', label: 'Email', required: true },
  { name: 'password', type: 'password', label: 'Password', required: true }
]

const schema = z.object({
  email: z.string().email('Invalid email'),
  password: z.string().min(8, 'Must be at least 8 characters')
})

function onSubmit(payload: FormSubmitEvent<any>) {
  console.log('Submitted', payload)
}
</script>
<template>
  <UAuthForm
    :fields="fields"
    :schema="schema"
    title="Sign Up"
    description="Enter your credentials to access your account."
    icon="i-lucide-user"
    @submit="onSubmit"
  />
</template>

This should work as expected AuthForm Usage. 5. Troubleshooting Steps - Check for Typos: Ensure @submit is not misspelled. - Check Nuxt UI Version: Make sure you are using a compatible version of Nuxt UI v4, as there were breaking changes in the upgrade from v3 to v4 Migration to v4. - Console Warnings/Errors: Look for any errors in the browser console that might indicate a problem with the component registration or usage. - Component Registration: Ensure UAuthForm is properly registered and available in your project. 6. Known Issues The knowledge sources do not mention any current issues with @submit not firing on UAuthForm when used as documented. --- If you have followed the documentation and the minimal example above still does not work, the knowledge sources do not provide enough information to diagnose a deeper issue. In that case, it may be a local environment or project configuration problem not covered in the official docs. If you can provide any error messages or additional context, I can help you further. Otherwise, based on the official documentation, your usage should work as expected AuthForm Usage. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@1267552151454875751> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

issue with nuxtui4 and authform

Did you find this page helpful?