Nuxt•3mo ago

NuxtUI: can't change style globally

I created an app.config.ts and the style is not changing. I restarted the server and everything, but the input stay the default Nuxt UI style. Here is my form page

<template>
  <NuxtLayout name="admin">
    <main class="container mx-auto px-4 py-6">
      <!-- Step Buttons -->
      <div class="flex items-center justify-between gap-2 text-sm mb-6">
        <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
          <div class="space-y-6 bg-voxel-secondary p-6 rounded-2xl shadow">
            <UFormField label="Email" name="email">
              <UInput v-model="state.email" />
            </UFormField>

            <UFormField label="Password" name="password">
              <UInput v-model="state.password" type="password" />
            </UFormField>

            <UButton type="submit">
              Submit
            </UButton>
          </div>
        </UForm>
      </div>
    </main>
  </NuxtLayout>
</template>

<template>
  <NuxtLayout name="admin">
    <main class="container mx-auto px-4 py-6">
      <!-- Step Buttons -->
      <div class="flex items-center justify-between gap-2 text-sm mb-6">
        <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
          <div class="space-y-6 bg-voxel-secondary p-6 rounded-2xl shadow">
            <UFormField label="Email" name="email">
              <UInput v-model="state.email" />
            </UFormField>

            <UFormField label="Password" name="password">
              <UInput v-model="state.password" type="password" />
            </UFormField>

            <UButton type="submit">
              Submit
            </UButton>
          </div>
        </UForm>
      </div>
    </main>
  </NuxtLayout>
</template>

And here is my app.config.ts (placed at the root of my project)

// app.config.ts
export default defineAppConfig({
    ui: {
        input: {
            slots: {
                base: 'text-red-200',
            }
        }
    }
})

// app.config.ts
export default defineAppConfig({
    ui: {
        input: {
            slots: {
                base: 'text-red-200',
            }
        }
    }
})

5 Replies

kapa.ai•3mo ago

Hi @CG Seb. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Your approach to customizing Nuxt UI component styles globally using app.config.ts is correct in principle, and the syntax you used matches the documented pattern. For example, to change the base style of all inputs, your config should look like:

// app.config.ts
export default defineAppConfig({
  ui: {
    input: {
      slots: {
        base: 'text-red-200',
      }
    }
  }
})

// app.config.ts
export default defineAppConfig({
  ui: {
    input: {
      slots: {
        base: 'text-red-200',
      }
    }
  }
})

However, if your styles are not being applied, here are some things to check based on the official documentation: 1. File Placement:
Ensure that app.config.ts is at the root of your project (not inside a subfolder). 2. Class Targeting:
The slot name for the main input element should be base, which you are using correctly. 3. Restart the Dev Server:
You mentioned restarting, which is good—changes to app.config.ts require a full restart. 4. Nuxt UI Version:
Make sure you are using a version of Nuxt UI that supports theming via app.config.ts. 5. Conflicting Styles:
If you have other styles (e.g., Tailwind classes) that might override your custom class, check the CSS specificity. 6. Component Usage:
Ensure you are using the correct Nuxt UI component (UInput). If you are using a different input component, the config may not apply. 7. Check for Typos:
Double-check for typos in the config structure. The documentation confirms that this is the correct way to override component styles globally:

You can override the theme of components globally inside your app.config.ts by using the exact same structure as the theme object.
...
In this example, the font-bold class will override the default font-medium class on all buttons.
Getting Started: Theme Config

If you have followed all these steps and the style is still not changing, the knowledge sources do not provide further troubleshooting steps. In that case, consider checking for: - Caching issues (try a hard refresh or clearing .nuxt and node_modules). - Whether the UInput component is being shadowed or wrapped in a way that prevents the slot from applying. If none of these resolve the issue, you may need to consult the Nuxt UI community or GitHub issues for more advanced troubleshooting, as the documentation does not cover this specific problem in more detail. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

CG SebOP•3mo ago

@kapa.ai I already did all of this

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- If you have already followed all the documented steps—placing app.config.ts at the project root, using the correct slot structure, restarting the server, and confirming your Nuxt UI version—yet your global style override for UInput is not taking effect, then unfortunately, the knowledge sources do not provide additional troubleshooting steps or reasons for this issue. The official documentation confirms your approach is correct for global theming via app.config.ts:

You can override the theme of components globally inside your app.config.ts by using the exact same structure as the theme object.
Getting Started: Theme Config

If the documented method is not working despite following all instructions, the knowledge sources do not contain enough information to explain or resolve this specific problem. You may need to seek further help from the Nuxt UI community or check for open issues related to theming in the Nuxt UI repository. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

Gaming

Programming

NuxtUI: can't change style globally

Did you find this page helpful?