Nuxt•3mo ago

nuxt ui header

how can i change the contialer size to the full page width all the time

6 Replies

Hi @nvme. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To make the Nuxt UI Header's container span the full page width at all times, you need to override the default container class for the header component. By default, the header's container uses the following class:

container: 'flex items-center justify-between gap-3 h-full'

container: 'flex items-center justify-between gap-3 h-full'

and the actual width constraint is typically applied by the UContainer component or a similar utility elsewhere in your layout. To ensure the header container is always full width, you can update your app.config.ts to remove any max-width or centering constraints from the header's container slot. For example:

export default defineAppConfig({
  ui: {
    header: {
      slots: {
        // Remove max-w and mx-auto if present, and ensure w-full is set
        container: 'w-full flex items-center justify-between gap-3 h-full'
      }
    }
  }
})

export default defineAppConfig({
  ui: {
    header: {
      slots: {
        // Remove max-w and mx-auto if present, and ensure w-full is set
        container: 'w-full flex items-center justify-between gap-3 h-full'
      }
    }
  }
})

This will make the header's container always take the full width of the viewport, regardless of any global container settings. You do not need to change the global --ui-container variable, as that affects other components like UContainer, not the header directly. Reference: Header Theme Configuration ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

nvmeOP•3mo ago

@kapa.ai <header class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50"><div class="max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full w-full"><div class="lg:flex-1 flex items-center gap-1.5"><a href="/" aria-label="WG123456" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">WG123456</a></div><div class="hidden lg:flex"></div><div class="flex items-center justify-end lg:flex-1 gap-1.5"><button type="button" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -me-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true"></span></button></div></div></header> This is the html it has max-w-(--ui-container) but i cannot change this in the slots...

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You're correct: the default Nuxt UI Header uses a container div with the class max-w-(--ui-container) mx-auto ..., which constrains its width. This class is not set via the header's slot configuration, but rather comes from the UContainer component or a similar utility used inside the header implementation. According to the knowledge sources, the header's slot configuration in app.config.ts only allows you to customize classes for the header's internal slots (like container, root, etc.), but it does not expose the ability to remove or override the use of UContainer or the max-w-(--ui-container) class directly from the slot configuration. The slot config for container is:

container: 'flex items-center justify-between gap-3 h-full'

container: 'flex items-center justify-between gap-3 h-full'

But the actual max-width constraint is not set here, so changing this slot will not remove the max-w-(--ui-container) class from the rendered HTML Header Theme. There is no documented way in the provided knowledge sources to remove or override the max-w-(--ui-container) class from the header's container using only slot or theme configuration. The knowledge sources do not mention a prop or slot that disables the internal container or changes its max-width behavior. What you can do - If you need the header to always be full width, you may need to create a custom header component or fork the Nuxt UI Header and remove the UContainer usage or the max-w-(--ui-container) class from its template. - Alternatively, you could try to override the CSS for .max-w-(--ui-container) to be 100vw or none as a workaround, but this is not documented in the official sources and may have side effects. Summary:
The knowledge sources do not provide a supported way to remove or override the max-w-(--ui-container) class from the Nuxt UI Header using slot or theme configuration alone. Customization at this level would require modifying the component source or using CSS overrides, which is not covered in the official documentation Header Theme. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

freb97•3mo ago

Not sure if i understand your question correctly, but if you want to override the default styles, set "!max-w-none !mx-0". Not a clean solution, but easy and it works. Otherwise you could look up what slots there are exactly or have a look at the implementation of the header itself: title(props?: {}): any left(props?: {}): any default(props?: {}): any right(props?: {}): any toggle(props: { open: boolean, toggle: () => void }): any top(props?: {}): any bottom(props?: {}): any body(props?: {}): any content(props?: {}): any Doesn't seem to me like there is a container slot Taken from https://github.com/nuxt/ui/blob/v4/src/runtime/components/Header.vue

GitHub

ui/src/runtime/components/Header.vue at v4 · nuxt/ui

The Intuitive Vue UI Library powered by Reka UI & Tailwind CSS. - nuxt/ui

Gaming

Programming

nuxt ui header

Did you find this page helpful?