Form Validation Approaches: @formkit/vue vs vuelidate

Both @formkit/vue and vuelidate help Vue developers validate user input, but they solve different problems. @formkit/vue is a full-featured form authoring framework, while vuelidate is a focused validation utility. Let’s compare how they work in practice.

🧱 Architecture: Full Framework vs Validation-Only Utility

@formkit/vue provides everything needed to build forms — from input components to validation logic to accessibility features. You define your form schema declaratively, and FormKit handles rendering, state management, and validation.

<!-- @formkit/vue: Complete form with built-in UI -->
<script setup>
import { FormKit } from '@formkit/vue'

const formData = {}

function handleSubmit(data) {
  console.log(data)
}
</script>

<template>
  <FormKit
    type="form"
    :actions="false"
    @submit="handleSubmit"
  >
    <FormKit
      name="email"
      type="email"
      label="Email address"
      validation="required|email"
    />
    <FormKit
      name="password"
      type="password"
      label="Password"
      validation="required|length:8"
    />
  </FormKit>
</template>

vuelidate only validates data — it doesn’t render anything. You pair it with your own form markup and manage DOM interactions yourself.

<!-- vuelidate: Validation logic only -->
<script setup>
import useVuelidate from '@vuelidate/core'
import { required, email, minLength } from '@vuelidate/validators'
import { reactive } from 'vue'

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

const rules = {
  email: { required, email },
  password: { required, minLength: minLength(8) }
}

const v$ = useVuelidate(rules, state)

function handleSubmit() {
  v$.value.$validate()
  if (!v$.value.$error) {
    console.log(state)
  }
}
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="state.email" placeholder="Email" />
    <div v-if="v$.email.$error">{{ v$.email.$errors[0].$message }}</div>
    
    <input v-model="state.password" type="password" placeholder="Password" />
    <div v-if="v$.password.$error">{{ v$.password.$errors[0].$message }}</div>
    
    <button type="submit">Submit</button>
  </form>
</template>

🔌 Integration with Custom Components

@formkit/vue uses its own component system. While you can create custom inputs using FormKit’s plugin architecture, you’re generally working within FormKit’s rendering pipeline.

// @formkit/vue: Creating a custom input
import { createInput } from '@formkit/vue'

const CustomRating = createInput({
  // component definition
})

// Then register globally or locally

vuelidate works with any input component because it only cares about the data model. This makes it easy to plug into existing design systems.

<!-- vuelidate with Vuetify -->
<template>
  <v-text-field
    v-model="state.email"
    :error-messages="v$.email.$errors.map(e => e.$message)"
    label="Email"
  />
</template>

📝 Validation Definition Style

@formkit/vue uses string-based validation rules that are applied directly on FormKit nodes.

<FormKit
  name="age"
  validation="required|number|between:18,99"
/>

You can also write custom validation functions:

const customValidator = (node) => {
  return node.value.length > 5 ? true : 'Must be longer than 5 characters'
}

vuelidate defines validation rules as JavaScript objects using validator functions from @vuelidate/validators or custom functions.

const rules = {
  username: {
    required,
    unique: async (value) => {
      const exists = await checkUsernameExists(value)
      return !exists
    }
  }
}

⚡ Handling Complex Validation Scenarios

For cross-field validation (e.g., “password and confirm password must match”), both libraries support it but with different patterns.

@formkit/vue uses the $get helper to reference other fields in validation:

<FormKit
  name="confirmPassword"
  validation="required|confirm:@password"
/>

Or with a custom function:

const confirmPassword = (node) => {
  const password = node.parent?.$get('password')?.value
  return node.value === password || 'Passwords do not match'
}

vuelidate handles cross-field validation by defining validators at the root level or using sibling references:

const rules = {
  password: { required, minLength: minLength(8) },
  confirmPassword: {
    required,
    sameAsPassword: sameAs(state.password)
  }
}

🌐 Accessibility and UX Features

@formkit/vue automatically manages ARIA attributes, focus management, error announcements for screen readers, and live regions. Input states (like loading indicators during async validation) are built in.

vuelidate leaves accessibility entirely up to you. You must manually wire up ARIA attributes, manage focus traps, and ensure error messages are announced.

🔄 Async Validation Support

Both support asynchronous validation, but the implementation differs.

@formkit/vue allows async validators that return promises:

const checkEmail = async (node) => {
  const available = await api.checkEmail(node.value)
  return available || 'Email already taken'
}

vuelidate supports async validators through the same object syntax:

const rules = {
  email: {
    async isUnique(value) {
      if (!value) return true
      const exists = await api.emailExists(value)
      return !exists
    }
  }
}

📦 Bundle Impact and Learning Curve

@formkit/vue has a larger footprint because it includes UI components, theming, and state management. However, it reduces the amount of boilerplate you write for common form patterns.

vuelidate is much smaller since it only handles validation logic. But you’ll write more code to connect validation state to your UI and handle edge cases like debouncing or submission flow.

🛠️ When Each Shines

Use @formkit/vue when:

• You’re starting a new project and want consistent, accessible forms fast
• You need built-in support for complex form patterns (conditional fields, multi-step wizards)
• You prefer convention over configuration for form building
• Your team includes designers who can leverage FormKit’s theme system

Use vuelidate when:

• You already have a mature UI component library
• You only need validation logic without UI opinions
• You require maximum flexibility in how validation errors are displayed
• You’re working on a legacy codebase where replacing form markup isn’t feasible

💡 Final Thought

Think of @formkit/vue as a complete workshop for building forms — it gives you tools, materials, and blueprints. vuelidate is like a high-precision measuring tape — it does one job extremely well, but you bring everything else. Choose based on whether you need a full form solution or just validation logic.