Vuetify3のFloating Action Buttonでfixedが効かない時の対処法【Vue.js3】

Twitterのツイートボタンのような画面内に追従するボタンを
フローティングアクションボタンと呼ぶらしいのですが
このボタンをVuetifyで実装しようとすると、うまく固定(Fixed)できないことがあります。
（固定できても円のボタンにならなかったです）

今回は、VuetifyでFloating Action Button（アイコンの丸ボタン）を固定する方法を記します。

Vuetify3のFloating Action Buttonでfixedする方法。

下の画像のようなボタンです。

Vuetify v2であれば、公式ドキュメントでFAB(Floating Action Button)のような
ボタンはあり、v3でも実装できます。ただし、fixedについては載っておらず
他のブログを参考にしてもうまく動作しませんでした。

Buttons: Floating Action Button – Vuetify v2

実装

私は以下のようにコードを書きましたがスタイル等の書き方は
お任せします。(あまり褒められたものではないと思います。。)

<template>
 <v-app>
  <v-main>
   <v-avatar color="#00b894" 
             :style="floatingActionButtonStyle()" 
             class="position-fixed" 
             v-show="$vuetify.display.xs || $vuetify.display.sm">
    <v-btn color="#ecf0f1" icon="mdi-alert-outline" 
            variant="text" 
            @click=""></v-btn>
   </v-avatar>
  </v-main>
 </v-app>
</template>
<script setup>
const floatingActionButtonStyle = () =>{
  return {
   'bottom':'10%',
   'right':'10%',
   'height':'50px',
   'width':'50px'
 }
};
<style scoped>

おわりに

Vuetify3でFAB用のコンポーネントがあればぜひ使いたいですし、
Fixedのオプションがあればベストですが、ドキュメントから探せませんでした。。

色々組み合わせて作れるよ。という感じかもしれませんね。
他のブログで見た方法だと、固定されなかったり
ドキュメントのroundedだと円にならなかったり難しいです。。
なんとか円ボタンを固定できたので記した次第です。

余談ですが、私は趣味でプログラミングをしている身で
今まで、Vue2とBootstrapを使っていました。
今回初めてVue3とVuetify3を使いました。

バージョンが違うだけで全く書き方が違いますし体力を使います。
書き方を頑張っていたらVue4系が発表され、
改めて、フロントエンドの技術革新のスピードの速さを実感しました。。

また、Vuetifyを初めて使って数時間経ち
「Vuetifyとbeautyは掛け合わせてるんや。」とアハ体験していました。
使う前に気づけや。という話ですが。。
簡単にデザインを実装できますし、
個人的にバリデーションが気に入りました。
気に入らないところは、ネイティブ要素が紛れ込みめっちゃ怒られることですかね。
どこかのコードのコピペすると、非推奨と怒られます。。
怒ってくれるだけありがたい話ではありますが。