Toolbar items placement in Vuetify 2.0

Vuetify is Vue based progressive framework that supports SSR, SPA and PWA. You can read more about it here.

How it looks when we have v-modal; with content of v-toolbar inside a v-dialog; let’s see them along with some cards

In the header of title we have two action buttons. One before a X / Cross (to close the modal), and one after the text Default (which perform some other kind of business logic). I am more interested in the placement of action buttons on the toolbar.

Vuetify 2.0 changed the way we use the v-toolbar component. Let’s see, how it was achieved in Version 1.5

<v-dialog v-model="modal" persistent="persistent">
  <v-card>
    <v-toolbar>
      <v-toolbar-side-icon @click="modal = false">
        <v-icon>close</v-icon>
      </v-toolbar-side-icon>
      <v-toolbar-title>Select Your Component</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items>
        <v-btn depressed="depressed" flat="flat" @click="navigateToDefaultEdit" color="primary">Default</v-btn>
      </v-toolbar-items>
    </v-toolbar>
  </v-card>
</v-dialog>

Line 4-6 and 9-10 have different content inside but serve same purpose; to display action buttons. Then why totally different markup. The Line 9-11 is straight forward, things becomes tricky from line 4. Where we have v-sidebar-icon which doesn’t tell you which side, left or right. Things becomes even confusing if we want to support Right to Left Language i-e Arabic, Urdu etc. In that case how should swap the position of buttons? Should I reorder the markup?

With Vuetify 2.0 this method is much cleaner and much more semantic. Let’s update our code in accordance with new changes of Toolbar Component

<v-toolbar>
  <v-toolbar-items>
    <v-btn text="text" @click="dialog = false">
      <v-icon>mdi-close</v-icon>
    </v-btn>
  </v-toolbar-items>
  <v-toolbar-title>Select Your Component</v-toolbar-title>
  <v-spacer></v-spacer>
  <v-toolbar-items>
    <v-btn depressed="depressed" text="text" @click="default" color="primary">Default</v-btn>
  </v-toolbar-items>
</v-toolbar>

In above code listing; line 2-6 and 9-11 uses that same v-toolbar-items to plug action button either before or after the v-toolbar-title. We have no more v-sidebar-icon.

Vuetify Similarity with Ionic

I also use Ionic in my day to day life, I did wrote quite hand full of articles about it. What this has to do with this article. Ionic toolbar also has the similar functionality to Vuetify 2.0 Toolbars item placement. Let’s have look at some code snippet.

<ion-toolbar>
  <ion-buttons slot="start">
    <ion-back-button></ion-back-button>
  </ion-buttons>
  <ion-title>Title</ion-title>
  <ion-buttons slot="end">
    <ion-button>
      <ion-icon name="share"></ion-icon>
    </ion-button>
    <ion-button color="primary">
      <ion-badge></ion-badge>
      <ion-icon name="cart"></ion-icon>
    </ion-button>
  </ion-buttons>
</ion-toolbar>

Before and after ion-title we have ion-buttons and what to go before and after is decided by slot property. The start/end provides a logical and semantic meanings of how the elements will be displayed regardless of writing mode.

Conclusion

Vuetify 2.0 is going more and more towards the web component along with a lot of bug and fixes (to improve the performance). They are trying to make the code much generic. This makes us easily to jumpstart with this famous Vue framework and reuse things that I have learnt elsewhere.