Nuxt•2w ago

Changing NuxtUI Colours Is Not Working

As per the docs, I am trying to change the NuxtUI semantic colors

//app.config.ts
export default defineAppConfig({
    ui: {
        primary: "sky", // Main CTAs, active navigation, brand elements
        secondary: "orange", // Secondary buttons, alternative actions, complementary UI
        success: "emerald", // Success messages, completed states, positive confirmations
        info: "blue", // Info alerts, tooltips, help text, neutral notifications
        warning: "amber", // Warning messages, pending states, attention-needed items
        error: "rose", // Error messages, validation errors, destructive actions
        neutral: "slate", // Text, borders, backgrounds, disabled states
    },
});

//app.config.ts
export default defineAppConfig({
    ui: {
        primary: "sky", // Main CTAs, active navigation, brand elements
        secondary: "orange", // Secondary buttons, alternative actions, complementary UI
        success: "emerald", // Success messages, completed states, positive confirmations
        info: "blue", // Info alerts, tooltips, help text, neutral notifications
        warning: "amber", // Warning messages, pending states, attention-needed items
        error: "rose", // Error messages, validation errors, destructive actions
        neutral: "slate", // Text, borders, backgrounds, disabled states
    },
});

//app.config.ts
export default defineAppConfig({
    ui: {
        primary: "sky", // Main CTAs, active navigation, brand elements
        secondary: "orange", // Secondary buttons, alternative actions, complementary UI
        success: "emerald", // Success messages, completed states, positive confirmations
        info: "blue", // Info alerts, tooltips, help text, neutral notifications
        warning: "amber", // Warning messages, pending states, attention-needed items
        error: "rose", // Error messages, validation errors, destructive actions
        neutral: "slate", // Text, borders, backgrounds, disabled states
    },
});

//app.config.ts
export default defineAppConfig({
    ui: {
        primary: "sky", // Main CTAs, active navigation, brand elements
        secondary: "orange", // Secondary buttons, alternative actions, complementary UI
        success: "emerald", // Success messages, completed states, positive confirmations
        info: "blue", // Info alerts, tooltips, help text, neutral notifications
        warning: "amber", // Warning messages, pending states, attention-needed items
        error: "rose", // Error messages, validation errors, destructive actions
        neutral: "slate", // Text, borders, backgrounds, disabled states
    },
});

but they aren't updating, I have tried deleting the .nuxt folder and restarting the server and nothing

kapa.ai•12/16/25, 11:21 AM

Hi @Dante. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•12/16/25, 11:21 AM

----------------------
Your config looks correct, so the issue is most likely where
app.config.ts
app.config.ts
is located.

Nuxt 4 expects

app.config.ts

app.config.ts

to live in the /app
/app
directory (i.e. app/app.config.tsapp/app.config.ts), not at the project root. If it’s at the root, Nuxt won’t merge your values and you’ll keep seeing the Nuxt UI defaults. [app.config path fix; wrong placement comment]

From a closed issue with the same symptom (Nuxt UI colors stuck at primary: "green"primary: "green", neutral: "slate"neutral: "slate"), the resolution was:

Wrong placement of app.config.ts. Should be in /app. [app config placement]

So:

1. Move your file to app/app.config.tsapp/app.config.ts:

   // app/app.config.ts
   export default defineAppConfig({
     ui: {
       primary: "sky",
       secondary: "orange",
       success: "emerald",
       info: "blue",
       warning: "amber",
       error: "rose",
       neutral: "slate",
     },
   })

   // app/app.config.ts
   export default defineAppConfig({
     ui: {
       primary: "sky",
       secondary: "orange",
       success: "emerald",
       info: "blue",
       warning: "amber",
       error: "rose",
       neutral: "slate",
     },
   })

2. Delete

.nuxt

.nuxt

and restart dev:

   rm -rf .nuxt
   npx nuxi dev

   rm -rf .nuxt
   npx nuxi dev

After that, the Nuxt UI semantic colors should apply.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

kapa.ai•12/16/25, 11:21 AM

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

DanteOP•12/16/25, 11:24 AM

for refernence my nuxt.config is like this

// https://nuxt.com/docs/api/configuration/nuxt-config
import tailwindcss from "@tailwindcss/vite";
export default defineNuxtConfig({
    compatibilityDate: "2025-07-15",
    devtools: { enabled: false },
    modules: ["@nuxt/image", "@nuxt/ui"],

    srcDir: "src/",
    css: ["~/assets/css/main.css"],
    vite: { plugins: [tailwindcss()] },

// https://nuxt.com/docs/api/configuration/nuxt-config
import tailwindcss from "@tailwindcss/vite";
export default defineNuxtConfig({
    compatibilityDate: "2025-07-15",
    devtools: { enabled: false },
    modules: ["@nuxt/image", "@nuxt/ui"],

    srcDir: "src/",
    css: ["~/assets/css/main.css"],
    vite: { plugins: [tailwindcss()] },

so it in src/app.config.ts @kapa.ai

kapa.ai•12/16/25, 11:24 AM

Let me check the knowledge base for you again. One moment! :books:

kapa.ai•12/16/25, 11:24 AM

----------------------
With srcDir: "src/"srcDir: "src/", Nuxt expects your app config at:

// src/app/app.config.ts
export default defineAppConfig({
  ui: {
    primary: "sky",
    secondary: "orange",
    success: "emerald",
    info: "blue",
    warning: "amber",
    error: "rose",
    neutral: "slate",
  },
})

// src/app/app.config.ts
export default defineAppConfig({
  ui: {
    primary: "sky",
    secondary: "orange",
    success: "emerald",
    info: "blue",
    warning: "amber",
    error: "rose",
    neutral: "slate",
  },
})

In Nuxt 4,

app.config.ts

app.config.ts

is resolved inside the

app/

app/

directory under srcDirsrcDir, not directly in src/src/. [v4 folder structure; app config path update]

So your structure should be:

src/
  app/
    app.config.ts

src/
  app/
    app.config.ts

Then delete

.nuxt

.nuxt

and restart:

rm -rf .nuxt
npx nuxi dev

rm -rf .nuxt
npx nuxi dev

----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

kapa.ai•12/16/25, 11:24 AM

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

DanteOP•12/16/25, 11:25 AM

no @kapa.ai , if i set srcDir: 'src/', that changes app to src, app is replaced by src

kapa.ai•12/16/25, 11:25 AM

Let me check the knowledge base for you again. One moment! :books:

kapa.ai•12/16/25, 11:26 AM

----------------------
In Nuxt 4, srcDirsrcDir and the

app/

app/

directory are two different concepts:

- srcDirsrcDir sets the source root (default is project root).
- Inside that srcDirsrcDir, Nuxt still expects an app/
app/
folder by default for most front‑end code (pages, components, and also

app.config.ts

app.config.ts

). [v4 folder structure]

So with:

srcDir: 'src/'

srcDir: 'src/'

Nuxt will look for:

src/
  app/
    app.config.ts
    pages/
    components/
    ...

src/
  app/
    app.config.ts
    pages/
    components/
    ...

not for src/app.config.tssrc/app.config.ts.

This is also why the docs/PRs were updated to use app/app.config.tsapp/app.config.ts rather than a root‑level

app.config.ts

app.config.ts

. [app config path update]

To make Nuxt UI colours work in your setup, move your file to:

// src/app/app.config.ts
export default defineAppConfig({
  ui: {
    primary: "sky",
    secondary: "orange",
    success: "emerald",
    info: "blue",
    warning: "amber",
    error: "rose",
    neutral: "slate",
  },
})

// src/app/app.config.ts
export default defineAppConfig({
  ui: {
    primary: "sky",
    secondary: "orange",
    success: "emerald",
    info: "blue",
    warning: "amber",
    error: "rose",
    neutral: "slate",
  },
})

Then clear

.nuxt

.nuxt

and restart.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

kapa.ai•12/16/25, 11:26 AM

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

Changing NuxtUI Colours Is Not Working

Similar Threads

Similar Threads

Similar Threads