Nuxt•3d ago

Can't theme components

Hey ! I don't understand how i customize the theme of my app. I wrote a simple app config:

export default defineAppConfig({
  ui: {
    colors: {
      primary: "blue",
    },
  },
});

export default defineAppConfig({
  ui: {
    colors: {
      primary: "blue",
    },
  },
});

placed at the root of my project, next to nuxt.config.ts and it's not working at all, the file isn't loaded i placed it in my app folder and it was applying the theme only while the page was loading i really can't get this to work and i don't understand what i'm doing wrong i'm using nuxt 3.16.2 with nuxt ui 3.0.2

4 Replies

kapa.ai•3d ago

Hi @sdeh. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I understand your frustration with theming components in Nuxt UI. Let's clarify how theming works in Nuxt UI v3. The app.config.ts file should indeed be placed at the root of your project, and it should be automatically loaded by Nuxt. The fact that it's not working suggests there might be an issue with how it's set up or how Nuxt is recognizing it. Here are some things to check: 1. Make sure your app.config.ts file is properly formatted. In Nuxt UI v3, the colors configuration should be under ui.colors (not ui.primary as in v2):

export default defineAppConfig({
  ui: {
    colors: {
      primary: "blue",
      // other colors if needed
    }
  }
});

export default defineAppConfig({
  ui: {
    colors: {
      primary: "blue",
      // other colors if needed
    }
  }
});

2. Ensure that you've properly imported and set up Nuxt UI in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  // other config
});

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  // other config
});

3. If you're seeing the theme apply only during page load, it might be related to hydration issues. Make sure you're not using any client-side only code in your app config. 4. Try clearing your cache and restarting the Nuxt development server:

   npx nuxi cleanup

   npx nuxi cleanup

5. Check if there are any errors in your browser console or terminal that might provide more insight. The documentation shows that in Nuxt UI v3, color customization is done through the ui.colors object in app.config.ts The Intuitive Vue UI Library, which allows for runtime customization without rebuilding your application. If you're still having issues, you might want to check if there are any conflicts with other configurations or if there's a specific component that's not respecting the theme. Some components might need additional configuration in the ui object of your app.config.ts. Let me know if these suggestions help or if you need more specific guidance! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

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

hajisky•3d ago

Hey do you want to provide a little bit more context about what’s happening? I know these things can be frustrating

sdehOP•3d ago

hey idk what was the issue, but doing px nuxi cleanup fixed it ! thanks edit, i have to place it into my app folder is it expected ? i had duplicate config file next to app.vue it works, next to nuxt.config.ts, it doesn't structure is like

app/
  app.config.ts # used
server/
shared/
nuxt.config.ts
app.config.ts   # not used

app/
  app.config.ts # used
server/
shared/
nuxt.config.ts
app.config.ts   # not used

also, app.config.ts isn't hot reloaded

Gaming

Programming

Can't theme components

Did you find this page helpful?