Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vuetify <v-toolbar-title> and links that do not change formating

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!

like image 495
Jason Avatar asked Oct 21 '19 12:10

Jason


People also ask

How do I wrap text in Vuetify?

You can use text-wrap / text-no-wrap class. Save this answer.

What is V spacer?

v-spacer is a basic yet versatile spacing component used to distribute remaining width in-between a parents child components.

How do I change the text color in Vuetify?

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 .

How do I add fonts to Vuetify?

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.


1 Answers

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&nbsp;</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

like image 179
chans Avatar answered Oct 25 '22 00:10

chans