Category: Vue

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.

Vuetify is a popular UI framework for Vue apps.

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

Validation with Submit and Clear

We can reset a form with the this.$refs.form.reset() method.

And we can reset form validation with the this.$refs.form.resetValidation() method.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-form ref="form" v-model="valid" lazy-validation>
          <v-text-field v-model="name" :counter="10" :rules="nameRules" label="Name" required></v-text-field>

          <v-text-field v-model="email" :rules="emailRules" label="E-mail" required></v-text-field>

          <v-select
            v-model="select"
            :items="items"
            :rules="[v => !!v || 'Item is required']"
            label="Item"
            required
          ></v-select>

          <v-checkbox
            v-model="checkbox"
            :rules="[v => !!v || 'You must agree']"
            label="Do you agree?"
            required
          ></v-checkbox>

          <v-btn :disabled="!valid" color="success" class="mr-4" @click="validate">Validate</v-btn>
          <v-btn color="error" class="mr-4" @click="reset">Reset Form</v-btn>
          <v-btn color="warning" @click="resetValidation">Reset Validation</v-btn>
        </v-form>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    valid: true,
    name: "",
    nameRules: [
      (v) => !!v || "Name is required",
      (v) => (v && v.length <= 10) || "Name must be less than 10 characters",
    ],
    email: "",
    emailRules: [
      (v) => !!v || "E-mail is required",
      (v) => /.+@.+..+/.test(v) || "E-mail must be valid",
    ],
    select: null,
    items: ["Item 1", "Item 2", "Item 3", "Item 4"],
    checkbox: false,
  }),

  methods: {
    validate() {
      this.$refs.form.validate();
    },
    reset() {
      this.$refs.form.reset();
    },
    resetValidation() {
      this.$refs.form.resetValidation();
    },
  },
};
</script>

We have the rules prop with the rules on each input component.

Also, we have the rules for the name and email.

And the methods let us reset the values and validation with our app.

The validate method lets us validate form fields.

We have the reset and resetValidation methods to reset forms.

Vuelidate

We can incorporate form validation into our Vuetify form by using the Vuelidate library.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <form>
          <v-text-field
            v-model="name"
            :error-messages="nameErrors"
            :counter="10"
            label="Name"
            required
            [@input](http://twitter.com/input "Twitter profile for @input")="$v.name.$touch()"
            [@blur](http://twitter.com/blur "Twitter profile for @blur")="$v.name.$touch()"
          ></v-text-field>
          <v-text-field
            v-model="email"
            :error-messages="emailErrors"
            label="E-mail"
            required
            [@input](http://twitter.com/input "Twitter profile for @input")="$v.email.$touch()"
            [@blur](http://twitter.com/blur "Twitter profile for @blur")="$v.email.$touch()"
          ></v-text-field>
          <v-select
            v-model="select"
            :items="items"
            :error-messages="selectErrors"
            label="Item"
            required
            [@change](http://twitter.com/change "Twitter profile for @change")="$v.select.$touch()"
            [@blur](http://twitter.com/blur "Twitter profile for @blur")="$v.select.$touch()"
          ></v-select>
          <v-checkbox
            v-model="checkbox"
            :error-messages="checkboxErrors"
            label="Do you agree?"
            required
            [@change](http://twitter.com/change "Twitter profile for @change")="$v.checkbox.$touch()"
            [@blur](http://twitter.com/blur "Twitter profile for @blur")="$v.checkbox.$touch()"
          ></v-checkbox>

<v-btn class="mr-4" [@click](http://twitter.com/click "Twitter profile for @click")="submit">submit</v-btn>
          <v-btn [@click](http://twitter.com/click "Twitter profile for @click")="clear">clear</v-btn>
        </form>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
import { validationMixin } from "vuelidate";
import { required, maxLength, email } from "vuelidate/lib/validators";

export default {
  name: "HelloWorld",
  mixins: [validationMixin],

validations: {
    name: { required, maxLength: maxLength(10) },
    email: { required, email },
    select: { required },
    checkbox: {
      checked(val) {
        return val;
      },
    },
  },

data: () => ({
    name: "",
    email: "",
    select: null,
    items: ["Item 1", "Item 2", "Item 3", "Item 4"],
    checkbox: false,
  }),

computed: {
    checkboxErrors() {
      const errors = [];
      if (!this.$v.checkbox.$dirty) return errors;
      !this.$v.checkbox.checked && errors.push("You must agree");
      return errors;
    },
    selectErrors() {
      const errors = [];
      if (!this.$v.select.$dirty) return errors;
      !this.$v.select.required && errors.push("Item is required");
      return errors;
    },
    nameErrors() {
      const errors = [];
      if (!this.$v.name.$dirty) return errors;
      !this.$v.name.maxLength &&
        errors.push("Name must be at most 10 characters long");
      !this.$v.name.required && errors.push("Name is required.");
      return errors;
    },
    emailErrors() {
      const errors = [];
      if (!this.$v.email.$dirty) return errors;
      !this.$v.email.email && errors.push("Must be valid e-mail");
      !this.$v.email.required && errors.push("E-mail is required");
      return errors;
    },
  },

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

to add the form fields.

We incorporate the validationMixin provided by Vuelidate.

And we add the validations object with the name , email , and select keywords, which have the rules.

Also, we have the computed properties with the computed error messages for each field.

We get the fields from the $v object and the keys we have in the validations property.

The return error message can be set with the error-message prop on each field.

In the methods object, we have the reset method to clear the validation.

The items are also reset.

In the submit method, we have the $touch method to trigger the validation.

Conclusion

We can add forms with validation with Vuetify and Vuelidate.

Vuetify is a popular UI framework for Vue apps.

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

Custom Icons for File Input

We can change the icon with the prepend-icon prop.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-file-input label="File input" filled prepend-icon="mdi-camera"></v-file-input>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
};
</script>

We have the prepend-icon prop to add the icon we want to show.

Dense File Input

The dense prop lets us make the file input shorter.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-file-input label="File input" dense></v-file-input>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
};
</script>

We make it smaller with the dense prop.

File Input Selection Slot

We can populate the selection slot to customize the appearance of the input selections.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-file-input
          v-model="files"
          placeholder="Upload your documents"
          label="File input"
          multiple
          prepend-icon="mdi-paperclip"
        >
          <template v-slot:selection="{ text }">
            <v-chip small label color="primary">{{ text }}</v-chip>
          </template>
        </v-file-input>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    files: [],
  }),
};
</script>

We have the v-model to set the state to store the selected files.

In the selection slot, we have the v-chip component to show the selected file name with the chip.

File Input Validation

The rules prop lets us set the rules for validating selected files.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-file-input
          :rules="rules"
          accept="image/png, image/jpeg, image/bmp"
          placeholder="Pick an image"
          prepend-icon="mdi-camera"
          label="Avatar"
        ></v-file-input>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    rules: [
      (value) =>
        !value ||
        value.size < 2000000 ||
        "file is too big",
    ],
  }),
};
</script>

We have the rules array with a function to validate the file.

value has the file we want to validate.

And we return an error message if the selected file isn’t valid.

Forms

We can add forms with Vuetify.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-container>
          <v-row justify="space-between">
            <v-col cols="12" md="4">
              <v-form ref="form">
                <v-text-field v-model="model" :counter="max" :rules="rules" label="First name"></v-text-field>
              </v-form>
            </v-col>
          </v-row>
        </v-container>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    max: 10,
    model: "Foobar",
  }),

  computed: {
    rules() {
      const rules = [];

      if (this.max) {
        const rule = (v) =>
          (v || "").length <= this.max ||
          `A maximum of ${this.max} characters is allowed`;

        rules.push(rule);
      }

       return rules;
    },
  },

  watch: {
    match: "validateField",
    max: "validateField",
    model: "validateField",
  },

  methods: {
    validateField() {
      this.$refs.form.validate();
    },
  },
};
</script>

We have the rules computed property to compute the rules according to the input.

And we validate the form with the validateField method.

We get the ref of the form and call validate on it.

The counter prop sets the max count of the characters.

The rules prop has the validation rules.

Conclusion

We can add file input and forms with Vuetify.