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.

Query Indeterminate and Determinate

We can use the query state to control the truthiness of the indeterminate prop.

For example, we can write:

<template>
  <div class="text-center">
    <v-progress-linear v-model="value" :active="show" :indeterminate="query" :query="true"></v-progress-linear>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      value: 0,
      query: false,
      show: true,
      interval: 0,
    };
  },
`
  mounted() {
    this.queryAndIndeterminate();
  },
`
  beforeDestroy() {
    clearInterval(this.interval);
  },
`
  methods: {
    queryAndIndeterminate() {
      this.query = true;
      this.show = true;
      this.value = 0;
`
      setTimeout(() => {
        this.query = false;
`
        this.interval = setInterval(() => {
          if (this.value === 100) {
            clearInterval(this.interval);
            this.show = false;
            return setTimeout(this.queryAndIndeterminate, 2000);
          }
          this.value += 25;
        }, 1000);
      }, 2500);
    },
  },
};
</script>

We set the this.query state to false so the progress bar becomes one that doesn’t animate forever.

Instead, it animates the bar according to this.value which we set as the value of v-model .

Custom Colors

We can set the color and background-color props to set the foreground and background colors:

<template>
  <div class="text-center">
    <v-progress-linear background-color="pink lighten-3" color="pink lighten-1" value="15"></v-progress-linear>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {};
  },
};
</script>

Rounded Bar

We can add the rounded prop to make the progress bar rounded:

<template>
  <div class="text-center">
    <v-progress-linear rounded value="15"></v-progress-linear>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {};
  },
};
</script>

Streaming Bar

The stream prop makes the bar move like a stream.

For example, we can write:

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

We add the stream prop to make the non-filled part, which is a dotted line, move.

Striped Bar

We can add the striped prop to make the filled part displayed with stripes:

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

Reversed Bar

We can make the filled part display from right to left with the reverse prop:

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

Toolbar Loader

The absolute prop lets us display the v-progress-linear component on a toolbar.

For instance, we can write:

<template>
  <v-card class="mx-auto mt-6" width="344">
    <v-system-bar>
      <v-spacer></v-spacer>
      <v-icon>mdi-square</v-icon>
      <v-icon>mdi-circle</v-icon>
      <v-icon>mdi-triangle</v-icon>
    </v-system-bar>
    <v-toolbar>
      <v-btn icon>
        <v-icon>mdi-arrow-left</v-icon>
      </v-btn>
      <v-toolbar-title>App</v-toolbar-title>
      <v-progress-linear
        :active="loading"
        :indeterminate="loading"
        absolute
        bottom
        color="deep-purple accent-4"
      ></v-progress-linear>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </v-toolbar>
`
    <v-container style="height: 282px;">
      <v-row class="fill-height" align="center" justify="center">
        <v-scale-transition>
          <div v-if="!loading" class="text-center">
            <v-btn color="primary" @click="loading = true">Start loading</v-btn>
          </div>
        </v-scale-transition>
      </v-row>
    </v-container>
  </v-card>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    loading: false,
  }),
`
  watch: {
    loading(val) {
      if (!val) return;
`
      setTimeout(() => (this.loading = false), 5000);
    },
  },
};
</script>

We have the v-progress-linear component with the absolute and bottom props to make it display at the bottom of the toolbar.

The v-progress-linear component is in the v-toolbar so that we have it displayed this way.

And we have the loading state to determine when it’s loading or not.

Slot

We can add our own content to the default slot:

<template>
  <div>
    <v-progress-linear v-model="progress" color="blue-grey" height="25">
      <template v-slot="{ value }">
        <strong>{{ Math.ceil(value) }}%</strong>
      </template>
    </v-progress-linear>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    progress: 20,
  }),
};
</script>

The value is the value of the v-model .

Conclusion

We can customize a linear progress bar in various ways.

Vuetify is a popular UI framework for Vue apps.

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

Time Pickers

We can add a time picker with the v-time-picker component.

For example, we can use it by writing:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="time" color="green lighten-1"></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: undefined,  
  }),  
};  
</script>

We add the v-time-picker component to add the time picker.

The color prop sets the color of the heading.

v-model has the time value that’s picked.

Disabled

We can disable a date picker with the disabled prop:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="time" color="green lighten-1" disabled></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: undefined,  
  }),  
};  
</script>

Now we can’t pick a date.

Read-only

We can make the time picker be read-only with the readonly prop:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="time" color="green lighten-1" readonly></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: undefined,  
  }),  
};  
</script>

We won’t see any style differences from the regular time picker, but we can’t choose a time with it.

24h Format

The format prop lets us change the format of the time.

To change it to 24h format, we write:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="time" color="green lighten-1" format="24hr"></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: undefined,  
  }),  
};  
</script>

Allowed Times

The time that can be picked can be restricted with the allowed-hours and allowed-minutes props:

<template>  
  <v-row justify="space-around">  
    <v-time-picker  
      v-model="time"  
      :allowed-hours="allowedHours"  
      :allowed-minutes="allowedMinutes"  
      class="mt-4"  
      format="24hr"  
      scrollable  
      min="9:30"  
      max="22:15"  
    ></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: "11:15",  
  }),  
  methods: {  
    allowedHours: (v) => v % 2,  
    allowedMinutes: (v) => v >= 10 && v <= 50,  
  },  
};  
</script>

We have the allowed-hours prop set to the allowedHours function.

It lets us return the condition for the hours that users can pick.

We can have similar functions for minutes and the step.

The v parameter has the hours and minutes.

For example, we can write:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="timeStep" :allowed-minutes="allowedStep" class="mt-4" format="24hr"></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: "11:15",  
    timeStep: "10:10",  
  }),  
  methods: {  
    allowedStep: (m) => m % 10 === 0,  
  },  
};  
</script>

We have the allowedStep function, which we use as the value of the allowed-minutes prop.

m has the minutes.

Conclusion

We can add a time picker with various restrictions set on it.

Its color can also be changed.

Vuetify is a popular UI framework for Vue apps.

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

Date Pickers — Multiple

We can pick multiple dates if we add the multiple prop.

For example, we can write:

<template>
  <v-container>
    <v-row justify="center">
      <v-date-picker v-model="dates" multiple></v-date-picker>
    </v-row>
    <v-row justify="center">
      <p>{{dates}}</p>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    dates: ["2020-09-15", "2020-09-20"],
  }),
};
</script>

to show a date picker that lets us pick multiple dates.

The dates is an array of date strings.

Date Pickers — Range

We can add the range prop to set the range.

For example, we can write:

<template>
  <v-container>
    <v-row justify="center">
      <v-date-picker v-model="dates" range></v-date-picker>
    </v-row>
    <v-row justify="center">
      <p>{{dates}}</p>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    dates: ["2020-09-15"],
  }),
};
</script>

Now we can choose a range of dates.

Date Pickers — Birthday Picker

We can make a birthday picker by restructuring the date range and closing the date picker after selecting the day.

For example, we can write:

<template>
  <v-menu
    ref="menu"
    v-model="menu"
    :close-on-content-click="false"
    transition="scale-transition"
    offset-y
    min-width="290px"
  >
    <template v-slot:activator="{ on, attrs }">
      <v-text-field
        v-model="date"
        label="Birthday date"
        prepend-icon="event"
        readonly
        v-bind="attrs"
        v-on="on"
      ></v-text-field>
    </template>
    <v-date-picker
      ref="picker"
      v-model="date"
      :max="new Date().toISOString().substr(0, 10)"
      min="1950-01-01"
      @change="save"
    ></v-date-picker>
  </v-menu>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: null,
    menu: false,
  }),
  watch: {
    menu(val) {
      val && setTimeout(() => (this.$refs.picker.activePicker = "YEAR"));
    },
  },
  methods: {
    save(date) {
      this.$refs.menu.save(date);
    },
  },
};
</script>

We set the date picker to change the mode if we open the menu to 'YEAR' .

This way, we’ve to pick the year first and then pick the month and day.

Once the date changes, the save method is called to save the value to the v-model ‘s date, which is date .

Date Pickers Events

We can show events within the date picker.

For example, we can write:

<template>
  <v-row justify="space-between">
    <div>
      <div class="subheading">Defined by array</div>
      <v-date-picker v-model="date1" :events="arrayEvents" event-color="green lighten-1"></v-date-picker>
    </div>
    <div>
      <div class="subheading">Defined by function</div>
      <v-date-picker
        v-model="date2"
        :event-color="date => date[9] % 2 ? 'red' : 'yellow'"
        :events="functionEvents"
      ></v-date-picker>
    </div>
  </v-row>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    arrayEvents: null,
    date1: new Date().toISOString().substr(0, 10),
    date2: new Date().toISOString().substr(0, 10),
  }),

  mounted() {
    this.arrayEvents = [...Array(6)].map(() => {
      const day = Math.floor(Math.random() * 30);
      const d = new Date();
      d.setDate(day);
      return d.toISOString().substr(0, 10);
    });
  },

  methods: {
    functionEvents(date) {
      const [, , day] = date.split("-");
      if ([1, 2, 3].includes(parseInt(day, 10))) return true;
      if ([10, 11, 12].includes(parseInt(day, 10))) return ["red", "#00f"];
      return false;
    },
  },
};
</script>

In the first date picker, we set the events prop to the arrayEvents array.

It’s an array with some dates.

We can also set events to a function that returns a boolean.

We can return a function with a boolean or a color string for the dot.

Conclusion

We can add date pickers to display events and change the mode on the fly.

Vuetify is a popular UI framework for Vue apps.

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

Month Pickers — Allowed Months

We can change the allowed months with the date picker.

For example, we can write:

<template>
  <v-row justify="space-around">
    <v-date-picker
      v-model="date"
      :allowed-dates="allowedMonths"
      type="month"
      class="mt-4"
      min="2020-06"
      max="2020-10"
    ></v-date-picker>
  </v-row>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 10),
  }),
  methods: {
    allowedMonths: (val) => parseInt(val.split("-")[1], 10) % 2 === 0,
  },
};
</script>

We have the allowedMonths method to return the condition for the date to be allowed.

Also, we have the min and max props to set the date range.

Multiple Month Pickers

We can allow a month picker to let users select multiple months.

For example, we can write:

<template>
  <v-row justify="center">
    <v-date-picker v-model="months" type="month" multiple></v-date-picker>
  </v-row>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    months: ["2020-09", "2020-10"],
  }),
};
</script>

to let us pick multiple months.

The multiple prop allows for multiple selections.

v-model ‘s value is an array of date strings instead of a date string.

Month Pickers — Setting Picker Width

We can set the month picker’s width.

The width prop sets the width:

<template>
  <v-row justify="center">
    <v-date-picker v-model="date" type="month" width="290" class="mt-4"></v-date-picker>
  </v-row>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 7),
  }),
};
</script>

Also, we can set the full-width prop to make the month picker fill the screen:

<template>
  <v-row justify="center">
    <v-date-picker v-model="date" type="month" full-width class="mt-4"></v-date-picker>
  </v-row>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 7),
  }),
};
</script>

Month Pickers Internationalization

The locale prop lets us set the language of the month picker.

For example, we can write:

<template>
  <v-row justify="space-around">
    <v-date-picker v-model="date" type="month" locale="sv-se"></v-date-picker>
  </v-row>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 7),
  }),
};
</script>

We set the month picker to display in Swedish with the locale prop.

Month Picker Icons

The month picker icon lets us set the icons with various props.

For example, we can write:

<template>
  <v-row justify="center">
    <v-date-picker
      v-model="date"
      type="month"
      year-icon="mdi-calendar-blank"
      prev-icon="mdi-skip-previous"
      next-icon="mdi-skip-next"
    ></v-date-picker>
  </v-row>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 7),
  }),
};
</script>

We set the year-icon , prev-icon and next-icon props to set the year and navigation icons.

Conclusion

We can set the month picker component with various props to style them.

Vuetify is a popular UI framework for Vue apps.

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

Date Picker’s Elevation

We can set the date picker’s elevation with the flat and elevation props.

To use the flat prop, we can write:

<template>
  <v-row justify="space-around">
    <v-date-picker v-model="date" flat></v-date-picker>
  </v-row>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 10),
  }),
};
</script>

to make it flat.

And we can write:

<template>
  <v-row justify="space-around">
    <v-date-picker v-model="date" elevation="15"></v-date-picker>
  </v-row>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 10),
  }),
};
</script>

to add a shadow below the date picker.

Date Pickers — React to Displayed Month/Year Change

We can watch the v-model value with our own watcher.

For instance, we can write:

<template>
  <v-row>
    <v-col cols="12" sm="6" class="my-2 px-1">
      <v-date-picker ref="picker" v-model="date" :picker-date.sync="pickerDate" full-width></v-date-picker>
    </v-col>
    <v-col cols="12" sm="6" class="my-2 px-1">
      <div class="title">Month ({{ date || 'change month...' }})</div>
      <ul class="ma-4">
        <li v-for="note in notes" :key="note">{{ note }}</li>
      </ul>
    </v-col>
  </v-row>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 10),
    pickerDate: null,
    notes: [],
    allNotes: ["foo", "bar", "baz"],
  }),
  watch: {
    pickerDate(val) {
      this.notes = [
        this.allNotes[Math.floor(Math.random() * 3)],
        this.allNotes[Math.floor(Math.random() * 3)],
      ];
    },
  },
};
</script>

The picker-date prop has the picked month value.

Then we can watch the pickerDate value and do what we want as the month value changes.

Date Pickers Internationalization

The Vuetify date picker supports internationalization.

For example, we can write:

<template>
  <v-row justify="space-around">
    <v-date-picker v-model="date" :first-day-of-week="0" locale="zh-cn"></v-date-picker>
  </v-row>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 10),
  }),
};
</script>

We have the locales with the locale of the date picker.

The first-day-of-week prop sets the first day of the week to the day we want.

0 is Sunday and it goes up to 6 for Saturday.

Date Picker Icons

We can set the date picker icon to what we want.

For example, we can write:

<template>
  <v-row justify="space-around">
    <v-date-picker
      v-model="date"
      year-icon="mdi-calendar-blank"
      prev-icon="mdi-skip-previous"
      next-icon="mdi-skip-next"
    ></v-date-picker>
  </v-row>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 10),
  }),
};
</script>

We change the year-icon , prev-icon , and next-icon let us change the year and navigation icons respectively.

Read Only Date Pickers

We can make the date picker read-only with the readonly prop:

<template>
  <v-row justify="center">
    <v-date-picker v-model="date" readonly></v-date-picker>
  </v-row>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 10),
  }),
};
</script>

Now we can’t pick anything from the date picker.

Conclusion

We can customize date pickers the way we want with Vuetify.