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

We can set the colored-border prop to add a colored border:

<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-alert border="left" colored-border color="deep-purple accent-4" elevation="2">lorem ipsum</v-alert>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>

Dense Alert

We can make the alert box smaller with the dense prop.

For example, we can write:

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

to make it denser with the dense prop.

Icon

We can add an icon to it with the icon prop:

<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-alert color="#2A3B4D" dark icon="mdi-firework" dense>icon alert</v-alert>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>

We add a firework icon to the left with the icon prop.

Outlined

We can make the alert displayed as an outline version with:

<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-alert outlined color="purple">
<div class="title">Lorem Ipsum</div>
<div>outlined alert.</div>
</v-alert>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>

Then outlined prop makes the outline.

Prominent

The prominent prop provides a more pronounced alert by increasing the height and adding a halo to the icon:”

<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-alert
color="blue-grey"
dark
dense
icon="mdi-school"
prominent
>Sed augue ipsum, egestas nec</v-alert>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>

We added the prominent prop and everything else will be applied automatically.

Text

We can add the text prop to create a simple alert variant with only text.

It can be combined with the dense , prominent and outlined props:

<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-alert text outlined color="deep-orange" icon="mdi-fire">Nullam tincidunt adipiscing enim</v-alert>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>

We only have text in our alert.

Photo by Sheri Hooley on Unsplash

Conclusion

We can create alerts with various styles provided by 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