Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Buttons
We can add buttons with the v-btn component.
For instance, we can write:
<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<div class="my-2">
<v-btn text small color="primary">Primary</v-btn>
</div>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
to add a button.
The small prop makes it small.
And the color prop changes the color.
The text prop removes the raised style.
Raised Button
A raised button is the default style.
For example, we can write:
<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<div class="my-2">
<v-btn small color="primary">Primary</v-btn>
</div>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
to add a raised button.
A raised button has a shadow.
Depressed Button
The depressed prop lets us make a depressed button.
A depressed button has no shadow.
For example, we can write:
<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<div class="my-2">
<v-btn depressed color="primary">Primary</v-btn>
</div>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
to create a depressed button.
Button Dropdown Variants
Vuetify lets us add a button dropdown.
To do that, we write:
<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<div id="dropdown">
<v-overflow-btn class="my-2" :items="fruits" label="Choose Fruit" target="#dropdown"></v-overflow-btn>
</div>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
fruits: ["apple", "orange", "pear"],
}),
};
</script>
We have the items prop that takes an array of strings with the choices.
label has the label that’s displayed.
The target is the selector of the container.
We can also add the segmented prop to make a segmented dropdown button.
And the editable prop makes the dropdown editable.
Icon Button
We can add a icon prop with the v-icon component to add an icon button.
For instance, we can write:
<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-btn icon color="pink">
<v-icon>mdi-heart</v-icon>
</v-btn>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
We also set the color to the color we want.
The disabled prop will disable the button.
Floating Button
We can also add a floating button with the fab prop.
For example, we can write:
<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-btn class="mx-2" fab dark large color="purple">
<v-icon dark>mdi-android</v-icon>
</v-btn>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
We add the fab and large props to make the button a floating button.
Conclusion
We can add a button with the v-btn component.
