Category: Vuetify

Vuetify is a popular UI framework for Vue apps.

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

Unique Layouts

We can add layouts with various rows and columns.

The number of columns a column take can be set according to breakpoints:

<template>  
  <v-container class="grey lighten-5">  
    <v-row>  
      <v-col cols="12" md="8">  
        <v-card class="pa-2" outlined tile>.col-12 .col-md-8</v-card>  
      </v-col>  
      <v-col cols="6" md="4">  
        <v-card class="pa-2" outlined tile>.col-6 .col-md-4</v-card>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

We have a row with columns that have different sizes.

The first column takes 12 columns by default and takes 8 if it’s md and up.

The 2nd takes 6 columns by default and takes 4 if it’s md and up.

The columns will be rearranged so that they always fit on the screen.

Vertical Alignment

We can change the vertical alignment of flex items and their parents with the align and align-self props.

For example, we can write:

<template>  
  <div>  
    <v-container class="grey lighten-5 mb-6">  
      <v-row align="start" no-gutters>  
        <v-col v-for="n in 3" :key="n" cols="2">  
          <v-card class="pa-2" outlined tile>column</v-card>  
        </v-col>  
      </v-row>  
    </v-container>  
  </div>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

We have the v-col components with the align prop to put the columns on the left.

Other values for align include center to put items in the center and end to put the columns at the end.

Horizontal Alignment

The horizontal alignment of flex items with the justify property:

<template>  
  <div>  
    <v-container class="grey lighten-5 mb-6">  
      <v-row justify="start" no-gutters>  
        <v-col v-for="n in 3" :key="n" cols="2">  
          <v-card class="pa-2" outlined tile>column</v-card>  
        </v-col>  
      </v-row>  
    </v-container>  
  </div>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

No Gutters

The no-gutters prop remove the gutters between the columns:

<template>  
  <v-container class="grey lighten-5">  
    <v-row no-gutters>  
      <v-col cols="12" sm="5" md="6">  
        <v-card class="pa-2" outlined tile>col</v-card>  
      </v-col>  
      <v-col cols="6" md="6">  
        <v-card class="pa-2" outlined tile>col</v-card>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

Column Wrapping

If there are more than 12 columns in a row, then the extra columns will wrap onto a new line.

Order Classes

We can change the order of the grid items with the order prop on the v-col :

<template>  
  <v-container class="grey lighten-5">  
    <v-row no-gutters>  
      <v-col>  
        <v-card class="pa-2" outlined tile>First, but unordered</v-card>  
      </v-col>  
      <v-col order="3">  
        <v-card class="pa-2" outlined tile>Second, but last</v-card>  
      </v-col>  
      <v-col order="1">  
        <v-card class="pa-2" outlined tile>Third, but first</v-card>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

Conclusion

We can create layout with various flexbox classes and props.

Vuetify is a popular UI framework for Vue apps.

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

Disabled Slider

We can disable the slider with the disabled prop:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-slider disabled label="Disabled" value="30"></v-slider>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

Readonly Slider

A slider can also be disabled with the readonly prop. The difference between disabled and readonly is that a read-only slider looks a regular one.

For example, we can write:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-slider readonly label="Disabled" value="30"></v-slider>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

Icons

Icons can be added to a slider.

For example, we can write:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-slider v-model="sound" prepend-icon="mdi-plus"></v-slider>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    sound: 0,  
  }),  
};  
</script>

to add an icon to the left of the slider with the prepend-icon prop.

We can do the same with the append-icon prop to add the icon to the right.

Also, we can listen to clicks on icons with the @click:append and @click:prepend directives.

For example, we can write:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-slider  
          v-model="zoom"  
          prepend-icon="mdi-minus"  
          append-icon="mdi-plus"  
          @click:append="zoomIn"  
          @click:prepend="zoomOut"  
        ></v-slider>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    zoom: 100,  
  }),  
  methods: {  
    zoomOut() {  
      this.zoom = this.zoom - 10 || 0;  
    },  
    zoomIn() {  
      this.zoom = this.zoom + 10 || 100;  
    },  
  },  
};  
</script>

We set the zoomIn and zoomOut methods as the values of the directives to change the value of this.zoom and the slider value.

Vertical Sliders

The vertical prop makes a slider display vertically.

For instance, we can write:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-slider v-model="value" vertical label="Regular"></v-slider>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    value: 100,  
  }),  
};  
</script>

Thumb

We can display a label for the slider dot.

For instance, we can write:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-slider v-model="value" thumb-label="always"></v-slider>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    value: 100,  
  }),  
};  
</script>

The thumb-label prop displays the slider.

We can add a custom label by populating the thumb-label slot:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-slider v-model="value" thumb-label="always">  
          <template v-slot:thumb-label="{ value }">{{ value }}</template>  
        </v-slider>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    value: 100,  
  }),  
};  
</script>

Conclusion

We can add sliders to let users set the value to what we want.

Vuetify is a popular UI framework for Vue apps.

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

Dividers

We can use dividers to divide content.

For instance, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-card>
          <v-list two-line>
            <template v-for="(item, index) in items.slice(0, 6)">
              <v-divider v-if="item.divider" :key="index" :inset="item.inset"></v-divider>
              <v-list-item v-else :key="index">
                <v-list-item-avatar>
                  <img :src="item.avatar" />
                </v-list-item-avatar>
                <v-list-item-content>
                  <v-list-item-title v-html="item.title"></v-list-item-title>
                  <v-list-item-subtitle v-html="item.subtitle"></v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
            </template>
          </v-list>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: [
      {
        avatar: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
        title: "title",
        subtitle: "subtitle",
      },
      { divider: true, inset: true },
      {
        avatar: "https://cdn.vuetifyjs.com/images/lists/2.jpg",
        title: "title",
        subtitle: "subtitle",
      },
      { divider: true, inset: true },
      {
        avatar: "https://cdn.vuetifyjs.com/images/lists/3.jpg",
        title: "title",
        subtitle: "subtitle",
      },
    ],
  }),
};
</script>

We add the v-divider component to divide the rows with the divider.

It’s flush with the v-list-item .

Vertical Dividers

We can add vertical dividers with the vertical prop.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-toolbar color="purple" dark>
          <v-toolbar-title>Title</v-toolbar-title>
          <v-divider class="mx-4" vertical></v-divider>
          <span class="subheading">My Home</span>
          <v-spacer></v-spacer>
          <v-toolbar-items class="hidden-sm-and-down">
            <v-btn text>News</v-btn>
            <v-divider vertical></v-divider>
            <v-btn text>Blog</v-btn>
            <v-divider vertical></v-divider>
            <v-btn text>Music</v-btn>
            <v-divider vertical></v-divider>
          </v-toolbar-items>
          <v-app-bar-nav-icon></v-app-bar-nav-icon>
        </v-toolbar>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We have the v-divider with the vertical prop to add the vertical divider.

It’s also flush with the toolbar.

Vertical Inset Dividers

We can use the inset prop to add margins with the divider:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-toolbar color="purple" dark>
          <v-toolbar-title>Title</v-toolbar-title>
          <v-divider class="mx-4" vertical inset></v-divider>
          <span class="subheading">My Home</span>
          <v-spacer></v-spacer>
          <v-toolbar-items class="hidden-sm-and-down">
            <v-btn text>News</v-btn>
            <v-divider vertical inset></v-divider>
            <v-btn text>Blog</v-btn>
            <v-divider vertical inset></v-divider>
            <v-btn text>Music</v-btn>
            <v-divider vertical inset></v-divider>
          </v-toolbar-items>
          <v-app-bar-nav-icon></v-app-bar-nav-icon>
        </v-toolbar>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Conclusion

We can add dividers for menu items and rows.

Vuetify is a popular UI framework for Vue apps.

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

Prepend and Append Item Slots

We can populate slots with various items.

For example, we can add an item above the choices we have by populating the prepend-item slot:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-select v-model="selectedFruits" :items="fruits" label="Favorite Fruits" multiple>
          <template v-slot:prepend-item>
            <v-list-item ripple @click="toggle">
              <v-list-item-action>
                <v-icon :color="selectedFruits.length > 0 ? 'indigo darken-4' : ''">{{ icon }}</v-icon>
              </v-list-item-action>
              <v-list-item-content>
                <v-list-item-title>Select All</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
            <v-divider class="mt-2"></v-divider>
          </template>
          <template v-slot:append-item>
            <v-divider class="mb-2"></v-divider>
            <v-list-item disabled>
              <v-list-item-avatar color="grey lighten-3">
                <v-icon>mdi-food-apple</v-icon>
              </v-list-item-avatar>

              <v-list-item-content v-if="likesAllFruit">
                <v-list-item-title>all selected</v-list-item-title>
              </v-list-item-content>

              <v-list-item-content v-else-if="likesSomeFruit">
                <v-list-item-title>{{ selectedFruits.length }} selected</v-list-item-title>
              </v-list-item-content>

              <v-list-item-content v-else>
                <v-list-item-title>no fruit selected</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </template>
        </v-select>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    fruits: ["apple", "orange", "pear"],
    selectedFruits: [],
  }),
  computed: {
    likesAllFruit() {
      return this.selectedFruits.length === this.fruits.length;
    },
    likesSomeFruit() {
      return this.selectedFruits.length > 0 && !this.likesAllFruit;
    },
    icon() {
      if (this.likesAllFruit) return "mdi-close-box";
      if (this.likesSomeFruit) return "mdi-minus-box";
      return "mdi-checkbox-blank-outline";
    },
  },
  methods: {
    toggle() {
      if (this.likesAllFruit) {
        this.selectedFruits = [];
      } else {
        this.selectedFruits = [...this.fruits];
      }
    },
  },
};
</script>

We have the v-select component with the prepend-item slot having the Select All checkbox.

We have the v-list-item that calls toggle when it’s clicked to toggle the selection of fruits.

The toggle is displayed on top since it’s in the prepend-item slot.

Also, we have the append-item slot to populate the slot with some text.

The text is displayed at the bottom of the dropdown.

Change Selection Appearance

We can change the selection appearance.

For instance, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-select v-model="value" :items="items" label="Select Item" multiple>
          <template v-slot:selection="{ item, index }">
            <v-chip v-if="index === 0">
              <span>{{ item }}</span>
            </v-chip>
            <span v-if="index === 1" class="grey--text caption">(+{{ value.length - 1 }} others)</span>
          </template>
        </v-select>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: ["apple", "orange", "pear"],
    value: [],
  }),
};
</script>

We populated the selection slot to add the number of items to the slot.

This will be displayed to the right of the selections.

Conclusion

The dropdown can be displayed with various content by populating slots.

Vuetify is a popular UI framework for Vue apps.

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

Multiple Selection Dropdown

We can add a multiple selection dropdown with the multiple prop.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-select v-model="fruit" :items="items" menu-props="auto" label="Select" multiple></v-select>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: ["apple", "orange", "pear"],
    fruit: "",
  }),
};
</script>

Now the dropdown will have a checkbox to let us select the items.

The selected items can be displayed as chips with the chips prop:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-select v-model="fruit" :items="items" menu-props="auto" label="Select" multiple chips></v-select>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: ["apple", "orange", "pear"],
    fruit: "",
  }),
};
</script>

Dense Dropdown

The dense prop lets us shrink the height of the dropdown.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-select v-model="fruit" :items="items" menu-props="auto" label="Select" dense></v-select>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: ["apple", "orange", "pear"],
    fruit: "",
  }),
};
</script>

to add the dropdown with a shorter height.

Customized Item Text and Value

The item can be customized with different text and value.

To customize it, we can use the return-object prop.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-select
          v-model="select"
          :items="items"
          menu-props="auto"
          label="State"
          return-object
          :hint="`${select.state}, ${select.abbr}`"
          item-text="state"
          item-value="abbr"
        ></v-select>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: [
      { state: "Florida", abbr: "FL" },
      { state: "Georgia", abbr: "GA" },
      { state: "Nebraska", abbr: "NE" },
      { state: "South Dakota", abbr: "SD" },
      { state: "New York", abbr: "NY" },
    ],
    select: "",
  }),
};
</script>

We have the return-object prop with the item-text and item-value props.

item-text is the key of the selected item.

item-value is the key of the selected item’s value we want to set as the value of the v-model .

We can get both values as we did in value of the hint prop.

Custom Menu Props

We can set the menu-props prop with custom options.

For instance, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-select :items="items" :menu-props="{ top: true, offsetY: true }" label="Label"></v-select>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: ["apple", "orange", "pear"],
    select: "",
  }),
};
</script>

We set the top property to true to make the dropdown drop up instead of down.

offsetY makes it shift its position higher.

Conclusion

We can add dropdowns with various options with Vuetify.