Vuetifyがどのようなものなのか確認するために、Vuefity公式ホームページにリンクされている動画を参考に動作確認を行なってみたいと思います。Vuetifyはマテリアルデザインを元に作られているので、デザイン性の優れたページを簡単に作成することができます。簡単かどうかは個人差があるので実際にログインページを作成して、Vuetifyがどのようなものか確認してみましょう。

vue-cliでプロジェクトを作成するので、事前にvue-cliをインストールしておく必要があります。

作成後のログイン画面

本文書でvuetifyを使用して以下のログイン画面を作成することができます。

作成後のログイン画面
作成後のログイン画面

プロジェクトの作成

vueコマンドを使ってプロジェクトの作成を行います。名前は任意なのでここではvuetify-firstとしています。実行するとプリセットを聞かれるので、dafaultを選択します。


$ vue create vuetify-first

Vue CLI v3.11.0
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint) 
  Manually select features

vuetifyのインストール

プロジェクトの作成が完了したら、vue addコマンドを使ってvuetifyのインストールを行います。

プリセットを聞かれるのでDefaultを選択します。


$ cd vuetify-first
$ vue add vuetify

📦  Installing vue-cli-plugin-vuetify...

+ vue-cli-plugin-vuetify@0.6.3
added 1 package from 1 contributor in 8.129s
✔  Successfully installed plugin: vue-cli-plugin-vuetify

? Choose a preset: (Use arrow keys)
❯ Default (recommended) 
  Prototype (rapid development) 
  Configure (advanced) 
added 7 packages from 5 contributors in 8.769s
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-vuetify
   The following files have been updated / added:

     src/assets/logo.svg
     src/plugins/vuetify.js
     package-lock.json
     package.json
     public/index.html
     src/App.vue
     src/components/HelloWorld.vue
     src/main.js

   You should review these changes with git diff and commit them.

インストールを行うとインストールメッセージにあるようにsrc/assets/log.svgを含む8つのファイルが更新されます。

インストールが完了したらローカルサーバを起動するためにnpm run serveコマンドを実行します。


$ npm run serve
 ・
 ・
DONE  Compiled successfully in 16790ms                                 11:16:01


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.2.114:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

実行後、コンパイルが行われ、成功するとhttp://localhost:8080/にブラウザでアクセスすると下記の画面が表示されます。

vuetifyの初期ページ
vuetifyの初期ページ

インストールディレクトリの中にあるmaiin.jsファイルを確認するとvuetifyのモジュールが読み込まれていることがわかります。


import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false

new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app')

Vuetifyによるログインページ作成

前準備

Welcomeページで表示されている内容は、App.vueに記述されているので中身を確認します。templateタグの中には、v-app-barタグ等ありますが、v-appタグを残して、すべて削除します。

Vuefityではv-XXXとXXXの名前のついたUIコンポーネント単位で設定を行なっています。ボタンもinput要素も個別のコンポーネントが準備され、それぞれにv-btnやv-text-field等の名前が付いています。

UIコンポーネントの情報はは公式ホームページに掲載されています。

v-for, v-ifなどv-ディレクティブはvue.js、v-appやa-spacerはvuetifyによって使用されるコンポーネントです。

下記の状態からページの作成を行なっていきます。v-appは<div id=”app”>と同様にページに必ず一つ必要なvuetifyコンポーネントです。


<template>
  <v-app>

  </v-app>
</template>

<script>

export default {
  name: 'App',
  data: () => ({
    //
  }),
};
</script>
HelloWorldも使わない時はコンパイル時にメッセージが表示されるので、削除しておきます。

削除して保存するとtemplateタグにv-appタグ以外何も設定されていないので、http:://localhost:8080にアクセスしても何も表示されません。

ページの作成

ログインページを作成するためにv-cardコンポーネントを追加します。v-cardコンポーネントを利用すれば下記のような汎用的なデザインを作成することができます。

v-cardコンポーネントの例
v-cardコンポーネントの例

v-cardコンポーネントには、v-card-title, v-card-textとv-card-actionsの3つの基本コンポーネントがあるのでそれらを利用します。

v-card、v-card-titleコンポーネントを追加して、h1タグの中に文字列ログインを入力します。h1に設定されているclassのdisplay-1は文字の大きさを設定するclassです。この他にもdisplay-2,3,4があり大きくなるほど、文字も拡大されます。vuetifyではコンポーネントだけではなくCSSのクラスもインストールされています。


<v-app>
  <v-card>
    <v-card-title>
      <h1 class="display-1">ログイン</h1>
    </v-card-title>
  </v-card>
</v-app>

ブラウザでどのように表示されるか確認しておきましょう。

v-card-titleを設定した場合
v-card-titleを設定した場合

次にv-card-textコンポーネントの中にv-formとv-text-fieldコンポーネントを追加します。追加するとinput要素が表示されます。


<v-app>
  <v-card>
    <v-card-title>
      <h1 class="display-1">ログイン</h1>
    </v-card-title>
    <v-card-text>
      <v-form>
        <v-text-field label="ユーザ名" />
        <v-text-field label="パスワード" />
      </v-form>
    </v-card-text>
  </v-card>
</v-app>

ここまでの設定で下記のようにユーザ名とパスワードを入力する欄を作成することができます。

ユーザとパスワード項目を追加
ユーザとパスワード項目を追加

入力欄にカーソルが入ると色が代わり、ユーザ名というラベル文字も小さくなります。

ユーザとパスワードを入力
ユーザとパスワードを入力

上記のようにパスワードを入力すると文字が表示されてしますので、type属性を追加します。


 <v-text-field type="password" label="パスワード" />

入力したパスワードの入力文字がテキストのまま表示されなくなりました。

パスワードテキスト非表示
パスワードテキスト非表示

v-card-actionsコンポーネントの中にv-btnコンポーネントを追加し、ログインボタンを作成します。


<v-form>
  <v-text-field label="ユーザ名" />
  <v-text-field label="パスワード" />
  <v-card-actions>
    <v-btn>ログイン</v-btn>
  </v-card-actions>
</v-form>
ログインボタンを追加
ログインボタンを追加

UIを良くするためにアイコンを追加します。v-text-fieldにprepend-iconを追加し、アイコンの名前を入力します。アイコンはMaterial Design Iconsを利用しており、iライブラリがインストールされているのでそのまま使用することができます。

マテリアルデザインアイコン一覧
マテリアルデザインアイコン一覧

ユーザ名にはmdi-account-cicle, パスワードにはmdi-lockアイコンを設定します。


<v-text-field prepend-icon="mdi-account-circle" label="ユーザ名" />
<v-text-field prepend-icon="mdi-lock" label="パスワード" />;
アイコン設定
アイコン設定

prepend-iconで先頭にアイコンを設定しましたが、後ろ側に設定する場合はappend-iconを利用します。パスワードが見えないアイコン(eye-off-icon)を追加します。


<v-text-field prepend-icon="mdi-lock" append-icon="mdi-eye-off" label="パスワード" />
パスワードeye-offアイコン
パスワードeye-offアイコン

ボタンのカラーも下記のようにcolorを使って変更することができます。infoの他にsuccess,dangerなどを設定することが可能で設定するとボタンの色が変わります。


 <v-btn class="info">ログイン</v-btn>

ログイン画面が全体に広がっていますが、widthとclassを利用して幅やマージンを設定することができます。mx-autoやmt-5のクラスもvuetifyと一緒にインストールされています。


 <v-card width="400px" class="mx-auto mt-5">
ボタンのアイコンと幅を変更
ボタンのアイコンと幅を変更

以上の設定によってログイン画面を作成することができました。Vuetifyを使うとUIの優れた画面を効率的に作成できることがわかります。

vue.jsによる制御

ここまでの設定はすべてvuefityの設定でした。今後はvue.jsを使ってパスワードのeye-offアイコンを制御して、アイコンをクリックすることでパスワードに入れたテキストを確認できるようにしましょう。

オン、オフを切り替えるためにshowPasswordプロパティを追加します。この値がture, falseに切り替わることでパスワードの入力文字がテキスト表示になるか切り替えます。

showPasswordプロパティを追加します。


export default {
  name: 'App',
  data: () => ({
    showPassword : false
  })
};

showPasswordプロパティによって属性typeがtextとpasswordに切り替わるようにtypeにv-bind設定します。


<v-text-field v-bind:type="showPassword ? 'text' : 'password'" prepend-icon="mdi-lock" append-icon="mdi-eye-off" label="パスワード" />

appendアイコンをクリックするとshowPasswordの値がtrue or falseに交互に切り替えられるようにclickイベントを追加します。


<v-text-field v-bind:type="showPassword ? 'text' : 'password'" prepend-icon="mdi-lock" append-icon="mdi-eye-off" label="パスワード" @click:append="showPassword = !showPassword" />
パスワードが見えない場合
パスワードが見えない場合

入力したパスワードがテキストで見えるようになりますが、右にあるアイコンはeye-offアイコンのままでアイコンではパスワードが見えないことになっています。

eye-offアイコンをクリックするパスワードが見える
eye-offアイコンをクリックするパスワードが見える

eye-offアイコンも切り替わるようにv-bindの設定を行います。mdi-eye-offとmdi-eyeがアイコンをクリックすると交互に切り替わります。


<v-text-field v-bind:type="showPassword ? 'text' : 'password'" prepend-icon="mdi-lock" v-bind:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'" label="パスワード" @click:append="showPassword = !showPassword" />
eyeアイコンも連動
eyeアイコンも連動

Vuetifyだけではなくvue.jsも連携させてログイン画面を作成することができました。