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.
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,