Vuetify — Alert Styles

Photo by Randy Laybourne 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.

Alerts

We create an alert with v-alert component.

To do that, we write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-alert type="success">success alert.</v-alert>
<v-alert type="info">info alert.</v-alert>
<v-alert type="warning">warning alert.</v-alert>
<v-alert type="error">error alert.</v-alert>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We can add a border with:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-alert border="top" color="red lighten-2" dark>red border</v-alert>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We set the color to red to make a red border.

border is set to top to add the border to the top.

Colored Border