vee-validateをNuxt・Vuetifyで利用する

こにし じゅんぺい
Vue.js

vee-validateはフォームバリデーションのルールをシンプルに記述できる便利なライブラリです。

Vue.jsのテンプレート内にvee-validateのコンポーネントを利用することで、比較的簡単にバリデーションを設定することができます。

前提条件

  • Nuxt.jsのプロジェクトがインストールされている
  • Vuetifyがインストールされている

インストール

1
2
3
$ yarn add vee-validate
or
$ npm install vee-validate --save

です。

プラグインファイルの作成

pluginsディレクトリにvee-validate.jsを作成します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
import { ValidationProvider, extend, localize } from "vee-validate";
import { required, max } from "vee-validate/dist/rules";
import ja from "vee-validate/dist/locale/ja.json";
 
 
 
extend("required", {
  ...required
});
 
extend("max", {
  ...max
});
 
localize("ja", ja);
 

localize()メソッドでメッセージを日本語することができます。

テンプレート例

Vuetifyのinputフィールドやボタンのコンポーネントを利用し、フォームを作成しました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
 
<template>
  <div>
    <v-app>
      <v-container>
        <h2>トピック名を入力してください。</h2>
        <hr>
        <ValidationObserver ref="obs" v-slot="{ invalid, validated, passes, validate }">
          <v-form @submit.prevent="passes(create)">
            <v-row>
              <v-col cols="12" sm="6" md="3">
                <ValidationProvider
                  v-slot="{ errors, valid }"
                  rules="required|max:10"
                  name="タイトル"
                >
                  <v-text-field
                    v-model.trim="form.title"
                    label="トピックタイトル"
                    placeholder="タイトルを入力してください。"
                    :error-messages="errors"
                    :success="valid"
                    autofocus
                    clearable
                  ></v-text-field>
                  <small class="form-text text-danger" v-if="serverSideErrors.title">{{ serverSideErrors.title[0] }}</small>
                </ValidationProvider>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="12" sm="6" md="3">
                <ValidationProvider
                  v-slot="{ errors, valid }"
                  rules="required"
                >
                  <v-textarea
                    v-model="form.body"
                    name="input-7-1"
                    label="トピック本文"
                    placeholder="投稿本文を入力してください。"
                    :error-messages="errors"
                    :success="valid"
                    hint="投稿本文を入力"
                    clearable
                  ></v-textarea>
                  <small class="form-text text-danger" v-if="serverSideErrors.body">{{ serverSideErrors.body[0] }}</small>
                </ValidationProvider>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="12" sm="6" md="3">
                <v-btn
                  color="warning"
                  dark
                  type="submit"
                  :disabled="invalid"
                >作成</v-btn>
              </v-col>
            </v-row>
          </v-form>
        </ValidationObserver>
      </v-container>
    </v-app>
  </div>
</template>
 
<script>
import { ValidationObserver, ValidationProvider } from 'vee-validate'
 
export default {
  middleware: [
    'auth'
  ],
  components: {
    ValidationObserver,
    ValidationProvider
  },
  data() {
    return {
      form: {
        title: '',
        body: ''
      },
      isError: false
    }
  },
  methods: {
    async create() {
      await this.$axios.$post('/topics', this.form)
      .catch(err => {
        this.isError = true;
      })
      if (this.isError) {
        this.$router.push('/dashboard');
        return;
      }
       this.$router.push('/')
    }
  }
}
</script>
 
 
 

<ValidationObserver>タグでフォーム全体を囲み、

<ValidationProvider>タグで１つ１つのフォームを囲みます。

ValidationProviderタグにname属性を追加することで、画像のようなタイトルは必須項目ですというメッセージを出力することができます。

name属性を指定しないと{field}は必須項目です。といった表記になるので注意してください。