vee-validate

Painless Vue forms for Nuxt

Installation

npm i @vee-validate/nuxt

Setup

Add the following lines to the modules section of nuxt.config.{ts,js}

modules: ['@vee-validate/nuxt']
veeValidate: {
  // disable or enable auto imports
  autoImports: true,
  // Use different names for components
  componentNames: {
    Form: 'VeeForm',
    Field: 'VeeField',
    FieldArray: 'VeeFieldArray',
    ErrorMessage: 'VeeErrorMessage',
  },
},

Demo

Form.vue

<script setup>
const isRequired = value => {
  if (!value?.trim())
    return 'This field is required'
  return true
}

const handleForm = ({ input }) => alert(`You entered ${input}`)
</script>

<template>
  <VeeForm @submit="handleForm">
    <VeeField name="input" placeholder="Enter value" :rules="isRequired" />
    <VeeErrorMessage name="input" />
  </VeeForm>
</template>

To learn more visit the vee-validate website