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.

Text Field

We can add text fields to accept user input.

For example, we can write:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-text-field label="Regular" single-line></v-text-field>  
      </v-col>  
      <v-col col="12">  
        <v-text-field label="Solo" single-line solo></v-text-field>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

We have the single-line prop to make the text field display as a single line.

The solo prop makes the input display as the box.

There’s also the outlined prop to display an input with an outline.

Shaped Text Input

The shaped text fields are rounded if the outlined prop is applied.

For example, we can write:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-text-field v-model="first" label="First Name" outlined shaped></v-text-field>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    first: "",  
  }),  
};  
</script>

The outlined and shaped props together will make the text field displayed with the top 2 corners rounded.

Disabled and Readonly Text Fields

Text fields can also be disabled and readonly .

For example, we can write:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-text-field v-model="first" label="First Name" disabled></v-text-field>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    first: "",  
  }),  
};  
</script>

or:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-text-field v-model="first" label="First Name" readonly></v-text-field>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    first: "",  
  }),  
};  
</script>

Both props make the input inactive.

But readonly won’t change the styles.

Dense

The dense prop makes the text input shorter than the default size.

So we can write:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-text-field dense label="Regular"></v-text-field>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    first: "",  
  }),  
};  
</script>

Icons

We can add icons with the prepend-icon , append-icon , and append-outer-icon props.

For instance, we can write:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-text-field label="Prepend" prepend-icon="mdi-map-marker"></v-text-field>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

or:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-text-field label="Append" append-icon="mdi-map-marker"></v-text-field>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

or:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-text-field label="Append Outer" append-outer-icon="mdi-map-marker"></v-text-field>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

We set the props so that we can add the icons.

prepend-icon and append-icon adds the icon inside the line.

And append-outer-icon adds the icon outside the line.

Conclusion

We can add text fields with icons and make them read only.

Vuetify is a popular UI framework for Vue apps.

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

Text Areas

We can add text areas to collect large amounts of text data.

To add it, we can use the v-textarea component.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-textarea class="mx-2" label="prepend-icon" rows="1" prepend-icon="mdi-comment"></v-textarea>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We add the prepend-icon prop to add an icon to the left of the text area.

rows is the number of rows to display.

To add an icon to the right, we use the append-icon prop.

There’s also the prepend-inner-icon to add the icon within the line of the text area.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-textarea
          class="mx-2"
          label="prepend-inner-icon"
          rows="1"
          prepend-inner-icon="mdi-comment"
        ></v-textarea>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Auto Grow

We can use the auto-grow prop to create a text area that increases in size with the text.

For instance, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-textarea
          name="input-7-1"
          filled
          label="Label"
          auto-grow
          value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus massa sapien, rutrum vitae luctus sit amet."
        ></v-textarea>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We add the auto-grow prop to make the text area always show all the text without scrolling.

Background Color

The background-color and color props can be used to change the background color and the text color respectively.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-textarea background-color="light-blue" color="black" label="Label"></v-textarea>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

to set the colors.

Browser Autocomplete

We can set the autocomplete prop to enable the browser to predict user input:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-textarea autocomplete="email" label="Email"></v-textarea>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Clearable Text Area

The clearable prop makes the text area clearable.

The icon for clearing the text can be changed with the clearable-icon prop.

So we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-textarea clearable clear-icon="mdi-cancel" label="Text" value="Clearable text."></v-textarea>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We clear the text area by clicking on the clear-icon .

Counter

The counter prop shows the user the character limit for the v-textarea :

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-textarea counter label="Text" :rules="rules" :value="value"></v-textarea>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    rules: [(v) => v.length <= 25 || "Max 25 characters"],
    value: "foo bar",
  }),
};
</script>

The counter prop lets us show the character count.

Conclusion

We can add text areas with various things to display 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.

Disabled Switches

We can disable switches with the disabled prop:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-switch value input-value="true" disabled></v-switch>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

This way, it’s not active.

Loading Switch

A switch can show a loading state.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-switch loading="warning" value input-value="true"></v-switch>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

The loading prop with the style name shows the loading state with the given style.

Switches Colors

We can change the switch color with the color prop:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-switch v-model="ex" label="red" color="red" value="red" hide-details></v-switch>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    ex: false,
  }),
};
</script>

Flat Switches

The flat prop makes a switch flat:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-switch v-model="sw" flat :label="`Switch: ${sw.toString()}`"></v-switch>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    sw: false,
  }),
};
</script>

Inset Switches

A switch can be displayed in inset mode with the inset prop:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-switch v-model="sw" inset :label="`Switch: ${sw.toString()}`"></v-switch>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    sw: false,
  }),
};
</script>

Sliders

A slider is used to let users select a number from a range.

We add one with the v-slider component:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-slider v-model="slider" class="align-center" :max="max" :min="min" hide-details>
          <template v-slot:append>
            <v-text-field
              v-model="slider"
              class="mt-0 pt-0"
              hide-details
              single-line
              type="number"
              style="width: 60px"
            ></v-text-field>
          </template>
        </v-slider>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    slider: 0,
    max: 100,
    min: 0,
  }),
};
</script>

We populate the append slot to show some to the right of the slider.

A v-text-field is shown to display the v-model value.

The max and min props are the max and min values of the slider respectively.

Also, we can prepend an item to the slider by populating the prepend slot:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-slider v-model="slider" class="align-center" :max="max" :min="min" hide-details>
          <template v-slot:prepend>
            <v-text-field
              v-model="slider"
              class="mt-0 pt-0"
              hide-details
              single-line
              type="number"
              style="width: 60px"
            ></v-text-field>
          </template>
        </v-slider>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    slider: 0,
    max: 100,
    min: 0,
  }),
};
</script>

Now we have the number shown on the left.

Conclusion

We can add switches and number sliders 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.

Inverse Slider Label

We can add the inverse-label prop to display labels at the end of it:

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

Custom Range slider

The tick-labels prop lets us add tick labels to the slider.

For instance, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-range-slider
          :tick-labels="seasons"
          :value="[0, 1]"
          min="0"
          max="3"
          ticks="always"
          tick-size="4"
        >
          <template v-slot:thumb-label="props">
            <v-icon dark>{{ season(props.value) }}</v-icon>
          </template>
        </v-range-slider>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    seasons: ["Winter", "Spring", "Summer", "Fall"],
    value: undefined,
    icons: ["mdi-snowflake", "mdi-leaf", "mdi-fire", "mdi-water"],
  }),
  methods: {
    season(val) {
      return this.icons[val];
    },
  },
};
</script>

We have the tick-labels prop lets us set the labels for the range slider.

Also, we have the ticks and ticks-size prop to show the number of ticks we want.

ticks set to always means that the ticks will be displayed.

Custom Color

We can change the color of the track and thumb with the track-color and thumb-color respectively.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-slider v-model="ex1.val" :label="ex1.label" :track-color="ex1.color"></v-slider>

        <v-slider
          v-model="ex2.val"
          :label="ex2.label"
          :thumb-color="ex2.color"
          thumb-label="always"
        ></v-slider>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    ex1: { label: "track-color", val: 75, color: "green" },
    ex2: { label: "thumb-color", val: 50, color: "red" },
  }),
};
</script>

The track color is the color to the right of the dot.

Thumb color is the color of the dot.

Range

We can add a range slid with the v-range-slider component.

The range slider has 2 dots to set the min and max values.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-range-slider v-model="value"></v-range-slider>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    value: [30, 60],
  }),
};
</script>

We have the value array to use as the value for v-model .

The first value is the min value and the 2nd is the max.

Validation

We can validate slider values with the rules prop.

For instance, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-slider
          v-model="value"
          :rules="rules"
          label="How many?"
          step="10"
          thumb-label="always"
          ticks
        ></v-slider>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    value: 30,
    rules: [(v) => v <= 50 || "Can't have more than 50"],
  }),
};
</script>

to add validation rules for the slider.

The rules is an array of functions with the validation rules.

v is the value of the slider.

And if the value isn’t valid, then an error message is returned.

Conclusion

We can add validation rules to sliders 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.

Grids

We can layout our components in a grid.

For example, we can write:

<template>
  <v-container class="grey lighten-5">
    <v-row v-for="n in 2" :key="n" :class="n === 1 ? 'mb-6' : ''" no-gutters>
      <v-col v-for="k in n + 1" :key="k">
        <v-card class="pa-2" outlined tile>{{ k }} of {{ n + 1 }}</v-card>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We add the v-row and v-col components to add rows and columns respectively.

We can place anything inside the columns.

Equal Width Columns

Columns can be made to have equal widths.

For example, we can write:

<template>
  <v-container class="grey lighten-5">
    <v-row no-gutters>
      <template v-for="n in 6">
        <v-col :key="n">
          <v-card class="pa-2" outlined tile>Column</v-card>
        </v-col>
        <v-responsive v-if="n === 3" :key="`width-${n}`" width="100%"></v-responsive>
      </template>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We add the v-col components to add the columns.

And we add the v-responsive component to split the columns into rows according to the v-if check.

We have n === 3 as the value of v-if , so we display v-responsive after every 3 columns to split separate every 3 columns into their own row.

One Column Width

We can define the width of only one column and have its siblings automatically resize around it:

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

We set the first column to take up 6 columns with the cols prop.

Variable Content Width

The content width of columns can be variable.

For example, we can write:

<template>
  <v-container class="grey lighten-5">
    <v-row class="mb-6" justify="center" no-gutters>
      <v-col lg="2">
        <v-card class="pa-2" outlined tile>1 of 3</v-card>
      </v-col>
      <v-col md="auto">
        <v-card class="pa-2" outlined tile>Variable width content</v-card>
      </v-col>
      <v-col lg="2">
        <v-card class="pa-2" outlined tile>3 of 3</v-card>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We set the breakpoints with the lg and md props.

The widths to the given number of columns when those breakpoints are met.

Conclusion

We can add rows and columns to create our layouts with Vuetify.

The widths can be set our way.