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.

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

  <div class="lg:max-w-lg w-full">
  <UInput v-model="value" />
nuxtlabs ui input field

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

  <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" />
nuxtlabs ui outlined input field colors

3. Nuxt 3 with Nuxtlabs UI none input field.

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

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

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

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

        <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" />
nuxt 3 nuxtlabs ui input field size
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,

Share link