how to use alerts message in shadcn ui with vue 3

How to Use Alerts Message in Shadcn UI with Vue 3

VueJS
28/09/23
Webvees

In this tutorial, we will create alerts message in vue 3 with 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. Vue 3 create basic alerts message using shadcn-vue Alert, AlertDescription, AlertTitle component with icon.

<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>
 shadcn-vue alert

shadcn-vue alert

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

<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>
 shadcn ui vue 3 alert message

shadcn ui vue 3 alert message