NuxtUI Form Submit Issue

soymilk · 2025-09-24T01:26:39.846Z

I'm using NuxtUI and the `UForm` element cannot be submitted. It says that `e.preventDefault` is not a function: Here's a reproduction: ```tsx console.log(e)" @submit="(e) => console.log(e)" > import * as z from "zod"; const formState = ref({ text: "" }); ```

I'm using NuxtUI and the

UForm

UForm

element cannot be submitted. It says that

e.preventDefault

e.preventDefault

is not a function:

Here's a reproduction:

<template>
  <UForm
    :schema="z.object({ text: z.string() })"
    :state="formState"
    @error="(e) => console.log(e)"
    @submit="(e) => console.log(e)"
  >
    <UInput v-model="formState.text" name="text" />
    <UButton type="submit" label="Submit" />
  </UForm>
</template>
  
<script setup lang="ts">
import * as z from "zod";

const formState = ref({ text: "" });
</script>

<template>
  <UForm
    :schema="z.object({ text: z.string() })"
    :state="formState"
    @error="(e) => console.log(e)"
    @submit="(e) => console.log(e)"
  >
    <UInput v-model="formState.text" name="text" />
    <UButton type="submit" label="Submit" />
  </UForm>
</template>
  
<script setup lang="ts">
import * as z from "zod";

const formState = ref({ text: "" });
</script>

Nuxt•6mo ago•

31 replies

soymilk

NuxtUI Form Submit Issue

I'm using NuxtUI and the

UForm

UForm

element cannot be submitted. It says that

e.preventDefault

e.preventDefault

is not a function:

Here's a reproduction:

<template>
  <UForm
    :schema="z.object({ text: z.string() })"
    :state="formState"
    @error="(e) => console.log(e)"
    @submit="(e) => console.log(e)"
  >
    <UInput v-model="formState.text" name="text" />
    <UButton type="submit" label="Submit" />
  </UForm>
</template>
  
<script setup lang="ts">
import * as z from "zod";

const formState = ref({ text: "" });
</script>

<template>
  <UForm
    :schema="z.object({ text: z.string() })"
    :state="formState"
    @error="(e) => console.log(e)"
    @submit="(e) => console.log(e)"
  >
    <UInput v-model="formState.text" name="text" />
    <UButton type="submit" label="Submit" />
  </UForm>
</template>
  
<script setup lang="ts">
import * as z from "zod";

const formState = ref({ text: "" });
</script>

NuxtUI Form Submit Issue

Similar Threads

NuxtUI Form Submit Issue

Similar Threads

Similar Threads

Similar Threads