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

Question

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!

Answer 1

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

Answer 2

I'm not sure you'll be content with any response to this issue because it'll involve at least some customization.

If you're not happy with the other solutions here is another one: https://codepen.io/simondepelchin/pen/PooRyBG

What I did is replace the v-toolbar-title with a router-link and manually added the v-toolbar__title class that is added by Vuetify. Also note that in order to keep default styling you have to specify the link's tag which should be div in this case.

Here's the code snippet:

<router-link 
    tag="div"
    :to="{ path: '/' }" 
    class="v-toolbar__title 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>
</router-link>

Just be aware that in case Vuetify updates and changes the class used for the v-toolbar-title you might have to change it too.

Answer 3

A quick fix is the below one. There is no out of the box solution as fas as I know.

<v-toolbar-title>
    <v-btn text to="/">home</v-btn>
</v-toolbar-title>

.theme--light.v-btn--active:hover::before,
.theme--light.v-btn--active::before {
  opacity: 0;
}

.theme--dark.v-btn--active:hover::before,
.theme--dark.v-btn--active::before {
  opacity: 0;
}