Vue + Vuetify + vue-router: changing toolbar content based on page

Question

Vuetify has a pretty flexible layout scheme encompassing a menu, toolbar, content, and footer, that allows some nice-looking material design schemes, e.g. Google Contacts:

Consider a standard setup with the layout being controlled by the router, with a fixed menu across the site, but a dynamic toolbar that changes with the page shown. What's the best practice for changing the content of the toolbar depending on what page is shown? In the Google Contacts example, we only want the search bar to show up on the Contacts page.

Based on my rudimentary knowledge of Vue, it seems like defining a router layout with a scoped slot. There are likely a lot of other hacky ways to achieve this. But I'm looking for a clean, modular way to define toolbar content across pages.

Ideas:

• As of a while ago vue-router didn't support named slots. But this seems to have changed recently, although there is no documentation.

• Named views seem to be a nice way to support tie the toolbar content to the main page with vue-router. But there doesn't seem to be a good way for the toolbar to 'talk' to the main page as there would be with a slot.

Answer 1

You can define multiple router views in your application. Imagine your layout looks extremely simplified like this:

<v-app id="app">
  <router-view name="navigation"></router-view>
  <router-view></router-view>
</v-app>

Then you can define a route with components for both router views:

{
  path: '/hello',
  components: {
    default: MyHelloComponent,
    navigation: MyNavigationForHelloComponent
  }
}

Documentation

Working Example from Documentation