VuetifyはVue.js用のMaterial Designフレームワークで、多くの事前設計されたコンポーネントを提供しています。
その一つにv-navigation-drawerというコンポーネントがあり、このコンポーネントを使用するとサイドメニューの作成が簡単になります。
v-navigation-drawerコンポーネントは、アクセスしたデバイスの画面幅に応じて自動的にレイアウトが切り替わります。画面幅が広い場合（例えばPCなど）はメニューが画面左側に表示されます。
一方、画面幅が狭い場合（例えばモバイル端末など）は、メニューがハンバーガーメニューに格納されます。
この画面幅の切り替えポイントは、デフォルト値が設定されています。これはつまり、画面幅がデフォルト値未満のデバイスでは自動的にハンバーガーメニュー表示に切り替わるということです。
しかし、この切り替わりのタイミング（画面幅）を任意の値に指定したい場合があるかもしれません。例えば4:3のモニターを使用しているPCの場合、このデフォルト値だと画面幅が広いにもかかわらずモバイル表示（ハンバーガーメニュー表示）に切り替わってしまいます。
そのため、mobile-breakpoint属性を使用して、メニューが自動的にハンバーガーメニュー表示に切り替わる画面幅を設定することができます。
以下にその例を示します。
<v-navigation-drawer v-model="drawer" mobile-breakpoint="1024" app>
<!-- drawer content -->
</v-navigation-drawer>このようにmobile-breakpoint="1024"と指定すると、画面幅が1024px未満の場合にメニューがハンバーガーメニュー表示に切り替わります。これで4:3のモニターを使用しているPCでも適切な表示が行われます。
なお、mobile-breakpoint属性の値は数字の文字列である必要がありますので、値を指定する際にはクオーテーションで囲むことを忘れないようにしましょう。
以上がVuetifyのv-navigation-drawerコンポーネントでサイドメニューのブレークポイントを変更する方法です。Vuetifyを使用する際にはこのような柔軟性があり、様々なデバイスで適切な表示を行うことが可能です。
