6

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

Tenarius
  • 540
  • 1
  • 5
  • 23
  • 1
    The best I could find was in the https://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? – Marcel Dec 19 '22 at 06:26
  • 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... – Tenarius Dec 19 '22 at 19:03
  • 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. – Marcel Dec 20 '22 at 06:48
  • I think it's still under development. It'll be available with their next immediate release ( in Q3 2023) https://vuetifyjs.com/en/introduction/roadmap/#v3-4-blackguard – yasiru Jul 07 '23 at 11:06
  • https://stackoverflow.com/a/75832164/14006610 this solutions work for me thank you bro – fandu139 Aug 19 '23 at 06:03

2 Answers2

8

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>
Boude
  • 677
  • 6
  • 13
-5

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

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

Documentation here.

Philip Taylor
  • 9
  • 3
    It looks like they've made a reference to a "floating action button" page [here](https://next.vuetifyjs.com/en/api/v-btn/) - but never ended up making it (instead returning a 404)... – Philip Taylor Jan 06 '23 at 15:44
  • 3
    This answer has nothing to do with fab (floating action button). – Tenarius Jan 07 '23 at 16:03
  • 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](https://github.com/vuetifyjs/vuetify/issues/13508) – Philip Taylor Jan 09 '23 at 10:53
  • 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... – Philip Taylor Jan 09 '23 at 10:59
  • 3
    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. – Tenarius Jan 13 '23 at 08:11
  • FWIW, `v-speed-dial` has its [targeted release @ Q3 2023](https://vuetifyjs.com/en/introduction/roadmap/) – Cato Minor Jun 09 '23 at 06:07
  • 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. – Anees Hameed Jul 22 '23 at 14:16