Project: Multi-Step Form (Optional)

Introduction

This optional project builds a wizard-style form—account details, preferences, review—using native inputs, custom step components, validation state, and slots. No UI library (Element Plus, Ant Design Vue); you practice props, emit, v-model, and layout patterns from earlier chapters.

Prerequisites

Flow

text
Step 1 Account  →  Step 2 Preferences  →  Step 3 Review  →  Submit
     ↑                    ↑                      ↑
  v-model on shared form state (composable or parent ref)

Shared Form State

src/composables/useSignupForm.ts:

StepIndicator Component

src/components/StepIndicator.vue:

StepPanel With Slot

src/components/StepPanel.vue:

SignupWizard View

Code explanation:

  • Parent owns step index; child panels bind form fields
  • Computed validators gate Next without a validation library
  • Review step shows read-only summary before POST

Accessibility

  • fieldset / legend for radio groups
  • Focus first invalid field on failed Next (optional enhancement)
  • Do not disable Back on step 1 only—already handled

Link: Accessible forms.

Deliverables

  • Three steps with indicator highlighting current step
  • Cannot advance from step 1 with invalid email/password
  • Review shows all collected values
  • Submit POSTs JSON (or mock success without backend)
  • Reset after successful submit

Extensions

  • Persist draft in sessionStorage
  • Route steps: /signup/account, /signup/review
  • Custom FormField with #error slot

FAQ

Why not VeeValidate?

This track teaches fundamentals; add VeeValidate when forms grow large.

v-model on custom input?

See Forms and v-model—modelValue + update:modelValue.

Element Plus Steps?

Official docs for production; this project mirrors the same UX with plain Vue.

Required chapter?

No—optional after Admin dashboard.