Vuetify: Vue Router support for v-toolbar-title

[Trikolon]

The majority of websites allow the user to click on the website title / logo to navigate to the homepage.
I tried to implement this with Vuetify but <v-toolbar-title> doesn't seem to support the Vue Router attribute to="<path>" as other components do.
I've noticed that the Vuetify website also implements this behavior, however, its only possible to click the logo.

An example Codepen of this
I've tried nesting another component in v-toolbar-title which can hold a to attribute but that causes the title to loose its CSS properties.

[M6stafa]

https://router.vuejs.org/api/#tag
maybe this fix your issue.

[Trikolon]

Interesting, that works. I guess I still have to apply css props to enable the hand cursor though.
Would prefer native Vuetify support for this!

[johnleider]

You can do this by simply wrapping it in a router-link.

https://codepen.io/johnjleider/pen/KxBGop

[drew-royster]

Johns solution is awesome just add toolbar-title as the class for the router-link and the following css

.toolbar-title {
  color: inherit;
  text-decoration: inherit;
}

[torueck]

Without adding the class toolbar-title as suggested by @drew-royster I do not see the title / router-ling visualized. I don't know why this is the case in John's codepen example. However, when you add the mentioned css class, you could also put the router-link inside the v-toolbar-title which I find visually a bit more pleasing:

<v-toolbar-title>
    <router-link to="/" class="toolbar-title">Toolbar</router-link>
</v-toolbar-title>

[shanemgrey]

It seems that the rendered html has the class toolbar__title with double underscores now. Maybe this changed in some recent update.

This does the trick for me.

.toolbar__title {
  color: black;
  text-decoration: none;
}

[steklopod]

In nuxt js you can do like this:

            <nuxt-link to="/">
                <v-toolbar-title class="accent--text myfont">
                    🏠 Title
                </v-toolbar-title>
            </nuxt-link>

[Thomasda089]

try to wrap it in a v-btn with text="true" then you dont have to fix thinks like color and text-decoration

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

[tobias74]

as it seems the classname has changed to

.v-toolbar__title {
   color: black;
   text-decoration: none;
 }

I do have to apply the color and the text-decoration explicitly though. 'Inherit' will keep the blueish-link-color of the router-link

Maybe this could be more elegantly solved within the framework by offering a ":to" on the v-toolbar-title as suggested by the original poster?