Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Grids
We can layout our components in a grid.
For example, we can write:
<template>
<v-container class="grey lighten-5">
<v-row v-for="n in 2" :key="n" :class="n === 1 ? 'mb-6' : ''" no-gutters>
<v-col v-for="k in n + 1" :key="k">
<v-card class="pa-2" outlined tile>{{ k }} of {{ n + 1 }}</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
We add the v-row and v-col components to add rows and columns respectively.
We can place anything inside the columns.
Equal Width Columns
Columns can be made to have equal widths.
For example, we can write:
<template>
<v-container class="grey lighten-5">
<v-row no-gutters>
<template v-for="n in 6">
<v-col :key="n">
<v-card class="pa-2" outlined tile>Column</v-card>
</v-col>
<v-responsive v-if="n === 3" :key="`width-${n}`" width="100%"></v-responsive>
</template>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
We add the v-col components to add the columns.
And we add the v-responsive component to split the columns into rows according to the v-if check.
We have n === 3 as the value of v-if , so we display v-responsive after every 3 columns to split separate every 3 columns into their own row.
One Column Width
We can define the width of only one column and have its siblings automatically resize around it:
<template>
<v-container class="grey lighten-5">
<v-row class="mb-6" no-gutters>
<v-col v-for="n in 3" :key="n" :cols="n === 1 ? 6 : undefined">
<v-card class="pa-2" outlined tile>{{ n }} of 3 {{ n === 1 ? '(wider)' : '' }}</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
We set the first column to take up 6 columns with the cols prop.
Variable Content Width
The content width of columns can be variable.
For example, we can write:
<template>
<v-container class="grey lighten-5">
<v-row class="mb-6" justify="center" no-gutters>
<v-col lg="2">
<v-card class="pa-2" outlined tile>1 of 3</v-card>
</v-col>
<v-col md="auto">
<v-card class="pa-2" outlined tile>Variable width content</v-card>
</v-col>
<v-col lg="2">
<v-card class="pa-2" outlined tile>3 of 3</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
We set the breakpoints with the lg and md props.
The widths to the given number of columns when those breakpoints are met.
Conclusion
We can add rows and columns to create our layouts with Vuetify.
The widths can be set our way.
