#[kapa.ai] Nuxt UI: How to make modal content wider.

1 messages · Page 1 of 1 (latest)

placid magnetBOT
#

Hi @rapid ore. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To make modal content wider in Nuxt UI, you should typically customize the modal's width using either component props or by applying custom classes/styles directly to the modal component. However, if you are trying to overwrite default values (such as modal width) via app.config.ts and it doesn't work, it may be due to the placement of your config file or the way Nuxt UI merges configuration.

From the knowledge sources:

  • Overwriting Nuxt UI defaults (like colors) in app.config.ts only works if the file is placed in the correct directory: it should be in the /app directory as app/app.config.ts, not at the project root. If placed incorrectly, your custom config will not be merged and the defaults will remain active. This applies to all Nuxt UI config, not just colors, so it may also affect modal sizing if you are trying to configure it globally this way. See the issue and resolution here: the config file must be in /app, not the root directory Github Issue: app.config.ts ui.colors not being merged, docs: update app config paths to use app/app.config.ts.

  • For component-level customization, you can apply Tailwind or UnoCSS utility classes directly to the modal or its content. For example, you can add a class like w-[800px] or max-w-3xl to the modal content div to make it wider. The Nuxt DevTools UI Kit, which is based on UnoCSS, demonstrates this approach for its components, and you can use similar techniques for Nuxt UI modals Module# UI Kit.

Summary of steps:

  1. If you are trying to set a global default via app.config.ts, ensure the file is at /app/app.config.ts.
  2. For immediate results, apply width classes (e.g., w-full, max-w-4xl) directly to your modal content in the template.
#

If you need to override the modal width globally and the config approach still doesn't work after moving the file, it may be a limitation or bug in the current Nuxt UI version, and you should use direct class overrides as a workaround.

If you need a code example for applying a custom width to a modal, let me know!

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

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

#

Let me check the knowledge base for you again. One moment! :books:

#

I'm sorry, but the knowledge sources provided do not contain a specific example of customizing the modal's width in Nuxt UI using component props or custom classes/styles. The sources do mention that the Nuxt DevTools UI Kit is powered by UnoCSS and that you can use utility classes to customize components, but they do not show a concrete example for modals specifically. If you need further guidance, please consult the official Nuxt UI or DevTools UI Kit documentation for detailed usage examples regarding modals and their customization Module# UI Kit.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: