官方文件：https://vee-validate.logaretm.com/v4/

npm 安裝
npm install vee-validate @vee-validate/rules @vee-validate/i18n--save

先在main.js匯入

/* eslint-disable vue/multi-word-component-names */
import { createApp } from 'vue'
import { Field, Form, ErrorMessage, defineRule, configure } from 'vee-validate'
import { required, email, min } from '@vee-validate/rules'
import { localize, setLocale } from '@vee-validate/i18n'
import zhTW from '@vee-validate/i18n/dist/locale/zh_TW.json'
import App from './App.vue'
import router from './router'

defineRule('required', required)
defineRule('email', email)
defineRule('min', min)
configure({
  // Generates an English message locale generator
  generateMessage: localize({ zh_TW: zhTW }),
  validateOnInput: true
})
setLocale('zh_TW')

const app = createApp(App).use(router)
// 註冊Field, Form, ErrorMessage 需在createApp後方，且在mount前方
app.component('Form', Form)
app.component('Field', Field)
app.component('ErrorMessage', ErrorMessage)

app.mount('#app')

接下來到表格所在的.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />

    <Form @submit="onSubmit" v-slot="{ errors }">
      {{ errors }}
      <div class="mb-3">
        <label for="email" class="form-label">Email</label>
        <Field
          id="email"
          name="email"
          type="email"
          class="form-control"
          rules="email|required"
          v-model="user.email"
          :class="{
            'is-invalid': errors['email'],
            'is-valid': !errors['email'] && user.email
          }"
          placeholder="請輸入 Email"
        ></Field>
        <error-message name="email" class="invalid-feedback"></error-message>
      </div>

      <button class="btn btn-primary" type="submit">Submit</button>
    </Form>
  </div>
</template>

同頁的script

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  },
  data () {
    return {
      user: {}
    }
  },
  methods: {
    onSubmit () {
      console.log('Submitting :(')
      console.log(this.user)
    }
  },
  created () {
    console.log(this)
  }
}
</script>