vee-validate公式doc

Install

npm install vee-validate --save

tsconfig.jsにresolveJsonModule: trueを設定

{
  "compilerOptions": {
    "resolveJsonModule": true,
  }
}

pluginを追加。使うバリデーションはここで定義 ./plugins/vee-validate.ts

import Vue from 'vue'
import ja from 'vee-validate/dist/locale/ja.json'
import {
  ValidationProvider,
  localize,
  extend
} from 'vee-validate'
import { numeric, required, email } from 'vee-validate/dist/rules'

Vue.component('ValidationProvider', ValidationProvider)

localize('ja', ja)

extend('numeric', numeric)
extend('email', email)
extend('required', required)

nuxt.config.js

...
plugins: [
  '@/plugins/vee-validate'
],
...

使い方

<template>
  <div>
    <ValidationObserver ref="observer" v-slot="{ invalid }">
      <v-form>
        <validation-provider v-slot="{ errors }" name="User ID" rules="required">
          <v-text-field
              v-model="userId"
              label="User ID(ルール: 必須)"
              :error-messages="errors"
          />
        </validation-provider>
        <validation-provider v-slot="{ errors }" name="Email" rules="required|email">
          <v-text-field
              v-model="email"
              label="Email(ルール: 必須&Email形式)"
              :error-messages="errors"
          />
        </validation-provider>
      </v-form>
      <v-btn class="mr-4" :disabled="invalid" color="success">submit</v-btn>
    </ValidationObserver>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data () {
    return {
      userId: '',
      email: ''
    }
  }
})
</script>

Select

valueがstringの時

<ValidationProvider
  vid="foo-select"
  rules="required"
  :skip-if-empty="false" // デフォルト値('')を許可しない
>
  <select v-model="selectValue">
    <option value="">default</option>
    <option value="a">A</option>
    <option value="b">B</option>
  </select>
</ValidationProvider>

valueがnumberの時

<ValidationProvider
  v-slot="{ errors }"
  rules="required_select:0,number"
>
  <select v-model.number="selectValue">
    <option value="0">default</option>
    <option value="1">A</option>
    <option value="2">B</option>
  </select>
  <p>{{ errors[0] }}</p>
</ValidationProvider>