Vuetify — Alert, Containers, and Avatars

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 16×9 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.

Conclusion

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