buttonfloating-action-buttonvuetifyjs3

How to create a fab Button in vuetify 3?

In vuetify 2 it works with <v-btn fab></btn>. How works it with vuetify 3?

Solution

  • It would appear Vuetify 3 doesn't specifically support fab buttons. But thankfully the Vuetify docs do have a FAB button, namely the scroll up button. And we can lookup its source.

    From that we can make some minor changes to get to our FAB button:

    <VLayoutItem model-value position="bottom" class="text-end" size="88">
  <div class="ma-4">
    <VBtn icon="mdi-plus" size="large" color="primary" elevation="8" />
  </div>
</VLayoutItem>