Vuelicity

Appearance

PubAlert ​

This is an alert component that can be used to display content in an alert. It provides various options for customizing the alert, such as adding a border, shadow, and rounded corners.

Default alerts ​

Prop - theme Usage ​

There are a number of themes available for the alert, including 'blue', 'red', 'yellow', 'green', 'dark'. Below is a demo of each theme.

vue
<template>
    <pub-alert theme="blue"> Info alert! Change a few things up and try submitting again. </pub-alert>
    <pub-alert theme="yellow"> Warning alert! Change a few things up and try submitting again. </pub-alert>
    <pub-alert theme="red"> Danger alert! Change a few things up and try submitting again. </pub-alert>
    <pub-alert theme="green"> Success alert! Change a few things up and try submitting again. </pub-alert>
    <pub-alert theme="dark"> Dark alert! Change a few things up and try submitting again. </pub-alert>
</template>

<script setup>
import { PubAlert } from "vuelicity";
</script>

Alerts with icon ​

Prop - showIcon Usage ​

The showIcon prop can be used to display an icon in the alert.

vue
<template>
    <pub-alert show-icon theme="blue"> Info alert! Change a few things up and try submitting again. </pub-alert>
    <pub-alert show-icon theme="yellow"> Warning alert! Change a few things up and try submitting again. </pub-alert>
    <pub-alert show-icon theme="red"> Danger alert! Change a few things up and try submitting again. </pub-alert>
    <pub-alert show-icon theme="green"> Success alert! Change a few things up and try submitting again. </pub-alert>
    <pub-alert show-icon theme="dark"> Dark alert! Change a few things up and try submitting again. </pub-alert>
</template>

<script setup>
import { PubAlert } from "vuelicity";
</script>

Bordered alerts ​

Prop - bordered Usage ​

The bordered prop can be used to add a border to the alert.

vue
<template>
    <pub-alert bordered theme="blue"> Info alert! Change a few things up and try submitting again. </pub-alert>
    <pub-alert bordered theme="yellow"> Warning alert! Change a few things up and try submitting again. </pub-alert>
    <pub-alert bordered theme="red"> Danger alert! Change a few things up and try submitting again. </pub-alert>
    <pub-alert bordered theme="green"> Success alert! Change a few things up and try submitting again. </pub-alert>
    <pub-alert bordered theme="dark"> Dark alert! Change a few things up and try submitting again. </pub-alert>
</template>

<script setup>
import { PubAlert } from "vuelicity";
</script>

Alerts with list ​

vue
<template>
    <pub-alert show-icon theme="blue">
        <template #title>
            <p class="font-medium">Check if the password meets the following requirements:</p>
        </template>
        <ul class="mt-1.5 ml-7 list-disc list-inside">
            <li>At least 8 characters</li>
            <li>At least one uppercase letter</li>
            <li>At least one lowercase letter</li>
            <li>At least one number</li>
        </ul>
    </pub-alert>
    <pub-alert show-icon theme="yellow">
        <template #title>
            <p class="font-medium">Check if the password meets the following requirements:</p>
        </template>
        <ul class="mt-1.5 ml-7 list-disc list-inside">
            <li>At least 8 characters</li>
            <li>At least one uppercase letter</li>
            <li>At least one lowercase letter</li>
            <li>At least one number</li>
        </ul>
    </pub-alert>
</template>

<script setup>
import { PubAlert } from "vuelicity";
</script>

Border accent ​

vue
<template>
    <pub-alert class="border-t-4 rounded-none" theme="blue"> Info alert! Change a few things up and try submitting again. </pub-alert>
    <pub-alert class="border-t-4 rounded-none" theme="yellow"> Warning alert! Change a few things up and try submitting again. </pub-alert>
    <pub-alert class="border-t-4 rounded-none" theme="red"> Danger alert! Change a few things up and try submitting again. </pub-alert>
    <pub-alert class="border-t-4 rounded-none" theme="green"> Success alert! Change a few things up and try submitting again. </pub-alert>
    <pub-alert class="border-t-4 rounded-none" theme="dark"> Dark alert! Change a few things up and try submitting again. </pub-alert>
</template>

<script setup>
import { PubAlert } from "vuelicity";
</script>

Dismissible alerts ​

vue
<template>
    <pub-alert dismissible theme="blue"> Info alert! Change a few things up and try submitting again. </pub-alert>
    <pub-alert dismissible theme="yellow"> Warning alert! Change a few things up and try submitting again. </pub-alert>
    <pub-alert dismissible theme="red"> Danger alert! Change a few things up and try submitting again. </pub-alert>
    <pub-alert dismissible theme="green"> Success alert! Change a few things up and try submitting again. </pub-alert>
    <pub-alert dismissible theme="dark"> Dark alert! Change a few things up and try submitting again. </pub-alert>
</template>

<script setup>
import { PubAlert } from "vuelicity";
</script>

Additional content ​

vue
<template>
    <pub-alert show-icon theme="green">
        <template #title>
            <p class="font-bold">This is a success alert</p>
        </template>
        <template #default="{ handleClose }">
            <div class="mt-2 mb-4">
                More info about this success alert goes here. This example text is going to run a bit longer so that you
                can see how spacing within an alert works with this kind of content.
            </div>
            <div class="flex gap-2">
                <pub-button theme="green" size="sm" rounded="md">
                    <template #prepend>
                        <pub-icon name="eye" />
                    </template>
                    View More
                </pub-button>
                <pub-button theme="green" size="sm" rounded="md" outline aria-label="Close" @click="handleClose">
                    Close
                </pub-button>
            </div>
        </template>
    </pub-alert>
    <pub-alert show-icon theme="red">
        <template #title>
            <p class="font-bold">This is a danger alert</p>
        </template>
        <template #default="{ handleClose }">
            <div class="mt-2 mb-4">
                More info about this danger alert goes here. This example text is going to run a bit longer so that you
                can see how spacing within an alert works with this kind of content.
            </div>
            <div class="flex gap-2">
                <pub-button theme="red" size="sm" rounded="md">
                    <template #prepend>
                        <pub-icon name="eye" />
                    </template>
                    View More
                </pub-button>
                <pub-button theme="red" size="sm" rounded="md" outline aria-label="Close" @click="handleClose">
                    Close
                </pub-button>
            </div>
        </template>
    </pub-alert>
</template>

<script setup>
import { PubAlert, PubButton, PubIcon } from "vuelicity";
</script>

Announcements alerts ​

vue
<template>
    <pub-alert theme="blue" class="p-1 pe-2 rounded-full">
        <div class="flex items-center gap-2">
            <pub-badge theme="blue">New</pub-badge>
            <div class="text-sm">
                Great job! You've acknowledged this
                <a href="#" class="font-medium underline hover:no-underline">significant</a> alert message.
            </div>
            <pub-icon name="chevron-right" />
        </div>
    </pub-alert>
    <pub-alert theme="yellow" class="p-1 pe-2 rounded-full">
        <div class="flex items-center gap-2">
            <pub-badge theme="yellow">New</pub-badge>
            <div class="text-sm">
                Great job! You've acknowledged this
                <a href="#" class="font-medium underline hover:no-underline">significant</a> alert message.
            </div>
            <pub-icon name="chevron-right" />
        </div>
    </pub-alert>
    <pub-alert theme="red" class="p-1 pe-2 rounded-full">
        <div class="flex items-center gap-2">
            <pub-badge theme="red">New</pub-badge>
            <div class="text-sm">
                Great job! You've acknowledged this
                <a href="#" class="font-medium underline hover:no-underline">significant</a> alert message.
            </div>
            <pub-icon name="chevron-right" />
        </div>
    </pub-alert>
    <pub-alert theme="green" class="p-1 pe-2 rounded-full">
        <div class="flex items-center gap-2">
            <pub-badge theme="green">New</pub-badge>
            <div class="text-sm">
                Great job! You've acknowledged this
                <a href="#" class="font-medium underline hover:no-underline">significant</a> alert message.
            </div>
            <pub-icon name="chevron-right" />
        </div>
    </pub-alert>
    <pub-alert theme="dark" class="p-1 pe-2 rounded-full">
        <div class="flex items-center gap-2">
            <pub-badge theme="dark">New</pub-badge>
            <div class="text-sm">
                Great job! You've acknowledged this
                <a href="#" class="font-medium underline hover:no-underline">significant</a> alert message.
            </div>
            <pub-icon name="chevron-right" />
        </div>
    </pub-alert>
</template>

<script setup>
import { PubAlert, PubBadge, PubIcon } from "vuelicity";
</script>

Reference ​

Properties ​

NameTypeDefaultDescriptionOptions
themeString'blue'The color theme of the alert.'blue', 'red', 'yellow', 'green', 'dark'
dismissibleBooleanfalseWhether the alert is dismissible.
borderedBooleanfalseWhether to add a border to the alert.
showIconBooleanfalseWhether to display an icon in the alert.
durationNumber5000The duration of the alert in milliseconds.

Slots ​

NameDescription
defaultThe main content of the alert.
iconSlot for a custom icon.
close-buttonSlot for a custom close button.
titleSlot for a custom title.

Events ​

NameDescription
closeEmitted when the alert is closed.

Released under the MIT License.

Copyright © 2026 DIY Baazar.