Form Validation with Vuelidate in Nuxt 3

This guide covers setting up Vuelidate for form validation in a Nuxt 3 application using Nuxt UI components.

Step 1: Install Nuxt UI

npm install @nuxt/ui

Update nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
})

Step 2: Install Vuelidate

npm install @vuelidate/core @vuelidate/validators

Step 3: Set Up Validation

<script setup lang="ts">
import useVuelidate from '@vuelidate/core'
import {
  helpers,
  maxLength,
  minLength,
  numeric,
  required,
} from '@vuelidate/validators'

const form = reactive({
  nameSurname: '',
  phone: '',
  email: '',
})

const rules = {
  nameSurname: {
    required: helpers.withMessage('This field is required', required),
    minLength: minLength(6),
  },
  phone: {
    required: helpers.withMessage('This field is required', required),
    numeric,
    minLength: minLength(11),
    maxLength: maxLength(11),
  },
  email: {
    required: helpers.withMessage('This field is required', required),
  },
}

const v = useVuelidate(rules, form)

function validateWithVuelidate() {
  v.value.$touch()
  return v.value.$errors.map((error) => ({
    path: error.$propertyPath,
    message: error.$message as string,
  }))
}

watch(form, validateWithVuelidate, { deep: true })
</script>

Step 4: Display Validation Errors

Pass the validate function to your Nuxt UI UForm component:

<UForm :validate="validateWithVuelidate" :state="form" @submit="onSubmit">
  <UFormGroup label="Full Name" name="nameSurname">
    <UInput v-model="form.nameSurname" />
  </UFormGroup>
  <UFormGroup label="Phone" name="phone">
    <UInput v-model="form.phone" />
  </UFormGroup>
  <UButton type="submit">Submit</UButton>
</UForm>

Conclusion

Vuelidate integrates seamlessly with Nuxt UI, giving you robust, reactive form validation with minimal boilerplate.