app.config.ts RollupError: [plugin impound] Vue app aliases are not allowed in server runtime.

[kwooshung]

Package

v4.0.0-alpha.2

Description

I found that when I added 'app.config.ts' to the app directory:

import { defineAppConfig } from 'nuxt/app';

export default defineAppConfig({
  toaster: {
    position: 'bottom-right' as const,
    expand: true,
    duration: 5000
  },
  theme: {
    radius: 0.25,
    blackAsPrimary: false
  },
  ui: {
    colors: {
      primary: 'blue',
      neutral: 'slate'
    }
  }
});

The error report is as follows:

Processed 2 collections and 2 files in 85.63ms (2 cached, 0 parsed)                                                                                           @nuxt/content 13:29:20
ℹ Nuxt Icon server bundle mode is set to local                                                                                                                                13:29:21
✔ Vite client built in 341ms                                                                                                                                                  13:29:24
✔ Vite server built in 310ms                                                                                                                                                  13:29:24

 ERROR  RollupError: [plugin impound] Vue app aliases are not allowed in server runtime. [importing #build/nuxt.config.mjs from node_modules/nuxt/dist/app/nuxt.js] 

I copy the file to the same location of the project, I find it difficult to show in popper, docs/app/components/theme - picker/ThemePicker.Vue and ThemePickerButton.vue, how should I make a as well as the official implementation, at the same time the default color is as follows:

---

I have already asked the ai and consulted relevant materials, and also looked for the project configuration in docs

I found that it seems a bit different from what's on the official website. I don't know if I couldn't find it or if there's none at all.

Expectation

Could you provide a small project case:

1. The default color is blue and it is not modified at runtime.
2. Just like the official website, there are so many colors to choose from, and the effect is exactly the same as shown in the screenshot.

Just this simple online case is needed for learning.

[github-actions]

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), they will be closed automatically after a while. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have templates to create a minimal reproduction:

• Nuxt: https://codesandbox.io/p/devbox/nuxt-ui3-n3sxks
• Vue: https://codesandbox.io/p/devbox/nuxt-ui3-vue-4h5gqn

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[kwooshung]

node: v24.8.0
npm: v11.6.0
os: windows 11/Mac OS Monterey 12.7.6
nuxt: 4.1.2
nuxtui: v4.0.0-alpha.2

---

I just 'npm create nuxt@latest', installed everything except 'nuxt-content' according to the options, and then added 'app\app.config.ts' according to the official configuration, and that's it:

ERROR  RollupError: [plugin impound] Vue app aliases are not allowed in server runtime. [importing #build/app.config.mjs from node_modules/nuxt/dist/app/config.js]

I found that the ui also has this problem on 3.x. Did I configure it wrongly somewhere?

https://github.com/kwooshung/nuxtui-error-5029

[benjamincanac]

Maybe try to remove this import: https://github.com/kwooshung/nuxtui-error-5029/blob/main/app/app.config.ts#L1 🤔

[kwooshung]

Maybe try to remove this import: https://github.com/kwooshung/nuxtui-error-5029/blob/main/app/app.config.ts#L1 🤔

It's indeed my problem. I carefully studied the document and found that there was indeed this extra line of code, which caused it. Thank you very much!

There's another question. If I want to set the theme color to blue, should I override 'main.css' like this? Although this has worked, I'm not sure if it's a recommended approach. If the modification is made directly through 'app.config.ts', it may occasionally turn green first and then blue.

:root {
  --ui-primary: var(--color-blue-500);
}

.dark {
  --ui-primary: var(--color-blue-400);
}

[benjamincanac]

Where it works, I think it's better to use your app.config.ts to change this: https://ui4.nuxt.com/docs/getting-started/theme/design-system#runtime-configuration