vue-forms

Vue 3 Form Patterns

v-model is the foundation. Add vee-validate when validation grows beyond simple HTML5 attributes.

Detection

Marker (in deps)	Library
vee-validate (+ @vee-validate/zod or @vee-validate/yup)	vee-validate (recommended)
@vueuse/core	VueUse helpers (lighter alternative)
(none)	Native v-model + HTML5 validation
zod / yup / valibot	Pair with vee-validate via resolver

Native v-model (sufficient for simple forms)

<script setup lang="ts">
import { ref } from 'vue';

const email = ref('');
const password = ref('');
const remember = ref(false);

function onSubmit() {
  // ...
}
</script>

<template>
  <form @submit.prevent="onSubmit">
    <input v-model="email" type="email" required placeholder="Email" />
    <input v-model="password" type="password" required minlength="8" placeholder="Password" />
    <label>
      <input v-model="remember" type="checkbox" /> Remember me
    </label>
    <button>Log in</button>
  </form>
</template>

Built-in HTML5 validation (required, type="email", pattern, minlength, maxlength) is free. Use it for forms ≤3 fields with simple rules.

v-model modifiers

<input v-model.lazy="text" />          <!-- updates on change, not input -->
<input v-model.number="age" />          <!-- coerces to number -->
<input v-model.trim="username" />       <!-- trims whitespace -->

v-model on custom components

In Vue 3.4+, use defineModel:

<!-- CustomInput.vue -->
<script setup lang="ts">
const value = defineModel<string>();
const error = defineModel<string | null>('error', { default: null });
</script>

<template>
  <div>
    <input v-model="value" />
    <p v-if="error" class="error">{{ error }}</p>
  </div>
</template>

<!-- Parent -->
<CustomInput v-model="form.email" v-model:error="emailError" />

For Vue 3.0–3.3, use manual props + emits:

<script setup lang="ts">
const props = defineProps<{ modelValue: string }>();
const emit = defineEmits<{ 'update:modelValue': [value: string] }>();

function onInput(e: Event) {
  emit('update:modelValue', (e.target as HTMLInputElement).value);
}
</script>

<template>
  <input :value="props.modelValue" @input="onInput" />
</template>