Vuetify — Visibility and Layout

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Visibility

Vuetify provides us with some visibility classes.

They include:

• Hidden on all .d-none
• Hidden only on xs .d-none .d-sm-flex
• Hidden only on sm .d-sm-none .d-md-flex
• Hidden only on md .d-md-none .d-lg-flex
• Hidden only on lg .d-lg-none .d-xl-flex
• Hidden only on xl .d-xl-none
• Visible on all Visible only on xs .d-flex .d-sm-none
• Visible only on sm .d-none .d-sm-flex .d-md-none
• Visible only on md .d-none .d-md-flex .d-lg-none
• Visible only on lg .d-none .d-lg-flex .d-xl-none
• Visible only on xl .d-none .d-xl-flex

Display in Print

Vuetify also provides classes for display stuff in print. They are:

• .d-print-none
• .d-print-inline
• .d-print-inline-block
• .d-print-block
• .d-print-table
• .d-print-table-row
• .d-print-table-cell
• .d-print-flex
• .d-print-inline-flex

Elevation Helpers

We can change the depth of an element with the elevation helpers.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <v-card :elevation="10" height="100" width="100">
          <v-row class="fill-height" align="center" justify="center" v-text="'foo'"></v-row>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",

  data: () => ({}),
};
</script>

We have the v-card component with the elevation prop to set the elevation.

Now we’ll see a shadow in an element.

Flexbox

Vuetify supports flexbox for layout.

To use it, we can use the classes that it provides.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <v-card class="d-flex pa-2" outlined tile>
          <div>flexbox</div>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",

  data: () => ({}),
};
</script>

We added the v-card with the d-flex class to make the card have a flex layout.

Flexbox classes include:

• .d-flex
• .d-inline-flex
• .d-sm-flex
• .d-sm-inline-flex
• .d-md-flex
• .d-md-inline-flex
• .d-lg-flex
• .d-lg-inline-flex
• .d-xl-flex
• .d-xl-inline-flex

Flex Direction

We can change the flex-direction with the provides classes.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <v-card class="d-flex flex-row mb-6" color="grey lighten-2" flat tile>
          <v-card v-for="n in 3" :key="n" class="pa-2" outlined tile>item {{ n }}</v-card>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",

  data: () => ({}),
};
</script>

We have the flex-row class to show the divs in a row.

Vuetify also provides the flex-column-reverse classes to change the orientation of the flexbox container.

Conclusion

We can change the visibility and layout of elements with Vuetify.