How to create a fab Button in vuetify 3?

Question

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

Mojgan

The best I could find was in the next.vuetifyjs.com/en/styles/transitions/#fab docs, where it suggests, that this component now is the v-speed-dial. However, I fail to find some more documentation about it. Maybe you could raise an issue about this on GitHub? – Evalynevan

I couldn't find anything about it in the docs either. This component is probably still under development. I can't imagine they just "forgot" about them... – Mojgan

Or the docs are just not up to speed yet. I literally saw some TODO markers in the online v3 docs recently. However, the components I use work flawlessly so far, despite sometimes lacking dos, once I got them right. – Evalynevan

I think it's still under development. It'll be available with their next immediate release ( in Q3 2023) vuetifyjs.com/en/introduction/roadmap/#v3-4-blackguard – Frankfort

https://mcmap.net/q/1249793/-how-to-create-a-fab-button-in-vuetify-3 this solutions work for me thank you bro – Taxable

I just used good old css: .fab{ position: fixed; right: 20px; top:20px; } – Tobacco

Vuetify 3 now supports Floating Action Buttons, check it out – Tithe

Answer 1

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>

Spadiceous

How about if the button wants to be in the left-bottom – Inosculate

@AbdulAzeezOlanrewaju Drop the class="text-end" – Umbrella

Answer 2

You don't need to use VLayoutItem like other answers suggest, positioning ability is baked right into VBtn via the position and location props.

<v-btn 
    position="fixed" 
    location="bottom right" 
    icon="mdi-plus" 
    size="large" 
    color="primary" 
    elevation="8 
/>

Technics

This should be the accepted answer. And, also, one can adjust the position easily by setting something like mx-3, my-5 to the v-btn. – Disenfranchise

Answer 3

Starting from March 2024, Vuetify 3 now supports Floating Action Buttons.
To use this feature you have to update Vuetify to v3.5.7.

For a lighter footprint this component isn't imported by default.
First of all, import VFab into your Vuetify configuration.

import { VFab } from 'vuetify/labs/VFab'

export default createVuetify({
  components: {
    VFab,
  },
})

Then use <v-fab> as you like, for example:

<v-fab
  class="ms-4"
  icon="mdi-plus"
  location="bottom start"
  size="small"
  absolute
  offset
/>

Here you can find the documentation for the Vuetify 3 FAB component:
https://vuetifyjs.com/en/components/floating-action-buttons

Tithe

Thanks for the news! Very powerful! By the way as of 3.6.0 it comes in stock Vuetify. – Objectivism

Answer 4

The accepted answer is missing pointer-events-none and pointer-events-initial classes.

These classes are necessary to enable clicking below the container.

Here is the code from the accepted aswer with the correction (classes added):

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

And here is the scoped style:

<style scoped>
  .pointer-events-none {
    pointer-events: none;
  }
  
  .pointer-events-initial {
    pointer-events: initial;
  }
</style>

Diez

I had to wrap your code into <v-app> tags to avoid receiving the error " Error: [Vuetify] Could not find injected layout". – Objectivism

@Objectivism well, actually you should wrap your app root component into <v-app> for vuetify to work properly and avoid receiving this error from other child components as well – Diez

Answer 5

New update, vuetify 3 now has a FAB component https://vuetifyjs.com/en/components/floating-action-buttons/

<v-fab icon="$vuetify" location="top end" absolute offset></v-fab>

Killingsworth

Answer 6

It looks like they've changed the syntax in v3+ to:

<v-btn icon="mdi-plus"></v-btn>

Documentation here.

Hills

It looks like they've made a reference to a "floating action button" page here - but never ended up making it (instead returning a 404)... – Hills

This answer has nothing to do with fab (floating action button). – Mojgan

Clearly you require even more explanation...If you go ahead and add 'position="fixed"' and 'location="bottom right"' you can get yourself a lil FAB... I went ahead and asked what was occurring with the speed-dial and such for you... You can follow along the progress here – Hills

Do you require me to do any more of your work for you? Or was my working example, Github issue (which I made on your behalf, using your own question as an example of why they should fix the docs), AND coming back to make sure there's a link to the Github for future readers (so they know when they can use the speed-dial component) good enough for you?.. You're welcome dude... – Hills

Thanks for your work and please edit your answer according to your findings so that others can see it directly. As your answer is now, it has nothing to do with the original topic. Or delete your answer and post your first comment from this to the main question. – Mojgan

FWIW, v-speed-dial has its targeted release @ Q3 2023 – Chaisson

Why people are downvoting this answer? By 'fab' many developer think of a rounded button with an icon. In vuetify3, there is no such prop that can be passed to the button. But, the same can be achieved using the above answer, and that is the only way. – Richelle