Vuefityを利用することで効率的にGUI画面を作成することができますが使いこなすためにはVuefityの基本的な使用方法を理解しておく必要があります。

本文書では、Vuetifyがマスターできるように実践的なダッシュボードの作成を通して、Vuetifyの使用方法を確認していきます。

説明は2回に分けて説明を行います。

1回目である本文書は、ダッシュボードのレイアウトの作成方法とルーティングの設定方法を確認します。本文書を読み終えると下記の画面を作成することができます。

ダッシュボード画面
ダッシュボード画面

2回目ではダッシュボードに表示させるグラフコンポーネントを使って、Grid System(グリッドシステム)やResponsive Design(レスポンシブデザイン)の設定方法を確認します。

環境の構築

Vuetifyを利用するためにまずはvue.jsの環境を構築する必要があります。

プロジェクトの作成

vueコマンドで、veutify_lessonという名前のプロジェクトを作成します。


$ vue create vuetify_lesson

Vue Routerを利用するのでManually select featuresを選択し、Babel, Router, Linterを選択します。ヒストリーモードの選択、linterの設定など下記のように設定を行なっていきます。


Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
?? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N) N

インストールが完了したら、npm run serveコマンドを実行してください。ビルドが行われ完了するとローカルサーバのURLが表示されるので、ブラウザでアクセスしてください。


$ cd vuetify_lesson/
$ npm run serve
 ・
 ・
 DONE  Compiled successfully in 2950ms                                  15:35:34


  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.

下記の画面が表示されます。

インストール直後の画面
インストール直後の画面

Vuetifyのインストール

インストールを行う前に起動していたnpm run serveを一度停止し、vuetifyのインストールを行います。vue addコマンドでvuetifyを指定してインストールを行います。


$ vue add vuetify

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


? Choose a preset: (Use arrow keys)
❯ Default (recommended)
  Prototype (rapid development)
  Configure (advanced)

Vuefityインストール後にnpm run serveを実行してブラウザでhttp://localhost:8080/にアクセスすると下記の画面が表示されます。

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

srcディレクトリの中にあるmain.jsを開くとrouterとvuetifyがimportされていることが確認できます。


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

Vue.config.productionTip = false

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

ここまででVuefityを利用するためのvue.jsの環境構築は完了です。

Vuetifyの準備

App.vueファイルを初期化

インストール直後後のApp.vueファイルにはブラウザに表示されている内容が記述されています。本文書では何もない状態から作成を行なっていくため、v-appタグのみを残して他の情報は削除します。

v-appのようにVuetifyのタグにはすべて”v-“が先頭につきます。タグの中でもv-appはもっとも重要なタグの一つでVuetifyを利用するための必須タグです。Vuetifyのコンポーネントはすべてv-appの内側に記述していきます。

v-appタグは<div id=”app”>と同じ役目をします。v-XXXタグは1つ1つ様々なコンポーネントに対応します。 v-buttonであればボタンコンポーネント、v-iconであればアイコンコンポーネントに対応します。

<template>
  <v-app>

  </v-app>
</template>

<script>
export default {

};
</script>

ダッシュボードの作成

ここからダッシュボードの作成を行なっていきます。本文書でのダッシュボードはアプリケーションの管理画面のように上部にナビゲーションバー、左側にはナビゲーションメニューが表示されているような画面です。Vuetifyのドキュメントの画面を参考にダッシュボードページを作成していきます。

vuetifyのマニュアルページ
vuetifyのマニュアルページ

レイアウトの決定

今回はVuefityのドキュメントページと同様に下記のようなレイアウトを作成します。

レイアウト
レイアウト

上記のレイアウトを作成するためには、v-navigation-drawer, v-app-bar, v-footerの3つのコンポーネントが必須です。それぞれのコンポーネントについて個別に説明を行い、最後にレイアウトを完成させます。レイアウトは各ページ共通で、v-contentの部分にページ固有の情報を表示させていきます。

ナビゲーションバーの設定

ダッシュボード画面の上部にナビゲーションバーを設定する場合は、v-app-barタグを使用します。

ページトップにナビゲーションバーを設定するためにv-app-barタグ、サイトのタイトルを表示するためにv-toolbar-titleタグを追加します。


<template>
  <v-app>
    <v-app-bar>
      <v-toolbar-title>Vuetify</v-toolbar-title>
    </v-app-bar>
  </v-app>
</template>

ブラウザで確認するとv-toolbar-titleタグの間に入れたVuetifyのみ表示されます。

v-toolbar-titleのみ表示
v-toolbar-titleのみ表示

ナビゲーションバーに色をつけてみましょう。v-app-barタグにdarkを設定すれば背景がグレーで文字が白になります。


<v-app-bar dark>
app-barにdarkを設定
app-barにdarkを設定

ナビゲーションバーにどのような設定が行えるかはVuetifyのドキュメントで確認することができます。Vuetifyのドキュメントページにアクセスし、左側のナビゲーションバーからUI Components、Barsを選択し、その中にあるApp barsを選択してください。PROPSに表示される項目を設定することができます。propsの中にdarkを見つけることができます。

vuetifyのドキュメント
vuetifyのドキュメント

darkをタグに設定することは背景色の色を変更するだけではなくdarkとういうテーマを適用しています。darkテーマを設定すると先ほど説明したようにバーの背景色がグレーになり、文字の色は白に変わります。デフォルトのテーマはlightに設定されています。テーマという単位で色の設定を行うことができます。

darkを設定しましたが、v-app-barタグにはcolorを使って色の設定を行うことができます。色の設定にはred、greenなどの文字列、#033やrgba(255, 0, 0, 0.5)でも設定することができます。

さらにprimary, secondary, error, infoでも色の設定を行うことが可能です。これらの色設定はVuetifyの中で設定されており、設定変更をすることも可能です。設定方法の変更については本書では説明していません。

colorにprimaryを設定してみます。青っぽい色に変わります。primaryカラーはVuetifyのサイトでも利用されている色なので、今後もこの色で進めていきます。


<v-app-bar color="primary" dark>
primaryカラーを設定
primaryカラーを設定
背景ではなく文字の色を変更したい場合はclass=”red–text”と設定すると赤になります。

これまで触れていませんでしたが設定したcolorが画面全体に広がっています。全体に広がっている原因は、ナビゲーションバーの高さ調整が行われていないためです。appをapp-barタグに設定するとナビゲーションバーの高さを自動調整してくれます。


<v-app-bar color="primary" dark app>
v-app-barにappを設定
v-app-barにappを設定

ここまででナビゲーションバーの設定は完了です。

フッターの設定

フッターを追加したい場合はv-footerタグを利用します。v-app-barと同様にcolor、app、darkを設定します。


<template>
  <v-app>
    <v-app-bar color="primary" dark app>
      <v-toolbar-title>Vuetify</v-toolbar-title>
    </v-app-bar>
    <v-footer color="primary" dark app>
      Vuetify
    </v-footer>
  </v-app>
</template>

ページの下部にフッターが追加されていることを確認することができます。

フッターの追加

サイドのナビゲーションメニューの設定

レイアウトを完成させるためにサイドのナビゲーションメニューの設定を行います。

これまではvue.jsの知識は全く必要ではありませんでしたが、ここではvue.jsのデータプロパティ、v-modelやclickイベントを利用します。

サイドのナビゲーションバーの作成には、v-navigation-drawerタグを使用します。


<template>
  <v-app>
    <v-navigation-drawer app>Navigation Lists</v-navigation-drawer>
    <v-app-bar color="primary" dark app>
      <v-toolbar-title>Vuetify</v-toolbar-title>
    </v-app-bar>
    <v-footer color="primary" dark app>
      Vuetify
    </v-footer>
  </v-app>
</template>

タグを追加後、ブラウザで確認を行います。

もしv-navigation-drawerタグを追加後も何も画面に変化がない場合はブラウザの横幅を広げるかズームで縮小サイズにしてみてください。下記のように横幅を広げると左側にナビゲーションメニューが表示されます。

ブラウザの横幅が広いと表示される
ブラウザの横幅が広いと表示される

画面のサイズによってVuetifyがナビゲーションメニューの表示・非表示の制御を行なってくれます。

ユーザ側でもナビゲーションメニューの表示・非表示が行えるようにハンバーガーメニューを追加します。ハンバーガーメニューのv-app-bar-nav-iconタグとして準備されているのでこれを利用します。


<template>
  <v-app>
    <v-navigation-drawer app>Navigation Lists</v-navigation-drawer>
    <v-app-bar color="primary" dark app>
      <v-app-bar-nav-icon></v-app-bar-nav-icon>
      <v-toobar-title>Vuetify</v-toobar-title>
    </v-app-bar>
    <v-footer color="primary" dark app>
      Vuetify
    </v-footer>
  </v-app>
</template>

v-tool-bar-titleタグの直前に追加したので、Vuetifyの文字列の左側にハンバーガーメニューが表示されます。

ハンバーガーメニュー
ハンバーガーメニュー

ハンバーガーメニューを追加するとクリックすることは可能ですが、クリックしても何も変化は起こりません。

ハンバーガーメニューをクリックすることでナビゲーションメニューの表示・非表示を制御するためにvue.jsのclickイベントを設定します。また、ナビゲーションメニューにはv-modelにデータプロパティdrawerを設定します。

ここでのclickイベント等の設定がわからない人は再度vue.jsの基礎の復習をお勧めします。

<template>
  <v-app>
    <v-navigation-drawer app v-model="drawer">Navigation Lists</v-navigation-drawer>
    <v-app-bar color="primary" dark app>
      <v-app-bar-nav-icon @click="drawer=!drawer"></v-app-bar-nav-icon>
      <v-toolbar-title>Vuetify</v-toolbar-title>
    </v-app-bar>
    <v-footer color="primary" dark app>
      Vuetify
    </v-footer>
  </v-app>
</template>

<script>
export default {
  data(){
    return{
        drawer: null
    }
  }
}
</script>
clickイベントではdrawerの値がfalseであればtrue、trueであればfalseに変更するように設定しています。データプロパティdrawerを忘れずに設定してください。

クリックイベント、v-modelの設定とデータプロパティの追加に問題がなければハンバーガーメニューをクリックするとナビゲーションメニューが表示され、ナビゲーションメニューの外側をクリックするとメニューが消えます。

ナビゲーションメニューが表示されていない状態
ナビゲーションメニューが表示されていない状態

下記のようにナビゲーションメニューが表示されるとそれ以外の部分が少し暗くなるので、そこをクリックするとナビゲーションメニューは非表示になります。

ナビゲーションメニューが表示されている状態
ナビゲーションメニューが表示されている状態

ブラウザの幅を広げた時ナビゲーションメニューが上部から表示されているので、ナビゲーションバーの下に表示されるようにclippedを利用します。clippedはナビゲーションバーの下にナビゲーションメニューを配置させる設定です。

ブラウザの横幅が広いと表示される
ブラウザの横幅が広いと表示される

v-navigation-drawerにclippedを追加。


<v-navigation-drawer app v-model="drawer" clipped>Navigation Lists</v-navigation-drawer>

v-app-barにclipped-leftを追加。


<v-app-bar color="primary" dark app clipped-left>

設定が完了するとナビゲーションメニューがナビゲーションバーの下に配置されます。

ナビゲーションメニューがバーの下に配置

ここまでの設定でレイアウトの作成は完了です。ここからはナビゲーションのメニュー等に使うボタンなどのコンポーネントの設定を行なっていきます。

各種コンポーネントの設定

さまざまなダッシュボードで必ず使用されているボタン、ドロップダウンメニュー、アイコンをVuetifyのコンポーネントを利用して設定していきます。

ボタンの設定

v-app-barタグの中にボタンを追加します。ボタンの作成はv-buttonタグを利用します。


<v-app-bar color="primary" dark app clipped-left>
  <v-app-bar-nav-icon @click="drawer=!drawer"></v-app-bar-nav-icon>
  <v-toolbar-title>Vuetify</v-toolbar-title>
  <v-btn>Button</v-btn>
</v-app-bar>

ブラウザで確認するとv-toolbar-titleの横にピッタリと表示されます。

ボタン要素を追加
ボタン要素を追加

2つのコンポーネントの間にスペースをとりたい場合はv-spacerタグが使えます。


<template>
  <v-app>
    <v-app-bar color="primary" app dark>
      <v-toolbar-title>Vuetify</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn>Button</v-btn>
    </v-app-bar>
  </v-app>
</template>
コンポーネントの間にスペース
コンポーネントの間にスペース

ボタンにもVuetifyからさまざまな設定を行うことができます。ボタンの枠を消したい場合はtextを設定します。ボタンが背景色と同じ色になります。


<v-btn text>Button</v-btn>
ボタンの枠をなくす
ボタンの枠をなくす

ボタンを枠線だけ表示させたい場合は、outlinedを設定します。

ボタンをアウトライン化
ボタンをアウトライン化

サイズを変更したい場合は、x-largeやx-smallを設定することができます。


<v-btn outlined x-small>Button</v-btn>
<v-btn outlined>Button</v-btn>
<v-btn outlined x-large>Button</v-btn>
ボタンのサイズを変更
ボタンのサイズを変更

通常はv-btnのtextで枠線を消してもボタンのクリック領域は枠線の内部のみとなります。v-btnをv-toolbar-itemsタグで囲むことでボタンにマウスオーバーした際にv-app-barコンポーネントの高さ分のクリック領域を持たせることができます。


<template>
  <v-app>
    <v-app-bar color="primary" app dark>
      <v-toolbar-title>Vuetify</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items>
        <v-btn text>Button</v-btn>
        <v-btn text>Button</v-btn>
      </v-toolbar-items>
    </v-app-bar>
  </v-app>
</template>

左側から2番目のボタンにマウスオーバーしています。

ボタンのクリック領域を広げる
ボタンのクリック領域を広げる

2つのボタンを設定し、それぞれのボタンにFor Enterprise, Supportを設定します。


<v-toolbar-items>
<v-btn text>For Enterprise</v-btn>
<v-btn text>Support</v-btn>
</v-toolbar-items>

ブラウザで確認すると下記のように2つのボタンが表示されます。

v-forをつかってボタンを表示
2つのボタンを設定

ドロップダウンメニューの設定

ナビゲーションバーへのボタンの設定方法がわかったので、ボタンを押した時にドロップダウンメニューが表示される設定を行なっていきます。

v-app-barタグのボタンにドロップダウンメニューの設定を行いますが、ドロップダウンメニューの設定についてはvuetifyのドキュメントに記載されているコードを参考に作成します。

VuetifyのドキュメントのUI ComponentsでMenusを選択してください。

参考にしたソースコード
参考にしたソースコード

v-toolbar-itemsタグの中のSupportボタンにドロップダウンメニューのコードを追加します。


<v-toolbar-items>
<v-btn text>For Enterprise</v-btn>
<v-menu offset-y>
  <template v-slot:activator="{on}">
  <v-btn v-on="on" text>Support</v-btn>
  </template>
  <v-list>
    <v-list-item>
      <v-list-item-content>
        <v-list-item-title>Consulting and support</v-list-item-title>
      </v-list-item-content>
    </v-list-item>
    <v-list-item>
      <v-list-item-content>
        <v-list-item-title>Discord community</v-list-item-title>
      </v-list-item-content>
    </v-list-item>
  </v-list>
</v-menu>
</v-toolbar-items>

v-list-itemを追加していけばドロップダウンメニューに含まれるメニューの項目を増やすことができます。

コードを追加しブラウザでページを開いたあと、Supportボタンをクリックするとメニューが表示されます。Vuetifyを使えば簡単にドロップメニューを作成することができます。

ドロップダウンメニューの確認
ドロップダウンメニューの確認

リストの設定

v-forを利用して、表示されるドロップダウンメニューの項目を設定することもできます。v-forを利用するため新たにメニューの値の配列を持ったデータプロパティsupporsを追加します。

またメニューの項目の上にサブヘッダーの追加しておきます。サブヘッダーにはv-subheaderタグを利用します。


<v-list>
 <v-subheader>Get help</v-subheader>
  <v-list-item v-for="support in supports" :key="support">
   <v-list-item-content>
    <v-list-item-title>{{ support }}</v-list-item-title>
   </v-list-item-content>
  </v-list-item>
</v-list>

データプロパティsupportsを追加。


<script>
export default {
  data(){
    return{
        drawer: null,
        supports:[
          'Consulting and suppourt',
          'Discord community',
          'Report a bug',
          'Github issue board',
          'Stack overview'
        ]
    }
  }
}
</script>

v-forとsupports追加後にブラウザで確認するとsupportsで設定した値がリストと表示されていることを確認することができます。

v-forでドロップダウンメニューを作成
v-forでドロップダウンメニューを作成

アイコンの設定

ドロップダウンメニューを追加することでメニューリストが表示されダッシュボードらしくはなってきましたが、何かサイトがシンプルすぎるので、アイコンの設定を行います。まず、SUPPORTの右側にmenu-downのアイコンを設定し、Vuetifyでのアイコンの設定方法を確認します。

アイコンはhttps://materialdesignicons.com/から見つけることができます。

アイコンの設定はv-iconタグの中にmdi-“アイコン名”で行います。


<v-btn v-on="on" text>Support<v-icon>mdi-menu-down</v-icon></v-btn>

ブラウザで確認するとSUPPORTの文字列の右側に下矢印のアイコンが表示されていることが確認できます。

Supportの横にアイコン表示
Supportの横にアイコン表示

SUPPORTをクリック後に表示される各ドロップダウンメニューにもアイコンの設定を行います。

supportsのデータプロパティを配列からオブジェクトに変更しアイコンの名前を設定します。


supports:[
  {name: 'Consulting and suppourt',icon: 'vuetify'},
  {name: 'Discord community',icon: 'discord'},
  {name: 'Report a bug',icon: 'bug'},
  {name: 'Github issue board',icon: 'github-face'},
  {name: 'Stack overview',icon: 'mdi-stack-overflow'},
]
アイコンの名前にmdi-をつけるのを忘れないでください。

v-forも展開後にnameとiconを設定できるように変更を行います。


<v-list-item v-for="support in supports" :key="support.name">
  <v-list-item-icon>
  <v-icon>{{ support.icon }}</v-icon>
  </v-list-item-icon>
  <v-list-item-content>
  <v-list-item-title>{{ support.name }}</v-list-item-title>
  </v-list-item-content>
</v-list-item>

設定変更後、Supportボタンをクリックすると各メニューの左側にアイコンが表示されていることを確認することができます。

ナビゲーションメニューの中身の設定

サイドのナビゲーションメニューの中身の設定(v-navigation-drawerタグの中)を行なっていきます。

タイトルの設定と色設定

ナビゲーションメニューのタイトルの設定を行います。v-listタグを利用します。タイトルタグのv-list-item-titleにclass=”title”を設定すると文字の大きさと太さが変わります。


<v-navigation-drawer app v-model="drawer" clipped >
  <v-container>
    <v-list-item>
      <v-list-item-content>
        <v-list-item-title class="title">
          Navigation lists
        </v-list-item-title>
      </v-list-item-content>
    </v-list-item>
    <v-divider></v-divider>
  </v-container>
</v-navigation-drawer>
ナビゲーションメニューのタイトル設定
ナビゲーションメニューのタイトル設定

文字の色が黒なのでグレーへと変更します。さらにグレーの色の濃さを少し濃いめに設定します。


<v-list-item-title class="title grey--text text--darken-2">

ブラウザで確認すると文字の色が変更されていることがわかります。grey–textはテキスト文字の変更を行い、text-darken-2は色の濃さを変更することができます。

文字の色を変更する
文字の色を変更する

色の細かな設定は、VuetifyのドキュメンテーションのStyles&animationsのColors(Material Colors)で確認することできます。darkenのあとの数字を大きくすればさらに色の濃さは増し、1-4を設定することができます。darken-4でもっとも濃い色の選択になります。darkenで色を濃くするだけではなくlightenでは色を薄くすることも可能です。lightenは1-5を設定することができ、light-5が一番薄い色になります。

Material Color
Material Color

リストの設定

ナビゲーションメニューの設定もv-listタグとv-forを使って設定を行います。新たにデータプロパティnav_listsを追加します。


nav_lists:[
  {name: 'Getting Started',icon: 'mdi-vuetify'},
  {name: 'Customization',icon: 'mdi-cogs'},
  {name: 'Styles & animations',icon: 'mdi-palette'},
  {name: 'UI Components',icon: 'mdi-view-dashboard'},
  {name: 'Directives',icon: 'mdi-function'},
  {name: 'Preminum themes',icon: 'mdi-vuetify'},
]

ナビゲーションメニューを表示するv-list部分のコードは下記となります。v-dividerタグを追加して、タイトルとメニューの間に横線を入れています。

v-listにnavとdenseを設定していますが、どちらもスタイリングを調整するために使っています。


<v-navigation-drawer app v-model="drawer" clipped >
  <v-container>
    <v-list-item>
     // 略
    </v-list-item>

    <v-divider></v-divider>

    <v-list dense nav>
      <v-list-item v-for="nav_list in nav_lists" :key="nav_list.name">
        <v-list-item-icon>
          <v-icon>{{ nav_list.icon }}</v-icon>
        </v-list-item-icon>
        <v-list-item-content>
          <v-list-item-title>{{ nav_list.name }}</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-list>
  </v-container>
</v-navigation-drawer>

設定すると下記のように表示されます。

ナビゲーションメニューの表示
ナビゲーションメニューの表示

denseを設定していない場合は下記のような表示になります。リストの高さが高くなり、文字の大きさも大きくなります。

denseを設定しない場合
denseを設定しない場合

Nestedリストの設定

サイドのナビゲーションメニューの項目をクリックするとその項目に紐づいているその下の階層のメニューを表示させるためにエクスパンションリストの設定を行います。先ほどリストの設定を行いましたが、v-list-groupタグを使用するため書き換えが必要となります。

データプロパティnav_listsに下の階層の情報を追加します。下の階層がある項目については新たにlistsで配列を追加しています。配列に下の階層のメニューを設定します。


nav_lists:[
  {
    name: 'Getting Started',
    icon: 'mdi-speedometer',
    lists:['Quick Start','Pre-made layouts']
  },
  {
    name: 'Customization',
    icon: 'mdi-cogs' 
  },
  {
    name: 'Styles & animations',
    icon: 'mdi-palette',
    lists:['Colors','Content','Display']
  },
  {
    name: 'UI Components',
    icon: 'mdi-view-dashboard',
    lists:['API explorer','Alerts']
  },
  {
    name: 'Directives',
    icon: 'mdi-function'
  },
  {
    name: 'Preminum themes',
    icon: 'mdi-vuetify'
  },
]

<v-list nav dense>
  <v-list-group 
  v-for="nav_list in nav_lists" 
  :key="nav_list.name" 
  :prepend-icon="nav_list.icon" 
  no-action 
  :append-icon="nav_list.lists ? undefined : ''"> 
    <template v-slot:activator>
      <v-list-item-content>
        <v-list-item-title>{{ nav_list.name }}</v-list-item-title>
      </v-list-item-content>
    </template>
    <v-list-item v-for="list in nav_list.lists" :key="list">
      <v-list-item-content>
        <v-list-item-title>{{ list }}</v-list-item-title>
      </v-list-item-content>
    </v-list-item>
  </v-list-group>
</v-list>

ブラウザで確認すると下記のように表示されます。

下の階層がある項目については右側に下矢印のアイコンが表示されます。その項目をクリックすると下の階層メニューが表示されます。

ネスト化されたナビゲーションメニュー
ネスト化されたナビゲーションメニュー

v-list-groupタグの中にno-action、:append-iconが設定されています。no-actionを設定しなければ下の階層の左側のpaddingが設定されないため下記のような表示になります。Style & animationsの下のColors, Content, Displayのpaddingがありません。

メニューのpaddingがない
メニューのpaddingがない

:append-icon=”nav_list.lists ? undefined : ””を設定しなければ下の階層がないメニューについても右側に矢印が表示されます。append-icon=”にすれば矢印が表示されなくなります。nav_listにlistsが存在するかどうかで判別しなければ””、あればundefinedの設定を行います。

階層がないメニューにもアイコンが表示される
階層がないメニューにもアイコンが表示される

コンテンツの設定

ここまでの設定でグローバルメニュー、フッター、ナビテーションメニューのレイアウトの作成方法を理解することができました。レイアウトの次は各ページで表示させるコンテンツの設定方法について確認していきます。

コンテンツを表示させる部分には、v-contentタグを使います。v-contentタグはv-app-barタグの下に配置します。

構築した環境ではVue Routerがインストールされているので、v-contentの中にrouter-viewタグを挿入します。


</v-app-bar>
<v-content>
  <router-view />
</v-content>

ブラウザで確認すると下記画面が表示されます。

v-content、router-viewタグを追加
v-content、router-viewタグを追加

v-contentタグの中に表示させる内容を制御するためにルーティングの設定を行なっていきます。

ルーティングの設定

初期設定の確認

vue.jsのルーティングの設定はroutes.jsファイルに記述されています。

デフォルトでは”/”(ルート)と/aboutのルーティングが下記のように設定されています。


import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

router-viewタグを挿入すると、”/”(ルート)にアクセスした場合は、views/Home.vue、/aboutにアクセスした場合は、views/About.vueの中に記述された内容が表示されます。

v-contentタグの中にrouter-viewタグを入れるとWelcome to Vuetifyが表示されたのは、”/”(ルート)にはHome.vueが設定されているためです。

About.vueを開くとh1タグのみ記述されています。


<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

ブラウザで/aboutにアクセスすると以下の画面が表示されます。

/aboutページにアクセス
/aboutページにアクセス

ルーティングの追加

Enterpriseページの作成を行います。viewsディレクトリの中にEnterprise.vueファイルを作成します。作成したファイルには下記を記述します。


<template>
  <div>
    <h1>Vuetify for enterprise</h1>
  </div>
</template>

ファイルを作成したらブラウザから/enterpriseにアクセスがきた場合にEnterprise.vueの内容を表示させるためroutes.jsファイルに新しいルーティングを追加します。


  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/enterprise',
      name: 'enterprise',
      component: () => import('./views/Enterprise.vue')
    }

ルーティングを追加後、ページの左側上部にあるFOR ENTERPRISEボタンにenterpriseへのリンクを設定します。

リンクは、v-buttonタグにto=”/enterprise”を加えることで設定することができます。


<v-btn text to="/enterprise">For Enterprise</v-btn>

設定が完了すると上部のFOR ENTERPRISEボタンをクリックするとEnterprise.vueに記述した内容が表示されます。

Enterprise.vueページの表示
Enterprise.vueページの表示

v-buttonにリンクの設定を行いましたが、他のv-list-itemにもリンクを設定する必要があります。

SUPPORTボタンのドロップダウンメニューへのリンクを設定するためにデータプロパティのsupportsにあたらにプロパティlinkを追加します。それぞれのlinkプロパティにリンク先のURLを設定します。


supports:[
  {
    name: 'Consulting and suppourt',
    icon: 'mdi-vuetify',
    link:'/consulting-and-support'
  },
  {
    name: 'Discord community',
    icon: 'mdi-discord',
    link:'/discord-community'},
  {
    name: 'Report a bug',
    icon: 'mdi-bug',
    link:'/report-a-bug'
  },
  {
    name: 'Github issue board',
    icon: 'mdi-github-face',
    link:'/guthub-issue-board'
  },
  {
    name: 'Stack overview',
    icon: 'mdi-stack-overflow',
    link:'/stack-overview'
  },
],

v-list-itmeへのリンクの設定はtoを下記のように使って行います。


<v-list-item v-for="support in supports" :key="support.name" :to="support.link">
上記のドロップダウンメニュー先のページは、ルーティングを設定していないのでtoを使って設定してもrouter-viewの部分には何も表示されません。リンクを設定したら、routing.jsファイルにルーティングを追加し、それに対応するvueファイルを作成する必要があります。

サイドのナビゲーションメニューにもリンクを設定する必要があります。v-list-itemへの設定方法は先ほどのドロップダウンメニューを設定した時と同じです。


<v-list-item v-for="list in nav_list.lists" :key="list.name" :to="list.link">

nav-listsプロパティも下記のようにlinkプロパティを追加する必要があります。


nav_lists:[
  {
    name: 'Getting Started',
    icon: 'mdi-speedometer',
    lists:[{
        name:'Quick Start',link:'/quick-start'
      },
      {
        name:'Pre-made layouts',link:'/pre-made-layouts'
      }
    ]
  },

このようにtoを使ってリンクを作成し、router.jsファイルに新たなルーティングを追加し、各ページの内容を記述したvueファイルを作成すればルーティングの設定は完了です。

router.jsファイルへのルーティングの追加とvueファイルの作成は、enterpriseの時に行なった手順を参考に行なってください。