Nuxt•4mo ago

Size of modals

How can i define the width of the modal component?

8 Replies

Hi @mabuse9922. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To define the width of the modal component in Nuxt UI, you can customize the modal's appearance using the theme configuration. Specifically, you can override the modal's slot classes for the content area, which controls its width. By default, the modal uses classes like w-[calc(100vw-2rem)] max-w-lg for the content slot, which sets a maximum width. You can adjust these classes in your Nuxt UI theme configuration to set your desired width. For example:

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      ui: {
        modal: {
          slots: {
            content: 'fixed bg-default w-[600px] max-w-full' // Set your custom width here
          }
        }
      }
    })
  ]
})

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      ui: {
        modal: {
          slots: {
            content: 'fixed bg-default w-[600px] max-w-full' // Set your custom width here
          }
        }
      }
    })
  ]
})

This will set the modal width to 600px. You can use any valid Tailwind CSS width classes or custom CSS as needed. For more details, see the theme section for the modal component in the documentation: Modal Theme. If you want to control the width per instance, you can also pass custom classes via the ui prop on the modal component:

<UModal :ui="{ content: 'w-[800px] max-w-full' }" />

<UModal :ui="{ content: 'w-[800px] max-w-full' }" />

This approach allows you to set the width for a specific modal instance without changing the global theme configuration. Reference: Modal Theme ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

mabuse9922OP•4mo ago

@kapa.ai i have a form with an input field in a modal. How can i move the focus to this input field when the modal opens?

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To move the focus to an input field when a modal opens in Nuxt UI, you can use the autofocus feature provided by the input components. For example, the UInput component supports the autofocus prop. When you set autofocus to true, the input will automatically receive focus when it is rendered, such as when the modal opens. Example:

<UModal v-model="isOpen">
  <UInput autofocus placeholder="Your input here..." />
</UModal>

<UModal v-model="isOpen">
  <UInput autofocus placeholder="Your input here..." />
</UModal>

If you need to delay the autofocus (for example, to wait for the modal animation), you can use the autofocusDelay prop to specify a delay in milliseconds:

<UInput autofocus :autofocus-delay="200" placeholder="Your input here..." />

<UInput autofocus :autofocus-delay="200" placeholder="Your input here..." />

This ensures the input field is focused after the modal is fully visible.
Reference: UInput Props ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

mabuse9922OP•4mo ago

@kapa.ai How can I pass parameter to a modal, that is open with 'overlay.create(modalComponent)'?

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You can pass parameters (props) to a modal that is opened with overlay.create(modalComponent) by using the props option when creating the overlay, or by passing them when calling the open method. Example 1: Pass props when creating the overlay

const overlay = useOverlay()

const modal = overlay.create(MyModalComponent, {
  props: {
    myProp: 'value'
  }
})

// Open the modal
modal.open()

const overlay = useOverlay()

const modal = overlay.create(MyModalComponent, {
  props: {
    myProp: 'value'
  }
})

// Open the modal
modal.open()

Example 2: Pass props when opening the modal

const overlay = useOverlay()

const modal = overlay.create(MyModalComponent)

// Pass props at open time
modal.open({
  myProp: 'value'
})

const overlay = useOverlay()

const modal = overlay.create(MyModalComponent)

// Pass props at open time
modal.open({
  myProp: 'value'
})

Both approaches will make the prop available in your modal component as a regular prop.
For more details, see the official documentation: useOverlay composable and Migration guide. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

Gaming

Programming

Size of modals

Did you find this page helpful?