Vuetify Tutorial #7 - Toolbars

Hey gang, in this Vuetify tutorial we'll take a look at toolbars and create our own toolbar at the top of the website. To create toolbars we use the v-toolbar component.

----------------------------------------

🐱‍💻 🐱‍💻 Course Links:

🤑🤑 Donate


🎓🎓 Find me on Udemy

[md.akib]

Shaun you are the second programmer in mah life who has such a good eye for ui design.

[arielkollross]

buttun <v-btn text color="grey">
<span>Sign Out</span>
<v-icon right>mdi-export</v-icon>
</v-btn>

[Skaxarrat]

I love Vuetify. I hate the CSS aspect of the front-end webdev, but this makes it easy and beautiful.

[pagevpetty]

What is the difference between an appbar and a toolbar?

[kaan]

now you should use text prop instead of flat in v-button

[shubh]

class="grey lighten-3" did not work for me. How to fix that?

[Cho]

I've just finished this tut. The <v-spacer> is awesome!.

[atefehatashi]

Excuse me, in Vuetify version 2.3.19 as you mentioned in video I tried to changed v-app background but it did not work! I can not find anything in its tutorial. So do you have any suggestion to change the v-app background instead of I change this '.theme--light.v-application' class?

[chad]

The "grey lighten-4" class doesn't work on v-app. Does anyone have a solution?

[PlayToxia]

Nice course by the way!! But <v-app class="grey..."> dont change the background color anymore, does anyone know how to do it?
Loving ur videos

[osegocodes]

Guys, where do we get the material design icons

[cloudsn]

Hi Net Ninja, I have a question. How to dynamically show and hide toolbar extension ??

[andreabragagnolo]

Any idea why having the two spans in different lines is translated as a space between them? It does not happen in your example.
Anyway great series as alway, and just as I was looking for some vuetify guidelines!

[marcrichet]

Hello from France, awesome tutorials ! . I have a question, how stick navbar on the top ? I try 'app' and 'class="fixed", even 'fixed' but it did not works ..Have an idea ? thanks a lot

[roronoa_d_law]

do you know how to fix the toolbar at the top of the page ?

I tried fixed property, doesn't work
I tried with css : position:fixed, -> I don't know why but when I do that, the width of the toolbar becomes 50% instead of 100% of the page

[vitalmipango]

<v-spacer></v-spacer>does't work for me but it take the sing out down"to the exte ling"as it own comand.please help

[majakulpa]

my background colour is not working.. looks like there is somewhere some default colour already, very light grey, and I don't know how to change this. Can anyone help please?

[roronoa_d_law]

exit_to_app doesn't render an icon for me, it displays the text "exit_to_app" in the button

[yardenloumer]

v-spacer separates only between v-col elements

[CyborGTX]

For those stuck, here is an update for veutify (2.4.9)
Navbar.vue:
<template>
<v-toolbar flat color="grey lighten-3">
<v-toolbar-title flat class="text-uppercase grey--text">
<span class="font-weight-light ">dev</span>
<span>Todo</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn text color="grey">
<span>Sign Out</span>
<v-icon
</v-btn>
</v-toolbar>
</template>

App.vue:
<template>
<v-app>
<v-app-bar flat app class="grey lighten-3">
<NavBar/>
</v-app-bar>
/** More Code**/
</v-app>
</template>