Nuxt 3 with Nuxtlabs UI Buttons Example

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

Vue

<UButton>Button</UButton>

2. Nuxt 3 with Nuxtlabs UI button with lable.

Vue

<UButton label="Button" />

3. Nuxt 3 with Nuxtlabs UI button with colors primary, red, blue, yellow, etc.

Vue

<template>
    <div>
        <UButton color="primary" variant="solid">Button</UButton>
        <UButton color="red" variant="solid">Button</UButton>
        <UButton color="orange" variant="solid">Button</UButton>
        <UButton color="yellow" variant="solid">Button</UButton>
        <UButton color="teal" variant="solid">Button</UButton>
        <UButton color="blue" variant="solid">Button</UButton>
        <UButton color="indigo" variant="solid">Button</UButton>
        <UButton color="purple" variant="solid">Button</UButton>
        <UButton color="rose" variant="solid">Button</UButton>
    </div>
</template>

nuxt 3 with nuxtlabs ui button with colors

4. Nuxt 3 with Nuxtlabs UI outlined button with colors.

Vue

<template>
    <div>
        <UButton color="primary" variant="outline">Button</UButton>
        <UButton color="red" variant="outline">Button</UButton>
        <UButton color="orange" variant="outline">Button</UButton>
        <UButton color="yellow" variant="outline">Button</UButton>
        <UButton color="teal" variant="outline">Button</UButton>
        <UButton color="blue" variant="outline">Button</UButton>
        <UButton color="indigo" variant="outline">Button</UButton>
        <UButton color="purple" variant="outline">Button</UButton>
        <UButton color="rose" variant="outline">Button</UButton>
    </div>
</template>

5. Nuxt 3 with Nuxtlabs UI soft button with colors.

Vue

<template>
    <div>
        <UButton color="primary" variant="soft">Button</UButton>
        <UButton color="red" variant="soft">Button</UButton>
        <UButton color="orange" variant="soft">Button</UButton>
        <UButton color="yellow" variant="soft">Button</UButton>
        <UButton color="teal" variant="soft">Button</UButton>
        <UButton color="blue" variant="soft">Button</UButton>
        <UButton color="indigo" variant="soft">Button</UButton>
        <UButton color="purple" variant="soft">Button</UButton>
        <UButton color="rose" variant="soft">Button</UButton>
    </div>
</template>

6. Nuxt 3 with Nuxtlabs UI ghost button.

Vue

<UButton color="blue" variant="ghost" />

7. Nuxt 3 with Nuxtlabs UI link button.

Vue

<UButton color="blue" variant="link" />

8. Nuxt 3 with Nuxtlabs UI gray button, white button, black button.

Vue

<UButton color="white" variant="solid">Button</UButton>
<UButton color="gray" variant="solid">Button</UButton>
<UButton color="black" variant="solid">Button</UButton>

9. Nuxt 3 with Nuxtlabs UI button with size small, medium, large.

Vue

<template>
    <div>
        <UButton size="2xs">Button</UButton>
        <UButton size="xs">Button</UButton>
        <UButton size="sm">Button</UButton>
        <UButton size="md">Button</UButton>
        <UButton size="lg">Button</UButton>
        <UButton size="xl">Button</UButton>
    </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,