Nuxt•2mo ago

Nuxt UI w/Form Builder (Schema Based)

There are many great vue form tools out there... but has anybody found an option that works well with Nuxt UI? Even if it's an unfinished project? I'm looking to plug into Sanity CMS before I roll my own.

2 Replies

kapa.ai•2mo ago

Hi @saltytostitos. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, Nuxt UI provides a Form component that works well with schema-based validation. You can use the Form component to validate form data using schema libraries such as Yup, Zod, Joi, Valibot, Superstruct, or your own validation logic. The form component requires two props: state - a reactive object holding the form's state, and schema - a schema object from a validation library. Here is an example of how to use it with Yup:

<script setup lang="ts">
import { object, string, type InferType } from 'yup'
import type { FormSubmitEvent } from '#ui/types'

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

type Schema = InferType<typeof schema>

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

async function onSubmit (event: FormSubmitEvent<Schema>) {
  // Do something with event.data
  console.log(event.data)
}
</script>

<template>
  <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
    <UFormGroup label="Email" name="email">
      <UInput v-model="state.email" />
    </UFormGroup>
</template>

<script setup lang="ts">
import { object, string, type InferType } from 'yup'
import type { FormSubmitEvent } from '#ui/types'

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

type Schema = InferType<typeof schema>

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

async function onSubmit (event: FormSubmitEvent<Schema>) {
  // Do something with event.data
  console.log(event.data)
}
</script>

<template>
  <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
    <UFormGroup label="Email" name="email">
      <UInput v-model="state.email" />
    </UFormGroup>
</template>

Please note that no validation library is included by default, so ensure you install the one you need. For more details, you can refer to the Nuxt UI Form Component Documentation (https://ui.nuxt.com/components/form). As for integrating with Sanity CMS, you would need to fetch the data from Sanity and populate the form's state with it. However, the specifics of this integration are not covered in the provided knowledge sources. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

Gaming

Programming

Nuxt UI w/Form Builder (Schema Based)