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.

Month Pickers Read Only

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

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

Month Pickers Current Month Indicator

The current month indicator can be changed with the show-current prop:

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

The show-current prop set to false makes the selected month lighter.

We can also set it to a month string:

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

and the selected month will have a border around it.

Date Pickers in Dialog and Menu

We can put a date picker in a dialog box.

For example, we can write:

<template>
  <v-row justify="center">
    <v-col cols="12" sm="6" md="4">
      <v-menu
        ref="menu"
        v-model="menu"
        :close-on-content-click="false"
        :return-value.sync="date"
        transition="scale-transition"
        offset-y
        min-width="290px"
      >
        <template v-slot:activator="{ on, attrs }">
          <v-text-field
            v-model="date"
            label="Picker in menu"
            prepend-icon="event"
            readonly
            v-bind="attrs"
            v-on="on"
          ></v-text-field>
        </template>
        <v-date-picker v-model="date" no-title scrollable>
          <v-spacer></v-spacer>
          <v-btn text color="primary" @click="menu = false">Cancel</v-btn>
          <v-btn text color="primary" @click="$refs.menu.save(date)">OK</v-btn>
        </v-date-picker>
      </v-menu>
    </v-col>
  </v-row>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 10),
    menu: false,
  }),
};
</script>

We put our v-date-picker in a v-menu so that we can show the date picker when we click on the menu icon.

We put the v-text-field in the activator slot so that we can use the on object to listen to date picker events.

And we use the attrs object to set the props for the v-text-field .

This way, when we pick a date from the date picker, its value will be shown in the text field.

prepend-icon shows the icon.

Date Pickers — Formatting Date

We can format dates from the date picker.

For example, we can write:

<template>
  <v-row justify="center">
    <v-col cols="12" sm="6" md="4">
      <v-menu
        ref="menu"
        v-model="menu"
        :close-on-content-click="false"
        :return-value.sync="date"
        transition="scale-transition"
        offset-y
        min-width="290px"
      >
        <template v-slot:activator="{ on, attrs }">
          <v-text-field
            v-model="computedDateFormatted"
            label="Picker in menu"
            prepend-icon="event"
            readonly
            v-bind="attrs"
            v-on="on"
          ></v-text-field>
        </template>
        <v-date-picker v-model="date" no-title scrollable>
          <v-spacer></v-spacer>
          <v-btn text color="primary" @click="menu = false">Cancel</v-btn>
          <v-btn text color="primary" @click="$refs.menu.save(date)">OK</v-btn>
        </v-date-picker>
      </v-menu>
    </v-col>
  </v-row>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 10),
    menu: false,
  }),
  computed: {
    computedDateFormatted() {
      return this.formatDate(this.date);
    },
  },
  methods: {
    formatDate(date) {
      if (!date) return null;

      const [year, month, day] = date.split("-");
      return `${month}/${day}/${year}`;
    },
  },
};
</script>

We set the v-model of the v-text-field to the computedDateFormatted computed property.

It formats the date string with the formatDate method, which splits the original date string, and combines the parts with slashes.

Then we should see the formatted date with the text field.

Conclusion

We can set the month picker to be read-only and format the date 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.

Date Picker’s Current Date Indicator

We can change the current date indicator with the show-current prop.

For example, we can write:

<template>
  <v-row justify="center">
    <v-date-picker v-model="date" :show-current="false"></v-date-picker>
  </v-row>
</template>

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

We make the circle around the current date lighter with it.

It can also be set to a date string:

<template>
  <v-row justify="center">
    <v-date-picker v-model="date" show-current="2020-07-13"></v-date-picker>
  </v-row>
</template>

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

Then we’ll see the given date have a circle around it.

Date Pickers — DOM Events for Year, Month, and Date Buttons

Date pickers emit various events for year, month, and date buttons.

We can listen to events like @click, @dblclick, @mouseenter, and more events on the date picker.

For example, we can write:

<template>
  <v-row>
    <v-col class="my-2 px-1" cols="12" sm="6">
      <v-date-picker
        v-model="date"
        @contextmenu:year="contextMenu"
        @dblclick:date="dblClick"
        @mouseenter:month="mouseEnter"
        @mouseleave:month="mouseLeave"
      ></v-date-picker>
    </v-col>

    <v-col class="my-2 px-1" cols="12" sm="6">
      <div class="title mb-2">{{ mouseMonth }}</div>
    </v-col>
  </v-row>
</template>

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

  methods: {
    contextMenu(year, event) {
      event.preventDefault();
      alert(`You have activated context menu for year ${year}`);
    },
    dblClick(date) {
      alert(`You have just double clicked the following date: ${date}`);
    },
    mouseEnter(month) {
      this.mouseMonth = month;
    },
    mouseLeave() {
      this.mouseMonth = null;
    },
  },
};
</script>

We listen to the mouseenter and mouseleave events on the month picker and get its value with the handler.

The month modifier indicates that we listen to month picker actions.

The contextmenu has the year modifier to listen to the year.

Month Pickers

We can create a month picker by setting v-date-picker ‘s type prop to month .

For example, we can write:

<template>
  <v-row>
    <v-col class="my-2 px-1" cols="12" sm="6">
      <v-date-picker v-model="date" type="month"></v-date-picker>
    </v-col>
  </v-row>
</template>

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

The landscape prop makes the date picker display in landscape mode.

For example, we can write:

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

Month Pickers Colors

We can change the color of the month picker with the color and header-color props.

For example, we can write:

<template>
  <v-row justify="space-around">
    <v-date-picker v-model="date" type="month" color="green lighten-1"></v-date-picker>
  </v-row>
</template>

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

The header-color sets the color of the date picker header.

Conclusion

We can change the date picker with various styles.

The v-date-picker component can also be a month picker.

Vuetify is a popular UI framework for Vue apps.

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

Color Picker Inputs

We can hide the color picker inputs with the hide-input prop.

For example, we can write:

<template>
  <v-row justify="space-around">
    <v-color-picker class="ma-2" hide-inputs></v-color-picker>
  </v-row>
</template>

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

Now we won’t see the numbers displayed.

Hide Canvas

The hide-canvas prop hides the canvas:

<template>
  <v-row justify="space-around">
    <v-color-picker class="ma-2" hide-canvas></v-color-picker>
  </v-row>
</template>

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

The canvas height can be set with the canvas-height prop:

<template>
  <v-row justify="space-around">
    <v-color-picker class="ma-2" canvas-height="300"></v-color-picker>
  </v-row>
</template>

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

The dot-size prop changes the dot size on the canvas:

<template>
  <v-row justify="space-around">
    <v-color-picker class="ma-2" dot-size="30"></v-color-picker>
  </v-row>
</template>

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

Date/Month Pickers

We can add the date or month picker with the v-date-picker component.

For example, we can write:

<template>
  <v-row justify="space-around">
    <v-date-picker v-model="picker" color="green lighten-1"></v-date-picker>
  </v-row>
</template>

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

We set the color of the top bar with the color prop.

And we set the v-model value to a date string.

Date Pickers — Allowed Dates

We can set the min and max dates that are allowed to be chosen.

For example, we can write:

<template>
  <v-row justify="space-around">
    <v-date-picker
      v-model="picker"
      color="green lighten-1"
      :allowed-dates="allowedDates"
      class="mt-4"
      min="2020-06-15"
      max="2021-03-20"
    ></v-date-picker>
  </v-row>
</template>

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

  methods: {
    allowedDates: (val) => parseInt(val.split("-")[2], 10) % 2 === 0,
  },
};
</script>

to use the allowed-dates prop to set it to a method for validating dates.

val is the date value in string form.

This way, we can only choose days that are even.

min and max sets the min and max dates that are allowed to be chosen.

Date Pickers — Setting Picker Width

We can set the date picker width with the width prop.

For example, we can write:

<template>
  <v-row justify="space-around">
    <v-date-picker v-model="picker" width="290" class="mt-4"></v-date-picker>
  </v-row>
</template>

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

to set the width with the width prop.

Also, we can use the full-width prop to set the width of the date picker:

<template>
  <v-row justify="space-around">
    <v-date-picker v-model="date" full-width :landscape="$vuetify.breakpoint.smAndUp" class="mt-4"></v-date-picker>
  </v-row>
</template>

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

The full-width prop makes the date picker fill the width of the screen.

Conclusion

We can add color pickers and date pickers 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.

Parallax Height

We can set the height of the parallax scrolling with the height prop.

For example, we can write:

<template>
  <v-parallax dark src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg" height="300">
    <v-row align="center" justify="center">
      <v-col class="text-center" cols="12">
        <h1 class="display-1 font-weight-thin mb-4">Hello world</h1>
        <h4 class="subheading">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
      </v-col>
    </v-row>
  </v-parallax>
</template>

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

Color Pickers

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

The v-color-picker component uses the v-model props to control the color displayed.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col cols="12" md="4">
        <v-btn v-for="t in types" :key="t" class="my-4" block @click="type = t">{{ t }}</v-btn>
      </v-col>
      <v-col class="d-flex justify-center">
        <v-color-picker v-model="color"></v-color-picker>
      </v-col>
      <v-col cols="12" md="4">
        <v-sheet dark class="pa-4">
          <pre>{{ showColor }}</pre>
        </v-sheet>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    types: ["hex", "hexa", "rgba", "hsla", "hsva"],
    type: "hex",
    hex: "#FF00FF",
    hexa: "#FF00FFFF",
    rgba: { r: 255, g: 0, b: 255, a: 1 },
    hsla: { h: 300, s: 1, l: 0.5, a: 1 },
    hsva: { h: 300, s: 1, v: 1, a: 1 },
  }),
  computed: {
    color: {
      get() {
        return this[this.type];
      },
      set(v) {
        this[this.type] = v;
      },
    },
    showColor() {
      if (typeof this.color === "string") return this.color;

      return JSON.stringify(
        Object.keys(this.color).reduce((color, key) => {
          color[key] = Number(this.color[key].toFixed(2));
          return color;
        }, {}),
        null,
        2
      );
    },
  },
};
</script>

We have the v-color picker component with the v-model to set the color state.

We set the type with the setter in the computed property.

There are different kinds of color pickers.

Picker’s Elevation

We can change the color picker’s elevation with the flat and elevation props:

<template>
  <v-row justify="space-around" align="center">
    <v-color-picker v-model="picker" flat></v-color-picker>

    <v-color-picker v-model="picker" elevation="15"></v-color-picker>
  </v-row>
</template>

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

flat makes the color picker flat.

And elevation sets the elevation of the color picker.

Swatches

We can add the show-swatches prop to display an array of color swatches a user can pick from.

For example, we can write:

<template>
  <v-row justify="space-around">
    <v-color-picker class="ma-2" show-swatches></v-color-picker>
    <v-color-picker class="ma-2" :swatches="swatches" show-swatches></v-color-picker>
    <v-color-picker class="ma-2" show-swatches swatches-max-height="300px"></v-color-picker>
  </v-row>
</template>

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

We add the show-swatches prop to show the color swatch.

Conclusion

We can change the parallax container’s height and add color pickers 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.

Paginations

We can add pagination links with the v-pagination component.

The component is controlled by the v-model directive.

For example, we can write:

<template>
  <div class="text-center">
    <v-container>
      <v-row justify="center">
        <v-col cols="8">
          <v-container class="max-width">
            <v-pagination v-model="page" class="my-4" :length="15"></v-pagination>
          </v-container>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

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

to add the pagination links.

The v-pagination component has the length prop to set how many buttons to show.

v-model has the model to get and set the state of the page .

Limit Number of Links

We can set the maximum number of visible pages with the total-visible prop.

For example, we can write:

<template>
  <div class="text-center">
    <v-container>
      <v-row justify="center">
        <v-col cols="8">
          <v-container class="max-width">
            <v-pagination v-model="page" class="my-4" :length="15" :total-visible="8"></v-pagination>
          </v-container>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

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

We have the total-visible prop to set the max number of buttons to show.

Circle Buttons

The circle prop turns the buttons into circles.

For example, we can write:

<template>
  <div class="text-center">
    <v-container>
      <v-row justify="center">
        <v-col cols="8">
          <v-pagination v-model="page" :length="5" circle></v-pagination>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

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

to make the buttons circles.

Icons

The prev-icon and next-icon props let us change the previous and next button icons:

<template>
  <div class="text-center">
    <v-pagination v-model="page" :length="4" prev-icon="mdi-menu-left" next-icon="mdi-menu-right"></v-pagination>
  </div>
</template>

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

Disabled

We can disable pagination buttons with the disabled prop:

<template>
  <div class="text-center">
    <v-pagination :length="3" disabled></v-pagination>
  </div>
</template>

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

Parallax

The v-parallax component lets us create a 3D effect that makes an image appear to scroll slower than the window.

For example, we can use it by writing:

<template>
  <v-parallax dark src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg">
    <v-row align="center" justify="center">
      <v-col class="text-center" cols="12">
        <h1 class="display-1 font-weight-thin mb-4">Hello world</h1>
        <h4 class="subheading">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
      </v-col>
    </v-row>
  </v-parallax>
</template>

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

It takes the src prop to set the URL of the background image.

The default slot has the foreground content.

Conclusion

We have the v-pagination component to add the pagination buttons.

And we have the v-parallax component to add a parallax scrolling effect.