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.

Mandatory List Item

We can add the mandatory prop to make choosing an item mandatory:

<template>
  <v-container class="grey lighten-5">
    <v-row>
      <v-col>
        <v-list flat>
          <v-list-item-group v-model="model" color="indigo" active-class="border">
            <v-list-item v-for="(item, i) in items" :key="i">
              <v-list-item-icon>
                <v-icon v-text="item.icon"></v-icon>
              </v-list-item-icon>

<v-list-item-content>
                <v-list-item-title v-text="item.text"></v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: [
      {
        icon: "mdi-wifi",
        text: "Wifi",
      },
      {
        icon: "mdi-bluetooth",
        text: "Bluetooth",
      },
      {
        icon: "mdi-chart-donut",
        text: "Data Usage",
      },
    ],
    model: undefined
  }),
};
</script>

Custom Active Class

The active-class prop can be set to set a custom class for an active item.

For example, we can write:

<template>
  <v-container class="grey lighten-5">
    <v-row>
      <v-col>
        <v-list flat>
          <v-list-item-group v-model="model" color="indigo" active-class="border">
            <v-list-item v-for="(item, i) in items" :key="i">
              <v-list-item-icon>
                <v-icon v-text="item.icon"></v-icon>
              </v-list-item-icon>

<v-list-item-content>
                <v-list-item-title v-text="item.text"></v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: [
      {
        icon: "mdi-wifi",
        text: "Wifi",
      },
      {
        icon: "mdi-bluetooth",
        text: "Bluetooth",
      },
      {
        icon: "mdi-chart-donut",
        text: "Data Usage",
      },
    ],
    model: undefined
  }),
};
</script>

<style scoped>
.border {
  border: 1px solid red;
}
</style>

We just added the border class to see a red outline.

Slide Groups

The v-slide-group component is used to display paginated information.

For instance, we can write:

<template>
  <v-container class="grey lighten-5">
    <v-row>
      <v-col>
        <v-sheet class="mx-auto" elevation="8" max-width="800">
          <v-slide-group
            v-model="model"
            class="pa-4"
            prev-icon="mdi-minus"
            next-icon="mdi-plus"
            show-arrows
          >
            <v-slide-item v-for="n in 15" :key="n" v-slot:default="{ active, toggle }">
              <v-card
                :color="active ? 'primary' : 'grey lighten-1'"
                class="ma-4"
                height="200"
                width="100"
                @click="toggle"
              >
                <v-row class="fill-height" align="center" justify="center">
                  <v-scale-transition>
                    <v-icon
                      v-if="active"
                      color="white"
                      size="48"
                      v-text="'mdi-close-circle-outline'"
                    ></v-icon>
                  </v-scale-transition>
                </v-row>
              </v-card>
            </v-slide-item>
          </v-slide-group>
        </v-sheet>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    model: undefined,
  }),
};
</script>

to add the v-slide-group component with the v-slide-item components inside for the items.

We use the active boolean to check if the item is selected.

And the toggle function lets us toggle the active state.

Conclusion

We can group items with list item groups and slide item groups.

Vuetify is a popular UI framework for Vue apps.

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

Item Groups

We can add group items with the v-item-group component.

For example, we can write:

<template>
  <v-container class="grey lighten-5">
    <v-row>
      <v-col>
        <v-item-group multiple>
          <v-container>
            <v-row>
              <v-col v-for="n in 3" :key="n" cols="12" md="4">
                <v-item v-slot:default="{ active, toggle }">
                  <v-card
                    :color="active ? 'primary' : ''"
                    class="d-flex align-center"
                    dark
                    height="200"
                    @click="toggle"
                  >
                    <v-scroll-y-transition>
                      <div v-if="active" class="display-3 flex-grow-1 text-center">Active</div>
                    </v-scroll-y-transition>
                  </v-card>
                </v-item>
              </v-col>
            </v-row>
          </v-container>
        </v-item-group>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We populate the default slot of v-item with our own content.

active is a boolean which indicates whether the item is pressed or not.

toggle is a function that we can click to make the item active.

Active Class

We can set the active class with active-class prop on the v-item-group .

For example, we can write:

<template>
  <v-container class="grey lighten-5">
    <v-row>
      <v-col>
        <v-item-group active-class="primary">
          <v-container>
            <v-row>
              <v-col v-for="n in 3" :key="n" cols="12" md="4">
                <v-item v-slot:default="{ active, toggle }">
                  <v-card class="d-flex align-center" dark height="200" @click="toggle">
                    <v-scroll-y-transition>
                      <div v-if="active" class="display-3 flex-grow-1 text-center">Active</div>
                    </v-scroll-y-transition>
                  </v-card>
                </v-item>
              </v-col>
            </v-row>
          </v-container>
        </v-item-group>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We set the active-class to primary to set the class when active is true .

Chips

We can add a custom chip group with the v-item component.

For instance, we can write:

<template>
  <v-container class="grey lighten-5">
    <v-row>
      <v-col>
        <v-item-group multiple>
          <v-subheader>Tags</v-subheader>
          <v-item v-for="n in 8" :key="n" v-slot:default="{ active, toggle }">
            <v-chip active-class="purple--text" :input-value="active" @click="toggle">Tag {{ n }}</v-chip>
          </v-item>
        </v-item-group>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

to add a bunch of chips within a v-item-group .

List Item Groups

We can group list items into a group.

For example, we can write:

<template>
  <v-container class="grey lighten-5">
    <v-row>
      <v-col>
        <v-list flat>
          <v-list-item-group v-model="model" color="indigo">
            <v-list-item v-for="(item, i) in items" :key="i">
              <v-list-item-icon>
                <v-icon v-text="item.icon"></v-icon>
              </v-list-item-icon>

              <v-list-item-content>
                <v-list-item-title v-text="item.text"></v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: [
      {
        icon: "mdi-wifi",
        text: "Wifi",
      },
      {
        icon: "mdi-bluetooth",
        text: "Bluetooth",
      },
      {
        icon: "mdi-chart-donut",
        text: "Data Usage",
      },
    ],
  }),
};
</script>

We use the v-list component to add a list.

Then we add a v-list-item-group to add the items.

v-list-item-icon adds the icon.

And v-list-item-content adds the content for the list item.

Conclusion

We can add list items and item groups with Vuetify.

Vuetify is a popular UI framework for Vue apps.

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

Chip Groups

We can group chips together with the v-chip-group component.

For example, we can write:

<template>
  <v-container class="grey lighten-5">
    <v-row>
      <v-col>
        <v-sheet elevation="10" class="pa-4">
          <v-chip-group column active-class="primary--text">
            <v-chip v-for="tag in tags" :key="tag">{{ tag }}</v-chip>
          </v-chip-group>
        </v-sheet>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    tags: ["mango", "apple", "orange", "pear", "grape"],
  }),
};
</script>

We put the v-chip components in the v-chip-group component.

Mandatory

We can add the mandatory prop so that there’s a value selected.

For example, we can write:

<template>
  <v-container class="grey lighten-5">
    <v-row>
      <v-col>
        <v-sheet elevation="10" class="py-4 px-1">
          <v-chip-group mandatory active-class="primary--text">
            <v-chip v-for="tag in tags" :key="tag">{{ tag }}</v-chip>
          </v-chip-group>
        </v-sheet>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    tags: ["mango", "apple", "orange", "pear", "grape"],
  }),
};
</script>

We put the mandatory prop on the v-chip-group component.

Multiple

The multiple prop lets us select multiple chips.

For instance, we can write:

<template>
  <v-container class="grey lighten-5">
    <v-row>
      <v-col>
        <v-sheet elevation="10" class="py-4 px-1">
          <v-chip-group multiple active-class="primary--text">
            <v-chip v-for="tag in tags" :key="tag">{{ tag }}</v-chip>
          </v-chip-group>
        </v-sheet>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    tags: ["mango", "apple", "orange", "pear", "grape"],
  }),
};
</script>

then we can select multiple chips.

Filter Results

Chips can have additional feedback with the filter prop.

For example, we can write:

<template>
  <v-container class="grey lighten-5">
    <v-row>
      <v-col>
        <v-card class="mx-auto" max-width="400">
          <v-card-text>
            <h2 class="title mb-2">Choose fruits</h2>

            <v-chip-group v-model="fruits" column multiple>
              <v-chip filter outlined>apple</v-chip>
              <v-chip filter outlined>orange</v-chip>
              <v-chip filter outlined>grape</v-chip>
            </v-chip-group>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    fruits: [],
  }),
};
</script>

to add chips that show a checkmark when it’s chosen.

v-model will bind the selected items to the model.

filter is what makes the checkmark shown.

outlined makes the chip displayed with a white background when it’s not selected.

Conclusion

We can add chip groups to show a group of chips that we can select.

Vuetify is a popular UI framework for Vue apps.

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

Button Groups

The v-btn-toggle component is a wrapper for v-item-group that works with v-btn components.

We can use it to add a group of buttons that can be toggled.

For example, we can write:

<template>
  <v-container class="grey lighten-5">
    <v-row>
      <v-col>
        <v-card flat class="py-12">
          <v-card-text>
            <v-row align="center" justify="center">
              <v-btn-toggle v-model="toggle" rounded>
                <v-btn>
                  <v-icon>mdi-format-align-left</v-icon>
                </v-btn>
                <v-btn>
                  <v-icon>mdi-format-align-center</v-icon>
                </v-btn>
                <v-btn>
                  <v-icon>mdi-format-align-right</v-icon>
                </v-btn>
                <v-btn>
                  <v-icon>mdi-format-align-justify</v-icon>
                </v-btn>
              </v-btn-toggle>
            </v-row>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    toggle: undefined,
  }),
};
</script>

to add a button group with the v-btn-toggle component.

We just put the v-btn components inside the group.

The rounded prop makes the button group round.

Mandatory Button Groups

The mandatory prop makes the v-btn-toggle always has a value.

For example, we can write:

<template>
  <v-container class="grey lighten-5">
    <v-row>
      <v-col>
        <v-card flat class="py-12">
          <v-card-text>
            <v-row align="center" justify="center">

            <v-btn-toggle v-model="toggle" multiple>
                <v-btn>
                  <v-icon>mdi-format-align-left</v-icon>
                </v-btn>
                <v-btn>
                  <v-icon>mdi-format-align-center</v-icon>
                </v-btn>
                <v-btn>
                  <v-icon>mdi-format-align-right</v-icon>
                </v-btn>
                <v-btn>
                  <v-icon>mdi-format-align-justify</v-icon>
                </v-btn>
              </v-btn-toggle>

              <v-col cols="12" class="text-center">{{ toggle }}</v-col>
            </v-row>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    toggle: []
  }),
};
</script>

The multiple prop lets us make multiple selections.

When we click on a button, the index of it will be added to the state.

Buttons in a Toolbar

We can add buttons to the v-toolbar .

For example, we can write:

<template>
  <v-container class="grey lighten-5">
    <v-row>
      <v-col>
        <v-toolbar dense>
          <v-overflow-btn :items="dropdownFont" label="Select font" hide-details class="pa-0"></v-overflow-btn>
          <template v-if="$vuetify.breakpoint.mdAndUp">
            <v-divider vertical></v-divider>
            <v-overflow-btn
              :items="dropdownEdit"
              editable
              label="Select size"
              hide-details
              class="pa-0"
              overflow
            ></v-overflow-btn>
            <v-divider vertical></v-divider>
            <v-spacer></v-spacer>
            <v-btn-toggle v-model="toggleMultiple" color="primary" dense group multiple>
              <v-btn :value="1" text>
                <v-icon>mdi-format-bold</v-icon>
              </v-btn>
              <v-btn :value="2" text>
                <v-icon>mdi-format-italic</v-icon>
              </v-btn>
              <v-btn :value="3" text>
                <v-icon>mdi-format-underline</v-icon>
              </v-btn>
            </v-btn-toggle>
            <div class="mx-4"></div>
            <v-btn-toggle v-model="toggleExclusive" color="primary" dense group>
              <v-btn :value="1" text>
                <v-icon>mdi-format-align-left</v-icon>
              </v-btn>
              <v-btn :value="2" text>
                <v-icon>mdi-format-align-center</v-icon>
              </v-btn>
              <v-btn :value="3" text>
                <v-icon>mdi-format-align-right</v-icon>
              </v-btn>
            </v-btn-toggle>
          </template>
        </v-toolbar>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    dropdownFont: [
      { text: "Arial" },
      { text: "Calibri" },
      { text: "Courier" },
      { text: "Verdana" },
    ],
    dropdownEdit: [
      { text: "100%" },
      { text: "75%" },
      { text: "50%" },
      { text: "25%" },
      { text: "0%" },
    ],
    toggleExclusive: 2,
    toggleMultiple: [1, 2, 3],
  }),
};
</script>

We have the v-toolbar with the v-overflow-btn components to add the dropdowns.

And we add the v-divider to add the dividers to our toolbar.

v-btn-toggle lets us add the button toggles.

Also, we added the dense prop to make the toolbar smaller.

Conclusion

We can add button groups to toolbars and more with Vuetify.

Vuetify is a popular UI framework for Vue apps.

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

Order Last or First

We can set the order prop to last and first to set the columns to last and first.

For example, we can write:

<template>  
  <v-container class="grey lighten-5">  
    <v-row no-gutters>  
      <v-col order="last">  
        <v-card class="pa-2" outlined tile>First, but last</v-card>  
      </v-col>  
      <v-col>  
        <v-card class="pa-2" outlined tile>Second, but unordered</v-card>  
      </v-col>  
      <v-col order="first">  
        <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>

Offset

We can use the offset props to add spaces between columns.

For example, we can write:

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

We have the offset-md prop to set the number of columns between this and the div before it when the md breakpoint is hit.

Margin Utilities

We can add padding and margin to columns.

For example, we can write:

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

The pa-2 class adds padding around the classes.

ml-auto adds margin between the v-col components.

Nested Grid

We can create a grid that’s nested in a parent grid.

For instance, we can write:

<template>  
  <v-container class="grey lighten-5">  
    <v-row>  
      <v-col sm="9">  
        <v-card class="pa-2" outlined tile>Level 1</v-card>  
        <v-row no-gutters>  
          <v-col cols="8" sm="6">  
            <v-card class="pa-2" outlined style="background-color: lightgrey;" tile>Level 2</v-card>  
          </v-col>  
          <v-col cols="4" sm="6">  
            <v-card class="pa-2" outlined style="background-color: lightgrey;" tile>Level 3</v-card>  
          </v-col>  
        </v-row>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

And we have v-row s inside v-col s to nest them.

Spacers

The v-spacer component is useful when we fill available space or make space between 2 components.

For example, we can write:

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

to add the v-spacer component to space out the v-col s evenly.

Conclusion

We can order columns and space them out the way we like with various props.