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.
