Vuetify3でメニューバーを押したら画面遷移する方法

・検証環境

Windows11 wsl2 npm8.19.3 Vuetify3.1.12

VisualStudioCode

Github

https://github.com/TKano-Null/test-site1

---

概要

動画のように上部メニューバーのボタンを押下したとき、仮の該当ページに遷移させるものを作成しました。

---

プロジェクトの作成

yarn create vuetify

✔ Project name: … test-site1
✔ Which preset would you like to install? › Essentials (Vuetify, VueRouter, Pinia)
✔ Use TypeScript? … No / Yes
✔ Would you like to install dependencies with yarn, npm, or pnpm? › yarn

cd test-site1

まず、プロジェクトを作成します。

今回はTypeScript無しでyarnを使用しました。

コードの変更

最小限の実装で実現できるよう、Componentに分けず基本的にsrc/views/Home.vueの変更を行いました。

https://github.com/TKano-Null/test-site1/blob/master/src/views/Home.vue

なお、公式ドキュメントのワイヤーフレームの[Three Column]を参考にしました。

https://vuetifyjs.com/en/getting-started/wireframes/#section-30b530f330d730eb

メニューバーの構築 v-tabs

src/views/Home.vue

      <v-tabs
        centered
        color="grey-darken-2"
        v-model="tab"
      >
        <v-tab
          v-for="link in links"
          :key="link.id"
          :value="link.id"
        >
          {{ link.title }}
        </v-tab>
      </v-tabs>

https://github.com/TKano-Null/test-site1/blob/522d5972033a27850514f02645e9a565a0c8834c/src/views/Home.vue#L10

Webサイト上部にメニューバーを表示するために[v-tabs]子要素として[v-tab]を配置、Scriptタグ内で宣言した[links]配列の中身をv-forで繰り返している。

[v-tabs]に[v-model=”tab”]を指定することによってボタンが押下されたときに該当する仮ページに遷移できる。

メイン要素の構築

src/views/Home.vue

     <v-window v-model="tab">
        <!-- transition 画面遷移時のアニメーションを変更 -->
        <v-window-item
          v-for="link in links"
          :key="link.id"
          :value="link.id"
          transition="fade-transition"
        >

https://github.com/TKano-Null/test-site1/blob/522d5972033a27850514f02645e9a565a0c8834c/src/views/Home.vue#L27

メニューバーと同じように[v-window]を親としてv-forで複数の[v-windw-item]を作成、[v-window]を[v-model=”tab”]とすることで、メニューバーで押下されたものに対応した仮ページを表示させている。

[v-window-item]の[transition]は遷移したときのアニメーションの種類を指定している。デフォルトだと右から左にスライドしていくが、今回はフェードインさせるようにした。

つまづいた点

wslでyarn devを実行して表示したとき、ファイルを更新しても表示が更新されない

wslの場合、ファイルシステムがwindows上の領域にプロジェクトを作っているとファイル更新を検知しないことがわかった。そのため、/home/username/workspace/test-site1/となるようにした。

v-containerの中の要素が左揃えになってしまう

          <v-container>
            <!-- justify contentsを中央揃えに -->
            <v-row
                justify="center"
              >

[v-row]の[justify]を[center]にすることによって解決できた。

---

Vuetify3を触っての感想

Vuetifyのバージョンが3になってから日が浅いこともあって公式ドキュメント以外の情報が少なかったが、初学者でも公式ドキュメントを見てなんとかなるぐらい学習コストが低く、結果としてはかなり短いコードで実装できたように感じた。クリック検知も機能としてあるのでJavaScriptで書くことは非常に少ないことに驚いた。