Vuetify — Alert, Containers, and Avatars

Photo by Tom Bradley on Unsplash

Vuetify is a popular UI framework for Vue apps.

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

Alert Transition

Transition effects can be applied when we add alerts.

For instance, we can write:

<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<div class="text-center mb-4">
<v-btn color="primary" @click="alert = !alert">Toggle</v-btn>
</div>
<v-alert
:value="alert"
color="pink"
dark
border="top"
icon="mdi-home"
transition="scale-transition"
>
lorem ipsum
</v-alert>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
alert: false
}),
};
</script>

to add our alert with the transition.

We just add the transition prop to add the effect.

Application

The v-app component is a container for components like v-navigator-drawer , v-app-bar , v-footer , and other components.

It helps create our app with proper sizing around the v-main component.

This lets us avoid the hassle of managing layout sizing.

v-app is required for all apps.

It ensures that the proper styles are applied to the whole app.

Also, it should only be included once.

For example, we can write:

<template>
<v-app>
<v-app-bar
app
color="primary"
dark
>
<div class="d-flex align-center">
<v-img
alt="Vuetify Logo"
class="shrink mr-2"
contain
src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
transition="scale-transition"
width="40"
/>
<v-img
alt="Vuetify Name"
class="shrink mt-1 hidden-sm-and-down"
contain
min-width="100"
src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
width="100"
/>
</div>
<v-spacer></v-spacer> <v-btn
href="https://github.com/vuetifyjs/vuetify/releases/latest"
target="_blank"
text
>
<span class="mr-2">Latest Release</span>
<v-icon>mdi-open-in-new</v-icon>
</v-btn>
</v-app-bar>
<v-main>
<HelloWorld/>
</v-main>
</v-app>
</template>
<script>
import HelloWorld from './components/HelloWorld';
export default {
name: 'App',
components: {
HelloWorld,
},
data: () => ({
//
}),
};
</script>

to use it.

v-app wraps around the whole app.

And we can have all the other Vuetify components inside.

Aspect Ratios

We can use the v-responsive component to add a container with a specific aspect ratio.

For example, we can write:

<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-responsive :aspect-ratio="16/9">
<v-card-text>Lorem ipsum</v-card-text>
</v-responsive>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
alert: false,
}),
};
</script>

We added a 16x9 container with the v-response component and the aspect-ratio prop.

Avatars

The v-avatar component lets us display circular user profile pictures.

For example, we can add one by writing:

<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-avatar color="green" size="36">
<span class="white--text headline">36</span>
</v-avatar>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
alert: false,
}),
};
</script>

We added a green avatar with the color prop.

size is in pixels.

Also, we can make it square with a tile prop:

<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-avatar tile color="blue">
<v-icon dark>mdi-alarm</v-icon>
</v-avatar>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
alert: false,
}),
};
</script>

The default slot of v-avatar accepts the v-icon component, image or text.

We can write:

<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-avatar color="blue">
<v-avatar>
<img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John" />
</v-avatar>
</v-avatar>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
alert: false,
}),
};
</script>

to add an image.

Photo by Syed Ahmad on Unsplash

Conclusion

We can add alerts, avatars, and responsive containers with Vuetify.

Web developer. Subscribe to my email list now at https://thewebdev.info/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store