Nuxt•2y 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?

Nuxt•2y ago

PoTTii

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?

Extend NuxtUI Form Component

Similar Threads

Extend NuxtUI Form Component

Similar Threads

Similar Threads

Similar Threads