In this tutorial, we will create badge 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 badge using UBadge
component.
Vue
<UBadge>Badge</UBadge>
2. Nuxt 3 with nuxtlabs ui badge with label.
Vue
<UBadge label="Badge" />
3. Nuxt 3 with nuxtlabs ui badge with color primary, red, blue, purple etc.
Vue
<template>
<div class="space-x-4">
<UBadge color="primary" variant="solid">Primary Badge</UBadge>
<UBadge color="red" variant="solid">Red Badge</UBadge>
<UBadge color="orange" variant="solid">Orange Badge</UBadge>
<UBadge color="blue" variant="solid">Blue Badge</UBadge>
<UBadge color="purple" variant="solid">Purple Badge</UBadge>
<UBadge color="pink" variant="solid">Pink Badge</UBadge>
</div>
</template>
4. Nuxt 3 with nuxtlabs ui badge with size small, medium and large.
Vue
<template>
<div class="space-x-4">
<UBadge color="primary" size="xs"> Badge</UBadge>
<UBadge color="primary" size="sm">Badge</UBadge>
<UBadge color="primary" size="md"> Badge</UBadge>
<UBadge color="primary" size="lg"> Badge</UBadge>
</div>
</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,