vee validateでバックエンドのバリデーションメッセージと紐付ける

環境

vue2.6
Nuxt Bridge
vee-validate3
Laravel9

概要

フロントバリデーションメッセージだけではなくて、バックエンドで返却されるバリデーションメッセージもvee-validateの機能を使って表示させたいなってことがありましたので、ご参考程度に見てください。

手順

1.まずvee-validateを使う準備をします

まず必要なバリデーションとしてrequiredを使えるようにします。
ちなみにValidationObserverというものを使ってバックエンドのメッセージをセットします。

vee-validate.js

import { defineNuxtPlugin } from '@nuxt/bridge/dist/runtime';
import { extend, ValidationProvider, ValidationObserver } from 'vee-validate';
import { required } from 'vee-validate/dist/rules';

export default defineNuxtPlugin((nuxtApp) => {
  extend('required', { ...required, message: '{_field_}を入力してください。' });

  nuxtApp.vueApp.component('ValidationProvider', ValidationProvider);
  nuxtApp.vueApp.component('ValidationObserver', ValidationObserver);
});

2.フロントバリデーションの設定をします

ValidationObserverでform全体を囲います。
ValidationProviderではrulesで必須だけ設定しておきます。

form.vue

<template>
    <ValidationObserver ref="observer">
        <form @submit.prevent="post()">
            <ValidationProvider
              v-slot="{ errors }"
              vid="email"
              rules="required"
              name="メールアドレス"
            >
              <input v-model="email" type="email" />
              
              <div v-if="errors.length > 0">
                {{ errors[0] }}
              </div>
            </ValidationProvider>
            <button type="submit">送信</button>
        </form>
    </ValidationObserver>
</template>

<script setup>
</script>

name="メールアドレス"とすることで、手順１で設定した{_field_}を入力してください。の部分にセットされます。
ただ、この時点でフロント側でのバリデーションメッセージは表示ができますが、バックエンドのメッセージは表示できないです。

3.送信ボタンが押された後の処理を書きます

ここで初めて、ValidationObserverでセットしたrefを使います。

form.vue

<template>
    ~省略~
</template>

<script setup>
const nuxtApp = useNuxtApp();
const observer = ref();
const email = ref();

const post = async () => {
  if (!(await observer.value.validate())) {
    return;
  }
  const params = {
    email: email.value,
  };

  try {
    await nuxtApp.$axios
      .$post('/api/post/', params)
      .then(() => {
        alert('更新しました。');
      });
  } catch (error) {
    if (error.response.status === 400) {
      observer.value.setErrors(error.response.data.errors);
      alert('入力内容を確認してください。');
    } else {
      alert('更新に失敗しました。');
    }
  }
};
</script>

setErrorsというものを使うと、ValidationProviderでセットしたvidまたはnameとバックエンドから帰ってきたkey名が同じものを見つけてくれて、自動でセットしてくれます。

以下、公式よりsetErrors説明

Sets error messages on validation provider instances, the key should match each provider's vid or name.

以上です！