Nuxt•9mo ago

Customize links font size in Header component of Nuxt UI Pro

I am using the Header component of Nuxt UI Pro (in the Nuxt UI Pro SaaS template) . The default font sizes are too small so I am using the "ui" property on the component to customize the component. It works fine for the logo but I can't make it work for for the center (which is where Header links are used if I understood correctly). <UHeader :links="links" :ui="{ logo: 'text-2xl items-center', center: 'text-2xl' }"> Does anyone know how to customize the header links size font?

2 Replies

nick_wireless•9mo ago

Hi Alexandre... I think I was able to find a work around on this one for you... Like you, I tried what you have but with centre: 'italic' ... this worked, but I couldn't make the text-2xl work. This makes me think it happens elsewhere... I tried configuration in app.config.ts for master over-ride, I couldn't get that to work either, however...

 <template #center>
      <UButton
        v-for="(link, index) of links"
        :key="index"
        class=" text-2xl "
      />
    </template>

 <template #center>
      <UButton
        v-for="(link, index) of links"
        :key="index"
        class=" text-2xl "
      />
    </template>

The above did seem to work, placing it within the UHeader. I'd like to keep this issue open. I have a different question on the same Heading. I have a setup with my links provided in the Header.vue component. I land on these links to a specific link such as /progress/project-updates or /newsroom/comms_centre . The links work, however I'd like to have the isActive class within the Header always active for /progress/ links within the header... not just the single /project-updates. Like you, I'm wondering how to target the #center slot... Here is my repo link with more details: https://github.com/nick-wireless/simplified-base/tree/6c512b6a47cb2d7569029f7bc585061e07309c99 I have in my mind to use a computed composable, something like:

const route = useRouter()

const isActive = computed(() => route.currentRoute.value.path.startsWith('/newsroom/news/'))

const route = useRouter()

const isActive = computed(() => route.currentRoute.value.path.startsWith('/newsroom/news/'))

However... like you, I don't know how to target the #center slot.

Alexandre NédélecOP•9mo ago

Thanks for your workaround, using the center layout was the trick. I ended up using that

 <template #center>
      <UHeaderLinks :links="links" :ui="{ base: 'text-xl font-semibold flex items-center gap-1 hidden lg:flex' }"/>
    </template>

 <template #center>
      <UHeaderLinks :links="links" :ui="{ base: 'text-xl font-semibold flex items-center gap-1 hidden lg:flex' }"/>
    </template>

Gaming

Programming

Customize links font size in Header component of Nuxt UI Pro