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.

Snackbar Timeout

We can add a timeout prop to our snackbar to change when it closes automatically:

<template>
  <div class="text-center">
    <v-btn dark color="red darken-2" @click="snackbar = true">Open Snackbar</v-btn>

    <v-snackbar v-model="snackbar" :multi-line="multiLine" :timeout="3000">
      {{ text }}
      <template v-slot:action="{ attrs }">
        <v-btn color="red" text v-bind="attrs" @click="snackbar = false">Close</v-btn>
      </template>
    </v-snackbar>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    multiLine: true,
    snackbar: false,
    text:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a neque arcu. Phasellus ac tincidunt elit.",
  }),
};
</script>

The timeout is in milliseconds.

Vertical Snackbar

We can make a snackbar vertical with the vertical property.

For example, we can write:

<template>
  <div class="text-center">
    <v-btn dark color="red darken-2" @click="snackbar = true">Open Snackbar</v-btn>

    <v-snackbar v-model="snackbar" :multi-line="multiLine" vertical>
      {{ text }}
      <template v-slot:action="{ attrs }">
        <v-btn color="red" text v-bind="attrs" @click="snackbar = false">Close</v-btn>
      </template>
    </v-snackbar>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    multiLine: true,
    snackbar: false,
    text:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a neque arcu. Phasellus ac tincidunt elit.",
  }),
};
</script>

Now the Close button will be displayed below the text.

Variants

Snackbars have different variants. We can add the text , shaped , or outlined props to change the snackbar variant.

For example, we can write:

<template>
  <div class="text-center">
    <v-btn dark color="red darken-2" @click="snackbar = true">Open Snackbar</v-btn>

    <v-snackbar v-model="snackbar" :multi-line="multiLine" rounded="pill">
      {{ text }}
      <template v-slot:action="{ attrs }">
        <v-btn color="red" text v-bind="attrs" @click="snackbar = false">Close</v-btn>
      </template>
    </v-snackbar>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    multiLine: true,
    snackbar: false,
    text:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a neque arcu. Phasellus ac tincidunt elit.",
  }),
};
</script>

We added the rounded prop with value pill to make the corners rounded.

Sparklines

A sparkline is a small graph that we can display.

We can add a sparkline with the v-sparkline component:

<template>
  <v-container fluid>
    <v-sparkline
      :fill="fill"
      :gradient="gradient"
      :line-width="width"
      :padding="padding"
      :smooth="radius || false"
      :value="value"
      auto-draw
    ></v-sparkline>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    gradient: ["red", "orange", "yellow"],
    padding: 8,
    radius: 10,
    value: [0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0],
    width: 2,
  }),
};
</script>

We have the gradient prop with the color of the gradient of the graph.

The value prop has the values for the y-coordinates of the line.

line-width is the width of the line.

padding is the padding of the graph.

smooth is the border radius of the line.

All the lengths are in pixels.

Conclusion

We can add a sparkline to display a graph.

Snaackbars have various options we can change.

Vuetify is a popular UI framework for Vue apps.

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

Sheets

We can use the v-sheets component to add containers for content in our app.

For example, we can write:

<template>
  <v-container>
    <v-row justify="space-around">
      <v-col v-for="elevation in elevations" :key="elevation" cols="12" md="4">
        <v-sheet class="pa-12" color="grey lighten-3">
          <v-sheet :elevation="elevation" class="mx-auto" height="100" width="100"></v-sheet>
        </v-sheet>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    elevations: [12, 24],
  }),
};
</script>

to add our sheets with various levels of shadows.

Tile

The tile property makes the sheet rectangular:

<template>
  <v-container>
    <v-row justify="space-around">
      <v-col>
        <v-sheet class="pa-12" color="grey lighten-3">
          <v-sheet tile class="mx-auto" height="100" width="100"></v-sheet>
        </v-sheet>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Colors and Sizes

We can change the color and size of the sheet.

For example, we can write:

<template>
  <v-container>
    <v-row class="flex-child">
      <v-col class="d-flex" cols="12">
        <v-sheet class="d-flex" color="grey lighten-3" height="100">
          <sheet-footer>lorem ipsum</sheet-footer>
        </v-sheet>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

to add a sheet with a gray background and height 100px.

Skeleton Loaders

The v-skeleton-loader component lets us provide an indication that something is loading.

For example, we can use it by writing:

<template>
  <v-container class="grey">
    <v-row justify="center">
      <v-col class="mb-12" cols="12" md="4">
        <v-skeleton-loader
          :loading="loading"
          :transition="transition"
          height="94"
          type="list-item-two-line"
        >
          <v-card>
            <v-card-title>Title</v-card-title>
            <v-card-text>Card Text</v-card-text>
          </v-card>
        </v-skeleton-loader>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    loading: true,
    transition: "scale-transition",
  }),
};
</script>

We have the v-skeleton-loader component to add the skeleton loader.

The loading prop can be set to loading state.

And transition is the name of the transition we want to show.

Snackbars

A snackbar lets us show a message to the user.

Snackbars can be positioned and the delay can be removed.

To add it, we add the v-snackbar component:

<template>
  <div class="text-center">
    <v-btn dark color="red darken-2" @click="snackbar = true">Open Snackbar</v-btn>

    <v-snackbar v-model="snackbar" :multi-line="multiLine">
      {{ text }}
      <template v-slot:action="{ attrs }">
        <v-btn color="red" text v-bind="attrs" @click="snackbar = false">Close</v-btn>
      </template>
    </v-snackbar>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    multiLine: true,
    snackbar: false,
    text:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a neque arcu. Phasellus ac tincidunt elit. I",
  }),
};
</script>

We have the v-snackbar component which is triggered by the v-btn .

The snackbar state controls the open state of the snackbar.

In the v-snackbar , we pass in the attrs to the props of the v-btn so that it can be used as a snackbar button.

We set snackbar to false when we click it so that it can be closed.

The multi-line prop makes it display text in multiple lines.

Conclusion

We can use sheets as container for content.

Snackbars let us display messages.

Skeleton loaders are useful for displaying a loading indicator.

Vuetify is a popular UI framework for Vue apps.

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

Time Picker Width

We can set the width of a time picker with the width prop:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="time" type="month" width="290" class="ml-4"></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: "11:15",  
  }),  
};  
</script>

The width is in pixels.

Also, we can add the full-width prop to make the time picker full width:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="time" :landscape="$vuetify.breakpoint.mdAndUp" full-width type="month"></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: "11:15",  
  }),  
};  
</script>

We can set it to landscape mode at the breakpoint we want so that the header will be displayed as the sidebar.

Time Picker’s Elevation

A time picker can have a shadow below it.

We can add the flat prop to remove the shadow:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="time" flat></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: "11:15",  
  }),  
};  
</script>

Or we can add the elevation prop to add our shadow:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="time" elevation="15"></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: "11:15",  
  }),  
};  
</script>

The value is between 0 to 24.

AM/PM Switch in Title

We can add the ampm-in-title prop to add the AM and PM text into the header.

For example, we can write:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="time" ampm-in-title></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: "11:15",  
  }),  
};  
</script>

This way, we can choose an AM or PM time.

No Title

We can remove the title bar with the no-title prop:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="time" no-title></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: "11:15",  
  }),  
};  
</script>

Time Picker With Seconds

A time picker can let us choose the seconds.

To do that, we add the use-seconds prop:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="picker" use-seconds></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: "11:15",  
  }),  
};  
</script>

Now we can pick the seconds.

Scrollable Time Picker

We can make the time values scrollable with the scrollable prop:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="picker" scrollable></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: "11:15",  
  }),  
};  
</script>

Now we pick our time values by scrolling with the scroll wheel.

Range

The time value range can be restricted with the min and max props:

<template>  
  <v-row justify="space-around" align="center">  
    <v-col style="width: 290px; flex: 0 1 auto;">  
      <h2>Start:</h2>  
      <v-time-picker v-model="start" :max="end"></v-time-picker>  
    </v-col>  
    <v-col style="width: 290px; flex: 0 1 auto;">  
      <h2>End:</h2>  
      <v-time-picker v-model="end" :min="start"></v-time-picker>  
    </v-col>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    start: null,  
    end: null,  
  }),  
};  
</script>

We have the max prop to set the maximum time we can choose.

And the min prop sets a minimum time restriction.

Conclusion

We can customize time pickers in many ways.

Vuetify is a popular UI framework for Vue apps.

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

Ratings

The v-rating component lets us add a star rating input to our app.

To use it, we can write:

<template>
  <div>
    <v-rating v-model="rating" background-color="purple lighten-3" color="purple" small></v-rating>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    rating: 4,
  }),
};
</script>

The v-model has the rating value.

background-color has the fill color.

color has the outline color.

small makes the stars extra small.

We can also set the size to large , x-large , and the size prop.

The size prop lets us set the stars to any size value in pixels.

Custom Length

We can change the number of stars to display.

To do that, we use the length prop:

<template>
  <div>
    <v-rating v-model="rating" background-color="purple lighten-3" color="purple" :length="10"></v-rating>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    rating: 4,
  }),
};
</script>

We set length to 10, so we see 10 stars displayed.

Incremented

We can add full icons, half icons, or empty icons.

For example, we can write:

<template>
  <div>
    <v-rating v-model="rating" background-color="purple lighten-3" color="purple" half-increments></v-rating>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    rating: 4.5,
  }),
};
</script>

The half-increments prop lets us add half stars.

So when we set rating to 4.5, we’ll see 4.5 stars.

Slots

We can populate the star slots to customize the stars as we wish.

For example, we can write:

<template>
  <div class="text-center">
    <v-rating v-model="rating">
      <template v-slot:item="props">
        <v-icon
          :color="props.isFilled ? genColor(props.index) : 'grey lighten-1'"
          large
          @click="props.click"
        >{{ props.isFilled ? 'mdi-star-circle' : 'mdi-circle-outline' }}</v-icon>
      </template>
    </v-rating>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    colors: ["green", "purple", "orange", "indigo", "red"],
    rating: 4.5,
  }),
  methods: {
    genColor(i) {
      return this.colors[i];
    },
  },
};
</script>

We have the isFilled property from the slot props to determine whether the star should be filled or not.

The click method can be passed into the @click directive as the click handler.

This way, when we click it, we’ll see the value displayed with the stars.

We have different colors from different stars by returning the color name from the genColor method.

Card Ratings

We can put a v-rating component on a card.

For example, we can write:

<template>
  <v-card class="mx-auto elevation-20" color="purple" dark style="max-width: 400px;">
    <v-row justify="space-between">
      <v-col cols="8">
        <v-card-title>
          <div>
            <div class="headline">Song</div>
          </div>
        </v-card-title>
      </v-col>
      <v-col cols="4">
        <v-img
          class="shrink ma-2"
          contain
          height="125px"
          src="https://randomuser.me/api/portraits/women/68.jpg"
          style="flex-basis: 125px"
        ></v-img>
      </v-col>
    </v-row>
    <v-divider dark></v-divider>
    <v-card-actions class="pa-4">
      Rate this album
      <v-spacer></v-spacer>
      <span class="grey--text text--lighten-2 caption mr-2">({{ rating }})</span>
      <v-rating
        v-model="rating"
        background-color="white"
        color="yellow accent-4"
        dense
        half-increments
        hover
        size="18"
      ></v-rating>
    </v-card-actions>
  </v-card>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    rating: 4.5,
  }),
  methods: {
    genColor(i) {
      return this.colors[i];
    },
  },
};
</script>

We put the v-rating component in the v-card-actions to make it show at the bottom of the card.

Conclusion

We can add the v-rating component to let us add a star rating input to our app.

Vuetify is a popular UI framework for Vue apps.

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

Progress Circular

We can add a circular progress display with the v-progress-circular component.

For example, we can write:

<template>
  <div class="text-center">
    <v-progress-circular indeterminate color="primary"></v-progress-circular>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

The indeterminate prop makes it display forever.

And the color prop sets the color.

Size and Width

The size and width props let us change the size and width of the circular progress display:

<template>
  <div class="text-center">
    <v-progress-circular indeterminate color="red" :width="3"></v-progress-circular>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

The width changes the width.

The size changes the radius in pixels of the circular progress display:

<template>
  <div class="text-center">
    <v-progress-circular indeterminate color="red" :size="50"></v-progress-circular>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Rotate

The rotate prop lets us customize the v-progress-circular component’s origin.

For instance, we can write:

<template>
  <div class="text-center">
    <v-progress-circular
      :rotate="360"
      :size="100"
      :width="15"
      :value="value"
      color="teal"
    >{{ value }}</v-progress-circular>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      interval: {},
      value: 0,
    };
  },
  beforeDestroy() {
    clearInterval(this.interval);
  },
  mounted() {
    this.interval = setInterval(() => {
      if (this.value === 100) {
        return (this.value = 0);
      }
      this.value += 10;
    }, 1000);
  },
};
</script>

to display the value inside the circle and also set the progress bar’s fill color according to value .

Progress Linear

In addition to a circular progress display, Vuetify also comes with the v-progress-linear component to display progress in a line.

For example, we can add one with:

<template>
  <div class="text-center">
    <v-progress-linear v-model="valueDeterminate" color="deep-purple accent-4"></v-progress-linear>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      valueDeterminate: 50,
    };
  },
};
</script>

The v-model sets the progress value.

color has the color of the bar.

Indeterminate Bar

We can add the indeterminate prop to make it animate forever:

<template>
  <div class="text-center">
    <v-progress-linear indeterminate color="yellow darken-2"></v-progress-linear>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {};
  },
};
</script>

Buffer

We can add a buffer state to represent 2 values simultaneously.

For example, we can write:

<template>
  <div class="text-center">
    <v-progress-linear v-model="value" :buffer-value="bufferValue"></v-progress-linear>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      value: 10,
      bufferValue: 20,
      interval: 0,
    };
  },

  watch: {
    value(val) {
      if (val < 100) return;

      this.value = 0;
      this.bufferValue = 10;
      this.startBuffer();
    },
  },

  mounted() {
    this.startBuffer();
  },

  beforeDestroy() {
    clearInterval(this.interval);
  },

  methods: {
    startBuffer() {
      clearInterval(this.interval);

      this.interval = setInterval(() => {
        this.value += Math.random() * (15 - 5) + 5;
        this.bufferValue += Math.random() * (15 - 5) + 6;
      }, 2000);
    },
  },
};
</script>

We have the bufferValue which is higher than the value value.

v-model has the progress value and buffer-value has the 2nd value, which is bigger than the v-model ‘s value.

Conclusion

We can add a circular or linear progress display with Vuetify’s components.