Nuxt 3 with Nuxtlabs UI Input Field Example

In this tutorial, we will create input field 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 input field using UInput component.

Vue

<script setup>
const value = ref('Nuxt 3 Nuxtlabs')
</script>

<template>
  <div class="lg:max-w-lg w-full">
  <UInput v-model="value" />
</div>
</template>

2. Nuxt 3 with Nuxtlabs UI outlined input field with colors.

Vue

<template>
  <div class="lg:max-w-lg w-full flex flex-col gap-4">
    <UInput color="blue" variant="outline" />
    <UInput color="green" variant="outline" />
    <UInput color="yellow" variant="outline" />
    <UInput color="indigo" variant="outline" />
    <UInput color="purple" variant="outline" />
    <UInput color="fuchsia" variant="outline" />
    <UInput color="rose" variant="outline" />
  </div>
</template>

3. Nuxt 3 with Nuxtlabs UI none input field.

Vue

<UInput color="primary" variant="none" />

4. Nuxt 3 with Nuxtlabs UI input field with white and gray color.

Vue

<UInput color="white" variant="outline" />
<UInput color="gray" variant="outline" />

5. Nuxt 3 with Nuxtlabs UI input field with size small, medium and large.

Vue

<template>
    <div>
        <UInput color="primary" variant="outline" size="2xs" />
        <UInput color="primary" variant="outline" size="xs" />
        <UInput color="primary" variant="outline" size="sm" />
        <UInput color="primary" variant="outline" size="md" />
        <UInput color="primary" variant="outline" size="lg" />
        <UInput color="primary" variant="outline" size="xl" />
    </div>
</template>