Nuxt•7d ago

MultiStep Form with zod + nuxt ui

I got a a multistep form when i use a tabs for switch between the step my code will be below

message.txt

3 Replies

Hi @magius. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can offer some guidance on creating a multi-step form using Zod and Nuxt UI components. Here's how you can approach this: 1. Use the UTabs component from Nuxt UI to create the multi-step form structure. This component allows you to switch between different steps easily. 2. For form validation, you can use Zod with the UForm component from Nuxt UI. Here's an example of how to set up a form with Zod validation:

<script setup lang="ts">
import { object, string } from 'zod'

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

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

async function onSubmit (event) {
  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>
    <!-- Add more form fields here -->
  </UForm>
</template>

<script setup lang="ts">
import { object, string } from 'zod'

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

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

async function onSubmit (event) {
  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>
    <!-- Add more form fields here -->
  </UForm>
</template>

3. To create a multi-step form, you can combine the UTabs and UForm components. Each tab can represent a step in your form. Here's a basic structure:

<template>
  <UTabs :items="formSteps">
    <template #item="{ item }">
      <UForm :schema="item.schema" :state="item.state" @submit="item.onSubmit">
        <!-- Form fields for this step -->
      </UForm>
    </template>
  </UTabs>
</template>

<script setup>
const formSteps = [
  {
    label: 'Step 1',
    schema: step1Schema,
    state: step1State,
    onSubmit: handleStep1Submit
  },
  // Add more steps here
]
</script>

<template>
  <UTabs :items="formSteps">
    <template #item="{ item }">
      <UForm :schema="item.schema" :state="item.state" @submit="item.onSubmit">
        <!-- Form fields for this step -->
      </UForm>
    </template>
  </UTabs>
</template>

<script setup>
const formSteps = [
  {
    label: 'Step 1',
    schema: step1Schema,
    state: step1State,
    onSubmit: handleStep1Submit
  },
  // Add more steps here
]
</script>

4. You can use Pinia to store the form data across different steps. This allows you to persist data as the user moves between steps. Remember to handle the navigation between steps, either by using the v-model on the UTabs component to control the selected index, or by using the @change event to react to tab changes. For more detailed information on using these components, you can refer to the Nuxt UI documentation for Form (https://ui.nuxt.com/components/form) and Tabs (https://ui.nuxt.com/components/tabs). If you need more specific help or have a particular issue you're facing with your multi-step form implementation, please provide more details about your current code and the problem you're encountering. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7d ago

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

magiusOP•7d ago

the solution proposed by kapa worked but cant i used 2 schema that can be extend one another

Gaming

Programming

MultiStep Form with zod + nuxt ui