A
arktype•5d ago
albertcito

It is compatible with Nuxt UI?

Some one knows if this library is compatible with ui forms? I would love to use it ! https://ui.nuxt.com/components/form#schema-validation
Nuxt UI
Form Vue Component - Nuxt UI
A form component with built-in validation and submission handling.
2 Replies
ssalbdivad
ssalbdivad•5d ago
It mentions it accepts any Standard Schema so yes, it should be!
albertcito
albertcitoOP•5d ago
I just tested it. It worked properly 
<script lang="ts">
import { type } from "arktype";

const schema = type({
    firstName: "string > 0",
    lastName: "string > 0",
    email: "string.email",
    phone: "string"
});
type FormState = typeof schema.infer;
</script>
<script setup lang="ts">
const props = defineProps<{
  initialValues?: Partial<FormState>;
}>()
const state = reactive<Partial<FormState>>({ ...props.initialValues })
</script>

<template>
  <UForm
    :schema="schema"
    :state="state"
    class="flex flex-col gap-1"
    @submit="console.log"
    @error="console.log"
  >
    <UFormField label="First Name" name="firstName">
      <UInput v-model="state.firstName" />
    </UFormField>
    <UFormField label="Last Name" name="lastName">
      <UInput v-model="state.lastName" />
    </UFormField>
    <UFormField label="Email" name="email">
      <UInput v-model="state.email" />
    </UFormField>
    <UFormField label="Phone" name="phone">
      <UInput v-model="state.phone" v-maska="'(###) ###-####'" />
    </UFormField>
    <div class="p-2">
      <UButton type="submit">
          Submit
      </UButton>
    </div>
  </UForm>
</template>
<script lang="ts">
import { type } from "arktype";

const schema = type({
    firstName: "string > 0",
    lastName: "string > 0",
    email: "string.email",
    phone: "string"
});
type FormState = typeof schema.infer;
</script>
<script setup lang="ts">
const props = defineProps<{
  initialValues?: Partial<FormState>;
}>()
const state = reactive<Partial<FormState>>({ ...props.initialValues })
</script>

<template>
  <UForm
    :schema="schema"
    :state="state"
    class="flex flex-col gap-1"
    @submit="console.log"
    @error="console.log"
  >
    <UFormField label="First Name" name="firstName">
      <UInput v-model="state.firstName" />
    </UFormField>
    <UFormField label="Last Name" name="lastName">
      <UInput v-model="state.lastName" />
    </UFormField>
    <UFormField label="Email" name="email">
      <UInput v-model="state.email" />
    </UFormField>
    <UFormField label="Phone" name="phone">
      <UInput v-model="state.phone" v-maska="'(###) ###-####'" />
    </UFormField>
    <div class="p-2">
      <UButton type="submit">
          Submit
      </UButton>
    </div>
  </UForm>
</template>

Did you find this page helpful?