Zenn
🤖

Vutifiyとvee-validateを使ってみる：Vue.js Step by Step

2021/05/04に公開
Vue.js
Vuetify
VeeValidate
tech

このシリーズでは、簡単なところからVue.jsを使い始めて、徐々に本格的に使う手順を記録しています。前回は、Vue.jsを導入して、Vue CLIでつくったアプリをGithub Pagesでデプロイするところまでやりました。

今回は、Vue用UIフレームワークであるVuetifyと、Formバリデーションライブラリのvee-validateを使ってみます。

Vuetifyを使う

Vue用UIフレームワークには、BootstrapやTailwind CSSをベースにしたものなど、いろいろな種類があります。Vuetifyの特徴は、マテリアルデザインを採用したことです。また、Vue.jsによるアプリケーションフレームワークNuxt.jsでも利用できます。

マテリアルデザインは、Googleが提唱したデザインシステムで、GoogleのアプリやWebサービスなどに採用されています。Vuetifyを使うと、画面のレイアウトやUI部品の配置などを効率よく統一感のある形で進めることができます。

導入する

新しいVue.jsプロジェクトをまだ作成していない場合、Vuetifyを導入するには、Vue CLIでライブラリを追加するだけ。途中で、利用するバージョンを聞いてくる場合がありますが、とりあえずデフォルトのものを選んでおきます。

$ vue create vuetify-app
$ cd vuetify-app
$ vue add vuetify

すると、src/plugins/に、vuetify.jsができて、Vuetifyが使えるようになります。

src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';

Vue.use(Vuetify);

export default new Vuetify({
});

ローカルで動作確認すると、こんな感じになります。

./images/vutify_and_validation/vuetify.png

ダークモード

vuetify.jsにオプションを指定するだけで、ダークモードに切り替えることができます。

src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  theme: { dark: true },
})

./images/vutify_and_validation/darkmode.png

フォームでテキストを入力する

Vuetifyには、いろいろなUIコンポーネントが用意してあります。

Formで、テキストを入力するとこんな感じです。

./images/vutify_and_validation/form_input.png

これは、HelloWorld.vueを次のように記述します。

まず、template部分です。formタグに、v-text-fieldタグを記述します。

src\components\HelloWorld.vue
<template>
  <v-container>
    <v-row class="text-left">
      <v-col cols="12">
        <v-img
          :src="require('../assets/logo.svg')"
          class="my-3"
          contain
          height="200"
        />
      </v-col>

      <v-col class="mb-4">
        <h1 class="display-2 font-weight-bold mb-3">
          Hello world
        </h1>

        <p class="subheading font-weight-regular">
          For help and collaboration with other Vuetify developers
        </p>

        <form>
            <v-text-field
                v-model="greeting"
                label="Input"
            ></v-text-field>
            <p>Output: {{ greeting }}</p>
        </form>
      </v-col>

    </v-row>
  </v-container>
</template>

script部分では、双方向バインディングを指定します。

src\components\HelloWorld.vue
<script>
  export default {
    name: 'greeting',
    data () {
        return {
            greeting: ''
        }
    }
  }
</script>

色を指定する

Vuetifyでは、色を指定するのも簡単です。

これは、template部分に「primary」や「secondary」といった役割を指定します。たとえば、src/App.vueのヘッダー部分には、「primary」が指定してあります。

src/App.vue
<template>
  <v-app>
    <v-app-bar
      app
      color="primary"
      dark
    >

そして、vuetify.jsに役割ごとに色を指定します。vuetify/lib/util/colors をインポートすることで、色名で指定できます。

src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
import colors from 'vuetify/lib/util/colors'

Vue.use(Vuetify);

export default new Vuetify({
    theme: {
        themes: {
          light: {
            primary: colors.blueGrey,
            secondary: colors.grey,
            accent: colors.pink.accent2,
            error: colors.pink.lighten2,
          },
        },
    },
});

./images/vutify_and_validation/color_theme.png

vee-validateを使う

Formバリデーションライブラリのvee-validateを使うと、Formに入力した値をチェックできます。Vue.jsのバージョンに合わせて、vee-validateのバージョンが異なるので注意してください。

導入する

vee-validateの導入は、これもVue CLIでライブラリを追加するだけ。

$ yarn add vee-validate

プリセットルールを利用する

vee-validateは、標準的なルールをプリセットとして用意しています。たとえば、次のようなルールを利用できます。

  • 必須
  • 最小文字数、最大文字数
  • email形式

vee-validateを使うには、script部分に次のように記述します。ここでは、最大文字数を規定するmaxを読み込んでいます。

src\components\HelloWorld.vue
<script>
  import { ValidationProvider, extend} from "vee-validate";
  import { max } from 'vee-validate/dist/rules';

  extend('max', {
    ...max,
    message: 'Exceeds maximum length'
  });

  export default {
    components: {
        ValidationProvider
    },

    name: 'greeting',
    data () {
        return {
            greeting: ''
        }
    }
  }
</script>

それから、template部分のformタグに、ValidationProviderタグを追加します。このとき、最大文字数の値を「3」と設定しています。

src\components\HelloWorld.vue
<form>
    <ValidationProvider v-slot="{ errors }" rules="max:3">
        <v-text-field
            v-model="greeting"
            :error-messages="errors"
            label="Input"
            :success="valid"
        ></v-text-field>
    </ValidationProvider>
    <p>Output: {{ greeting }}</p>
</form>

./images/vutify_and_validation/validation.png

日本語メッセージにする

エラーメッセージには、デフォルトで日本語メッセージが利用できます。

./images/vutify_and_validation/validation_ja.png

これは、HelloWorld.vueのscript部分を次のように記述します。

src\components\HelloWorld.vue
<script>
  import { ValidationProvider, extend, localize } from "vee-validate";
  import { max } from 'vee-validate/dist/rules';
  import ja from 'vee-validate/dist/locale/ja';

  extend('max', max);
  localize('ja', ja);

  export default {
    components: {
        ValidationProvider
    },

    name: 'greeting',
    data () {
        return {
            greeting: ''
        }
    }
  }
</script>

公開したアプリ

Vuetifyとvee-validateを使ったアプリケーションを、GitHub Pagesで公開しています。

参考になるページ

Vuetify

vee-validate

チュートリアル

入力フォーム

GitHubで編集を提案

Discussion