Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Text Areas
We can add text areas to collect large amounts of text data.
To add it, we can use the v-textarea component.
For example, we can write:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-textarea class="mx-2" label="prepend-icon" rows="1" prepend-icon="mdi-comment"></v-textarea>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
We add the prepend-icon prop to add an icon to the left of the text area.
rows is the number of rows to display.
To add an icon to the right, we use the append-icon prop.
There’s also the prepend-inner-icon to add the icon within the line of the text area.
For example, we can write:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-textarea
class="mx-2"
label="prepend-inner-icon"
rows="1"
prepend-inner-icon="mdi-comment"
></v-textarea>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
Auto Grow
We can use the auto-grow prop to create a text area that increases in size with the text.
For instance, we can write:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-textarea
name="input-7-1"
filled
label="Label"
auto-grow
value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus massa sapien, rutrum vitae luctus sit amet."
></v-textarea>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
We add the auto-grow prop to make the text area always show all the text without scrolling.
Background Color
The background-color and color props can be used to change the background color and the text color respectively.
For example, we can write:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-textarea background-color="light-blue" color="black" label="Label"></v-textarea>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
to set the colors.
Browser Autocomplete
We can set the autocomplete prop to enable the browser to predict user input:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-textarea autocomplete="email" label="Email"></v-textarea>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
Clearable Text Area
The clearable prop makes the text area clearable.
The icon for clearing the text can be changed with the clearable-icon prop.
So we can write:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-textarea clearable clear-icon="mdi-cancel" label="Text" value="Clearable text."></v-textarea>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
We clear the text area by clicking on the clear-icon .
Counter
The counter prop shows the user the character limit for the v-textarea :
<template>
<v-container>
<v-row>
<v-col col="12">
<v-textarea counter label="Text" :rules="rules" :value="value"></v-textarea>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
rules: [(v) => v.length <= 25 || "Max 25 characters"],
value: "foo bar",
}),
};
</script>
The counter prop lets us show the character count.
Conclusion
We can add text areas with various things to display with Vuetify.
