Nuxt•6mo ago

Extend NuxtUI Form Component

I'm using Nuxt UI and I want to extend the UForm component, to always scrol lthe first error into view. I would normally create a new Component where I do something like this:

<script setup lang="ts">
interface Props {
  schema: Object,
  state: Object,
}

async function onError (event: FormErrorEvent) {
  const element = document.getElementById(event.errors[0].id)
  element?.focus()
  element?.scrollIntoView({ behavior: 'smooth', block: 'center' })
}
</script>

<template>
  <UForm
    :schema="schema"
    :state="state"
    :validate-on="['submit']"
    @submit="$emit('submit')"
    @error="onError"
  >
    <slot></slot>
  </UForm>
</template>

<script setup lang="ts">
interface Props {
  schema: Object,
  state: Object,
}

async function onError (event: FormErrorEvent) {
  const element = document.getElementById(event.errors[0].id)
  element?.focus()
  element?.scrollIntoView({ behavior: 'smooth', block: 'center' })
}
</script>

<template>
  <UForm
    :schema="schema"
    :state="state"
    :validate-on="['submit']"
    @submit="$emit('submit')"
    @error="onError"
  >
    <slot></slot>
  </UForm>
</template>

The problem is, the types used for schema & state don't seem to be exported. How would you usually extend one of Nuxt UIs components? What's the best approach?

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Extend NuxtUI Form Component