【Vuetify3】v-navigation-drawerでtemporaryが効かずオーバーレイが適用されずに困った話

COLUMN コラム

個人開発で作成しているWebアプリにおいて、v-navigation-drawerのレイアウトが思い通りにいかずに躓いたんですが、原因がシンプルだったので共有です。

まずは結論から。

v-navigation-drawerのPropsにtemporaryとpermanentを共存させることはできません。

そのため、permanentを削除しただけで解決しました。

<!– Before –>
<v-navigation-drawer v-model=”drawer” temporary permanent>
</v-navigation-drawer>

<!– After –>
<v-navigation-drawer v-model=”drawer” temporary>
</v-navigation-drawer>

permanentは、ユーザがスマホを横に傾ける等の画面の横幅が変わる操作をした時に、ナビゲーションメニューが表示されるのを抑止するPropsですが、temporaryを指定すると勝手にpermanentも設定されているかのような挙動になります。

まぁ、冷静に考えてみると、temporaryで背景を暗くしている時点で、画面の横幅が変わったタイミングでナビゲーションメニューを表示させたくなることはないですね…。

変に納得しました。

あ、Vuetifyのバージョンは3.8.3です。