How to Use Alerts Message in Shadcn UI with Vue 3

In this tutorial, we will create alert messages in Vue 3 using Shadcn-Vue. Before we begin, you need to install and configure Shadcn UI in Vue 3.

How to Use Shadcn UI in Vue 3

To use Alerts Message you need to shadcn-vue add Alerts.

npx shadcn-vue@latest add alerts
# or
npx shadcn-vue@latest add

1. Create basic alert messages in Vue 3 using Shadcn-Vue Alert, AlertDescription, and AlertTitle components with icons.

Vue

<script setup lang="ts">
import { Terminal } from 'lucide-vue-next'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
</script>

<template>
  <Alert>
    <Terminal class="h-4 w-4" />
    <AlertTitle>Heads up!</AlertTitle>
    <AlertDescription>
      You can add components to your app using the cli.
    </AlertDescription>
  </Alert>
</template>

2. Vue 3 with shadcn-vue alert message success, warning, error.

Vue

<script setup lang="ts">
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
</script>

<template>
  <Alert class="bg-green-600 text-green-100">
    <AlertTitle>Success</AlertTitle>
    <AlertDescription>
      An example success alert message
    </AlertDescription>
  </Alert>
  <Alert class="bg-yellow-500 text-yellow-100">
    <AlertTitle>Warning</AlertTitle>
    <AlertDescription>
      An example warning alert message
    </AlertDescription>
  </Alert>
  <Alert class="bg-red-500 text-red-100">
    <AlertTitle>Warning</AlertTitle>
    <AlertDescription>
      An example error alert message
    </AlertDescription>
  </Alert>
</template>

Javed sheikh

Hello there! I’m Javed Sheikh, a frontend developer with a passion for crafting seamless user experiences. With expertise in JavaScript frameworks like Vue.js, Svelte, and React, I bring creativity and innovation to every project I undertake. From building dynamic web applications to optimizing user interfaces,