CODEWITHSUNDEEP
vue.jsvuetify.jstoolbarback-buttonappbar
DbSethi
DbSethi

Reputation: 21

Vuejs conditional AppBar

In Vuetify, what is the best way to manage differenly styled appbars for various pages? And how to enable back button instead of hamburger icon programatically? Example: There are 5 screens, 2 of them have separate controls in app bar than the rest.

Upvotes: 1

Views: 927

Answers (1)

Tanner
Tanner

Reputation: 2421

For the question of coloring the app bar, if you're using the router, you can add a meta tag "color", then set v-app-bar's color property to something to the effect of :color="$route.meta && $route.meta.color || 'blue-grey'", where blue-grey is the fallback color. Your route would look something like: 

{
  path: '/mycoolpath',
  component: MyCoolComponent,
  meta: {
     //other route meta...
     color: 'blue'
  }
}

For the question of enabling Back, just replace the app-bar-nav-icon with the appropriate icon name (mdi-arrow-left, likely) and change it's @click to $router.go(-1) (further reading on routes)

Upvotes: 1

Related Questions