In this tutorial, we will create alert message in nuxt 3 with Nuxtlabs UI. Before we begin, you need to install and configure Nuxtlabs UI in Nuxt 3.
How to Install Nuxtlabs UI in Nuxt 3
1. Nuxt 3 with Nuxtlabs UI basic alert message using UAlert component.
Vue
<UAlert title="Heads up!" />2. Nuxt 3 with Nuxtlabs UI alert message with description.
Vue
<template>
<div>
<UAlert description="You can add components to your app using the cli." />
</div>
</template>
3. Nuxt 3 with Nuxtlabs UI alert message with icon.
Vue
<template>
<div>
<UAlert
icon="i-heroicons-command-line"
description="You can add components to your app using the cli."
/>
</div>
</template>4. Nuxt 3 with Nuxtlabs UI alert message with avatar.
Vue
<template>
<div>
<UAlert
description="You can add components to your app using the cli."
:avatar="{ src: 'https://avatars.githubusercontent.com/u/739984?v=4' }"
/>
</div>
</template>
5. Nuxt 3 with Nuxtlabs UI alert message with color primary and solid, outline, soft.
Vue
<template>
<div class="flex flex-col gap-4 max-w-2xl">
<UAlert
icon="i-heroicons-command-line"
color="primary"
variant="solid"
description="Nuxt 3 with Nuxtlabs UI Alert Message Example"
/>
<UAlert
icon="i-heroicons-command-line"
color="primary"
variant="outline"
description="Nuxt 3 with Nuxtlabs UI Alert Message Example"
/>
<UAlert
icon="i-heroicons-command-line"
color="primary"
variant="soft"
description="Nuxt 3 with Nuxtlabs UI Alert Message Example"
/><UAlert
icon="i-heroicons-command-line"
color="primary"
variant="subtle"
description="Nuxt 3 with Nuxtlabs UI Alert Message Example"
/>
</div>
</template>
6. Nuxt 3 with Nuxtlabs UI alert message with action button.
Vue
<template>
<div>
<UAlert
:actions="[
{ variant: 'solid', color: 'primary', label: 'Action 1' },
{ variant: 'outline', color: 'primary', label: 'Action 2' },
]"
/>
</div>
</template>
