Nuxt 3 with Nuxtlabs UI Badge Example

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>