Vuetify — Alert, Containers, and Avatars

Image for post
Image for post
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:

to add our alert with the transition.

We just add the transition prop to add the effect.


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:

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:

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


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

For example, we can add one by writing:

We added a green avatar with the color prop.

size is in pixels.

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

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

We can write:

to add an image.

Image for post
Image for post
Photo by Syed Ahmad on Unsplash


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

Written by

Web developer. Subscribe to my email list now at Email me at

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