It looks like you can use the to in so the router link extends. I want to make the link to the the front page. does not work and wrapping in changes the formatting. How can I make <-v-toolbar-title> link without changing the formatting? Thanks!
You can use text-wrap / text-no-wrap class. Save this answer.
v-spacer is a basic yet versatile spacing component used to distribute remaining width in-between a parents child components.
Changing text color and background color is easy with Vuetify, too. For the background color, simply add the name of the required color to the element's class. For text color, just add the color name followed by --text .
You should first create "sass" folder in the "src" directory, then create a "variables. scss" file in this directory. Then write the below code in this file. $ body-font-family: Your-FontName @import '~vuetify/src/styles/settings/_variables.
There is a perfect way to handle this situation.
Use click event handler to navigate to the front page
Just replace your v-toolbar-title code with the following code.
<v-toolbar-title @click="$router.push('/')" class="headline text-uppercase" >
<span class="display-1 text-uppercase font-weight-medium">Company </span>
<span class="display-1 text-uppercase font-weight-light">Associates</span>
</v-toolbar-title>
This way its very clean without adding any external css or additional button component just by adding this "$router.push('/')" to @click event handler
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With