How to Use Badge in Shadcn UI with Vue 3

In this tutorial, we will create Badge 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 Badge .

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

1. Create basic Badge in Vue 3 using Shadcn-Vue Badge.

<script setup lang="ts">
import { Badge } from '@/components/ui/badge'
</script>

<template>
  <Badge>Badge</Badge>
</template>

2. Vue 3 with shadcn-vue Badge Secondary, Outline, Destructive variant.

<script setup lang="ts">
import { Badge } from '@/components/ui/badge'
</script>

<template>
  <div>
    <Badge variant="secondary">
      Secondary
    </Badge>
    <Badge variant="outline">
      Outline
    </Badge>
    <Badge variant="destructive">
      Destructive
    </Badge>
  </div>
</template>

3. Create custom success Badge using tailwind css.

<script setup lang="ts">
import { Badge } from '@/components/ui/badge'
</script>

<template>
    <Badge class="bg-green-200 text-green-800">
        success
    </Badge>
</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,