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.

Selects

We can create a select dropdown with the v-select component.

For instance, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-select :items="items" label="Fruit"></v-select>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: ["apple", "orange", "pear"],
  }),
};
</script>

We have the v-select component with the items prop.

items takes an array of items to display as the choices.

label has the dropdown label.

The disabled and readonly attributes can be used with v-select .

disabled lets us disable the dropdown with disabled styles displayed.

readonly also makes it disabled but no style changes are applied.

We can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-select :items="items" label="Fruit" disabled></v-select>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: ["apple", "orange", "pear"],
  }),
};
</script>

to disable the v-select component.

And we can do add make it read-only with:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-select :items="items" label="Fruit" readonly></v-select>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: ["apple", "orange", "pear"],
  }),
};
</script>

Options

We can add various options to the v-select component.

chips makes the selected items look like chips.

multiple enables multiple selections.

attach specifies which DOM element the component should attach to.

The value is a selector for the element we want to attach to.

solo renders the dropdown without the label.

For instance, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-select :items="items" label="Fruit" multiple></v-select>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: ["apple", "orange", "pear"],
  }),
};
</script>

to enable multiple selections.

Icons

We can add prepended and appended icons to our dropdown.

For instance, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-select
          v-model="fruit"
          :items="items"
          menu-props="auto"
          label="Select"
          hide-details
          prepend-icon="mdi-domain"
          single-line
        ></v-select>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: ["apple", "orange", "pear"],
    fruit: "",
  }),
};
</script>

We have the prepend-icon prop to add the icon to the left of the dropdown.

We can add an icon to the right of the dropdown with the append-outer-icon prop:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-select
          v-model="fruit"
          :items="items"
          menu-props="auto"
          label="Select"
          hide-details
          append-outer-icon="mdi-domain"
          single-line
        ></v-select>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: ["apple", "orange", "pear"],
    fruit: "",
  }),
};
</script>

In both examples, we just set the prop value to the string with the icon name.

Conclusion

We can add dropdowns with various kinds of options 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.

Overflow Button Hint

We can add the hint property to show a hint below the overflow button.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-overflow-btn
          class="my-2"
          :items="dropdownItems"
          label="Overflow Btn"
          hint="Select fruit"
          item-value="text"
        ></v-overflow-btn>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    dropdownItems: [{ text: "apple" }, { text: "orange" }, { text: "grape" }],
  }),
};
</script>

We have the hint prop with the text to show.

Loading Bar

The loading prop lets us show the loading bar at the bottom of the overflow button:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-overflow-btn
          class="my-2"
          :items="dropdownItems"
          label="Overflow Btn"
          hint="Select fruit"
          item-value="text"
          loading
        ></v-overflow-btn>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    dropdownItems: [{ text: "apple" }, { text: "orange" }, { text: "grape" }],
  }),
};
</script>

Menu Props

We can set the menu-props prop to change the menu position:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-overflow-btn
          class="my-2"
          :items="dropdownItems"
          label="Overflow Btn"
          hint="Select fruit"
          item-value="text"
          menu-props="top"
        ></v-overflow-btn>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    dropdownItems: [{ text: "apple" }, { text: "orange" }, { text: "grape" }],
  }),
};
</script>

We set it to top so that it opens on top.

Read-Only

We can make the v-overflow-btn read only with the readonly prop.

It’ll become inactive but no styles are changed.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-overflow-btn
          class="my-2"
          :items="dropdownItems"
          label="Overflow Btn"
          hint="Select fruit"
          item-value="text"
          readonly
        ></v-overflow-btn>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    dropdownItems: [{ text: "apple" }, { text: "orange" }, { text: "grape" }],
  }),
};
</script>

Now we can’t select items from the dropdown.

Segmented Button

We can make the v-overflow-btn segmented.

This means that it has an additional divider between the content and the icon.

For instance, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-overflow-btn
          class="my-2"
          :items="dropdownItems"
          label="Overflow Btn"
          hint="Select fruit"
          item-value="text"
          segmented
        ></v-overflow-btn>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    dropdownItems: [
      { text: "apple", callback: () => console.log("apple") },
      { text: "orange", callback: () => console.log("orange") },
      { text: "grape", callback: () => console.log("grape") },
    ],
  }),
};
</script>

We have the callback property for each entry, which is required.

When we click on the entry, it’ll be called.

Conclusion

We can add an overflow button to add a dropdown to our Vuetify app.

Vuetify is a popular UI framework for Vue apps.

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

Input Events

Inputs can listen to various click events for the icons.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-input
          :messages="['Messages']"
          append-icon="mdi-plus"
          prepend-icon="mdi-minus"
          @click:append="appendIconCallback"
          @click:prepend="prependIconCallback"
        >Default Slot</v-input>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    text: "",
  }),
  methods: {
    appendIconCallback() {
      alert("append");
    },
    prependIconCallback() {
      alert("prepend");
    },
  },
};
</script>

We populate the default slot with some text.

And we also have the click:append and click:prepend listeners to listen to clicks for the left and right icons respectively.

Overflow Buttons

We can create overflow buttons with the v-overflow-btn component.

It lets us create a dropdown to show items and select them.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-overflow-btn
          class="my-2"
          :items="dropdownItems"
          label="Overflow Btn"
          counter
          item-value="text"
        ></v-overflow-btn>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    dropdownItems: [
      { text: "100%" },
      { text: "75%" },
      { text: "50%" },
      { text: "25%" },
      { text: "0%" },
    ],
  }),
};
</script>

We have the v-overflow-btn to create a dropdown.

The items prop have the items.

counter shows us the index of the selected item.

label has the label.

The item-value prop has the property name of the dropdownItems entry to display.

Disabled

We can disable the overflow button with the disabled prop:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-overflow-btn
          class="my-2"
          :items="dropdownItems"
          label="Overflow Btn"
          counter
          disabled
          item-value="text"
        ></v-overflow-btn>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    dropdownItems: [
      { text: "100%" },
      { text: "75%" },
      { text: "50%" },
      { text: "25%" },
      { text: "0%" },
    ],
  }),
};
</script>

Dense Overflow Button

The dense prop makes the overflow button smaller.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-overflow-btn
          class="my-2"
          :items="dropdownItems"
          label="Overflow Btn"
          counter
          dense
          item-value="text"
        ></v-overflow-btn>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    dropdownItems: [
      { text: "100%" },
      { text: "75%" },
      { text: "50%" },
      { text: "25%" },
      { text: "0%" },
    ],
  }),
};
</script>

Now the dropdown should be shorter.

Editable

We can make the dropdown editable with the editable prop.

For instance, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-overflow-btn
          class="my-2"
          :items="dropdownItems"
          label="Overflow Btn"
          counter
          editable
          item-value="text"
        ></v-overflow-btn>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    dropdownItems: [
      { text: "100%" },
      { text: "75%" },
      { text: "50%" },
      { text: "25%" },
      { text: "0%" },
    ],
  }),
};
</script>

The editable prop makes the input for the overflow button editable.

Conclusion

We can add inputs and overflow buttons 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.

Form Validation with Vee-Validate

We can validate Vuetify forms with the Vee-Validate library.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <ValidationObserver ref="observer" v-slot="{ validate, reset }">
          <form>
            <ValidationProvider v-slot="{ errors }" name="Name" rules="required|max:10">
              <v-text-field
                v-model="name"
                :counter="10"
                :error-messages="errors"
                label="Name"
                required
              ></v-text-field>
            </ValidationProvider>
            <ValidationProvider v-slot="{ errors }" name="email" rules="required|email">
              <v-text-field v-model="email" :error-messages="errors" label="E-mail" required></v-text-field>
            </ValidationProvider>
            <ValidationProvider v-slot="{ errors }" name="select" rules="required">
              <v-select
                v-model="select"
                :items="items"
                :error-messages="errors"
                label="Select"
                data-vv-name="select"
                required
              ></v-select>
            </ValidationProvider>
            <ValidationProvider v-slot="{ errors, valid }" rules="required" name="checkbox">
              <v-checkbox
                v-model="checkbox"
                :error-messages="errors"
                value="1"
                label="Option"
                type="checkbox"
                required
              ></v-checkbox>
            </ValidationProvider>

            <v-btn class="mr-4" @click="submit">submit</v-btn>
            <v-btn @click="clear">clear</v-btn>
          </form>
        </ValidationObserver>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
import { required, email, max } from "vee-validate/dist/rules";
import {
  extend,
  ValidationObserver,
  ValidationProvider,
  setInteractionMode,
} from "vee-validate";
setInteractionMode("eager");

extend("required", {
  ...required,
  message: "{_field_} can not be empty",
});

extend("max", {
  ...max,
  message: "{_field_} may not be greater than {length} characters",
});

extend("email", {
  ...email,
  message: "Email must be valid",
});

export default {
  name: "HelloWorld",
  components: {
    ValidationProvider,
    ValidationObserver,
  },
  data: () => ({
    name: "",
    email: "",
    select: null,
    items: ["Item 1", "Item 2", "Item 3", "Item 4"],
    checkbox: null,
  }),

  methods: {
    submit() {
      this.$refs.observer.validate();
    },
    clear() {
      this.name = "";
      this.email = "";
      this.select = null;
      this.checkbox = null;
      this.$refs.observer.reset();
    },
  },
};
</script>

We wrap the form with the ValidationObserver component so that we can use the validation features.

Also, we have the ValidationProvider to wrap our the v-text-field to let us add validation with Vee-Validate to each field.

rules sets the rules.

And the rules are defined with the extends function.

We pass in an object into the 2nd argument with the object to define our validation rules with the error message.

message has error message.

required , max , and email are objects with the validation rules.

In the components property, we register the components.

The reset and validate methods let us reset the form validation and validate respectively.

Inputs

We can add form inputs with the v-input component.

For instance, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-text-field color="success" loading disabled></v-text-field>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
};
</script>

to add an input with the loading prop to make it show a progress bar to indicate that it’s loading.

Conclusion

We can add form validation with VeeValidate to a Vuetify form.

Also, we can add an input with the v-input component.

Vuetify is a popular UI framework for Vue apps.

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

Input Hints

A v-input component takes a hint prop to let us add an input hint.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-input hint="a hint" persistent-hint :messages="messages">Input</v-input>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    messages: [],
  }),
};
</script>

We added the persistent-hint prop to make the hint persistent.

Also, we have the hint prop with the hint text.

Success Message

We can add a success message with the success-messages prop:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-input :success-messages="['Success']" success disabled>Input</v-input>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We set an array to the success-messages prop.

Error

We can display errors with the error-messages prop:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-input :error-messages="['an error occurred']" error disabled>Input</v-input>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Multiple Errors

The error-count prop lets us add multiple errors into an input:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-input
          error-count="2"
          :error-messages="['an error', 'another error']"
          error
          disabled
        >Input</v-input>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We have the error-count prop to set the error count and the error-messages prop to set the error messages array.

Rules

The validation rules for the form can be set with the rules prop:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-text-field :rules="rules"></v-text-field>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    rules: [
      (value) => !!value || "Required.",
      (value) => (value || "").length <= 10 || "Max 10 characters",
    ],
  }),
};
</script>

The rules property is an array with functions that returns an error message if needed.

value has the value that we entered.

Auto Hiding Details

The hide-details prop lets us hide messages automatically.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-text-field label="Main input" :rules="rules" hide-details="auto"></v-text-field>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    rules: [
      (value) => !!value || "Required.",
      (value) => (value || "").length <= 10 || "Max 10 characters",
    ],
  }),
};
</script>

We have the rules array with the validation rules.

hide-details set to auto hide the validation errors if there’s none to display.

Conclusion

We can add input hints and validation messages with Vuetify text inputs.