Nuxt•2w ago

Set default full-width for <UInput> in Nuxt UI

How can I make all <UInput> components default to w-full without manually adding the class each time? Looking for a global/default override—ideally via app.vue, a plugin, or config—so that all input fields stretch full width by default when wrapped in FormField. Any clean solutions?

3 Replies

kapa.ai•2w ago

Hi @mubaidr. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can make all <UInput> components default to full width by customizing the theme in your app.config.ts file. Based on the knowledge sources, Nuxt UI allows you to customize component styling through theme configuration. The best approach would be to modify the formField component configuration since you mentioned you're wrapping your inputs in FormField. Here's how you can do it: 1. Create or modify your app.config.ts file in the root of your project:

export default defineAppConfig({
  ui: {
    formField: {
      // Existing configuration...
      slots: {
        // Other slots...
        container: 'mt-1 relative w-full', // Add w-full here
      },
      // Other variants...
    },
    // You can also directly target the input component if needed
    input: {
      default: {
        // Add w-full to the default input styling
        input: 'w-full'
      }
    }
  }
})

export default defineAppConfig({
  ui: {
    formField: {
      // Existing configuration...
      slots: {
        // Other slots...
        container: 'mt-1 relative w-full', // Add w-full here
      },
      // Other variants...
    },
    // You can also directly target the input component if needed
    input: {
      default: {
        // Add w-full to the default input styling
        input: 'w-full'
      }
    }
  }
})

This approach is clean because: 1. It's centralized in your app configuration 2. It doesn't require modifying each individual component 3. It follows Nuxt UI's recommended theming approach The FormField component, as shown in the FormField documentation, provides a container for form elements, and by adding w-full to the container slot, all child inputs will inherit the full width behavior. If you're using Nuxt UI Pro, the same approach applies, but you might need to adjust the configuration structure slightly according to the Pro version's theme structure. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@255041865672294410> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

mubaidrOP•2w ago

I have used following hack to make this hsppen for now:

formField: {
      slots: {
        container: "mt-1 relative custom-form-field",
      },
    },

formField: {
      slots: {
        container: "mt-1 relative custom-form-field",
      },
    },

and then add custom css:

.custom-form-field > div {
  @apply w-full;
}

.custom-form-field > div {
  @apply w-full;
}

Gaming

Programming

Set default full-width for <UInput> in Nuxt UI

Did you find this page helpful?