【Vue.js】Vuetify3でv-menuを使う

概要

Vuetifyでドロップダウンのメニューを実装する場合に、v-menuを使うことがあると思います。Vuetify2だと、Vuetify.js 2.2のMenu, Tooltipコンポーネントについての記事で、紹介されているような実装で実現できるのですが、Vuetify3だとVuetify2と同じ実装では動作しません。ということで、Vuetify3でv-menuをどう実装すれば良いのかというのをメモ書きします。
なお、この記事を書いた2021年12月時点でVuetify3はアルファ版ですので、今後仕様が変わる可能性があることご留意ください。

対応方法

こちらのドキュメントに、Vuetify3のv-menuの実装が記載されています。Vuetify2との違いは、templateの実装で<template v-slot:activator="{ props }">となっていてv-slot:activatorにpropsが設定されています。そして、このpropsはメニューを開くドロップダウンのボタンで、<v-btn color="primary" dark v-bind="props">のようにbindします。

実装サンプル

メニューの表示部分を実装サンプルとしてのせます。クリックした時のアクションの実装は、特にVuetify特有のものでは無いので割愛します。

<template>
  <v-spacer />
  <v-menu>
    <template v-slot:activator="{ props }">
      <v-btn icon v-bind="props" color="blue-lighten-5">
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </template>
    <v-list
      style="position: absolute; left: -100px; z-index: 999"
      color="white"
    >
      <v-list-item>
        <v-list-item-title>
          <div @click="transferTop" role="button">トップ</div>
        </v-list-item-title>
      </v-list-item>
      <v-list-item>
        <v-list-item-title>
        　　　<div @click="transferCategory" role="button">
         　　　カテゴリー管理
        　 </div>
      　 </v-list-item-title>
      </v-list-item>
      <v-list-item>
      　　<v-list-item-title>
      　　　　<div @click="logout" role="button">
        　　ログアウト
        </div>
　　　　　　　　　　　　　　</v-list-item-title>
     　　</v-list-item>
    </v-list>
  </v-menu>
</template>

メニューは、以下のようなイメージで表示されます。