Recently I had to upgrade an app I am working on to Vuetify 2.x. I have been working on this app in my free time for the past 1 year or so and when I started out, I decided to use Vuetify, since that’s what we are using at work. Needless to say, Vuetify has changed a lot over the last 1 year. I resisted upgrading since I hardly got time to work on features but a couple of weeks ago, I gave in and decided to stop working on the app and upgrade all dependencies, including vue-cli and Vuetify.

One of the biggest changes that has come is the introduction of the new grid system, and deprecation of the old. If you are conversant with the old grid system, you might find the new grid a bit jarring. So lets get down to the workings of the new grid system.

<v-layout> and <v-flex> are out

The <v-layout> and <v-flex> has given way to more aptly named <v-row> and <v-col>. I say “aptly” but the implementation actually makes the name choice weird. I will come into that in a bit.

<v-row> is implemented as a wrapper component of <v-col> which means that this is correct:

<v-row>
  <v-col>
    stuff....
  </v-col>
</v-row>

And this is incorrect:

<v-col>
  <v-row>
    stuff....
  </v-row>
</v-col>

The new components also means that a lot of the old props no longer works, especially the handy xs12 and its brethren. Instead they have been replaced with Number type props:

  1. cols – denotes the default number of columns your element inside <v-col> is going to take. This is a replacement for xs{n} prop for most use cases. Essentially, you will be using cols="12" a lot.
  2. sm – denotes the number of columns your element is going to take on a small window. Replacement of sm{n}. Use as sm="{n}".
  3. md, lg and xl – ditto as above but for md{n}, lg{n} and xl{n} respectively.

Other props like column, wrap and shrink are also missing and have been replaced by helper classes. For example, shrink has been replaced with flex-shrink-0 and flex-shrink-1. This results in a code that is a bit more verbose but it gives very fine grained control to the developer and I find that this is a better thing to have when designing complex UIs. I used to face weird issues using the old grid, one of the reasons I took the pain of migrating. This is probably because the props in the old grid used to try and intelligently set the flex properties in sibling elements and thus cause issues when fine grained control was required.

And this brings us to the most weird aspect of the new grid. Remember when I said that <v-row> is implemented as a wrapper component of <v-col>. So, you must be wondering what to do when you want a column oriented Flexbox. Well, you certainly cannot nest <v-row> inside <v-col>. Well, the answer is simple:

<v-row class="flex-column">
  <v-col>
    stuff....
  </v-col>
</v-row>

Although the components gives the impression that one can only create row based flexboxes, it is not so. The helper classes are really “helpful” in this regard.

That’s pretty much the biggest changes to the grid system in Vuetify 2.x. There has been more changes but they can mostly be resolved with simple replacements. For more details on migrating, see https://vuetifyjs.com/en/getting-started/releases-and-migrations. For more details on the new grid system itself, see https://vuetifyjs.com/en/components/grids.

Leave a Reply

Your email address will not be published. Required fields are marked *